/* Catalyst Bento · готовая поставка. Порядок: шрифты → токены → компоненты → бренды. */
/* Inter — SIL OFL 1.1 (OFL.txt рядом), статические начертания 400–800, кириллица + латиница, вендорено локально.
   Источник: Google Fonts (подмножества cyrillic/latin), копия из edino-opp-e0/КОНТУР_СЕМЁНОВА/схема/ядро/fonts/кандидаты, 27.09.2026. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter/Inter-cyr-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter/Inter-lat-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter/Inter-cyr-500.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter/Inter-lat-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter/Inter-cyr-600.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter/Inter-lat-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter/Inter-cyr-700.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter/Inter-lat-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/inter/Inter-cyr-800.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/inter/Inter-lat-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist Mono — SIL OFL 1.1, переменная; только номера документов (code) */
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/GeistMono-Variable.woff2) format('woff2'); }

/* Onest — OFL, переменная, латиница + кириллица, вендорено локально (без внешних сетей) */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(fonts/Onest-cyr0.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(fonts/Onest-lat1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(fonts/Onest-cyr2.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(fonts/Onest-lat3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/Onest-cyr4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/Onest-lat5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Onest-cyr6.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Onest-lat7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Onest-cyr8.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Onest-lat9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Onest-cyr10.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Onest-lat11.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Onest-cyr12.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Onest-lat13.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/Onest-cyr14.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/Onest-lat15.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/Onest-cyr16.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/Onest-lat17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Caveat — SIL OFL 1.1 (OFL.txt рядом), рукопись: 500 и 700, кириллица + латиница. Источник: @fontsource/caveat 5.x (3potok-cv), 27.09.2026. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/caveat/Caveat-cyrillic-500.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/caveat/Caveat-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/caveat/Caveat-cyrillic-700.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/caveat/Caveat-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* СГЕНЕРИРОВАНО build.py из project/tokens.json · руками не править */
:root, [data-theme="light"] {
  --canvas: #f5f5f5;
  --shell: #fafafa;
  --card: #ffffff;
  --inset: #f5f5f5;
  --inset-hover: #ebebeb;
  --border: #e5e5e5;
  --ink: #0a0a0a;
  --ink-2: #525252;
  --ink-3: #6c6c6c;
  --primary: #171717;
  --on-primary: #fafafa;
  --flame: #404040;
  --flame-deep: #262626;
  --flame-ink: #262626;
  --flame-hatch: #c5c5c5;
  --flame-soft: #e6e6e6;
  --on-flame: #ffffff;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --accent-2: var(--flame-deep);
  --marker: var(--bad);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --card-ink: #171717;
  --on-card-ink: #fafafa;
  --hatch-ghost: #e5e5e5;
  --ok: #007938;
  --ok-soft: #dffae5;
  --bad: #cd1526;
  --bad-soft: #ffece9;
  --warn: #975800;
  --warn-soft: #fff0cc;
  --focus: #0a0a0a;
  --mono-1: #e5e5e5;
  --mono-2: #d4d4d4;
  --mono-3: #a1a1a1;
  --mono-4: #737373;
  --mono-5: #404040;
  --seq-1: #e2e2e2;
  --seq-2: #c1c1c1;
  --seq-3: #9a9a9a;
  --seq-4: #717171;
  --seq-5: #3a3a3a;
  --seq-6: #2b2b2b;
  --cold: #2f5f9e;
  --cold-1: #dbe6f4;
  --cold-2: #9dbbe2;
  --cold-3: #4a78b8;
  --on-fill: #ffffff;
  --on-seq-4: #ffffff;
  --on-seq-5: #ffffff;
  --area-top: #40404040;
  --sand: #b98a4e;
  --data-2: var(--mono-3);
  --shadow-ring: 0 0 0 1px rgba(20,20,19,0.04);
  --shadow-pop: 0 12px 32px -8px rgba(20,20,19,0.18), 0 0 0 1px rgba(20,20,19,0.06);
  --brand-mix-1: 14%;
  --brand-mix-2: 30%;
  --brand-mix-3: 50%;
  --brand-mix-4: 72%;
  --brand-mix-5: 90%;
  --brand-mix-6: 64%;
  --brand-area: 25%;
  --brand-soft: 12%;
  --brand-hatch: 28%;
  color-scheme: light;
}
[data-theme="dark"] {
  --canvas: #0a0a0a;
  --shell: #101010;
  --card: #171717;
  --inset: #262626;
  --inset-hover: #333333;
  --border: #2e2e2e;
  --ink: #fafafa;
  --ink-2: #d4d4d4;
  --ink-3: #a1a1a1;
  --primary: #f2f2f2;
  --on-primary: #0d0d0d;
  --flame: #bebebe;
  --flame-deep: #a1a1a1;
  --flame-ink: #a1a1a1;
  --flame-hatch: #4a4a4a;
  --flame-soft: #343434;
  --on-flame: #0a0a0a;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --accent-2: var(--flame-deep);
  --marker: var(--bad);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --card-ink: #2b2b2b;
  --on-card-ink: #fafafa;
  --hatch-ghost: #2e2e2e;
  --ok: #3ddf7d;
  --ok-soft: #072c15;
  --bad: #ff645f;
  --bad-soft: #3c1715;
  --warn: #f7b83d;
  --warn-soft: #362200;
  --focus: #fafafa;
  --mono-1: #2e2e2e;
  --mono-2: #404040;
  --mono-3: #555555;
  --mono-4: #808080;
  --mono-5: #bebebe;
  --seq-1: #373737;
  --seq-2: #4d4d4d;
  --seq-3: #6b6b6b;
  --seq-4: #919191;
  --seq-5: #bebebe;
  --seq-6: #d4d4d4;
  --cold: #7aa7e8;
  --cold-1: #1b2a41;
  --cold-2: #2d4b78;
  --cold-3: #5d8fd6;
  --on-fill: #0a0a0a;
  --on-seq-4: #0a0a0a;
  --on-seq-5: #0a0a0a;
  --area-top: #bebebe52;
  --sand: #d9ad72;
  --data-2: var(--mono-3);
  --shadow-ring: 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-pop: 0 12px 32px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
  --brand-mix-1: 22%;
  --brand-mix-2: 36%;
  --brand-mix-3: 54%;
  --brand-mix-4: 76%;
  --brand-mix-5: 100%;
  --brand-mix-6: 62%;
  --brand-area: 32%;
  --brand-soft: 20%;
  --brand-hatch: 34%;
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-shell: 32px;
  --radius-card: 24px;
  --radius-inset: 16px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  --control-h: 44px;
  --control-h-sm: 32px;
  --icon-btn: 40px;
  --rail-w: 56px;
  --rail-w-full: 240px;
  --content-max: 1480px;
  --min-w-kpi: 180px;
  --min-w-list: 320px;
  --min-w-chart: 480px;
  --min-w-table: 640px;
  --figure-min-h: 320px;
  --fold-figure-budget: 468px;
  --row-h-overview: 52px;
  --row-h-work: 40px;
  --bp-wide: 1180px;
  --bp-narrow: 860px;
  --bp-phone: 480px;
  --bottom-nav-h: 64px;
  --z-layer: 1000;
  --z-toast: 1100;
  --motion-subtle-in: 120ms;
  --motion-subtle-out: 90ms;
  --motion-standard-in: 150ms;
  --motion-standard-out: 110ms;
  --motion-ease: cubic-bezier(.2, 0, 0, 1);
  --motion-skeleton: 1.4s;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── src/styles/00-base.css ── */
/* Catalyst Bento · компоненты. Префикс cb-. Цвет, радиус, отступ только токенами (tokens.css). */
/* Шрифты: пакет Claude Design получает @import Google Fonts от build.py (project/components/bundle.css); dist/ несёт свои шрифты */

.cb, .cb *, .cb *::before, .cb *::after { box-sizing: border-box; }
.cb { position: relative; }
.cb { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink); -webkit-font-smoothing: antialiased; font-size-adjust: .546; }   /* x-height Inter 1118/2048: фолбэк держит рост строчной */
.cb button { font: inherit; color: inherit; }
.cb :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cb-mono { font-family: var(--font-mono); font-size: 12px; font-size-adjust: none; }
.cb-sr { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Иконка: Tabler outline 24, stroke 1.75, currentColor */
.cb-i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cb-i.s12 { width: 12px; height: 12px; stroke-width: 2.25; }
.cb-i.s16 { width: 16px; height: 16px; }
.cb-i.s20 { width: 20px; height: 20px; }

/* ── Кнопки ───────────────────────────────────── */
.cb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-5); border-radius: var(--radius-pill); border: 0; cursor: pointer; font-weight: 500; white-space: nowrap; transition: background-color .15s, transform .12s; }
.cb-btn:active { transform: scale(.98); }
.cb-btn.primary { background: var(--primary); color: var(--on-primary); }
.cb-btn.primary:hover { background: color-mix(in oklab, var(--primary) 86%, var(--card)); }
.cb-btn.secondary { background: var(--inset); color: var(--ink); }
.cb-btn.secondary:hover { background: var(--inset-hover); }
.cb-btn.outline { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
.cb-btn.outline:hover { background: var(--inset); }
.cb-btn.ghost { background: transparent; color: var(--ink-2); padding: 0 var(--space-3); }
.cb-btn.ghost:hover { background: var(--inset); color: var(--ink); }
.cb-btn.sm { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: 13px; }
.cb-btn.block { width: 100%; }
.cb-btn[disabled] { opacity: .62; cursor: not-allowed; transform: none; }   /* подпись недоступной кнопки ≥ 4,5:1 */

.cb-ibtn { display: inline-grid; place-items: center; width: var(--icon-btn); height: var(--icon-btn); border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--ink); cursor: pointer; position: relative; transition: background-color .15s; }
.cb-ibtn:hover { background: var(--inset); }
.cb-ibtn.on { background: var(--primary); color: var(--on-primary); }
.cb-ibtn.sm { width: 28px; height: 28px; color: var(--ink-3); }
.cb-ibtn .dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 2px var(--card); }

/* ── Навигация-пилюли (сегмент) ───────────────── */
.cb-seg { position: relative; display: inline-flex; gap: 2px; padding: 4px; background: var(--card); border-radius: var(--radius-pill); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cb-seg::-webkit-scrollbar { display: none; }
.cb-seg button { flex-shrink: 0; height: 38px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); cursor: pointer; white-space: nowrap; font-weight: 500; transition: background-color .15s, color .15s; }
.cb-seg button:hover { color: var(--ink); background: var(--inset); }
.cb-seg button[aria-current="page"], .cb-seg button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.cb-seg.inset { background: var(--inset); }
.cb-seg.inset button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-ring); }
/* кнопка сегмента не сжимается уже подписи: на телефоне min-width 24px (цель касания) снимает защиту min-width:auto, и flex давил «Месяц» до 5 px от края — ряд прокручивается (overflow-x) или переносится (У-0236) */
.cb-seg.sm button { height: 28px; padding: 0 var(--space-3); font-size: 13px; }

/* ── Шапка ─────────────────────────────────────── */
.cb-top { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.cb-top > .cb-me { margin-left: auto; }
.cb-top .grow { flex: 1; display: flex; justify-content: center; min-width: 0; }
.cb-pill { display: flex; align-items: center; gap: var(--space-1); padding: 4px; background: var(--card); border-radius: var(--radius-pill); }
.cb-logo { display: flex; align-items: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-4) 0 4px; background: var(--card); border-radius: var(--radius-pill); font-weight: 600; font-size: 16px; }
.cb-mark { width: 40px; height: 40px; border-radius: 50%; background: var(--flame); color: var(--on-flame); display: grid; place-items: center; }
.cb-me { display: flex; align-items: center; gap: var(--space-3); height: 48px; padding: 0 var(--space-3) 0 4px; background: var(--card); border-radius: var(--radius-pill); border: 0; cursor: pointer; text-align: left; }
.cb-me .who { display: grid; line-height: 16px; min-width: 0; }
.cb-me .who b { font-weight: 500; font-size: 13px; }
.cb-me .who span { color: var(--ink-3); font-size: 11px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--flame-soft); color: color-mix(in oklab, var(--flame-deep) 60%, var(--ink)); font-weight: 600; font-size: 14px; }   /* инициалы ≥ 4,5:1 в обеих темах и у любого бренда */
.cb-av.sm { width: 28px; height: 28px; font-size: 11px; }

/* ── Боковая пилюля ───────────────────────────── */
.cb-rail { display: flex; flex-direction: column; gap: var(--space-4); width: var(--rail-w); }
.cb-rail .grp { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; background: var(--card); border-radius: var(--radius-pill); }
.cb-rail .spacer { flex: 1; }

/* ── Боковое меню в трёх плотностях (SideRail из f-shell.js, брендбук «Сетка» › каркас):
   d-full — подписи rail-w-full 240 · d-icons — иконки rail-w 56 · d-hidden — бургер с текущим пунктом и выдвижка.
   Прежняя пилюля (.cb-rail без .cb-nav) остаётся для Dashboard. ── */
.cb-nav { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2); background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); min-width: 0; }
.cb-rail.cb-nav { position: sticky; top: var(--space-4); max-height: calc(100vh - var(--space-8)); }
/* Подпись иконки выше контента, ниже диалогов и выдвижек. Sticky создаёт свой контекст наложения. */
.cb-rail.cb-nav.d-icons { z-index: 40; }
.cb-rail.cb-nav.d-full { width: var(--rail-w-full); }
.cb-rail.cb-nav.d-icons { width: var(--rail-w); align-items: center; }
.cb-rail.cb-nav.d-hidden { width: auto; position: static; max-height: none; padding: 0; background: none; box-shadow: none; flex-direction: row; }
.cb-body:has(> .cb-rail.cb-nav.d-full) { grid-template-columns: var(--rail-w-full) minmax(0, 1fr); }
.cb-body:has(> .cb-rail.cb-nav.d-hidden) { grid-template-columns: minmax(0, 1fr); }
.cb-nav-head { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 2px; }
.cb-nav-head .t { display: grid; min-width: 0; line-height: 16px; }
.cb-nav-head .t b { font-size: 15px; font-weight: 600; }
.cb-nav-head .t small { font-size: 11px; color: var(--ink-3); overflow-wrap: break-word; }
.cb-nav-head .cb-ibtn { margin-left: auto; }
.cb-nav-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); overflow-y: auto; overscroll-behavior: contain; }
.cb-nav.d-icons .cb-nav-body { overflow: visible; align-items: center; gap: var(--space-2); }
.cb-nav-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cb-nav-grp { display: grid; gap: 2px; min-width: 0; }
.cb-nav .gh { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-3); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; text-align: left; }
.cb-nav .gh:hover { color: var(--ink); }
.cb-nav-sep { display: block; width: 24px; height: 1px; margin: 2px auto; background: var(--border); }
.cb-nav .it { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 500; line-height: 18px; text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--motion-subtle-in) var(--motion-ease), color var(--motion-subtle-in) var(--motion-ease); }
.cb-nav .it:hover { background: var(--inset); color: var(--ink); }
.cb-nav .it:active { transform: scale(.98); }
.cb-nav .it.in { background: var(--inset); color: var(--ink); }
.cb-nav .it.on { background: var(--primary); color: var(--on-primary); }
.cb-nav .it.locked:not(.on) .nm { color: var(--ink-3); }
.cb-nav .it .ic { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; }
.cb-nav .it .nm { flex: 1; min-width: 0; overflow-wrap: break-word; }
.cb-nav .it .chev { display: inline-flex; color: var(--ink-3); }
.cb-nav .it.on .chev { color: var(--on-primary); }
.cb-nav .cnt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.cb-nav .cnt b { font-weight: 600; color: var(--ink); }
.cb-nav .it.on .cnt b { color: var(--on-primary); }
.cb-nav i.late { font-style: normal; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; background: var(--warn-soft); color: var(--warn); }
/* подпункты на направляющей линии */
.cb-nav ul.sub { margin: 2px 0 4px 19px; padding-left: 9px; border-left: 1px solid var(--border); }
.cb-nav .it.sub { min-height: 36px; font-size: 13px; }
.cb-nav .more { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; justify-self: start; }
.cb-nav .more:hover { background: var(--inset); color: var(--ink); }
/* плотность «иконки»: подпись всплывает справа при наведении и фокусе; счётчик — метка на иконке */
.cb-nav.d-icons .it { justify-content: center; width: 40px; height: 40px; min-height: 40px; padding: 0; }
.cb-nav.d-icons .it .nm { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); z-index: 40; padding: 4px 10px; border-radius: var(--radius-chip); background: var(--ink); color: var(--card); font-size: 12px; line-height: 16px; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--motion-subtle-out) var(--motion-ease), visibility 0s var(--motion-subtle-out); }
.cb-nav.d-icons .it:hover .nm, .cb-nav.d-icons .it:focus-visible .nm { opacity: 1; visibility: visible; transition: opacity var(--motion-subtle-in) var(--motion-ease); }
.cb-nav .it .bdg { position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font: 600 10px/16px var(--font-sans); font-style: normal; font-size-adjust: none; text-align: center; box-shadow: 0 0 0 2px var(--card); }
.cb-nav .it .bdg.late { background: var(--warn); color: var(--card); }   /* сильнее общего .cb-nav i.late */
.cb-nav .it.on .bdg { box-shadow: 0 0 0 2px var(--primary); }
.cb-nav-foot { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); min-width: 0; }
.cb-nav.d-icons .cb-nav-foot { align-items: center; }
.cb-nav-foot .row { display: flex; gap: 4px; }
.cb-nav.d-icons .cb-nav-foot .row { flex-direction: column; }
/* переключатель плотности */
.cb-dens { display: inline-flex; gap: 2px; padding: 3px; background: var(--inset); border-radius: var(--radius-pill); align-self: flex-start; }
.cb-dens.v { flex-direction: column; align-self: center; }
.cb-dens button { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color var(--motion-subtle-in) var(--motion-ease); }
.cb-dens button:hover { color: var(--ink); }
.cb-dens button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-ring); }
/* плотность «скрыто»: бургер с текущим пунктом, меню — выдвижка слева */
.cb-nav-burger { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-4) 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); box-shadow: var(--shadow-ring); font: inherit; font-weight: 500; cursor: pointer; }
.cb-nav-burger:hover { background: var(--inset); }
.cb-nav-burger .cur { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.cb-nav-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); border-radius: 0 var(--radius-card) var(--radius-card) 0; box-shadow: var(--shadow-pop); padding: var(--space-3); outline: none; animation: cb-slide-l var(--motion-standard-in) var(--motion-ease); }
@keyframes cb-slide-l { from { transform: translateX(-24px); opacity: 0; } }

/* ── Оболочка и сетка bento ───────────────────── */
.cb-app { background: var(--canvas); padding: var(--space-8); min-height: 100%; }
.cb-shell { background: var(--shell); border-radius: var(--radius-shell); padding: var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); max-width: 1480px; margin: 0 auto; }
.cb-body { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.cb-body.no-rail, .cb-body:not(:has(> .cb-rail)) { grid-template-columns: minmax(0, 1fr); }   /* rail:false — main на всю ширину (вход и оплата сжимались в полоску 56 px) */
.cb-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); min-width: 0; }
.cb-screen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-content: start; min-width: 0; }
.cb-screen > * { min-width: 0; max-width: 100%; }
.cb-hello h1 { margin: 0; font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.cb-hello p { margin: var(--space-2) 0 0; color: var(--ink-2); font-size: 15px; }
.cb-hello .row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.cb-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.cb-bento > * { grid-column: span var(--span, 4); min-width: 0; }
.cb-stack { display: grid; gap: var(--space-4); align-content: start; }
.cb-bento > * > .cb-card, .cb-bento > * > .cb-kpis { height: 100%; }
.cb-kpis { grid-auto-rows: 1fr; }

/* ── Карточка ─────────────────────────────────── */
.cb-card { background: var(--card); border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--shadow-ring); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cb-card.flush { padding: 0; overflow: hidden; }
.cb-card.inset { background: var(--inset); box-shadow: none; border-radius: var(--radius-inset); padding: var(--space-4); }
.cb-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.cb-card-h .t { min-width: 0; }
.cb-card-h .ttl { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.cb-card-h h3 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-card-h h3.sm { font-size: 15px; line-height: 20px; font-weight: 500; }
.cb-card-h p { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; line-height: 18px; }
.cb-card-h .act { display: flex; gap: var(--space-2); align-items: center; flex: none; }
.cb-ico-box { width: 36px; height: 36px; flex: none; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }

/* ── Дельта и база ───────────────────────────── */
.cb-delta { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 8px 0 6px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-delta.ok { background: var(--ok-soft); color: var(--ok); }
.cb-delta.bad { background: var(--bad-soft); color: var(--bad); }
.cb-delta.flat { background: var(--inset); color: var(--ink-2); }
.cb-cmp { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--ink-3); font-size: 13px; line-height: 18px; }
.cb-na { color: var(--ink-3); border-bottom: 1px dashed var(--ink-3); font-size: 13px; }

/* ── KPI-плитка ──────────────────────────────── */
.cb-kpi { background: var(--inset); border-radius: var(--radius-card); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5); min-height: 148px; min-width: 0; }
.cb-kpi .h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cb-kpi .lbl { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink-2); }
.cb-kpi .val { font-size: 30px; line-height: 34px; font-weight: 560; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-kpi .val small { font-size: 18px; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.cb-kpi .ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink-2); flex: none; }
.cb-kpi.accent { background: var(--grad-accent, linear-gradient(150deg, var(--flame-deep) 0%, var(--flame-deep) 38%, var(--flame) 100%)); color: var(--on-flame); }
.cb-kpi.accent .lbl, .cb-kpi.accent .val small, .cb-kpi.accent .cb-cmp { color: var(--on-flame); }
.cb-kpi.accent .ico { background: color-mix(in oklab, var(--on-flame) 22%, transparent); color: var(--on-flame); }
.cb-kpi.accent .cb-delta { background: color-mix(in oklab, var(--on-flame) 8%, transparent); color: var(--on-flame); }   /* подложка 8 %: белый 12 px ≥ 4,5 : 1 по всей длине градиента бренда */
.cb-kpi.card { background: var(--card); box-shadow: var(--shadow-ring); }
.cb-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

/* ── Статус ───────────────────────────────────── */
.cb-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.cb-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.cb-status.ok { color: var(--ok); }
.cb-status.bad { color: var(--bad); }
.cb-status.warn { color: var(--warn); }
.cb-status.neutral { color: var(--ink-3); }
.cb-status.ink span { color: var(--ink); }
.cb-status.ink::before { box-shadow: none; }
.cb-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: .02em; background: var(--inset); color: var(--ink-2); }
.cb-tag.demo { background: var(--flame-soft); color: var(--ink); }
.cb-tag.on-dark { background: color-mix(in oklab, var(--on-card-ink) 16%, transparent); color: var(--on-card-ink); }

/* ── Лимит ────────────────────────────────────── */
.cb-limit .bar { position: relative; height: 12px; border-radius: var(--radius-pill); overflow: hidden; background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 6px); }
.cb-limit .bar i { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); background: var(--flame); }
.cb-limit .bar i.over { background: var(--bad); }
.cb-limit .foot { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 13px; margin-top: var(--space-2); flex-wrap: wrap; }
.cb-limit .foot b { font-weight: 560; font-variant-numeric: tabular-nums; }
.cb-limit .foot span { color: var(--ink-3); font-size: 12px; }

/* ── График ───────────────────────────────────── */
.cb-legend { display: flex; gap: var(--space-3); font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.cb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cb-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--ink); }
.cb-legend i.hatch { background: repeating-linear-gradient(-45deg, var(--flame) 0 2px, var(--flame-hatch) 2px 4px); }
.cb-tip { position: absolute; pointer-events: none; background: var(--card); color: var(--ink); border-radius: 12px; padding: 8px 10px; font-size: 12px; line-height: 17px; box-shadow: var(--shadow-pop); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); z-index: 2; }
.cb-tip b { font-weight: 600; display: block; margin-bottom: 2px; }
.cb-tip .r { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.cb-tip .r i { width: 8px; height: 8px; border-radius: 2px; background: var(--ink); }
.cb-tip .r i.hatch { background: var(--flame); }

/* ── Поле поиска и чекбокс ───────────────────── */
.cb-search { display: flex; align-items: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-3); min-width: 0; cursor: text; }
.cb-search:focus-within { box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-search input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); min-width: 0; width: 100%; min-height: 28px; }   /* поле касания во всю высоту пилюли */
.cb-search input::placeholder { color: var(--ink-3); }
.cb-check { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border-radius: var(--radius-check); box-shadow: inset 0 0 0 1px var(--ink-3); background: var(--card); cursor: pointer; display: inline-grid; place-items: center; flex: none; }
.cb-check:checked { background: var(--primary); box-shadow: none; }
.cb-check:checked::after { content: ""; width: 9px; height: 5px; border: solid var(--on-primary); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.cb-check:indeterminate { background: var(--primary); box-shadow: none; }
.cb-check:indeterminate::after { content: ""; width: 8px; height: 2px; background: var(--on-primary); border-radius: 1px; }

/* ── Таблица ─────────────────────────────────── */
.cb-tblwrap { position: relative; border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); overflow-x: auto; }
/* подсказка прокрутки: у края, за которым есть столбцы, — тень; доехали до края — тень закрывает заливка (фон local). Помещается целиком — теней нет */
.cb-tblwrap { background:
  linear-gradient(to right, var(--card) 40%, transparent) left center / 28px 100% no-repeat local,
  linear-gradient(to left, var(--card) 40%, transparent) right center / 28px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, color-mix(in oklab, var(--ink) 30%, transparent), transparent) left center / 16px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, color-mix(in oklab, var(--ink) 30%, transparent), transparent) right center / 16px 100% no-repeat scroll;
  background-color: var(--card); }
.cb-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 640px; }
.cb-tbl th { text-align: left; font-weight: 400; color: var(--ink-2); font-size: 13px; background: var(--inset); height: 44px; padding: 0 var(--space-3); white-space: nowrap; }
.cb-tbl th:first-child, .cb-tbl td:first-child { width: 48px; padding-left: var(--space-4); }
.cb-tbl td { height: 52px; padding: 0 var(--space-3); border-top: 1px solid var(--border); white-space: nowrap; }
.cb-tbl tbody tr { transition: background-color .12s; }
.cb-tbl tbody tr:hover { background: color-mix(in oklab, var(--inset) 60%, transparent); }
.cb-tbl tbody tr[aria-selected="true"] { background: var(--inset); }
.cb-tbl .r { text-align: right; }
.cb-tbl td.amt { font-weight: 500; font-variant-numeric: tabular-nums; }
.cb-tbl td.dt { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-tbl td.menu { width: 52px; padding-right: var(--space-3); }
.cb-ent { display: flex; align-items: center; gap: var(--space-3); }
.cb-cat { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); flex: none; }
.cb-cat.flame { background: var(--flame-soft); color: color-mix(in oklab, var(--flame-deep) 60%, var(--ink)); }
.cb-toolbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-toolbar .cb-search { width: 220px; max-width: 100%; }

/* ── Состояния (Lumen §11) ───────────────────── */
.cb-state { display: grid; justify-items: center; text-align: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); }
.cb-state .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); margin-bottom: 4px; }
.cb-state.error .ic { background: var(--bad-soft); color: var(--bad); }
.cb-state b { font-size: 15px; font-weight: 600; }
.cb-state p { margin: 0; color: var(--ink-3); font-size: 13px; max-width: 19em; }
.cb-state .cb-btn { margin-top: var(--space-2); }
.cb-skel { border-radius: 8px; background: linear-gradient(90deg, var(--inset) 0%, var(--inset-hover) 50%, var(--inset) 100%); background-size: 200% 100%; animation: cb-sh 1.4s linear infinite; }
@keyframes cb-sh { to { background-position: -200% 0; } }

/* ── Свежесть ────────────────────────────────── */
.cb-fresh { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-3); font-size: 12px; flex-wrap: wrap; }

/* PeriodPicker */
.cb-pp { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-family: var(--font-sans); }
.cb-pp .step { display: inline-flex; align-items: center; gap: 6px; }
.cb-pp .step b { font-size: 14px; font-weight: 600; min-width: 5.5em; text-align: center; white-space: nowrap; }
.cb-pp .st { font-size: 12px; color: var(--ink-3); }
.cb-pp .st.go { color: var(--ink-2); padding: 3px 10px; border-radius: var(--radius-pill); background: repeating-linear-gradient(-45deg, var(--flame-hatch) 0 2px, transparent 2px 6px), var(--inset); }
.cb-pp .cust { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.cb-pp input[type="date"] { height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); font: inherit; font-size: 13px; box-shadow: inset 0 0 0 1px var(--border); }
.cb-pp input[type="date"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Данные на экране: info · «Как считается» · оговорка · углубление ── */
.cb-info { width: 28px; height: 28px; border: 0; border-radius: 50%; display: inline-grid; place-items: center; background: transparent; color: var(--ink-3); cursor: pointer; flex: none; position: relative; z-index: 2; }
.cb-info:hover, .cb-info.on { background: var(--card); color: var(--ink); }
.cb-card .cb-info:hover, .cb-card .cb-info.on { background: var(--inset); }
.cb-card-info, .cb-kpi-info { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--card); font-size: 13px; line-height: 18px; color: var(--ink-2); position: relative; z-index: 2; }
.cb-card .cb-card-info { background: var(--inset); }
.cb-caveat { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-caveat .cb-i { color: var(--warn); flex: none; }
.cb-method { font-size: 12px; line-height: 17px; color: var(--ink-2); border-top: 1px solid var(--border); padding-top: 8px; position: relative; z-index: 2; }
.cb-method summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; color: var(--ink-3); font-weight: 500; border-radius: var(--radius-pill); }
.cb-method summary::-webkit-details-marker { display: none; }
.cb-method[open] summary .cb-i { transform: rotate(180deg); }
:where(.cb-method) p { margin: 6px 0 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-kpi { position: relative; }
.cb-kpi .hx { display: inline-flex; align-items: center; gap: 4px; }
.cb-kpi-go { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.cb-kpi-go:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-kpi.drill:not(.accent):hover { background: var(--inset-hover); }   /* акцентную плитку не трогать: подложка наведения стирала градиент, белый текст пропадал */
.cb-kpi.accent.drill:hover { filter: brightness(1.05); }
.cb-kpi.card.drill:hover { background: var(--inset); }
.cb-kpi .cb-cmp + .cb-cmp { margin-top: 2px; }
.cb-kpi-r { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-kpi.accent .cb-kpi-r, .cb-kpi.accent .cb-method, .cb-kpi.accent .cb-method summary { color: var(--on-flame); }
.cb-kpi-sp { display: block; }
.cb-kpi-sp path { fill: none; stroke: var(--mono-4); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cb-kpi-sp circle { fill: var(--flame); }
.cb-kpi.accent .cb-kpi-sp path { stroke: var(--on-flame); }
.cb-kpi.accent .cb-kpi-sp circle { fill: var(--on-flame); }
.cb-ripe { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink); vertical-align: middle; background: repeating-linear-gradient(-45deg, var(--flame-hatch) 0 2px, transparent 2px 6px), var(--card); }
.cb-kpi.ripe .val { text-decoration: underline dashed var(--ink-3) 1px; text-underline-offset: 6px; }
.cb-tip .d { display: flex; align-items: center; gap: 4px; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); color: var(--ink-2); font-size: 11px; }

/* таблица: сортировка, поиск, раскрытие, группы, подвал */
.cb-tblbox { display: grid; gap: var(--space-3); min-width: 0; }
.cb-tbl-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cb-tbl-bar .cb-search { flex: 0 1 320px; }
.cb-tbl-cnt, .cb-tbl-shown { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin: 0; }
.cb-tbl.plain1 th:first-child, .cb-tbl.plain1 td:first-child { width: auto; }
.cb-tbl.has-x td.xp, .cb-tbl.has-x th:nth-child(1) { width: 44px; }
.cb-tbl tr.grp th { height: 32px; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--border); }
.cb-tbl tr.grp th + th { box-shadow: inset 1px 0 0 var(--border); }
.cb-sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 4px 6px; margin-left: -6px; border-radius: var(--radius-pill); font: inherit; color: inherit; cursor: pointer; }
.cb-sort:hover, .cb-sort.on { color: var(--ink); background: var(--card); }
.cb-tbl th.r .cb-sort { margin-left: 0; margin-right: -6px; }
.cb-tbl tbody tr[data-row]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cb-tbl tbody tr.drill { cursor: pointer; }
.cb-tbl-x { width: 28px; height: 28px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--ink-2); cursor: pointer; }
.cb-tbl-x:hover { background: var(--inset); }
.cb-tbl-x .cb-i { transition: transform .15s; }
.cb-tbl-x[aria-expanded="true"] .cb-i { transform: rotate(90deg); }
.cb-tbl tr.xrow td { height: auto; background: color-mix(in oklab, var(--inset) 50%, transparent); white-space: normal; }
.cb-tbl tfoot td { height: 48px; padding: 0 var(--space-3); border-top: 1px solid var(--border); font-weight: 600; font-variant-numeric: tabular-nums; background: var(--inset); }
.cb-tbl-none { color: var(--ink-3); text-align: center; }

/* свежесть по источникам */
.cb-fresh.multi { display: grid; gap: 6px; }
.cb-fresh .line { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-fresh-t { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; }
.cb-fresh-t[aria-expanded="true"] .cb-i { transform: rotate(180deg); }
.cb-fresh-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cb-fresh-l li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* состояние dotmatrix */
.cb-state.dotmatrix { gap: var(--space-3); }
.cb-dm { display: grid; grid-template-columns: repeat(7, 6px); gap: 5px; }
.cb-dm i { width: 6px; height: 6px; border-radius: 50%; background: var(--mono-3); animation: cb-dm 1.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes cb-dm { 0%, 100% { background: var(--mono-2); transform: scale(.8); } 40% { background: var(--flame); transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .cb-dm i { animation: none; background: var(--mono-3); transform: none; }
  .cb-dm i:nth-child(3n) { background: var(--flame); }
}

/* ── Бренд-слой (брендбук «Бренд-слой»): data-brand на html или на острове .cb.
   Бренд — пресет 01_КАНОН/бренды/<id>.json: акцент (слот --flame и псевдонимы --accent*), градиенты, шрифты,
   радиусы, данные; сборка выпускает блоки [data-brand] в конце поставки. Правило ниже — запасное для
   атрибута без пресета: рампа seq-1…6, area-top, flame-soft и flame-hatch следуют за --flame долями brand-mix-*.
   Без атрибута всё как в tokens.json. Пересчёт идёт на каждом .cb и узле с темой: берутся его --card и --ink. ── */
:is([data-brand], [data-brand] .cb, [data-brand] [data-theme]) {
  --seq-1: color-mix(in oklab, var(--flame) var(--brand-mix-1), var(--card));
  --seq-2: color-mix(in oklab, var(--flame) var(--brand-mix-2), var(--card));
  --seq-3: color-mix(in oklab, var(--flame) var(--brand-mix-3), var(--card));
  --seq-4: color-mix(in oklab, var(--flame) var(--brand-mix-4), var(--card));
  --seq-5: color-mix(in oklab, var(--flame) var(--brand-mix-5), var(--ink));
  --seq-6: color-mix(in oklab, var(--flame) var(--brand-mix-6), var(--ink));
  --area-top: color-mix(in oklab, var(--flame) var(--brand-area), transparent);
  --flame-soft: color-mix(in oklab, var(--flame) var(--brand-soft), var(--card));
  --flame-hatch: color-mix(in oklab, var(--flame) var(--brand-hatch), var(--card));
  --on-seq-4: var(--on-flame);
  --on-seq-5: var(--on-flame);
}

/* ── Пояс KPI на всю ширину: 3 · 4 · 5 плиток; на узком — 2 колонки, на телефоне — одна.
   Нечётная последняя плитка в две колонки растягивается на строку. Плитки поверх холста — на card. ── */
.cb-kpis-3, .cb-kpis-4, .cb-kpis-5 { display: grid; gap: var(--space-3); grid-auto-rows: 1fr; min-width: 0; }
.cb-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cb-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
:is(.cb-kpis-3, .cb-kpis-4, .cb-kpis-5) > .cb-kpi { min-width: 0; }
:is(.cb-kpis-3, .cb-kpis-4, .cb-kpis-5).on-card > .cb-kpi:not(.accent) { background: var(--card); box-shadow: var(--shadow-ring); }
@media (max-width: 1180px) {
  .cb-kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cb-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cb-kpis-3, .cb-kpis-4, .cb-kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.cb-kpis-3, .cb-kpis-5) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .cb-kpis-3, .cb-kpis-4, .cb-kpis-5 { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); grid-auto-rows: auto; }
  :is(.cb-kpis-3, .cb-kpis-5) > :last-child:nth-child(odd) { grid-column: auto; }
}
html[data-preset="phone"] :is(.cb-kpis-3, .cb-kpis-4, .cb-kpis-5) { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }

/* ── Адаптив ─────────────────────────────────── */
@media (max-width: 1180px) {
  .cb-bento > * { grid-column: span 6; }
  .cb-bento > .wide-md { grid-column: span 12; }
}
@media (max-width: 860px) {
  .cb-app { padding: var(--space-4); }
  .cb-shell { padding: var(--space-4); border-radius: var(--radius-card); gap: var(--space-4); }
  .cb-body { grid-template-columns: minmax(0, 1fr); }
  .cb-rail:not(.cb-nav) { display: none; }
  .cb-rail.cb-nav.d-hidden { margin-bottom: calc(var(--space-2) * -1); }
  .cb-nav-drawer .it:not(.sub), .cb-nav-drawer .gh { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  .cb-nav-drawer .it.sub { min-height: 44px; padding-top: 13px; padding-bottom: 13px; }
  .cb-top { flex-wrap: wrap; }
  .cb-top .grow { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .cb-me .who { display: none; }
  .cb-hello h1 { font-size: 30px; line-height: 34px; }
  .cb-bento > *, .cb-bento > .wide-md { grid-column: span 12; }
}
@media (max-width: 480px) {
  .cb-app { padding: 0; }
  .cb-shell { border-radius: 0; padding: var(--space-4); }
  .cb-top .icons { display: none; }
  .cb-kpi .val { font-size: 22px; line-height: 28px; }
  .cb-kpi .val small { font-size: 14px; }
  .cb-hello h1 { font-size: 26px; line-height: 30px; }
  .cb-card { padding: var(--space-4); }
  .cb-toolbar, .cb-toolbar .cb-search { width: 100%; }
  .cb-toolbar .cb-search { flex: 1; }
  .cb-card-h { flex-wrap: wrap; }
  .cb-card-h .act { flex: 1 1 100%; min-width: 0; }   /* панель в шапке карточки переносится под заголовок и сжимается, а не вылезает */
  .cb-kpi { min-height: 128px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
}
/* ── Цели касания на телефоне (брендбук «Приёмка экрана»): всё нажимаемое не меньше 24 × 24 px.
   Марки данных (SVG, столбики с высотой в style) не трогаем: их высота — это значение. ── */
@media (max-width: 767px) {
  .cb :is(button, [role="button"], summary, select, a[href], input:not([type="checkbox"]):not([type="radio"]):not(.cb-sr)):not(svg *):not([style*="height"]):not(.cb-sr) { min-height: 24px; }
  .cb :is(button, [role="button"], a[href]):not(svg *):not([style*="width"]):not(.cb-sr) { min-width: 24px; }
  .cb :is(a[href], summary):not(svg *) { display: inline-flex; align-items: center; }
  .cb .cb-check { width: 24px; height: 24px; }
  .cb [tabindex="0"]:is(span, b, small):not(svg *):not([style]):not([role="img"]) { min-height: 24px; display: inline-flex; align-items: center; }
  .cb div[tabindex="0"]:not([style]):not([role="img"]) { min-height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb *, .cb *::before, .cb *::after { transition: none !important; animation: none !important; }
}

/* Наведение: вторичный текст не гаснет. Подложка наведения --inset-hover темнее --inset, и --ink-3 на ней даёт 4,4:1 при норме 4,5:1 (G3).
   Внутри наведённого или раскрытого элемента --ink-3 поднимается до --ink-2 — обобщение правки .cb-su-src:hover (c2-setup), У-0228. */
:where(button, a[href], summary, [role="button"], [role="option"], [role="menuitem"], [role="tab"]):is(:hover, [aria-expanded="true"]) { --ink-3: var(--ink-2); }

/* ── src/styles/00a-semantic.css ── */
/* Семантические токены Catalyst (ПРАВКИ_2026-10-15). Псевдонимы над ядром tokens.json: компонент пишет смысл, не цвет.
   accent · accent-soft · accent-strong — бренд; positive · warning · danger · info (+ -soft) — статусы; focus — кольцо фокуса;
   action / on-action — главная кнопка: по умолчанию #EB5B2A (решение Дениса 15.10.2026), бренд перекрывает своим акцентом.
   Решение Дениса 15.10.2026: оранжевая кнопка #EB5B2A с чёрным текстом (--on-action: ink), контраст 5,72:1 (AA). Заменяет чёрную пилюлю. */
:root, .cb {
  --action: #EB5B2A; --on-action: var(--ink);
  --accent-strong: var(--accent-ink);
  --positive: var(--ok); --positive-soft: var(--ok-soft);
  --warning: var(--warn); --warning-soft: var(--warn-soft);
  --danger: var(--bad); --danger-soft: var(--bad-soft);
  --info: var(--cold); --info-soft: color-mix(in oklab, var(--cold) 14%, var(--card));
}
.cb-btn.primary { background: var(--action); color: var(--on-action); }
.cb-btn.primary:hover { background: color-mix(in oklab, var(--action) 86%, var(--ink)); }
.cb-btn.primary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── src/styles/01-core.css ── */
/* ── Графики · ядро (CatalystBento.viz) ───────────────────────────── */
.cb-vf { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; border-radius: var(--radius-inset); padding: var(--space-4); }
.cb-vf.inset { background: var(--inset); }
.cb-vf.card { background: var(--card); box-shadow: var(--shadow-ring); border-radius: var(--radius-card); padding: var(--space-5); }
.cb-vf.bare { padding: 0; background: transparent; }
.cb-vf .hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.cb-vf .hd .t { display: grid; gap: 2px; min-width: 0; }
.cb-vf .hd .ttl { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.cb-vf .hd b { font-size: 14px; line-height: 19px; font-weight: 600; text-wrap: balance; }
.cb-vf.card .hd b { font-size: 16px; line-height: 21px; }
.cb-vf .hd .t > span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-vf .hd .a { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.cb-vf .bd { position: relative; min-width: 0; }
.cb-vf .ft { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 11px; line-height: 14px; color: var(--ink-3); flex-wrap: wrap; }
.cb-vf .ft .twin { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; margin-left: auto; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-2); font-size: 12px; font-weight: 500; cursor: pointer; }
.cb-vf.card .ft .twin { background: var(--inset); }
.cb-vf .ft .twin:hover { color: var(--ink); }
.cb-vskel { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding: 0 8px; }
.cb-vskel i { flex: 1; border-radius: 6px; }

/* полотно */
.cb-plot { position: relative; width: 100%; min-width: 0; }
.cb-plot svg { display: block; overflow: visible; }
.cb-plot text { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.cb-grid { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.cb-grid.zero { stroke: var(--mono-3); }
.cb-ax { fill: var(--ink-3); font-size: 11px; font-weight: 500; }
.cb-ax.cur { fill: var(--ink); font-weight: 700; }
.cb-lbl { fill: var(--ink-2); font-size: 12px; font-weight: 500; }
.cb-val { fill: var(--ink); font-size: 12px; font-weight: 600; }
.cb-ref { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 4 4; }
.cb-ref-l { fill: var(--ink-2); font-size: 11px; font-weight: 500; }
.cb-hit { fill: transparent; cursor: default; outline: none; }   /* указатель-палец только при разборе: .cb-drillable .cb-hit */
.cb-hit:focus-visible { fill: color-mix(in oklab, var(--ink) 6%, transparent); }
.cb-cross { stroke: var(--ink-3); stroke-width: 1; }
.cb-dot { stroke: var(--card); stroke-width: 2; }
.cb-vf.inset .cb-dot { stroke: var(--inset); }
.cb-dim { opacity: .35; transition: opacity .15s; }
.cb-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cb-line.dash { stroke-dasharray: 5 5; }

/* подсказка */
.cb-vtip { position: absolute; z-index: 3; pointer-events: none; min-width: 120px; max-width: 280px; background: var(--card); color: var(--ink); border-radius: 12px; padding: 8px 10px; font-size: 12px; line-height: 17px; box-shadow: var(--shadow-pop); transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap; }
.cb-vtip.below { transform: translate(-50%, 12px); }
.cb-vtip.left { transform: translate(calc(-100% - 12px), -50%); }
.cb-vtip.right { transform: translate(12px, -50%); }
.cb-vtip b { display: block; font-weight: 600; margin-bottom: 3px; }
.cb-vtip .r { display: flex; align-items: center; gap: 6px; }
.cb-vtip .r .l { color: var(--ink-2); }
.cb-vtip .r .v { margin-left: auto; padding-left: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-vtip .n { margin-top: 4px; color: var(--ink-3); font-size: 11px; white-space: normal; }

/* свотч: один круг у всех легенд (Lumen §2 п.14) */
.cb-sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.cb-sw.hatch { background: repeating-linear-gradient(-45deg, var(--c) 0 2px, var(--flame-hatch) 2px 4px); }
.cb-sw.dash { width: 14px; height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--c); }
.cb-sw.line { width: 14px; height: 2px; border-radius: 1px; }
.cb-sw.ring { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }

/* легенды */
.cb-vleg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-vleg .it { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cb-vleg.comp { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cb-vleg.comp .it { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; }
.cb-vleg.comp .l { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-vleg.comp b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-vleg.comp .s { color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.cb-vleg.scale { align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); }
.cb-vleg.scale .ramp { display: inline-flex; gap: 2px; }
.cb-vleg.scale .ramp i { width: 18px; height: 10px; border-radius: 3px; }
.cb-vleg.scale .x { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; }

/* близнец */
.cb-vtwin { overflow-x: auto; border-radius: 12px; background: var(--card); }
.cb-vtwin table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.cb-vtwin th { text-align: left; font-weight: 500; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cb-vtwin td { padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cb-vtwin tr:last-child td { border-bottom: 0; }
.cb-vtwin .r { text-align: right; }

/* галерея форм */
.cb-gal { display: grid; gap: var(--space-8); }
.cb-gal-g h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 var(--space-4); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
.cb-gal-g h2 span { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.cb-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--space-4); }
.cb-gal-it { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-gal-it.wide { grid-column: 1 / -1; }
.cb-gal-it > header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.cb-gal-it > header code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); font-size-adjust: none; }
.cb-vex { min-width: 0; }

/* углубление в данные: признаки кликабельности только при провайдере (.cb-drill-on / [data-drill]) */
.cb-vtip .d { display: flex; align-items: center; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--ink-2); font-size: 11px; font-weight: 500; }
.cb-drillable .cb-hit { cursor: pointer; }
.cb-vf .cb-plot:not(.cb-drillable) .cb-hit { cursor: default; }
[data-drill] { cursor: pointer; }
[data-drill]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.cb-drill-on [data-drill]:hover { background-color: color-mix(in oklab, var(--ink) 4%, transparent); }
.cb-vexcl { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-3); flex-wrap: wrap; }
.cb-vexcl b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-vexcl .cb-i { color: var(--ink-3); }
.cb-vlegs { display: grid; gap: 6px; }
.cb-vcol { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.cb-vcol > .cb-seg { flex-wrap: wrap; border-radius: var(--radius-inset); justify-self: start; }

/* ПРАВКИ_2026-10-15 · общие правила раскладки */
.cb-nw { white-space: nowrap; }
/* таблица шире карточки: заголовки переносятся, у края тень прокрутки */
.cb-pj-tblw, .cb-mk-tw { background: linear-gradient(to right, var(--card) 30%, transparent) left / 24px 100% no-repeat local, linear-gradient(to left, var(--card) 30%, transparent) right / 24px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 12%, transparent), transparent) left / 10px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 12%, transparent), transparent) right / 10px 100% no-repeat scroll; }

/* ── src/styles/a1-explore.css ── */
/* ── Углубление в данные: MetricExplorer, PeriodPicker ───────────── */
.cb-xp-layer { position: relative; z-index: 1000; }
.cb-xp-scrim { position: fixed; inset: 0; background: color-mix(in oklab, var(--ink) 28%, transparent); animation: cb-xp-fade .15s ease-out; }
.cb-xp { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 96vw); background: var(--card); color: var(--ink); box-shadow: var(--shadow-pop); border-radius: var(--radius-card) 0 0 var(--radius-card); display: flex; flex-direction: column; outline: none; animation: cb-xp-slide .2s ease-out; font-family: var(--font-sans); }
.cb-xp.inline { position: relative; inset: auto; width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-ring); animation: none; }
@keyframes cb-xp-slide { from { transform: translateX(24px); opacity: 0; } }
@keyframes cb-xp-fade { from { opacity: 0; } }

.cb-xp-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-2); }
.cb-xp-h .t { display: grid; gap: 2px; min-width: 0; }
.cb-xp-h small { font-size: 12px; color: var(--ink-3); }
.cb-xp-h h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: break-word; }
.cb-xp-h .act { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.cb-xp-h .act [disabled] { opacity: .4; cursor: default; }

.cb-xp-crumbs { padding: 0 var(--space-5) var(--space-2); }
.cb-xp-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 13px; line-height: 20px; }
.cb-xp-crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.cb-xp-crumbs .sep { color: var(--ink-3); }
.cb-xp-crumbs button { border: 0; background: transparent; color: var(--ink-2); font: inherit; padding: 2px 6px; border-radius: var(--radius-pill); cursor: pointer; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.cb-xp-crumbs button:hover { background: var(--inset); color: var(--ink); }
.cb-xp-crumbs li > span:not(.sep) { color: var(--ink-3); padding: 2px 2px; }
.cb-xp-crumbs [aria-current] { color: var(--ink) !important; font-weight: 600; }

.cb-xp-ctx { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-5) var(--space-4); border-bottom: 1px solid var(--border); }
.cb-xp-ctx .val { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.cb-xp-ctx .val > b { font-size: 30px; line-height: 34px; font-weight: 560; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.cb-xp-ctx .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-xp-ctx .base { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-xp-ctx .base .bl { font-size: 12px; color: var(--ink-3); }
.cb-xp-busy { font-size: 12px; color: var(--ink-3); }

.cb-xp-b { flex: 1; overflow: auto; padding: var(--space-4) var(--space-5) var(--space-6); display: grid; gap: var(--space-6); align-content: start; }
.cb-xp-l { display: grid; gap: var(--space-3); min-width: 0; }
.cb-xp-l h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; flex-wrap: wrap; }
.cb-xp-l h3 .k { width: 22px; height: 22px; border-radius: 50%; background: var(--inset); color: var(--ink-2); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.cb-xp-l h3 .x { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.cb-xp-skel { display: grid; gap: 8px; }
.cb-xp-skel i { display: block; height: 14px; }
.cb-xp-skel i:nth-child(1) { width: 70%; } .cb-xp-skel i:nth-child(2) { width: 92%; } .cb-xp-skel i:nth-child(3) { width: 48%; }
.cb-xp-empty, .cb-xp-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-3); }

.cb-xp-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); font-size: 13px; line-height: 18px; }
.cb-xp-dl dt { color: var(--ink-3); }
.cb-xp-dl dd { margin: 0; display: grid; gap: 2px; min-width: 0; }
.cb-xp-dl dd small { color: var(--ink-3); font-size: 12px; }

.cb-xp-parts { display: grid; gap: var(--space-2); }
.cb-xp-prow { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; transition: opacity .15s; }
.cb-xp-prow.busy { opacity: .55; }
.cb-xp-prow li > button, .cb-xp-prow li > .nd { display: grid; grid-template-columns: minmax(0, 1fr) auto 48px 16px; grid-template-areas: "l v s c" "b b bs bs"; align-items: center; gap: 4px 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; font: inherit; font-size: 13px; }
.cb-xp-prow li > button { cursor: pointer; }
.cb-xp-prow li > button:hover { background: var(--inset); }
.cb-xp-prow .l { grid-area: l; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-xp-prow .v { grid-area: v; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cb-xp-prow .s { grid-area: s; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.cb-xp-prow .c { grid-area: c; color: var(--ink-3); display: grid; }
.cb-xp-prow .bar { grid-area: b; height: 6px; border-radius: var(--radius-pill); background: var(--mono-1); overflow: hidden; }
.cb-xp-prow .bar i { display: block; height: 100%; border-radius: inherit; background: var(--mono-4); }
.cb-xp-prow .bar i.lead { background: var(--flame); }
.cb-xp-prow .bs { grid-area: bs; font-size: 11px; color: var(--ink-3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.cb-xp-rec { display: grid; gap: var(--space-2); min-width: 0; }
.cb-xp-rec .bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cb-xp-rec .bar .cb-search { flex: 1 1 220px; }
.cb-xp-rec .cnt { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-xp-lock { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 12px; background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 1px, transparent 1px 7px), var(--inset); font-size: 13px; flex-wrap: wrap; }
.cb-xp-lock small { color: var(--ink-3); font-size: 12px; }
.cb-xp-tw { overflow: auto; max-height: 360px; border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-xp-tw table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.cb-xp-tw th { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 400; color: var(--ink-2); background: var(--inset); padding: 8px 10px; white-space: nowrap; }
.cb-xp-tw td { padding: 8px 10px; border-top: 1px solid var(--border); white-space: nowrap; }
.cb-xp-tw .r { text-align: right; }
.cb-xp-tw .mono { font-family: var(--font-mono); font-size: 12px; font-size-adjust: none; }
.cb-xp-open { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.cb-xp-open:hover { background: var(--inset-hover); color: var(--ink); }

.cb-xp-miss { display: grid; gap: var(--space-3); }
.cb-xp-miss .gaps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-xp-miss .gaps li { display: flex; gap: 10px; padding: var(--space-2) 12px; border-radius: 12px; background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 1px, transparent 1px 7px), var(--inset); font-size: 13px; line-height: 18px; }
.cb-xp-miss .gaps li > .cb-i { color: var(--ink-3); margin-top: 1px; }
.cb-xp-miss .gaps div { display: grid; }
.cb-xp-miss .gaps span { color: var(--ink-2); font-size: 12px; line-height: 16px; }
.cb-xp-miss .fil { display: grid; gap: 6px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-xp-miss .fh { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.cb-xp-miss .fil ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cb-xp-miss .fil li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; line-height: 18px; }
.cb-xp-miss .fil code { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-size-adjust: none; flex: none; }

.cb-xp-f { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); color: var(--ink-3); min-width: 0; }
.cb-xp-f code, .cb-xp-path code, .cb-xp-sample { font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; font-size-adjust: none; }

/* пример */
.cb-xp-ex { display: grid; gap: var(--space-4); min-width: 0; }
.cb-xp-lead { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-xp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--space-3); }
.cb-xp-path { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.cb-xp-sample { display: block; }
.cb-xp-expand { padding: 10px 0; font-size: 13px; color: var(--ink-2); white-space: normal; }
.cb-xp-big { font-size: 30px; line-height: 34px; font-weight: 560; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.cb-xp-big small { font-size: 18px; color: var(--ink-3); font-weight: 500; }
.cb-xp-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); }
.cb-xp-states > * { background: var(--inset); border-radius: var(--radius-inset); }

@media (max-width: 560px) {
  .cb-xp { border-radius: var(--radius-inset) 0 0 var(--radius-inset); }
  .cb-xp-h, .cb-xp-crumbs, .cb-xp-ctx, .cb-xp-b, .cb-xp-f { padding-left: var(--space-4); padding-right: var(--space-4); }
  .cb-xp-h { flex-wrap: wrap; }
  .cb-xp-dl { grid-template-columns: 1fr; gap: 2px; }
  .cb-xp-dl dd { margin-bottom: 6px; }
  .cb-xp-ctx .val > b { font-size: 24px; line-height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-xp, .cb-xp-scrim { animation: none !important; }
}
.cb-xp:focus, .cb-xp:focus-visible { outline: none; }

/* ── src/styles/b-trend.css ── */
/* ── Графики · Динамика и Сравнение (src/charts/b-trend.js) ──────────── */

/* коридор p10–p90 */
.cb-rng { fill: color-mix(in oklab, var(--flame) 16%, transparent); stroke: none; }
.cb-rng-t { stroke: var(--flame); stroke-width: 3; stroke-linecap: round; opacity: .35; }

/* стек площадей: разделитель слоя цветом поверхности */
.cb-sa { fill-opacity: .92; transition: fill-opacity .15s; }
.cb-sa-sep { fill: none; stroke: var(--inset); stroke-width: 1.5; }
.cb-vf.card .cb-sa-sep, .cb-vf.bare .cb-sa-sep { stroke: var(--card); }

/* столбики: промежуток между сегментами стека */
.cb-bar-seg { stroke: var(--inset); stroke-width: 1; }
.cb-vf.card .cb-bar-seg { stroke: var(--card); }
.cb-plot g { transition: opacity .15s; }
.cb-bars-ex { display: grid; gap: var(--space-3); min-width: 0; }
.cb-bars-ex > .cb-seg { justify-self: start; }

/* спарклайн */
.cb-spark { width: 100%; }
.cb-line.thin { stroke-width: 1.75; }
.cb-spark-ex { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.cb-spark-rows { display: grid; gap: 2px; }
.cb-spark-r { display: grid; grid-template-columns: minmax(64px, 88px) minmax(0, 1fr) minmax(64px, auto); align-items: center; gap: var(--space-3); padding: 6px 0; border-bottom: 1px solid var(--border); }
.cb-spark-r:last-child { border-bottom: 0; }
.cb-spark-r .l { font-size: 13px; color: var(--ink-2); }
.cb-spark-r b { font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-kpi-spark { min-height: 0; gap: var(--space-3); }

/* малые кратные */
.cb-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); gap: var(--space-3); }
.cb-sm-c { display: grid; gap: 6px; padding: var(--space-3); border-radius: 12px; background: var(--card); min-width: 0; }
.cb-vf.card .cb-sm-c { background: var(--inset); }
.cb-sm-c .l { font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-sm-c .v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-sm-c .v b { font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cb-sm-c .b { font-size: 11px; line-height: 14px; color: var(--ink-3); }

/* ранжированные полосы */
.cb-rank { position: relative; display: grid; gap: 2px; }
.cb-rank-r { display: grid; grid-template-columns: 16px minmax(0, 1.25fr) minmax(32px, 1fr) 40px 34px; align-items: center; gap: 10px; min-height: 32px; padding: 0 6px; border-radius: 10px; outline: none; cursor: default; transition: opacity .15s, background-color .15s; }
.cb-rank-r:hover, .cb-rank-r:focus-visible { background: color-mix(in oklab, var(--ink) 4%, transparent); }
.cb-rank-r:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.cb-rank-r .n { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.cb-rank-r .l { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-rank-r .trk { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--mono-1); overflow: hidden; }
.cb-rank-r .trk i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--mono-4); }
.cb-rank-r.on .trk i { background: var(--flame); }
.cb-rank-r .v { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cb-rank-r .s { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.cb-rank .cb-vtip { transform: translate(-50%, calc(-100% - 6px)); }

/* гантель */
.cb-db-l { stroke: var(--mono-3); stroke-width: 2; stroke-linecap: round; }
.cb-db-a { fill: var(--inset); stroke: var(--mono-4); stroke-width: 2; }
.cb-vf.card .cb-db-a { fill: var(--card); }

/* slope */
.cb-slope { stroke-width: 2; stroke-linecap: round; }
.cb-slope.em { stroke-width: 3; }
.cb-slope-dim { opacity: .5; transition: opacity .15s; }
.cb-lbl.em { fill: var(--ink); font-weight: 600; }
.cb-hit-line { fill: transparent; stroke: none; }
.cb-hit-line:focus-visible { fill: color-mix(in oklab, var(--ink) 8%, transparent); }

/* аннотированный тренд */
.cb-ann-l { stroke: var(--mono-3); stroke-width: 1; }
.cb-ann-m circle { fill: var(--ink); }
.cb-ann-m text { fill: var(--card); font-size: 11px; font-weight: 600; }
.cb-ann-m.on circle { fill: var(--flame); }
.cb-ann-m.on text { fill: var(--on-fill); }
.cb-ann { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px 16px; }
.cb-ann li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; transition: opacity .15s; }
.cb-ann .n { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--card); font-size: 11px; font-weight: 600; }
.cb-ann b { display: block; font-size: 12px; line-height: 16px; font-weight: 600; }
.cb-ann small { display: block; font-size: 11px; line-height: 14px; color: var(--ink-3); }

/* темп к цели */
.cb-pace-w { display: grid; gap: var(--space-3); }
.cb-pace { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: var(--space-2); }
.cb-pace .m { display: grid; gap: 2px; align-content: start; padding: var(--space-2) 12px; border-radius: 12px; background: var(--card); min-width: 0; }
.cb-vf.card .cb-pace .m { background: var(--inset); }
.cb-pace .m small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-pace .m b { font-size: 18px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-pace .m > span { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-pace .m .cb-delta { justify-self: start; }
.cb-pace .m.need { box-shadow: inset 0 0 0 1.5px var(--flame); }
.cb-pace-exp { stroke: var(--mono-3); stroke-width: 1.25; }
.cb-pace-today { stroke: var(--ink-3); stroke-width: 1; }

/* RankBars: без мест, засечка порога, углубление */
.cb-rank.unranked .cb-rank-r { grid-template-columns: minmax(0, 1.25fr) minmax(32px, 1fr) 40px 34px; }
.cb-rank-r[data-drill] { cursor: pointer; }
.cb-rank-r .trk .thr { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--ink-2); transform: translateX(-1px); }
/* PaceToGoal: план на дату и поправка на поток */
.cb-pace-plan { fill: none; stroke: var(--mono-3); stroke-width: 1.5; }
.cb-pace-adj { stroke: var(--cold); stroke-width: 1; stroke-dasharray: 2 4; }

/* ── src/styles/c-parts.css ── */
/* ── Графики · Состав и Разброс (src/charts/c-parts.js) ───────────── */
/* зазор 2 px цветом поверхности между сегментами */
.cb-seg { stroke: var(--inset); stroke-width: 2; stroke-linejoin: round; transition: opacity .15s; }
.cb-vf.card .cb-seg { stroke: var(--card); }
.cb-seg-on { fill: none; stroke: var(--on-fill); stroke-width: 1.5; pointer-events: none; }
/* текст внутри заливки: цвет задаёт форма (on-fill / ink / card-ink) */
.cb-in { font-size: 11px; font-weight: 600; pointer-events: none; }
.cb-in.lg { font-size: 12px; }
.cb-ring-v { fill: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -.01em; pointer-events: none; }
.cb-ring-l { fill: var(--ink-3); font-size: 11px; font-weight: 500; pointer-events: none; }
.cb-tick { stroke: var(--mono-3); stroke-width: 1; }
.cb-whisk { stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; }
.cb-med { stroke-width: 2; stroke-linecap: round; }
.cb-you { stroke: var(--flame); stroke-width: 2; }
.cb-you-l { fill: var(--ink); font-size: 11px; font-weight: 700; }
.cb-pin { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.cb-band-v { fill: var(--ink); font-size: 13px; font-weight: 700; }
.cb-quad { fill: var(--ink-3); font-size: 11px; font-weight: 500; pointer-events: none; }
.cb-bub { fill: var(--mono-3); fill-opacity: .7; stroke: var(--inset); stroke-width: 1.5; transition: opacity .15s; }
.cb-vf.card .cb-bub { stroke: var(--card); }
.cb-bub.emph { fill: var(--flame); fill-opacity: .9; }
.cb-bub.on { fill-opacity: 1; stroke: var(--ink); }
.cb-plot text.cb-dim { opacity: .35; }

/* легенда с оговоркой */
.cb-legnote { display: flex; flex-direction: column; gap: 6px; }
.cb-vnote { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-ubar { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

/* пиктограмма */
.cb-picto { display: grid; gap: 4px; container-type: inline-size; }
.cb-picto .row { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 8px; border-radius: 12px; outline: none; transition: opacity .15s, background-color .15s; }
.cb-picto .row:hover, .cb-picto .row:focus-visible { background: color-mix(in oklab, var(--ink) 5%, transparent); }
.cb-picto .row:focus-visible { box-shadow: inset 0 0 0 2px var(--ink-3); }
.cb-picto .lbl { display: grid; gap: 1px; min-width: 0; }
.cb-picto .lbl b { font-size: 13px; line-height: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-picto .lbl span { font-size: 12px; line-height: 16px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-picto .ic { display: flex; flex-wrap: wrap; gap: 2px; color: var(--c); min-width: 0; }
.cb-picto .ic .cb-i { width: 20px; height: 20px; }
.cb-picto .more { font-size: 11px; line-height: 20px; color: var(--ink-3); margin-left: 4px; }
.cb-pic-part { position: relative; display: inline-block; width: 20px; height: 20px; color: var(--mono-2); }
.cb-pic-part > .cb-i { position: absolute; left: 0; top: 0; }
.cb-pic-part .f { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; color: var(--c); }
@container (max-width: 400px) { .cb-picto .row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* полоса в ячейке (CellBar): 8 px (sm — 6 px), дорожка нейтральная, скругление только на конце;
   доли — штриховка того же тона (x1 плотная, x2 редкая), «нет данных» — штриховка дорожки, порог — засечка чернилами */
.cb-cbar { --h: 8px; display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-cbar.sm { --h: 6px; }
.cb-cbar .l { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cb-cbar .tr { position: relative; flex: 1 1 48px; min-width: 32px; height: var(--h); display: flex; border-radius: 0 calc(var(--h) / 2) calc(var(--h) / 2) 0; background: color-mix(in oklab, var(--ink) 9%, transparent); }
.cb-cbar .tr > i { display: block; flex: none; height: 100%; }
.cb-cbar .tr > i.v { background: var(--c); }
.cb-cbar .tr > i.x1 { background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 4px); }
.cb-cbar .tr > i.x2 { background: repeating-linear-gradient(135deg, var(--c) 0 1.5px, transparent 1.5px 6px); }
.cb-cbar .tr > i.end { border-radius: 0 calc(var(--h) / 2) calc(var(--h) / 2) 0; }
.cb-cbar .tr > b.th { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); box-shadow: 0 0 0 1px var(--card); }
.cb-cbar .tr > b.mk { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--flame); box-shadow: 0 0 0 1px var(--card); }
.cb-cbar.nd .tr { background: repeating-linear-gradient(135deg, var(--mono-2) 0 1.5px, transparent 1.5px 5px); }
.cb-cbar.nd .l { color: var(--ink-3); }
.cb-cbar.busy .tr { overflow: hidden; }
.cb-cbar.busy .tr > i.run { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: var(--c); border-radius: 0 calc(var(--h) / 2) calc(var(--h) / 2) 0; animation: cb-cbar-run 1.4s var(--motion-ease) infinite; }
@keyframes cb-cbar-run { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .cb-cbar.busy .tr > i.run { animation: none; width: 100%; opacity: .35; } }
.cb-cbar .cb-status { flex: none; font-size: 12px; }
/* ключ к полосам и список-пример */
.cb-cbar-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-cbar-key > span { display: inline-flex; align-items: center; gap: 6px; }
.cb-cbar-key i { display: inline-block; width: 14px; height: 8px; border-radius: 0 4px 4px 0; }
.cb-cbar-key i.v { background: var(--c); }
.cb-cbar-key i.x1 { background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 4px); }
.cb-cbar-key i.x2 { background: repeating-linear-gradient(135deg, var(--c) 0 1.5px, transparent 1.5px 6px); }
.cb-cbar-key i.mk { width: 2px; height: 12px; border-radius: 1px; background: var(--flame); }
.cb-cbar-key i.th { width: 2px; height: 12px; border-radius: 1px; background: var(--ink); }
.cb-cbar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; container-type: inline-size; }
.cb-cbar-list li { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); gap: 12px; align-items: center; min-height: 40px; border-bottom: 1px solid var(--border); }
.cb-cbar-list li:last-child { border-bottom: 0; }
.cb-cbar-list b { font-size: 13px; font-weight: 600; min-width: 0; }
@container (max-width: 480px) { .cb-cbar-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 6px 0; } .cb-cbar-list .cb-cbar { flex-wrap: wrap; } .cb-cbar-list .cb-cbar .tr { flex-basis: 100%; order: -1; } }

/* ── src/styles/d-goal.css ── */
/* ── Графики · «Цель и поток» и «Сроки» (src/charts/d-goal.js) ──────────
   Цвет только токенами. Подписи 11 px не масштабируются. Узкое полотно — через container queries. */

/* общий фокус HTML-марок: кольцо фокуса как у всей системы */
.cb-stages .st, .cb-bullet .tr, .cb-progress .row, .cb-timeline .ev, .cb-aging .stk > i, .cb-uptime .cells { outline: none; }
.cb-stages .st:focus-visible, .cb-progress .row:focus-visible, .cb-timeline .ev:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.cb-bullet .tr:focus-visible, .cb-aging .stk > i:focus-visible, .cb-uptime .cells:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-plot [tabindex]:focus-visible.cb-hit { outline: none; }

/* ── Stages ── */
.cb-stages { display: grid; gap: 12px; }
.cb-stages .st { display: grid; gap: 5px; padding: 4px 6px; margin: -4px -6px; border-radius: 10px; cursor: default; transition: background-color .12s; }
.cb-stages .st.on { background: color-mix(in oklab, var(--ink) 4%, transparent); }
.cb-stages .nm { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; line-height: 18px; min-width: 0; }
.cb-stages .nm > span:first-child { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cb-stages .nm b { font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.cb-stages .tr { height: 10px; border-radius: var(--radius-pill); background: var(--mono-1); overflow: hidden; }
.cb-stages .tr i { display: block; height: 100%; border-radius: inherit; background: var(--mono-4); transition: background-color .12s; }
.cb-stages .st.em .tr i { background: var(--flame); }
.cb-stages .st.on .tr i { background: var(--ink); }
.cb-stages .st.em.on .tr i { background: var(--flame-deep); }
.cb-stages .sub { font-size: 11px; line-height: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── Funnel ── */
.cb-fn-shape { stroke-width: 3; stroke-linejoin: round; transition: opacity .15s; }
.cb-fn-na { fill: none; stroke: var(--mono-3); stroke-dasharray: 4 4; }

/* ── Sankey ── */
.cb-sk-ln { fill-opacity: .34; transition: fill-opacity .15s; outline: none; cursor: pointer; }
.cb-sk-ln.on { fill-opacity: .7; }
.cb-sk-ln.dim { fill-opacity: .1; }
.cb-sk-ln:focus-visible { stroke: var(--focus); stroke-width: 1.5; }
.cb-sk-node { transition: opacity .15s; }
.cb-sk-node.dim, .cb-sk-lbl.dim, .cb-sk-sub.dim { opacity: .4; }
.cb-sk-lbl, .cb-sk-sub { paint-order: stroke; stroke: var(--inset); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.cb-vf.card .cb-sk-lbl, .cb-vf.card .cb-sk-sub { stroke: var(--card); }
.cb-sk-lbl { fill: var(--ink); font-size: 12px; font-weight: 500; }
.cb-sk-sub { fill: var(--ink-3); font-size: 11px; font-weight: 500; }

/* ── Waterfall ── */
.cb-wf-bar { transition: opacity .15s; }
.cb-wf-v { fill: var(--ink-2); font-size: 11px; font-weight: 600; }
.cb-wf-conn { stroke: var(--mono-3); stroke-width: 1; stroke-dasharray: 3 3; shape-rendering: crispEdges; }

/* ── Bullet ── */
.cb-bullet { display: grid; gap: 16px; }
.cb-bullet .row { display: grid; gap: 6px; min-width: 0; }
.cb-bullet .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; font-size: 13px; line-height: 18px; }
.cb-bullet .hd .l { font-weight: 500; min-width: 0; }
.cb-bullet .hd .v { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 12px; }
.cb-bullet .hd .v b { color: var(--ink); font-size: 13px; font-weight: 600; }
.cb-bullet .tr { position: relative; height: 20px; border-radius: 6px; background: var(--mono-1); cursor: default; }
.cb-bullet .tr i { position: absolute; top: 0; bottom: 0; left: 0; }
.cb-bullet .tr .z { border-radius: 6px 0 0 6px; }
.cb-bullet .tr .z1 { background: var(--mono-3); }
.cb-bullet .tr .z2 { background: var(--mono-2); border-radius: 0; }
.cb-bullet .tr .fact { top: 6px; bottom: 6px; border-radius: var(--radius-pill); background: var(--flame); transition: background-color .12s; }
.cb-bullet .row.on .tr .fact { background: var(--flame-deep); }
.cb-bullet .tr .plan { top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.cb-bullet .tr .norm { top: -3px; bottom: -3px; width: 0; margin-left: -1px; border-left: 2px dashed var(--ink-2); }
.cb-bullet .ft { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; font-size: 11px; line-height: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-bullet .ft .cb-status { font-size: 12px; }

/* ── Gauge ── */
.cb-gg-zone { fill: none; stroke-width: 4; stroke-linecap: butt; }
.cb-gg-track { fill: none; stroke: var(--mono-1); stroke-width: 18; stroke-linecap: round; }
.cb-gg-val { fill: none; stroke: var(--flame); stroke-width: 18; stroke-linecap: round; transition: stroke .12s; }
.cb-gg-val.on { stroke: var(--flame-deep); }
.cb-gg-big { fill: var(--ink); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-gg-st { display: flex; align-items: center; justify-content: center; gap: 4px 12px; flex-wrap: wrap; font-size: 11px; line-height: 14px; color: var(--ink-3); text-align: center; }
.cb-gg-st .cb-status { font-size: 12px; }

/* ── Radial ── */
.cb-radial { display: flex; align-items: center; gap: var(--space-4) var(--space-5); flex-wrap: wrap; }
.cb-radial > svg { display: block; flex: none; overflow: visible; }
.cb-radial > .lg { flex: 1 1 200px; min-width: 0; }
.cb-rd-track { fill: none; stroke: var(--mono-1); stroke-width: 12; }
.cb-rd-arc { fill: none; stroke-width: 12; stroke-linecap: round; transition: opacity .15s; }
.cb-rd-hit { fill: none; stroke: transparent; pointer-events: stroke; cursor: default; outline: none; }
.cb-rd-hit[data-drill] { cursor: pointer; }
.cb-rd-hit:focus-visible { stroke: color-mix(in oklab, var(--ink) 10%, transparent); }
.cb-rd-c { fill: var(--ink); font-size: 13px; font-weight: 600; }

/* ── ProgressList ── */
.cb-progress { display: grid; container-type: inline-size; }
.cb-progress .row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(80px, 1.4fr) auto 112px; align-items: center; gap: 6px 16px; padding: 10px 8px; margin: 0 -8px; border-radius: 10px; border-bottom: 1px solid var(--border); cursor: default; transition: background-color .12s; }
.cb-progress .row:last-child { border-bottom: 0; }
.cb-progress .row.on { background: color-mix(in oklab, var(--ink) 4%, transparent); }
.cb-progress .nm { display: grid; min-width: 0; }
.cb-progress .nm b { font-size: 13px; line-height: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-progress .nm span { font-size: 11px; line-height: 14px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* трек заметнее: 10 px как у Stages/RankBars и ступень трека mono-2 — на inset (обе темы) mono-1 почти сливается с фоном */
.cb-progress .tr { height: 10px; border-radius: var(--radius-pill); background: var(--mono-2); overflow: hidden; }
.cb-progress .tr i { display: block; height: 100%; border-radius: inherit; }
.cb-progress .nu { display: flex; align-items: baseline; gap: 8px; justify-content: flex-end; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-progress .nu b { font-size: 13px; color: var(--ink); font-weight: 600; }
.cb-progress .nu small { font-size: 11px; min-width: 34px; text-align: right; }
.cb-progress .stt { min-width: 0; }
@container (max-width: 520px) {
  .cb-progress .row { grid-template-columns: minmax(0, 1fr) auto; }
  .cb-progress .tr { grid-column: 1 / -1; grid-row: 2; }
  .cb-progress .nu { grid-column: 1; grid-row: 3; justify-content: flex-start; }
  .cb-progress .stt { grid-column: 2; grid-row: 1; justify-self: end; }
}

/* ── Gantt ── */
.cb-gt-row { fill: color-mix(in oklab, var(--ink) 5%, transparent); }
.cb-gt-done { fill: var(--flame); }
.cb-gt-ms { fill: var(--inset); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.cb-vf.card .cb-gt-ms { fill: var(--card); }
.cb-gt-ms.done { fill: var(--ink); }
.cb-gt-today { stroke: var(--ink); stroke-width: 1; }
.cb-gt-todayl { fill: var(--ink); font-size: 11px; font-weight: 600; }
.cb-gantt .cb-sw.diamond { width: 9px; height: 9px; border-radius: 1px; transform: rotate(45deg) scale(.85); }
.cb-gantt .cb-sw.line { width: 2px; height: 12px; }

/* ── Timeline ── */
.cb-timeline { list-style: none; margin: 0; padding: 0; display: grid; container-type: inline-size; }
.cb-timeline .ev { display: grid; grid-template-columns: 64px 32px minmax(0, 1fr); gap: 0 12px; padding: 0 6px; margin: 0 -6px; border-radius: 10px; cursor: default; transition: background-color .12s; }
.cb-timeline .ev.on { background: color-mix(in oklab, var(--ink) 4%, transparent); }
.cb-timeline .when { display: grid; align-content: start; padding-top: 7px; font-variant-numeric: tabular-nums; text-align: right; }
.cb-timeline .when b { font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.cb-timeline .when span { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-timeline .rail { position: relative; display: flex; justify-content: center; }
.cb-timeline .rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--border); }
.cb-timeline .ev:first-child .rail::before { top: 16px; }
.cb-timeline .ev:last-child .rail::before { bottom: auto; height: 16px; }
.cb-timeline .dot { position: relative; margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--card); color: var(--ink-2); box-shadow: 0 0 0 3px var(--inset); }
.cb-vf.card .cb-timeline .dot { background: var(--inset); box-shadow: 0 0 0 3px var(--card); }
.cb-timeline .ev.ok .dot { background: var(--ok-soft); color: var(--ok); }
.cb-timeline .ev.warn .dot { background: var(--warn-soft); color: var(--warn); }
.cb-timeline .ev.bad .dot { background: var(--bad-soft); color: var(--bad); }
.cb-timeline .body { display: grid; gap: 2px; padding: 7px 0 16px; min-width: 0; }
.cb-timeline .body > b { font-size: 13px; line-height: 18px; font-weight: 600; }
.cb-timeline .body p { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cb-timeline .meta { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin-top: 2px; font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-timeline .meta .cb-status { font-size: 12px; }
@container (max-width: 400px) {
  .cb-timeline .ev { grid-template-columns: 32px minmax(0, 1fr); }
  .cb-timeline .when { grid-column: 2; grid-row: 1; display: flex; gap: 8px; align-items: baseline; text-align: left; padding-top: 9px; }
  .cb-timeline .rail { grid-column: 1; grid-row: 1 / span 2; }
  .cb-timeline .body { grid-column: 2; padding-top: 0; }
}

/* ── Hill ── */
.cb-hl-fill { fill: var(--mono-1); opacity: .6; }
.cb-hl-curve { fill: none; stroke: var(--mono-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cb-hl-lbl { fill: var(--ink-2); font-size: 11px; font-weight: 500; paint-order: stroke; stroke: var(--inset); stroke-width: 3px; stroke-linejoin: round; transition: opacity .15s; }
.cb-vf.card .cb-hl-lbl { stroke: var(--card); }
.cb-hl-lbl.on { fill: var(--ink); font-weight: 600; }
.cb-hl-lead { stroke: var(--mono-3); stroke-width: 1; }
.cb-hl-stuck { fill: none; stroke: var(--flame); stroke-width: 2; stroke-dasharray: 3 3; }
.cb-hl-dot { transition: opacity .15s; }

/* ── StageAging ── */
.cb-aging { display: grid; gap: 14px; container-type: inline-size; }
.cb-aging .row { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; }
.cb-aging .nm { display: grid; min-width: 0; }
.cb-aging .nm b { font-size: 13px; line-height: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-aging .nm span { font-size: 11px; line-height: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-aging .bar { min-width: 0; }
.cb-aging .stk { display: flex; gap: 2px; height: 24px; min-width: 8px; }
.cb-aging .stk > i { display: flex; align-items: center; justify-content: center; flex-basis: 0; min-width: 3px; border-radius: 5px; font-style: normal; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; cursor: default; transition: opacity .15s; }
.cb-aging .stk > i.dim { opacity: .45; }
.cb-aging .old { font-size: 11px; line-height: 14px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cb-aging .old b { color: var(--ink); font-size: 13px; font-weight: 600; }
@container (max-width: 480px) {
  .cb-aging .row { grid-template-columns: minmax(0, 1fr) auto; }
  .cb-aging .bar { grid-column: 1 / -1; grid-row: 2; }
  .cb-aging .old { grid-column: 2; grid-row: 1; }
}

/* ── UptimeBar ── */
.cb-uptime { display: grid; gap: 8px; container-type: inline-size; }
.cb-uptime .top { display: flex; justify-content: space-between; align-items: flex-end; gap: 4px 16px; flex-wrap: wrap; }
.cb-uptime .big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cb-uptime .big b { font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cb-uptime .big span, .cb-uptime .side { font-size: 12px; line-height: 16px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-uptime .cells { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; height: 32px; cursor: default; }
.cb-uptime .cells i { display: block; min-width: 0; border-radius: 3px; transition: opacity .12s; }
.cb-uptime .cells i.na { background: repeating-linear-gradient(-45deg, var(--mono-2) 0 2px, var(--mono-1) 2px 4px) !important; }
.cb-uptime .cells:hover i:not(.on), .cb-uptime .cells:focus-visible i:not(.on) { opacity: .55; }
.cb-uptime .cells i.on { opacity: 1; box-shadow: 0 0 0 1.5px var(--ink); }
.cb-uptime .ax { display: flex; justify-content: space-between; font-size: 11px; line-height: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@container (max-width: 520px) { .cb-uptime .cells { gap: 1px; height: 28px; } .cb-uptime .cells i { border-radius: 1.5px; } }

/* углубление и касания */
.cb-stages .st[data-drill], .cb-progress .row[data-drill], .cb-timeline .ev[data-drill], .cb-bullet .tr[data-drill], .cb-aging .stk > i[data-drill], .cb-uptime .cells[data-drill] { cursor: pointer; }
.cb-timeline .ev.touch-primary .dot { background: var(--flame-soft); color: var(--ink); }
.cb-timeline .ev.reschedule .dot { background: var(--warn-soft); color: var(--warn); }
.cb-timeline .ev.cancel .dot { background: var(--bad-soft); color: var(--bad); }
.cb-bullet .hd .v .fl { color: var(--ink-3); }
/* Stages слева направо: колонки с вертикальной полосой; узкий контейнер — обратно строками */
.cb-stages.hor { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; container-type: inline-size; }
.cb-stages.hor .st { grid-template-rows: auto 96px auto; margin: 0; }
.cb-stages.hor .nm { flex-direction: column; align-items: flex-start; gap: 2px; }
.cb-stages.hor .nm > span:first-child { white-space: normal; }
.cb-stages.hor .tr { height: 96px; width: 100%; border-radius: 8px; display: flex; align-items: flex-end; }
.cb-stages.hor .tr i { width: 100%; border-radius: 8px; }
@media (max-width: 560px) { .cb-stages.hor { grid-auto-flow: row; } .cb-stages.hor .st { grid-template-rows: auto; } .cb-stages.hor .tr { height: 10px; display: block; } .cb-stages.hor .tr i { height: 100% !important; width: var(--w); } }

/* ── src/styles/e-heat.css ── */
/* ── Тепловые карты и инфографика (src/charts/e-heat.js) ─────────────── */
.cb-hstack { display: grid; gap: var(--space-4); min-width: 0; }
.cb-rel { position: relative; min-width: 0; container-type: inline-size; }

/* сетка: зазор 2 px, радиус 4; прокрутка внутри своей обёртки */
.cb-heat { position: relative; min-width: 0; --hmin: 40px; --hmax: 1fr; --hh: 30px; }
.cb-heat.hr { --hmin: 24px; --hh: 26px; }
.cb-heat.co { --hmin: 42px; }
.cb-heat.rk { --hmin: 56px; }
.cb-heat.cal { --hmin: 11px; --hmax: 22px; }
.cb-hwrap { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 6px; outline: none; scrollbar-width: thin; }
.cb-hwrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-hgrid { display: grid; grid-template-columns: var(--cols, auto); gap: 2px; align-items: stretch; width: 100%; min-width: max-content; font-size: 12px; line-height: 14px; font-variant-numeric: tabular-nums; }
.cb-heat.cal .cb-hgrid { min-width: min-content; }

.cb-hgrid .ch, .cb-hgrid .mh { color: var(--ink-3); font-size: 11px; font-weight: 500; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding-bottom: 2px; min-width: 0; white-space: nowrap; }
.cb-hgrid .ch small { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.cb-hgrid .ch.corner, .cb-hgrid .ch.ex { align-items: flex-start; text-align: left; }
.cb-hgrid .ch.tot { align-items: flex-end; }
.cb-hgrid .mh { align-items: flex-start; overflow: hidden; cursor: default; }
.cb-hgrid .mh span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cb-hgrid .rh { display: flex; flex-direction: column; justify-content: center; padding-right: 8px; color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; position: sticky; left: 0; z-index: 1; background: var(--inset); }
.cb-vf.card .cb-hgrid .rh { background: var(--card); }
.cb-hgrid .rh small { color: var(--ink-3); font-size: 11px; font-weight: 400; }
.cb-hgrid .rh.off { color: var(--ink-3); }
.cb-hgrid .rh.weakr span, .cb-hgrid .rh.weakr small { color: var(--ink-3); }
.cb-hgrid .rh.avg { color: var(--ink-3); font-weight: 500; }
.cb-hgrid .ex { display: flex; align-items: center; padding: 0 8px 0 2px; color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.cb-hgrid .tot { display: flex; align-items: center; justify-content: flex-end; padding: 0 2px 0 8px; color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cb-hgrid .tot.avgc { justify-content: center; padding: 0; font-weight: 500; color: var(--ink-3); border-top: 1px solid var(--border); min-height: var(--hh); }

/* клетка */
.cb-hc { position: relative; min-height: var(--hh); border-radius: 4px; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink); cursor: default; }
.cb-hc > span { overflow: hidden; white-space: nowrap; max-width: 100%; padding: 0 2px; }
.cb-heat.dense .cb-hc > span { display: none; }
.cb-hc.out { background: transparent; visibility: hidden; }
.cb-hc.zero { background: var(--mono-1); color: var(--ink-2); font-weight: 400; }   /* ноль бледнее весом, не цветом ниже 4,5:1 */
.cb-hc.na { background: repeating-linear-gradient(-45deg, var(--mono-2) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1px var(--mono-1); }
.cb-hc.future { background: transparent; box-shadow: inset 0 0 0 1px var(--mono-2); }
.cb-hc.weak { background: transparent; color: var(--ink-3); font-weight: 400; box-shadow: inset 0 0 0 1px var(--border); }
.cb-hc.off::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 6px); opacity: .8; pointer-events: none; }
.cb-hc.over { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cb-hc.over::before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 7px solid var(--ink); border-left: 7px solid transparent; border-top-right-radius: 4px; }
.cb-hc.act { box-shadow: 0 0 0 2px var(--ink); z-index: 2; }
.cb-hc.act.over { box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 1.5px var(--ink); }

/* календарь: квадраты, радиус 2, «сегодня» обведён, выходные приглушены */
.cb-heat.cal .cb-hgrid { align-items: center; }
.cb-heat.cal .cb-hc { min-height: 0; width: 100%; min-width: 0; aspect-ratio: 1; border-radius: 2px; }   /* квадрат от ширины колонки: высота строки не растягивает клетку шире колонки, зазор 2 px виден (У-0243) */
.cb-heat.cal .rh { font-size: 11px; line-height: 11px; }
.cb-heat.cal .cb-hc.wk { opacity: .62; }
.cb-heat.cal .cb-hc.today { box-shadow: 0 0 0 2px var(--ink); z-index: 1; opacity: 1; }
.cb-heat.cal .cb-hc.over::before { border-top-width: 5px; border-left-width: 5px; border-top-right-radius: 2px; }
.cb-heat.cal .tot { font-weight: 500; font-size: 11px; }

/* легенда-шкала */
.cb-hleg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-hleg .sc { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.cb-hleg .ramp { display: inline-flex; gap: 2px; }
.cb-hleg .ramp i { width: 16px; height: 10px; border-radius: 3px; }
.cb-hleg .ramp i.mid { box-shadow: inset 0 0 0 1px var(--mono-3); }
.cb-hleg .ctr { margin-left: 4px; }
.cb-hleg .it, .cb-hleg .thr { display: inline-flex; align-items: center; gap: 6px; }
.cb-hleg .thr { color: var(--ink-2); }
.cb-hleg .thr.none { color: var(--ink-3); border-bottom: 1px dashed var(--ink-3); }
.cb-hleg .k { position: relative; display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.cb-hleg .k.zero { background: var(--mono-1); }
.cb-hleg .k.na { background: repeating-linear-gradient(-45deg, var(--mono-3) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--mono-1); }
.cb-hleg .k.future { box-shadow: inset 0 0 0 1px var(--mono-3); }
.cb-hleg .k.weak { box-shadow: inset 0 0 0 1px var(--mono-3); }
.cb-hleg .k.today { box-shadow: inset 0 0 0 2px var(--ink); background: var(--seq-2); }
.cb-hleg .k.wkk { background: var(--seq-3); opacity: .62; }
.cb-hleg .k.off { background: var(--seq-3); }
.cb-hleg .k.off::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 5px); }
.cb-hleg .k.over { background: var(--seq-2); box-shadow: inset 0 0 0 1.5px var(--ink); }
.cb-hleg .k.over::before { content: ""; position: absolute; top: 0; right: 0; border-top: 5px solid var(--ink); border-left: 5px solid transparent; }

/* мини-спарклайн и мини-бар */
.cb-hspark { display: block; overflow: visible; }
.cb-mbar { display: grid; grid-template-columns: 64px auto; align-items: center; gap: 8px; }
.cb-mbar::after { content: ""; grid-column: 1; grid-row: 1; height: 6px; border-radius: 3px; background: var(--mono-1); }
.cb-mbar i { grid-column: 1; grid-row: 1; z-index: 1; display: block; height: 6px; border-radius: 3px; background: var(--ink); max-width: 64px; }
.cb-mbar em { grid-column: 2; grid-row: 1; font-style: normal; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* MetricTable */
.cb-mtab { overflow-x: auto; border-radius: 12px; background: var(--card); }
.cb-vf.card .cb-mtab { background: var(--inset); }
.cb-mtab table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.cb-mtab th { text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-3); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cb-mtab th.r, .cb-mtab td.r { text-align: right; }
.cb-mtab td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.cb-mtab tr:last-child td { border-bottom: 0; }
.cb-mtab tbody tr { outline: none; cursor: default; }
.cb-mtab tbody tr:hover td, .cb-mtab tbody tr:focus-visible td { background: var(--inset); }
.cb-vf.card .cb-mtab tbody tr:hover td { background: var(--card); }
.cb-mtab tbody tr:focus-visible td:first-child { box-shadow: inset 2px 0 0 var(--focus); }
.cb-mtab .nm b { display: block; font-weight: 600; }
.cb-mtab .nm small { display: block; font-size: 12px; color: var(--ink-3); }
.cb-mtab .now b { font-size: 15px; font-weight: 600; }
.cb-mtab .now small { margin-left: 3px; font-size: 12px; color: var(--ink-3); }

/* Compare: было / стало крупно */
.cb-cmpx { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-3); align-items: stretch; }
.cb-cmpx .side { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); border-radius: 12px; background: var(--card); outline: none; min-width: 0; }
.cb-vf.card .cb-cmpx .side { background: var(--inset); }
.cb-cmpx .side:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.cb-cmpx .side small { font-size: 13px; color: var(--ink-2); }
.cb-cmpx .side small.f { font-size: 12px; color: var(--ink-3); }
.cb-cmpx .side b { font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-cmpx .side b span { font-size: 18px; font-weight: 500; color: var(--ink-3); margin-left: 4px; letter-spacing: 0; }
.cb-cmpx .side.a b { color: var(--ink-2); }
.cb-cmpx .mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 var(--space-2); text-align: center; }
.cb-cmpx .mid > b { font-size: 20px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-cmpx .mid small { font-size: 12px; color: var(--ink-3); }
@container (max-width: 420px) { .cb-cmpx { grid-template-columns: 1fr; } }
@container (max-width: 420px) { .cb-cmpx .mid { flex-direction: row; flex-wrap: wrap; } .cb-cmpx .side b { font-size: 34px; line-height: 38px; } }

/* KpiStrip */
.cb-kstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: var(--space-2); }
.cb-kstrip .k { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) var(--space-4); border-radius: 12px; background: var(--card); outline: none; min-width: 0; }
.cb-vf.card .cb-kstrip .k { background: var(--inset); }
.cb-kstrip .k:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.cb-kstrip .k > small { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.cb-kstrip .k > b { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-kstrip .k > b > span { font-size: 14px; font-weight: 500; color: var(--ink-3); margin-left: 3px; letter-spacing: 0; }
.cb-kstrip .ft { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.cb-kstrip .ft .cb-cmp { font-size: 12px; gap: 6px; }

/* Benchmark */
.cb-bm { display: grid; gap: var(--space-4); }
.cb-bm .it { display: grid; gap: 6px; outline: none; border-radius: 8px; }
.cb-bm .it:focus-visible { box-shadow: 0 0 0 2px var(--focus); outline-offset: 4px; }
.cb-bm .hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-bm .hd .nm { font-size: 13px; color: var(--ink-2); font-weight: 500; margin-right: auto; }
.cb-bm .hd b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-bm .hd b span { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 3px; }
.cb-bm .hd .cb-cmp { font-size: 12px; }
.cb-bm .trk { position: relative; height: 10px; border-radius: 5px; background: var(--mono-1); }
.cb-bm .trk .zone { position: absolute; top: 0; bottom: 0; background: var(--mono-2); border-radius: 5px; }
.cb-bm .trk .med { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink-2); border-radius: 1px; }
.cb-bm .trk .dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 2px var(--inset); }
.cb-vf.card .cb-bm .trk .dot { box-shadow: 0 0 0 2px var(--card); }
.cb-bm .it > small { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-bm-k { display: inline-block; flex: none; }
.cb-bm-k.med { width: 2px; height: 12px; border-radius: 1px; background: var(--ink-2); }
.cb-bm-k.best { width: 16px; height: 8px; border-radius: 4px; background: var(--mono-2); }

/* TalkRatio */
.cb-talk { display: grid; gap: 10px; }
.cb-talk .row { display: grid; grid-template-columns: minmax(96px, 128px) minmax(0, 1fr) 44px; align-items: center; gap: 12px; outline: none; border-radius: 6px; }
.cb-talk .row:focus-visible { box-shadow: 0 0 0 2px var(--focus); outline-offset: 3px; }
.cb-talk .row.all { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.cb-talk .nm { display: flex; flex-direction: column; font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-talk .nm small { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.cb-talk .bar { position: relative; display: flex; gap: 2px; height: 14px; }
.cb-talk .bar i { display: block; height: 100%; border-radius: 3px; }
.cb-talk .bar .nrm { position: absolute; top: -5px; bottom: -5px; border-left: 1.5px dashed var(--ink); border-right: 1.5px dashed var(--ink); pointer-events: none; }
.cb-talk .row > b { text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-tr-k { display: inline-block; width: 14px; height: 10px; border-left: 1.5px dashed var(--ink); border-right: 1.5px dashed var(--ink); flex: none; }
.cb-vleg .thr-none { color: var(--ink-3); border-bottom: 1px dashed var(--ink-3); }
@container (max-width: 360px) { .cb-talk .row { grid-template-columns: 1fr 44px; } .cb-talk .row .bar { grid-column: 1 / -1; grid-row: 2; } }

/* UsageMeter */
.cb-um { display: grid; gap: var(--space-4); }
.cb-um .it { display: grid; gap: 6px; outline: none; border-radius: 8px; }
.cb-um .it:focus-visible { box-shadow: 0 0 0 2px var(--focus); outline-offset: 4px; }
.cb-um .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cb-um .hd .nm { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cb-um .hd .cb-status { font-size: 12px; }
.cb-um .v { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.cb-um .v b { font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.cb-um .v span { font-size: 12px; color: var(--ink-3); }
.cb-um .meter { position: relative; height: 12px; border-radius: 6px; background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--border); }
.cb-um .meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--flame); }
.cb-um .meter s { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 1.5px dashed var(--ink); text-decoration: none; }
.cb-um.noth .meter s { display: none; }
.cb-um-k { display: inline-block; width: 16px; height: 10px; border-radius: 3px; background: repeating-linear-gradient(-45deg, var(--mono-3) 0 1px, transparent 1px 4px); box-shadow: inset 0 0 0 1px var(--border); flex: none; }
.cb-um-t { display: inline-block; width: 0; height: 12px; border-left: 1.5px dashed var(--ink); flex: none; }

/* HealthCheck */
.cb-health { display: grid; border-radius: 12px; background: var(--card); overflow: hidden; }
.cb-vf.card .cb-health { background: var(--inset); }
.cb-health .it { display: grid; grid-template-columns: 118px minmax(0, 1fr) 150px 44px; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); outline: none; }
.cb-health .it:last-child { border-bottom: 0; }
.cb-health .it:hover, .cb-health .it:focus-visible { background: var(--inset); }
.cb-health .it:focus-visible { box-shadow: inset 2px 0 0 var(--focus); }
.cb-health .nm { display: flex; flex-direction: column; min-width: 0; }
.cb-health .nm b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-health .nm small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-health .lat { display: flex; align-items: center; gap: 6px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.cb-health .lat b { font-size: 13px; font-weight: 600; }
.cb-health .lat small { font-size: 11px; color: var(--ink-3); }
.cb-health .lat .lb { position: relative; flex: 1; max-width: 70px; height: 6px; border-radius: 3px; background: var(--mono-1); }
.cb-health .lat .lb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--mono-4); }
.cb-health .lat .lb s { position: absolute; top: -3px; bottom: -3px; border-left: 1.5px dashed var(--ink); text-decoration: none; }
.cb-health .tm { font-size: 12px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-hc-k { display: inline-block; width: 0; height: 12px; border-left: 1.5px dashed var(--ink); flex: none; }
@container (max-width: 520px) {
  .cb-health .it { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .cb-health .it .nm { grid-column: 1; grid-row: 1; }
  .cb-health .it .cb-status { grid-column: 2; grid-row: 1; justify-self: end; }
  .cb-health .it .lat { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .cb-health .it .tm { grid-column: 2; grid-row: 2; }
}

/* ActivityFeed */
.cb-feed { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cb-feed li:first-child { padding-top: 0; }
.cb-feed li:last-child { border-bottom: 0; padding-bottom: 0; }
.cb-feed .t { font-size: 13px; line-height: 19px; color: var(--ink-2); min-width: 0; }
.cb-feed .t b { color: var(--ink); font-weight: 600; }
.cb-feed .t .role { margin-left: 6px; font-size: 11px; color: var(--ink-3); padding: 1px 6px; border-radius: var(--radius-pill); background: var(--card); white-space: nowrap; }
.cb-vf.card .cb-feed .t .role { background: var(--inset); }
.cb-feed .t .sub { display: block; font-size: 12px; color: var(--ink-3); }
.cb-feed .tm { font-size: 12px; line-height: 19px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; outline: none; border-radius: 4px; cursor: default; }
.cb-feed .tm:focus-visible { box-shadow: 0 0 0 2px var(--focus); }

/* углубление: клетки открывают разбор только при провайдере */
.cb-heat.drill .cb-hgrid [data-k] { cursor: pointer; }
.cb-heat.drill .cb-hc.v:hover { box-shadow: inset 0 0 0 2px var(--ink); }

/* ── src/styles/f-shell.css ── */
/* ── Каркас больших экранов (src/charts/f-shell.js) ─────────────────────
   Навигация, сквозной контекст, фильтры, раскрытие, свежесть, права, носители.
   Цвет только токенами; линии 1 px; всё нажимаемое скруглено radius-pill; фокус — общий 2 px. */

/* пример в галерее */
.cb-ex-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.cb-ex-col > .cb-seg { flex-wrap: wrap; border-radius: var(--radius-inset); justify-self: start; }
.cb-ex-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; }
.cb-ex-note { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 18px; }
.cb-ex-note b { color: var(--ink); font-weight: 600; }
.cb-ex-code { display: block; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-size-adjust: none; color: var(--ink-2); background: var(--inset); border-radius: var(--radius-chip); padding: 8px 10px; overflow-wrap: break-word; }
.cb-inset-box { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-4); }
.cb kbd, .cb-kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); font: 500 11px/1 var(--font-sans); color: var(--ink-2); font-size-adjust: none; }

/* ── Всплывающая панель и пункт меню ── */
.cb-pop { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.cb-pop-p { position: absolute; top: calc(100% + 6px); z-index: 30; background: var(--card); color: var(--ink); border-radius: var(--radius-inset); box-shadow: var(--shadow-pop); padding: 6px; display: grid; gap: 2px; max-height: min(420px, 70vh); overflow: auto; }
.cb-pop-body { display: grid; gap: var(--space-3); padding: 8px; }
.cb-pop-foot { display: flex; justify-content: flex-end; gap: var(--space-2); }
.cb-mi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; font-size: 13px; line-height: 18px; }
.cb-mi:hover, .cb-mi:focus-visible { background: var(--inset); }
.cb-mi:focus-visible { outline-offset: -2px; }
.cb-mi .l { flex: 1; min-width: 0; display: grid; }
.cb-mi .l small { color: var(--ink-3); font-size: 11px; line-height: 14px; }
.cb-mi.on { font-weight: 600; }
.cb-mi > .cb-i { color: var(--ink-2); }

/* чип (общий вид кнопки фильтра/контекста) */
.cb-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--control-h-sm); padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap; max-width: 100%; transition: background-color .15s; }
.cb-chip:hover { background: var(--inset-hover); }
.cb-chip > span { overflow: hidden; text-overflow: ellipsis; }
.cb-chip.add { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-chip.add:hover { background: var(--inset); }

/* ── 1. Breadcrumbs ── */
.cb-crumbs ol { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; }
.cb-crumbs li { display: inline-flex; align-items: center; gap: 2px; min-width: 0; flex: none; }
.cb-crumbs li:last-child { flex: 0 1 auto; }
.cb-crumbs .sep { color: var(--ink-3); display: inline-grid; place-items: center; width: 16px; }
.cb-crumbs a { color: var(--ink-2); text-decoration: none; padding: 3px 6px; border-radius: 8px; white-space: nowrap; }
.cb-crumbs a:hover { color: var(--ink); background: var(--inset); }
.cb-crumbs .cur { color: var(--ink); font-weight: 600; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-crumbs-more { height: 24px; min-width: 28px; padding: 0 6px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); cursor: pointer; font-weight: 600; }
.cb-crumbs-more:hover { color: var(--ink); background: var(--inset-hover); }

/* ── 2. ContourSwitch ── */
.cb-contour { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); min-width: 0; }
.cb-contour-row { display: flex; gap: 2px; padding: 4px; background: var(--inset); border-radius: var(--radius-pill); max-width: 100%; overflow-x: auto; scrollbar-width: none; width: fit-content; }
.cb-contour-row::-webkit-scrollbar { display: none; }
.cb-contour-row button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); font-weight: 500; font-size: 13px; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; flex-shrink: 0; }
.cb-contour-row button:hover { color: var(--ink); background: var(--card); }
.cb-contour-row button.on { background: var(--primary); color: var(--on-primary); }
.cb-contour-row button.locked { color: var(--ink-3); }
.cb-contour-row button.locked[aria-expanded="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-ring); }
.cb-contour-who { display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: 12px; line-height: 16px; color: var(--ink-3); padding: 0 6px; }
.cb-contour-who b { color: var(--ink-2); font-weight: 500; }
.cb-contour-lock { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: 10px 12px; background: var(--inset); border-radius: var(--radius-inset); }
.cb-contour-lock .ic { width: 32px; height: 32px; border-radius: 50%; background: var(--card); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.cb-contour-lock .t { display: grid; flex: 1; min-width: 180px; font-size: 13px; line-height: 18px; }
.cb-contour-lock .t span { color: var(--ink-2); font-size: 12px; line-height: 16px; }

/* ── 3. ContextBar + PeriodControl ── */
.cb-ctx { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-1); background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); min-width: 0; }
.cb-ctx-b { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 10px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); cursor: pointer; text-align: left; max-width: 100%; min-width: 0; transition: background-color .15s; }
.cb-ctx-b:hover, .cb-ctx-b[aria-expanded="true"] { background: var(--inset-hover); }
.cb-ctx-b > .cb-i { color: var(--ink-2); }
.cb-ctx-b .t { display: grid; min-width: 0; line-height: 15px; }
.cb-ctx-b .t small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-ctx-b .t b { font-size: 13px; line-height: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-ctx-st { font-size: 11px; line-height: 14px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--ok-soft); color: var(--ok); white-space: nowrap; }
.cb-ctx-st.part { background: var(--warn-soft); color: var(--ink); }
.cb-ctx-fresh { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 0 8px; font-size: 12px; color: var(--ink-3); white-space: nowrap; flex-wrap: wrap; }
.cb-period { display: grid; gap: var(--space-3); min-width: 0; }
.cb-period .cb-seg { width: 100%; flex-wrap: wrap; border-radius: var(--radius-chip); }
.cb-period .cb-seg button { flex: 1 0 auto; padding: 0 var(--space-2); }   /* растягиваются от своей подписи, не от нуля: тесно — переносятся строкой (flex-wrap), а не сжимаются (У-0236) */
.cb-period-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.cb-period-range label, .cb-fform label { display: grid; gap: 4px; font-size: 12px; color: var(--ink-3); min-width: 0; }
.cb-period-range input, .cb-fform select, .cb-fform input, .cb-fsave input { height: var(--control-h-sm); padding: 0 10px; border: 0; border-radius: var(--radius-chip); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink); font: inherit; font-size: 13px; min-width: 0; width: 100%; color-scheme: inherit; }
.cb-period-range input:focus-visible, .cb-fform select:focus-visible, .cb-fform input:focus-visible, .cb-fsave input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cb-period-state { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) 12px; background: var(--inset); border-radius: var(--radius-chip); font-size: 13px; }
.cb-period-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }

/* ── 4. FilterBar ── */
.cb-filter { display: grid; gap: var(--space-2); min-width: 0; }
.cb-filter-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.cb-chip.view { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); max-width: 280px; }
.cb-fchip { display: inline-flex; align-items: center; gap: 4px; height: var(--control-h-sm); padding: 0 4px 0 12px; border-radius: var(--radius-pill); background: var(--inset); font-size: 13px; max-width: 100%; min-width: 0; }
.cb-fchip .fl { color: var(--ink-2); white-space: nowrap; }
.cb-fchip b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cb-fchip .op { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 6px; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-2); cursor: pointer; font-size: 12px; white-space: nowrap; }
.cb-fchip .op:hover { color: var(--ink); }
.cb-fchip .rm { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; flex: none; }
.cb-fchip .rm:hover { background: var(--card); color: var(--ink); }
.cb-fform { min-width: 0; }
.cb-fsave { display: inline-flex; gap: 6px; align-items: center; }
.cb-fsave input { width: 200px; max-width: 50vw; border-radius: var(--radius-pill); }
.cb-filter-q { display: flex; align-items: baseline; gap: var(--space-2); font-size: 11px; line-height: 14px; color: var(--ink-3); min-width: 0; }
.cb-filter-q code { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-size-adjust: none; color: var(--ink-2); overflow-wrap: break-word; min-width: 0; }

/* ── 5. SectionTabs ── */
.cb-tabs { display: grid; gap: var(--space-3); min-width: 0; }
.cb-tabs-list { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.cb-tabs-list::-webkit-scrollbar { display: none; }
.cb-tabs-list button { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 2px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-weight: 500; white-space: nowrap; }
.cb-tabs-list button:hover { color: var(--ink); }
.cb-tabs-list button[aria-selected="true"] { color: var(--ink); }
.cb-tabs-list button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
.cb-tabs-list button:focus-visible { outline-offset: -2px; }
.cb-tabs-list .n { min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.cb-tabs-list button[aria-selected="true"] .n { background: var(--primary); color: var(--on-primary); }
.cb-tabs-panel { min-width: 0; border-radius: var(--radius-chip); }

/* ── Слой, затемнение, выдвижка ── */
.cb-layer { position: relative; z-index: 1000; }
.cb-scrim { position: fixed; inset: 0; background: color-mix(in oklab, var(--ink) 28%, transparent); animation: cb-fade .15s ease-out; }
.cb-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 92vw); background: var(--card); color: var(--ink); box-shadow: var(--shadow-pop); border-radius: var(--radius-card) 0 0 var(--radius-card); display: flex; flex-direction: column; outline: none; animation: cb-slide .2s ease-out; }
.cb-drawer-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-3); }
.cb-drawer-h .t { display: grid; gap: 2px; min-width: 0; }
.cb-drawer-h small { font-size: 12px; color: var(--ink-3); }
.cb-drawer-h h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-drawer-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--space-5) var(--space-3); border-bottom: 1px solid var(--border); }
.cb-drawer-b { flex: 1; overflow: auto; padding: var(--space-4) var(--space-5) var(--space-6); display: grid; gap: var(--space-5); align-content: start; }
@keyframes cb-fade { from { opacity: 0; } }
@keyframes cb-slide { from { transform: translateX(24px); opacity: 0; } }

/* ── 6. DrillDrawer ── */
.cb-drill-kpi { display: grid; gap: 6px; justify-items: start; text-align: left; width: min(100%, 320px); padding: var(--space-4) var(--space-5); border: 0; border-radius: var(--radius-card); background: var(--inset); color: var(--ink); cursor: pointer; transition: background-color .15s; }
.cb-drill-kpi:hover { background: var(--inset-hover); }
.cb-drill-kpi .lbl { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.cb-drill-kpi .val { font-size: 30px; line-height: 34px; font-weight: 560; letter-spacing: -.015em; }
.cb-drill-kpi .val small { font-size: 18px; color: var(--ink-3); font-weight: 500; }
.cb-drill-kpi .go { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); font-weight: 500; }
.cb-drill-val { display: grid; gap: 6px; }
.cb-drill-val > b { font-size: 32px; line-height: 36px; font-weight: 560; letter-spacing: -.02em; }
.cb-drill-s { display: grid; gap: var(--space-3); }
.cb-drill-s h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-drill-s h3 .k { width: 22px; height: 22px; border-radius: 50%; background: var(--inset); color: var(--ink-2); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.cb-dl { display: grid; grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 13px; line-height: 18px; }
.cb-dl dt { color: var(--ink-3); }
.cb-dl dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.cb-dl dd small { display: block; color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-drill-parts, .cb-drill-rows, .cb-drill-gaps { list-style: none; margin: 0; padding: 0; }
.cb-drill-parts { display: grid; gap: 4px; }
.cb-drill-parts > li > button { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px 16px; grid-template-areas: "l v s c" "b b b b"; align-items: center; gap: 4px 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; font-size: 13px; }
.cb-drill-parts > li > button:hover, .cb-drill-parts > li.on > button { background: var(--inset); }
.cb-drill-parts > li > button .l { grid-area: l; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-drill-parts > li > button .v { grid-area: v; font-weight: 600; white-space: nowrap; }
.cb-drill-parts > li > button .s { grid-area: s; color: var(--ink-3); text-align: right; }
.cb-drill-parts button > .cb-i { grid-area: c; color: var(--ink-3); }
.cb-drill-parts > li > button .bar { grid-area: b; height: 6px; border-radius: var(--radius-pill); background: var(--mono-1); overflow: hidden; }
.cb-drill-parts > li > button .bar i { display: block; height: 100%; border-radius: inherit; background: var(--mono-4); }
.cb-drill-parts > li:first-child > button .bar i { background: var(--flame); }
.cb-drill-rows { display: grid; gap: 2px; margin: 4px 0 6px 10px; padding-left: 10px; border-left: 1px solid var(--border); }
.cb-drill-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 4px; font-size: 12px; line-height: 16px; }
.cb-drill-rows .l { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-drill-rows li.more { display: block; color: var(--ink-3); }
.cb-drill-gaps { display: grid; gap: var(--space-2); }
.cb-drill-gaps li { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 1px, transparent 1px 7px), var(--inset); font-size: 13px; line-height: 18px; }
.cb-drill-gaps li > .cb-i { color: var(--ink-3); margin-top: 1px; }
.cb-drill-gaps li div { display: grid; }
.cb-drill-gaps li span { color: var(--ink-2); font-size: 12px; line-height: 16px; }

/* ── 7. Banner ── */
.cb-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px var(--space-3); min-height: 48px; padding: var(--space-1) var(--space-1) var(--space-1) 16px; border-radius: var(--radius-card); background: var(--inset); color: var(--ink); }
.cb-banner.warn { background: var(--warn-soft); }
.cb-banner > .cb-i { color: var(--ink-2); }
.cb-banner.warn > .cb-i { color: var(--warn); }
.cb-banner p { flex: 1 1 220px; margin: 0; font-size: 13px; line-height: 18px; min-width: 0; }
.cb-banner .cb-btn.secondary { background: var(--card); }
.cb-banner .cb-ibtn.sm { color: var(--ink-2); }

/* ── 8. VersionBar ── */
.cb-verbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-ring); font-size: 13px; line-height: 18px; color: var(--ink); }
.cb-verbar > span { flex: 1 1 160px; min-width: 0; }
.cb-verbar .acts { display: flex; gap: 4px; flex: none; margin-left: auto; }
.cb-verbar > .cb-i { color: var(--ink-2); }
.cb-verbar.quiet { background: transparent; box-shadow: none; padding: 4px 0; color: var(--ink-3); font-size: 12px; gap: 6px; }
.cb-verbar.quiet > span { flex: 0 1 auto; min-width: 0; }
.cb-lnk { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 2px 4px; border-radius: 6px; color: var(--ink); font-weight: 500; font-size: 12px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.cb-lnk:hover { text-decoration-color: currentColor; }

/* ── 9. FreshBar ── */
.cb-freshbar { display: grid; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-3); min-width: 0; }
.cb-freshbar .row { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.cb-freshbar .row b { color: var(--ink-2); font-weight: 500; }
.cb-freshbar .cb-status { font-size: 12px; font-weight: 600; }
.cb-freshbar .lag { color: var(--ink); background: var(--warn-soft); border-radius: var(--radius-pill); padding: 2px 8px; }
.cb-freshbar.fail .lag, .cb-freshbar.stale .lag { background: var(--bad-soft); }
.cb-freshbar .cb-lnk { margin-left: auto; }
.cb-freshbar ul { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; background: var(--inset); border-radius: var(--radius-chip); }
.cb-freshbar li { display: grid; grid-template-columns: 14px minmax(96px, 1fr) auto; align-items: center; gap: 4px 10px; padding: 6px 8px; }
.cb-freshbar li .n { color: var(--ink); font-weight: 500; }
.cb-freshbar li .t { grid-column: 2 / -1; font-variant-numeric: tabular-nums; }
.cb-fold[hidden] { display: none; }

/* ── 10. NextLinks ── */
.cb-next { display: grid; gap: var(--space-2); min-width: 0; }
.cb-next h3 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-next ul a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); color: var(--ink); text-decoration: none; font-size: 13px; line-height: 18px; transition: background-color .15s; }
.cb-next ul a:hover { background: var(--inset-hover); }
.cb-next .r { min-width: 0; }
.cb-next .r b { font-size: 15px; font-weight: 600; margin-right: 6px; }
.cb-next .to { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--card); font-weight: 600; font-size: 12px; }
.cb-next .back { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 6px; border-radius: 8px; color: var(--ink-2); font-size: 12px; text-decoration: none; }
.cb-next .back:hover { color: var(--ink); background: var(--inset); }

/* ── 11. DataPassport + Gaps ── */
.cb-pass, .cb-gaps { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--inset); border-radius: var(--radius-inset); min-width: 0; }
.cb-pass header, .cb-gaps header { display: flex; align-items: center; gap: 10px; }
.cb-pass header .ic { width: 32px; height: 32px; border-radius: 50%; background: var(--card); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.cb-pass header div { display: grid; }
.cb-pass header small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-pass header b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-pass .cuts { display: flex; flex-wrap: wrap; gap: 4px; }
.cb-pass .cuts .cb-tag { background: var(--card); }
.cb-gaps header > .cb-i { color: var(--ink-2); }
.cb-gaps header b { font-size: 15px; font-weight: 600; }
.cb-gaps header span { font-size: 12px; color: var(--ink-3); }
.cb-gaps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-gaps li { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--card); font-size: 13px; line-height: 18px; }
.cb-gaps li dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 0; font-size: 12px; line-height: 16px; }
.cb-gaps li dt { color: var(--ink-3); }
.cb-gaps li dd { margin: 0; color: var(--ink-2); }

/* ── 12. AccessMatrix ── */
.cb-access { display: grid; gap: var(--space-3); min-width: 0; }
.cb-access-wrap { overflow-x: auto; border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-access table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.cb-access th { text-align: left; font-weight: 400; color: var(--ink-2); background: var(--inset); height: 40px; padding: 0 10px; white-space: nowrap; }
.cb-access tbody th { background: transparent; color: var(--ink); display: table-cell; }
.cb-access tbody th b { font-weight: 600; display: block; }
.cb-access tbody th small { color: var(--ink-3); font-size: 11px; }
.cb-access td, .cb-access tbody th { border-top: 1px solid var(--border); padding: 6px 8px; height: 52px; }
.cb-acc { display: inline-grid; grid-template-columns: 14px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; min-height: 36px; padding: 4px 10px; border: 0; border-radius: 10px; background: var(--inset); color: var(--ink); cursor: pointer; text-align: left; font-size: 12px; line-height: 15px; font-weight: 500; }
.cb-acc > .cb-i { grid-row: 1 / 3; }
.cb-acc small { grid-column: 2; color: var(--ink-3); font-size: 11px; line-height: 13px; font-weight: 400; }
.cb-acc.open { background: var(--ok-soft); }
.cb-acc.closed { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-2); }
.cb-acc.ch { box-shadow: inset 0 0 0 2px var(--flame); }
.cb-acc:hover { filter: brightness(.97); }
.cb-access-out { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: 12px var(--space-4); background: var(--inset); border-radius: var(--radius-inset); font-size: 13px; line-height: 18px; }
.cb-access-out > div:first-child { display: grid; gap: 6px; min-width: 0; flex: 1 1 260px; }
.cb-access-out ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cb-access-out li { display: flex; gap: 8px; align-items: flex-start; }
.cb-access-out li > .cb-i { margin-top: 2px; }
.cb-access-out li.op > .cb-i { color: var(--ok); }
.cb-access-out li.cl > .cb-i { color: var(--bad); }
.cb-access-out .muted { color: var(--ink-3); flex: 1 1 240px; }
.cb-access-out .acts { display: flex; gap: var(--space-2); }

/* ── 13. Onboarding ── */
.cb-onb { display: grid; gap: var(--space-4); min-width: 0; }
.cb-onb header { display: grid; gap: var(--space-2); }
.cb-onb header div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-onb header b { font-size: 17px; line-height: 22px; font-weight: 600; }
.cb-onb header span { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-onb .bar { height: 8px; border-radius: var(--radius-pill); background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 6px), var(--inset); overflow: hidden; }
.cb-onb .bar i { display: block; height: 100%; border-radius: inherit; background: var(--flame); transition: width .3s; }
.cb-onb ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-onb li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) 12px; border-radius: var(--radius-inset); background: var(--inset); }
.cb-onb li .ic { color: var(--ink-3); display: grid; place-items: center; }
.cb-onb li.done .ic { color: var(--ok); }
.cb-onb li .t { flex: 1; display: grid; min-width: 0; font-size: 13px; line-height: 18px; }
.cb-onb li .t span { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-onb li.done { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cb-onb li.done .t b { font-weight: 500; color: var(--ink-2); }
.cb-onb li.next { background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-3); }

/* ── 14. ErrorScreen ── */
.cb-err { display: grid; justify-items: center; text-align: center; gap: var(--space-2); padding: var(--space-6) var(--space-4) var(--space-4); background: var(--inset); border-radius: var(--radius-inset); min-width: 0; }
.cb-err > .ic { width: 52px; height: 52px; border-radius: 16px; background: var(--card); color: var(--ink-2); display: grid; place-items: center; }
.cb-err.c500 > .ic { background: var(--bad-soft); color: var(--bad); }
.cb-err .code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); font-size-adjust: none; }
.cb-err h3 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; text-wrap: balance; }
.cb-err > p { margin: 0; max-width: 26em; color: var(--ink-2); font-size: 13px; line-height: 18px; }
.cb-err .cb-btn.secondary { background: var(--card); }
.cb-err .cb-btn.secondary:hover { background: var(--inset-hover); }
.cb-err .acts { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin: var(--space-2) 0; }
.cb-err .cb-next { width: 100%; max-width: 440px; text-align: left; margin-top: var(--space-3); }
.cb-err .cb-next ul a { background: var(--card); }
.cb-err .cb-next ul a:hover { background: var(--inset-hover); }
.cb-err .cb-next .to { background: var(--inset); }

/* ── 15. CommandPalette ── */
.cb-cmdk { position: fixed; left: 50%; top: max(10vh, 16px); transform: translateX(-50%); width: min(600px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--card); color: var(--ink); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); overflow: hidden; animation: cb-fade .12s ease-out; }
.cb-cmdk-in { display: flex; align-items: center; gap: 10px; padding: 0 var(--space-4); height: 56px; border-bottom: 1px solid var(--border); color: var(--ink-3); flex: none; }
.cb-cmdk-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
.cb-cmdk-in input:focus-visible { outline: none; }
.cb-cmdk-in:focus-within { box-shadow: inset 0 -2px 0 var(--focus); }
.cb-cmdk-in input::placeholder { color: var(--ink-3); }
.cb-cmdk-list { overflow: auto; padding: 6px; flex: 1; min-height: 0; }
.cb-cmdk .gh { padding: 10px 10px 4px; font-size: 11px; line-height: 14px; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
.cb-cmdk .opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 12px; cursor: pointer; font-size: 14px; }
.cb-cmdk .opt.on { background: var(--inset); }
.cb-cmdk .oi { width: 28px; height: 28px; border-radius: 8px; background: var(--inset); color: var(--ink-2); display: grid; place-items: center; flex: none; }
.cb-cmdk .opt.on .oi { background: var(--card); }
.cb-cmdk .l { flex: 1; min-width: 0; display: grid; }
.cb-cmdk .l small { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-cmdk .k { display: flex; gap: 4px; }
.cb-cmdk .empty { padding: 28px 16px; text-align: center; color: var(--ink-3); font-size: 13px; }
.cb-cmdk footer { display: flex; gap: var(--space-4); flex-wrap: wrap; padding: 10px var(--space-4); border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-3); flex: none; }
.cb-cmdk footer span { display: inline-flex; align-items: center; gap: 4px; }
.cb-cmdk kbd { background: var(--inset); box-shadow: none; }
.cb-btn .cb-kbd { background: var(--card); margin-left: 2px; }

/* ── 16. PresetSwitch ── */
.cb-preset { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--inset); border-radius: var(--radius-inset); width: fit-content; max-width: 100%; }
.cb-preset button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); font-weight: 500; font-size: 13px; cursor: pointer; }
.cb-preset button:hover { color: var(--ink); background: var(--card); }
.cb-preset button.on { background: var(--primary); color: var(--on-primary); }

/* ── 17. ShowMode ── */
.cb-show-off { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4); background: var(--inset); border-radius: var(--radius-inset); }
.cb-show-off .t { display: grid; font-size: 15px; line-height: 20px; }
.cb-show-off .t b { font-weight: 600; }
.cb-show-off .t span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-show { aspect-ratio: 16 / 9; width: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: clamp(6px, 2cqw, 16px); padding: clamp(14px, 4cqw, 36px); border-radius: var(--radius-inset); background: var(--card-ink); color: var(--on-card-ink); outline: none; container-type: inline-size; overflow: hidden; }
.cb-show:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.cb-show-top { display: flex; justify-content: space-between; gap: var(--space-3); font-size: clamp(11px, 1.8cqw, 14px); opacity: .78; }
.cb-show-num { display: grid; gap: 2px; }
.cb-show-num b { font-size: clamp(34px, 11cqw, 96px); line-height: 1; font-weight: 600; letter-spacing: -.03em; }
.cb-show-num b small { font-size: .38em; font-weight: 500; opacity: .7; letter-spacing: 0; }
.cb-show-num > span { font-size: clamp(12px, 2.4cqw, 20px); line-height: 1.3; opacity: .86; }
.cb-show-fig { width: 100%; height: 100%; min-height: 20px; display: block; }
.cb-show-fig rect { fill: color-mix(in oklab, var(--on-card-ink) 26%, transparent); }
.cb-show-fig rect.em { fill: var(--flame); }
.cb-show-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: clamp(11px, 1.6cqw, 13px); }
.cb-show-foot .src { opacity: .72; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-show-foot .nav { display: flex; gap: 6px; flex: none; }
.cb-show-foot button { display: inline-flex; align-items: center; gap: 4px; height: 32px; min-width: 32px; justify-content: center; padding: 0 8px; border: 0; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--on-card-ink) 14%, transparent); color: var(--on-card-ink); cursor: pointer; font-size: 13px; font-weight: 500; }
.cb-show-foot button:hover { background: color-mix(in oklab, var(--on-card-ink) 24%, transparent); }
.cb-show-foot button[disabled] { opacity: .35; cursor: default; }
.cb-show-foot button.exit { padding: 0 12px; }

/* ── 18. TvStrip ── */
.cb-tv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-3); padding: var(--space-3); background: var(--card-ink); border-radius: var(--radius-inset); container-type: inline-size; }
.cb-tv-t { display: grid; align-content: space-between; gap: var(--space-3); min-height: 150px; padding: var(--space-4) var(--space-5); border-radius: var(--radius-inset); background: color-mix(in oklab, var(--on-card-ink) 8%, transparent); color: var(--on-card-ink); min-width: 0; }
.cb-tv-t .lbl { font-size: 15px; line-height: 20px; font-weight: 500; opacity: .8; }
.cb-tv-t > b { font-size: clamp(36px, 7cqw, 60px); line-height: 1; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.cb-tv-t > b small { font-size: .42em; font-weight: 500; opacity: .7; letter-spacing: 0; }
.cb-tv-t .cmp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; line-height: 18px; }
.cb-tv-t .cmp > span:last-child { opacity: .72; }
.cb-tv-t .cb-delta.ok { background: var(--ok); color: var(--on-fill); }
.cb-tv-t .cb-delta.bad { background: var(--bad); color: var(--on-fill); }
.cb-tv-t .cb-delta.flat { background: color-mix(in oklab, var(--on-card-ink) 18%, transparent); color: var(--on-card-ink); }
.cb-tv-t.fail { background: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--on-card-ink) 7%, transparent) 0 2px, transparent 2px 8px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--on-card-ink) 18%, transparent); }
.cb-tv-t.fail > b, .cb-tv-t.fail .lbl { opacity: .42; }
.cb-tv-t .st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; }

/* ── 19. PageTemplate ── */
.cb-ptpl { display: grid; gap: var(--space-4); padding: var(--space-4); background: var(--shell); border-radius: var(--radius-card); min-width: 0; }
.cb-ptpl-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-ptpl-hdr .cb-contour-row { background: var(--card); }
.cb-ptpl-fact h2 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.cb-ptpl-fact p { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.cb-ptpl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.cb-ptpl-kpis .cb-kpi { background: var(--card); box-shadow: var(--shadow-ring); height: 100%; }
.cb-ptpl-kpis .cb-kpi.accent { background: linear-gradient(150deg, var(--flame-deep) 0%, var(--flame-deep) 38%, var(--flame) 100%); }
.cb-ptpl-kbtn { display: block; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; border-radius: var(--radius-card); color: inherit; }
.cb-ptpl-kbtn:hover .cb-kpi { filter: brightness(1.04); }
.cb-ptpl-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.cb-ptpl-grid > .cb-floor { grid-column: span var(--span, 12); }
.cb-ptpl { container: ptpl / inline-size; }
/* таблица доказательств не уже min-w-table 640: пока рядом не хватает места, «Что решать» и «Доказательства» встают во всю ширину.
   Контейнерный запрос по ширине страницы, а не экрана (БРЕНДБУК «Минимум ширины по содержанию»); 1180 — 7/12 сетки + поля карточки ≥ 640 */
@container ptpl (max-width: 1179px) {
  .cb-ptpl-grid > .cb-floor:has(.cb-tblwrap), .cb-ptpl-grid > .cb-floor:has(+ .cb-floor .cb-tblwrap) { grid-column: span 12; }
}
.cb-ptpl .cb-floor { position: relative; min-width: 0; display: grid; }
.cb-ptpl .cb-floor > .cb-card, .cb-ptpl .cb-floor > .cb-vf { height: 100%; }
.cb-ptpl .cb-floor.show { padding: var(--space-6) 8px 8px; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--border); background-image: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 1px, transparent 1px 12px); }
.cb-floor-l { position: absolute; top: 5px; left: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; line-height: 14px; font-weight: 600; color: var(--ink-2); }
.cb-floor-l b { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-size: 10px; }
.cb-ptpl-dev, .cb-ptpl-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-ptpl-dev li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 12px; border-radius: 12px; background: var(--inset); font-size: 13px; line-height: 18px; }
.cb-ptpl-dev li div, .cb-ptpl-todo li { display: grid; min-width: 0; }
.cb-ptpl-dev li span, .cb-ptpl-todo li span { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-ptpl-dev b, .cb-ptpl-todo b { font-weight: 500; }
.cb-ptpl-todo li { padding: 10px 12px; border-radius: 12px; background: var(--inset); font-size: 13px; line-height: 18px; }
.cb-ptpl .cb-card > .cb-btn { justify-self: start; align-self: flex-start; }
.cb-ptpl .cb-pass { background: var(--card); box-shadow: var(--shadow-ring); border-radius: var(--radius-card); height: 100%; }
.cb-ptpl .cb-pass header .ic, .cb-ptpl .cb-pass .cuts .cb-tag { background: var(--inset); }
.cb-ptpl .cb-next { padding: var(--space-4); background: var(--card); box-shadow: var(--shadow-ring); border-radius: var(--radius-card); align-content: start; height: 100%; }
.cb-ptpl > .cb-freshbar { padding: 0 4px; }

@media (max-width: 1100px) {
  .cb-ptpl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-ptpl-grid > .cb-floor { grid-column: span 12; }
}
@media (max-width: 560px) {
  .cb-ptpl { padding: var(--space-2); gap: var(--space-3); }
  .cb-ptpl-fact h2 { font-size: 21px; line-height: 26px; }
  .cb-ptpl-kpis { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .cb-ptpl-kpis .cb-kpi { min-height: 112px; }
  .cb-ctx { border-radius: var(--radius-inset); }
  .cb-ctx > .cb-pop { flex: 1 1 100%; }
  .cb-ctx-b { width: 100%; }
  .cb-ctx-b .t { flex: 1; }
  .cb-ctx-fresh { margin-left: 0; }
  .cb-banner { border-radius: var(--radius-inset); flex-wrap: wrap; padding: var(--space-2) var(--space-1) var(--space-2) var(--space-4); }
  .cb-banner p { flex-basis: calc(100% - 80px); }
  .cb-verbar { border-radius: var(--radius-inset); }
  .cb-drawer { border-radius: var(--radius-inset) 0 0 var(--radius-inset); }
  .cb-drawer-h, .cb-drawer-b { padding-left: var(--space-4); padding-right: var(--space-4); }
  .cb-drawer-chips { padding-left: var(--space-4); padding-right: var(--space-4); }
  .cb-drill-parts > li > button { grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-areas: "l l c" "v s s" "b b b"; }
  .cb-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cb-dl dd { margin-bottom: 8px; }
  .cb-onb li { flex-wrap: wrap; }
  .cb-onb li .cb-btn { margin-left: 30px; }
  .cb-cmdk { top: 16px; }
  .cb-show-foot .src { display: none; }
  .cb-show-foot { justify-content: flex-end; }
  .cb-tv-t { min-height: 118px; padding: var(--space-3) var(--space-4); }
  .cb-next ul a { flex-wrap: wrap; }
}
/* цели касания на телефоне и планшете — 44 px (брендбук «Приёмка экрана») */
@media (hover: none), (pointer: coarse) {
  .cb-chip, .cb-fchip { height: 44px; }
  .cb-fchip .rm, .cb-fchip .op { height: 44px; min-width: 44px; }
  .cb-contour-row button { height: 44px; }
  .cb-ctx-b { min-height: 44px; }
  .cb-tabs-list button { height: 44px; }
  /* высота через отступы: общее правило «не меньше 24 px» до 767 px сильнее по специфичности, чем min-height компонента */
  .cb-mi { min-height: 44px; padding-top: 13px; padding-bottom: 13px; }
  .cb-ibtn:not(.sm) { width: 44px; height: 44px; }
  .cb-nav .it:not(.sub) { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  .cb-nav .it.sub { min-height: 44px; padding-top: 13px; padding-bottom: 13px; }
  .cb-nav .gh { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  .cb-acct-b { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  .cb-nav.d-icons .it { width: 44px; height: 44px; }
  .cb-dens button { width: 44px; height: 44px; }
}

/* ── Документ: длинное чтение (КП, отчёт словами, регламент). Разметка:
   .cb-doc > (.cb-doc-toc > b + ol > li > a) + (.cb-doc-body > .cb-doc-sec > h2 + p · figure · .cb-vf · .cb-card).
   Мера текста 65–72 знака задаётся в em (не в ch): 30em при 17 px ≈ 70 знаков русского текста Onest (знак ≈ 0,43em);
   em считается от кегля документа 17 px, поэтому и колонка сетки, и тело дают одну меру; фигуры встают на всю меру. ── */
.cb-doc { --doc-measure: 30em; font-size: 17px; line-height: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; min-width: 0; }
.cb-doc-head { display: grid; gap: var(--space-3); max-width: 48em; }
.cb-doc-head small { color: var(--flame-deep); font-size: 13px; font-weight: 600; }
.cb-doc-head h1 { margin: 0; font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.cb-doc-head .lead { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink-2); }
.cb-doc-toc { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-card); background: var(--shell); align-self: start; }
.cb-doc-toc > b { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.cb-doc-toc ol { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); font-size: 14px; line-height: 20px; }
.cb-doc-toc a { color: var(--ink); text-decoration: none; }
.cb-doc-toc a:hover { color: var(--flame-deep); text-decoration: underline; }
.cb-doc-toc a[aria-current] { font-weight: 600; }
.cb-doc-body { display: grid; gap: var(--space-8); width: 100%; max-width: var(--doc-measure); min-width: 0; }
.cb-doc-sec { display: grid; gap: var(--space-4); min-width: 0; scroll-margin-top: var(--space-6); }
.cb-doc-sec h2 { margin: var(--space-2) 0 0; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.cb-doc-sec h3 { margin: var(--space-2) 0 0; font-size: 20px; line-height: 26px; font-weight: 600; }
.cb-doc-sec :is(p, ul, ol, blockquote) { margin: 0; }
.cb-doc-sec :is(ul, ol) { padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.cb-doc-sec > :is(figure, .cb-vf, .cb-card, .cb, table, .cb-tblwrap) { width: 100%; max-width: 100%; margin: 0; font-size: 14px; line-height: 20px; }
.cb-doc-sec :is(.cb-vf, .cb-card, .cb-tblwrap) { font-size: 14px; line-height: 20px; }   /* фигура в своём кегле, где бы ни лежала */
@media (min-width: 1024px) {
  .cb-doc:has(> .cb-doc-toc) { grid-template-columns: minmax(11em, 14em) minmax(0, var(--doc-measure)); justify-content: center; }
  .cb-doc > .cb-doc-head { grid-column: 1 / -1; }
  .cb-doc-toc { position: sticky; top: var(--space-6); }
}
@media (max-width: 860px) {
  .cb-doc { gap: var(--space-6); }
  .cb-doc-head h1 { font-size: 28px; line-height: 34px; }
  .cb-doc { font-size: 16px; line-height: 26px; }
  .cb-doc-sec h2 { font-size: 22px; line-height: 28px; }
}
/* пресет «документ» на всей странице: экран читается как документ — ячейки на всю меру, кольцо вместо тени, близнецы видны */
html[data-preset="document"] :is(.cb-main, .cb-ptpl) { max-width: 60em; margin-inline: auto; }
html[data-preset="document"] .cb-bento > *, html[data-preset="document"] .cb-bento > .wide-md, html[data-preset="document"] .cb-ptpl-grid > .cb-floor { grid-column: 1 / -1; }
html[data-preset="document"] :is(.cb-card, .cb-vf.card) { box-shadow: 0 0 0 1px var(--border); }
html[data-preset="document"] :is(.cb-card-h h3, .cb-vf .hd b) { font-size: 22px; line-height: 28px; }
html[data-preset="document"] .cb-hello h1 { font-size: 44px; line-height: 50px; }
@media print {
  .cb-doc { display: block; }
  .cb-doc-toc { position: static; background: none; padding: 0 0 var(--space-6); }
  .cb-doc-body { max-width: none; font-size: 12pt; line-height: 1.5; }
  .cb-doc-sec { break-inside: avoid-page; margin-bottom: var(--space-6); }
  .cb-doc-sec h2 { break-after: avoid-page; }
  html[data-preset="document"] :is(.cb-main, .cb-ptpl) { max-width: none; }
}

/* ── Носители: data-preset на <html> (Lumen §31). Мягко: меняем плотность, не ломаем систему ── */
html[data-preset="tv"] .cb-kpi .val { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; }
html[data-preset="tv"] .cb-kpi .lbl { font-size: 18px; line-height: 24px; }
html[data-preset="tv"] .cb-drill-kpi .val { font-size: 48px; line-height: 52px; }
html[data-preset="tv"] .cb-vf .ft .twin,
html[data-preset="tv"] .cb-tblwrap, html[data-preset="tv"] .cb-vtwin, html[data-preset="tv"] .cb-access-wrap,
html[data-preset="tv"] .cb-vtip, html[data-preset="tv"] .cb-tip { display: none !important; }
html[data-preset="tv"] .cb-vf .hd b, html[data-preset="tv"] .cb-card-h h3 { font-size: 22px; line-height: 28px; }
html[data-preset="tv"] .cb-tv-t > b { font-size: clamp(48px, 9cqw, 84px); }
html[data-preset="print"] .cb-card, html[data-preset="print"] .cb-vf.card, html[data-preset="print"] .cb-ctx, html[data-preset="print"] .cb-verbar,
html[data-preset="print"] .cb-gal-it, html[data-preset="print"] .cb-kpi.card, html[data-preset="print"] .cb-ptpl-kpis .cb-kpi { box-shadow: 0 0 0 1px var(--border); }
html[data-preset="print"] .cb-pop-p, html[data-preset="print"] .cb-drawer, html[data-preset="print"] .cb-cmdk { box-shadow: 0 0 0 1px var(--border); }
html[data-preset="print"] .cb-fold[hidden] { display: grid !important; }
html[data-preset="print"] .cb * { animation: none !important; transition: none !important; }
html[data-preset="report"] .cb-card, html[data-preset="report"] .cb-vf.card { box-shadow: 0 0 0 1px var(--border); }
html[data-preset="phone"] .cb-ptpl { max-width: 390px; margin: 0 auto; }
html[data-preset="phone"] .cb-ptpl-kpis { grid-template-columns: minmax(0, 1fr); }
html[data-preset="phone"] .cb-ptpl-grid > .cb-floor { grid-column: span 12; }
html[data-preset="show"] .cb-vtip, html[data-preset="show"] .cb-tip { display: none !important; }
html[data-preset="show"] .cb-vf .ft .twin { display: none; }
@media print {
  .cb-fold[hidden] { display: grid !important; }
  .cb-scrim, .cb-pop-p { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-scrim, .cb-drawer, .cb-cmdk { animation: none !important; }
}

/* ContourSwitch на узкой ширине: видимый край прокрутки (затухание справа), чтобы было понятно, что контуры идут дальше */
@media (max-width: 520px) {
  .cb-contour-row { -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 28px), transparent); mask-image: linear-gradient(to right, var(--ink) calc(100% - 28px), transparent); padding-right: 28px; }
}

/* ── 20–22. AccountMenu · SideRail в примере ── */
.cb-acct { display: flex; width: 100%; }
.cb-nav.d-icons .cb-acct { width: auto; }
.cb-acct-b { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 40px; padding: 4px 10px 4px 4px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--motion-subtle-in) var(--motion-ease); }
.cb-acct-b:hover, .cb-acct-b[aria-expanded="true"] { background: var(--inset); }
.cb-acct-b.compact { width: 40px; height: 40px; padding: 0; justify-content: center; }
.cb-acct-b .who { flex: 1; min-width: 0; display: grid; line-height: 16px; }
.cb-acct-b .who b { font-size: 13px; font-weight: 600; }
.cb-acct-b .who small { font-size: 11px; color: var(--ink-3); overflow-wrap: break-word; }
.cb-acct-b .chev { display: inline-flex; color: var(--ink-3); }
.cb-pop-p.up { top: auto; bottom: calc(100% + 6px); }
.cb-pop-p.up.side { bottom: 0; transform: translateX(52px); }   /* от аватара меню-иконками: вбок, а не поверх меню */
.cb-acct-h { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.cb-acct-h .t { display: grid; min-width: 0; line-height: 16px; }
.cb-acct-h b { font-size: 14px; font-weight: 600; }
.cb-acct-h small { font-size: 12px; color: var(--ink-3); overflow-wrap: break-word; }
.cb-acct-l { padding: 8px 10px 2px; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--ink-3); }
.cb-acct-sep { height: 1px; margin: 4px 6px; background: var(--border); }
.cb-mi[disabled] { opacity: .62; cursor: not-allowed; }
.cb-mi[disabled]:hover { background: transparent; }
.cb-ex-rail { display: flex; gap: var(--space-4); align-items: stretch; min-height: 560px; min-width: 0; background: var(--shell); border-radius: var(--radius-inset); padding: var(--space-3); }
.cb-ex-rail > .cb-rail.cb-nav { position: relative; top: 0; max-height: none; }
.cb-ex-railm { flex: 1; min-width: 0; display: grid; gap: var(--space-2); align-content: start; padding: var(--space-3); }

/* ── 23. Sheet — нижняя шторка ── */
.cb-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-width: 640px; max-height: 86vh; margin: 0 auto; display: flex; flex-direction: column; background: var(--card); color: var(--ink); border-radius: var(--radius-card) var(--radius-card) 0 0; box-shadow: var(--shadow-pop); padding-bottom: env(safe-area-inset-bottom); outline: none; animation: cb-rise var(--motion-standard-in) var(--motion-ease); }
.cb-sheet-grip { display: grid; place-items: center; height: 24px; cursor: grab; touch-action: none; }
.cb-sheet-grip span { width: 40px; height: 4px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--ink) 24%, transparent); }
.cb-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-4) var(--space-3) var(--space-5); touch-action: none; }
.cb-sheet-h h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.cb-sheet-b { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 var(--space-5) var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.cb-sheet-f { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--border); }
.cb-sheet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cb-sheet-list .cb-mi { min-height: 44px; padding-top: 12px; padding-bottom: 12px; font-size: 15px; line-height: 20px; }
.cb-sheet-list .cb-mi b { font-weight: 600; }
@keyframes cb-rise { from { transform: translateY(24px); opacity: 0; } }
/* выдвижка слева: очередь и фильтры зон z4 и z5 до 1180 */
.cb-drawer.left { right: auto; left: 0; border-radius: 0 var(--radius-card) var(--radius-card) 0; animation-name: cb-slide-l; }

/* ── 24. BottomNav — нижняя навигация до 860 px; над ней место для плавающей кнопки агента ── */
:root { --cb-bnav-h: 64px; --cb-dock-bottom: var(--space-4); }
.cb-bnav { display: none; }
.cb-bnav ul { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 2px; max-width: 560px; }
.cb-bnav li { flex: 1 1 0; min-width: 0; }
.cb-bnav .bi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-width: 44px; min-height: 56px; padding: 4px 2px; border: 0; border-radius: var(--radius-inset); background: transparent; color: var(--ink-2); font: inherit; font-size: 11px; line-height: 14px; font-weight: 500; text-decoration: none; cursor: pointer; }
.cb-bnav .bi .ic { position: relative; display: inline-grid; place-items: center; width: 48px; height: 30px; border-radius: var(--radius-pill); transition: background-color var(--motion-subtle-in) var(--motion-ease); }
.cb-bnav .bi:hover .ic { background: var(--inset); }
.cb-bnav .bi.on { color: var(--ink); }
.cb-bnav .bi.on .ic { background: var(--primary); color: var(--on-primary); }
.cb-bnav .bi .l { max-width: 100%; text-align: center; overflow-wrap: break-word; }
.cb-bnav .bdg { position: absolute; top: -4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font: 600 10px/16px var(--font-sans); font-style: normal; font-size-adjust: none; box-shadow: 0 0 0 2px var(--card); }
.cb-bnav .bdg.late { background: var(--warn); }
.cb-bnav.inline { display: block; padding: var(--space-1); background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); }
@media (max-width: 860px) {
  .cb-bnav:not(.inline) { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: 4px var(--space-2) calc(4px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--border); }
  html.cb-has-bnav { --cb-dock-bottom: calc(var(--cb-bnav-h) + var(--space-3) + env(safe-area-inset-bottom)); }
  html.cb-has-bnav body { padding-bottom: calc(var(--cb-bnav-h) + env(safe-area-inset-bottom)); }
  html.cb-has-bnav .cb-top .grow { display: none; }   /* разделы уже в нижней навигации */
}
html[data-preset="print"] .cb-bnav, html[data-preset="tv"] .cb-bnav { display: none; }
@media print { .cb-bnav { display: none; } }

/* ── Плотность меню в оболочке ОС (v-os.js: OsShell, SpacesNav). Стили группы — в v-os.css ── */
.cb-os-sidef { margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--border); display: flex; }
.cb-os-shell.d-full { grid-template-columns: var(--rail-w-full) minmax(0, 1fr); }
.cb-os-topsw { display: inline-block; }
.cb-os-more { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; align-self: flex-start; }
.cb-os-more:hover { background: var(--inset); color: var(--ink); }
/* SpacesNav иконками (отдельно и внутри широкой оболочки) */
.cb-os-nav.d-icons { align-items: center; }
.cb-os-nav.d-icons .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.cb-os-nav.d-icons .cb-os-find { width: 40px; padding: 0; justify-content: center; }
.cb-os-nav.d-icons .cb-os-find span, .cb-os-nav.d-icons .cb-os-find kbd { display: none; }
.cb-os-nav.d-icons .it { position: relative; width: 40px; height: 40px; padding: 0; justify-content: center; }
.cb-os-nav.d-icons .it .nm { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); z-index: 40; padding: 4px 10px; border-radius: var(--radius-chip); background: var(--ink); color: var(--card); font-size: 12px; line-height: 16px; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; flex: none; }
.cb-os-nav.d-icons .it:hover .nm, .cb-os-nav.d-icons .it:focus-visible .nm { opacity: 1; visibility: visible; }
.cb-os-nav.d-icons .it .cnt { position: absolute; top: -4px; right: -6px; }
.cb-os-nav.d-icons .it .cnt b { display: none; }
.cb-os-nav.d-icons .it .cnt:not(:has(i.late)) b { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--ink); color: var(--card); font-size: 10px; box-shadow: 0 0 0 2px var(--shell); }
.cb-os-nav.d-icons .it .lock { position: absolute; top: -2px; right: -4px; }
.cb-os-shell.d-icons { grid-template-columns: 72px minmax(0, 1fr); }
.cb-os-shell.d-icons .cb-os-side { align-items: center; padding-inline: var(--space-2); }
.cb-os-shell.d-icons:not(.nav-open) .cb-os-brand b, .cb-os-shell.d-icons:not(.nav-open) .cb-os-brand small { display: none; }
/* «скрыто»: меню выдвигается бургером, в шапке переключатель пространства с текущим */
.cb-os-shell.d-hidden { grid-template-columns: minmax(0, 1fr); }
.cb-os-shell.d-hidden .cb-os-side { position: absolute; z-index: 30; top: 0; bottom: 0; left: 0; width: min(300px, 86%); overflow-y: auto; transform: translateX(-104%); visibility: hidden; transition: transform var(--motion-standard-out) var(--motion-ease), visibility 0s var(--motion-standard-out); box-shadow: var(--shadow-pop); }
.cb-os-shell.d-hidden.nav-open .cb-os-side { transform: none; visibility: visible; transition: transform var(--motion-standard-in) var(--motion-ease); }
.cb-os-shell.d-hidden .cb-os-main { grid-column: 1 / -1; }
.cb-os-shell.d-hidden .cb-os-burger { display: inline-grid; }
@container (max-width: 900px) {
  .cb-os-shell.d-icons .cb-os-side { align-items: stretch; padding-inline: var(--space-3); }
  .cb-os-topsw { display: none; }
}

/* ── src/styles/j-crm.css ── */
/* ── CRM (src/charts/j-crm.js) · классы cb-crm-*. Кегли блока: 22 число · 15 заголовок · 13 текст и подписи ── */
.cb-crm { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; font-size: 13px; line-height: 18px; }
.cb-crm-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.cb-crm-h .t { display: grid; gap: 2px; min-width: 0; }
.cb-crm-h .t b { font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-crm-h .t span { color: var(--ink-3); }
.cb-crm-h .a { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.cb-crm-src { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-crm-cap { color: var(--ink-2); font-weight: 500; }
.cb-crm-plate { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cb-crm-plate.warnish { background: var(--warn-soft); }
.cb-crm-plate.warnish .meta { color: var(--ink-2); }
.cb-crm-stack { display: grid; gap: var(--space-3); }
.cb-crm-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-3); align-items: stretch; }   /* R4: плашки пары одной высоты */
.cb-crm .acts { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-crm .meta { color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cb-crm .sec { display: grid; gap: var(--space-2); min-width: 0; }
.cb-crm .sum { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.cb-crm .sum b { font-size: 15px; font-weight: 600; }
.cb-crm .sum span { color: var(--ink-3); }
.cb-crm-none { color: var(--ink-3); padding: 2px 0; }
.cb-crm-fact { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--border); }
.cb-crm-over { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 500; white-space: nowrap; }
.cb-crm .big { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.cb-crm .big small { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.cb-crm-plate.st { gap: 2px; }
.cb-crm-plate.st .l { color: var(--ink-2); }
.cb-crm-plate.st .b { color: var(--ink-3); }

/* автор записи */
.cb-crm-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.cb-crm-who .av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 10px; font-weight: 700; background: var(--flame-soft); color: color-mix(in oklab, var(--flame-deep) 60%, var(--ink)); }
.cb-crm-who.system .av { background: var(--inset-hover); color: var(--ink-2); border-radius: 6px; }
.cb-crm-who.agent .av { background: var(--ink); color: var(--card); }
.cb-crm-who .n { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.cb-crm-who .ai, .cb-crm-who .sys { height: 18px; padding: 0 6px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.cb-crm-who .ai { background: var(--ink); color: var(--card); }
.cb-crm-who .sys { background: var(--inset); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border); }

/* чипы-фильтры */
.cb-crm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-crm-chips button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; font-size: 13px; transition: background-color .15s, color .15s; }
.cb-crm-chips button:hover { color: var(--ink); background: var(--inset); }
.cb-crm-chips button[aria-pressed="true"] { background: var(--inset); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-crm-chips .c { font-variant-numeric: tabular-nums; color: var(--ink-3); }

/* списки строк */
.cb-crm-list { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-crm-list > li { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--border); min-width: 0; }
.cb-crm-list > li:first-child { border-top: 0; }
.cb-crm-list .m { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cb-crm-list .m > b { font-weight: 500; font-size: 14px; line-height: 19px; }
.cb-crm-list .m > span { color: var(--ink-3); }
.cb-crm-list .r { display: flex; align-items: center; gap: var(--space-2); flex: none; font-variant-numeric: tabular-nums; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
.cb-crm-bul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.cb-crm-dl { margin: 0; display: grid; gap: 6px; }
.cb-crm-dl > div { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: var(--space-3); align-items: baseline; }
.cb-crm-dl dt { color: var(--ink-3); }
.cb-crm-dl dd { margin: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.cb-crm-dl.row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.cb-crm-dl.row > div { display: grid; grid-template-columns: none; gap: 2px; }
.cb-crm-receipt { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--ok-soft); color: var(--ink); }
.cb-crm-receipt > .cb-i { color: var(--ok); }
.cb-crm-receipt > span { flex: 1; min-width: 180px; }
.cb-crm-receipt.big > div { display: grid; gap: 2px; flex: 1; min-width: 200px; }
.cb-crm-receipt.big > div b { font-size: 15px; }
.cb-crm-receipt.big > div span { color: var(--ink-2); }
.cb-crm-scroll { overflow-x: auto; border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-crm-tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 520px; }
.cb-crm-tbl th, .cb-crm-tbl td { text-align: left; padding: 9px 12px; border-top: 1px solid var(--border); vertical-align: middle; }
.cb-crm-tbl thead th { border-top: 0; background: var(--inset); color: var(--ink-2); font-weight: 400; white-space: nowrap; }
.cb-crm-tbl tbody th { font-weight: 500; white-space: nowrap; }
.cb-crm-tbl .r { text-align: right; }
.cb-crm-select { height: var(--control-h-sm); border: 0; border-radius: var(--radius-pill); padding: 0 12px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); font: inherit; font-size: 13px; min-width: 0; max-width: 100%; cursor: pointer; }
.cb-crm-quote { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); display: grid; gap: 6px; }
.cb-crm-quote p { margin: 0; font-size: 14px; line-height: 20px; }
.cb-crm-quote footer { color: var(--ink-3); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.cb-crm-quote a, .cb-crm-touch a.src { color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.cb-crm-quote a:hover, .cb-crm-touch a.src:hover { color: var(--ink); text-decoration-color: currentColor; }

/* 1 · PhoneMask */
.cb-crm-phone { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.cb-crm-phone .num { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 500; font-size: 14px; white-space: nowrap; letter-spacing: .01em; }
.cb-crm-phone .num .cb-i { color: var(--ink-3); }
.cb-crm-phone .note { color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.cb-crm-phone .note.log { color: var(--ink-2); flex-basis: 100%; }

/* 4 · StageStepper */
.cb-crm-stepper { position: relative; overflow-x: auto; scrollbar-width: thin; border-radius: 4px; }
.cb-crm-stepper ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); font-size: 13px; line-height: 18px; }
.cb-crm-stepper li { position: relative; display: grid; gap: 2px; padding: 0 var(--space-3) 2px 0; min-width: 0; }
.cb-crm-stepper li::before { content: ""; position: absolute; left: 26px; right: 0; top: 11px; height: 1px; background: var(--border); }
.cb-crm-stepper li:last-child::before { display: none; }
.cb-crm-stepper li.past::before { background: var(--ink-3); }
.cb-crm-stepper .mk { position: relative; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--card); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border); margin-bottom: 6px; }
.cb-crm-stepper li.past .mk { background: var(--inset-hover); color: var(--ink); box-shadow: none; }
.cb-crm-stepper li.cur .mk { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.cb-crm-stepper .nm { font-weight: 500; color: var(--ink-2); }
.cb-crm-stepper li.cur .nm { color: var(--ink); font-weight: 600; }
.cb-crm-stepper .mt { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-crm-stepper li.cur .mt { color: var(--ink-2); }

/* 3 · NextStep */
.cb-crm-next .act { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-crm-next .cb-crm-plate.done .act { text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-2); }
.cb-crm-next .fact { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.cb-crm-next .fact .cb-i { color: var(--warn); }
.cb-crm-next p { margin: 0; color: var(--ink-2); }
.cb-crm-pick { display: grid; gap: var(--space-2); }
.cb-crm-pick .cb-seg { justify-self: start; }

/* 2 · DealCard */
.cb-crm-deal .ans { gap: var(--space-3); padding: var(--space-4); }
.cb-crm-deal .kvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-3) var(--space-4); }
.cb-crm-deal .kv { display: grid; gap: 2px; align-content: start; min-width: 0; }
.cb-crm-deal .kv > span { color: var(--ink-3); }
.cb-crm-deal .kv > b { font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-crm-deal .kv > b.big { font-size: 22px; line-height: 28px; }
.cb-crm-deal .kv small { font-size: 13px; color: var(--ink-3); }
.cb-crm .nx { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border-radius: 12px; background: var(--card); min-width: 0; }
.cb-crm .nx > .cb-i { margin-top: 2px; color: var(--ink-2); }
.cb-crm .nx > span { display: grid; gap: 2px; min-width: 0; }
.cb-crm .nx b { font-weight: 600; }
.cb-crm .nx small { font-size: 13px; color: var(--ink-3); }
.cb-crm-call .nx { background: var(--inset); }
.cb-crm-deal .own { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-3); flex-wrap: wrap; }
.cb-crm-deal .own .cb-crm-who { color: var(--ink); }
.cb-crm-deal .ev { display: grid; gap: var(--space-2); }
.cb-crm-deal .ev > .cb-btn { justify-self: start; }
.cb-crm-deal .fl { margin: 0; display: grid; }
.cb-crm-deal .fl > div { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; gap: var(--space-3); padding: 8px 0; border-top: 1px solid var(--border); }
.cb-crm-deal .fl > div:first-child { border-top: 0; }
.cb-crm-deal .fl dt { color: var(--ink-3); }
.cb-crm-deal .fl dd { margin: 0; display: grid; gap: 1px; min-width: 0; }
.cb-crm-deal .fl .v { font-weight: 500; }
.cb-crm-deal .fl .s { color: var(--ink-3); font-size: 12px; }

/* 5 · TouchTimeline */
.cb-crm-touch .tl { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-crm-touch .it { display: grid; grid-template-columns: 56px 116px minmax(0, 1fr); gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--border); align-items: start; }
.cb-crm-touch .tl > li:first-child { border-top: 0; }
.cb-crm-touch .when { display: grid; font-variant-numeric: tabular-nums; }
.cb-crm-touch .when b { font-weight: 500; }
.cb-crm-touch .when span { color: var(--ink-3); }
.cb-crm-touch .ch { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-2); }
.cb-crm-touch .ch .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--inset); color: var(--ink-2); }
.cb-crm-touch .it.agent .ch .ic { background: var(--ink); color: var(--card); }
.cb-crm-touch .ch .cl { overflow: hidden; text-overflow: ellipsis; }
.cb-crm-touch .body { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.cb-crm-touch .who-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-crm-touch .dur { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-crm-touch .out { color: var(--ink); }
.cb-crm-touch a.src { font-size: 12px; }
.cb-crm-touch .gap { display: flex; align-items: center; gap: var(--space-3); padding: 6px 0; color: var(--ink-3); font-size: 12px; }
.cb-crm-touch .gap::before, .cb-crm-touch .gap::after { content: ""; flex: 1; height: 0; border-top: 1px dashed var(--mono-3); }
.cb-crm-touch .gap span { white-space: nowrap; font-weight: 500; }

/* 6 · Client360 */
.cb-crm-c360 .id { gap: var(--space-3); }
.cb-crm-c360 .id .who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cb-crm-c360 .id .who > div { display: grid; min-width: 0; }
.cb-crm-c360 .id .who b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-crm-c360 .id .who span { color: var(--ink-3); }
.cb-crm-c360 .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-crm-c360 .tags .cb-tag { background: var(--card); }

/* 7 · StageBoard */
.cb-crm-board .cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: var(--space-3); overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.cb-crm-board .col { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; scroll-snap-align: start; transition: box-shadow .15s; }
.cb-crm-board .col.drop { box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-crm-board header { display: grid; gap: 2px; padding: 2px 4px 0; }
.cb-crm-board .nm { display: flex; align-items: center; gap: 6px; }
.cb-crm-board .nm b { font-size: 15px; font-weight: 600; }
.cb-crm-board .nm .c { min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-2); font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.cb-crm-board .sum { font-weight: 600; font-variant-numeric: tabular-nums; display: block; }
.cb-crm-board .nr, .cb-crm-board .mn { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-crm-board .cards { display: grid; gap: var(--space-2); align-content: start; flex: 1; min-height: 64px; }
.cb-crm-board .kc { background: var(--card); border-radius: 12px; padding: var(--space-2) var(--space-3) var(--space-2) 12px; display: grid; gap: 4px; box-shadow: var(--shadow-ring); cursor: grab; outline: none; }
.cb-crm-board .kc:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-crm-board .kc:active { cursor: grabbing; }
.cb-crm-board .kc .tt { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.cb-crm-board .kc .tt b { font-weight: 500; font-size: 13px; line-height: 18px; }
.cb-crm-board .kc .grip { color: var(--ink-3); flex: none; }
.cb-crm-board .kc .mm { display: flex; justify-content: space-between; gap: 6px; color: var(--ink-3); flex-wrap: wrap; }
.cb-crm-board .kc .money { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-crm-board .kc .ag { display: flex; gap: 4px 8px; flex-wrap: wrap; color: var(--ink-2); font-size: 12px; }
.cb-crm-board .kc .mv { display: flex; justify-content: flex-end; gap: 2px; margin-right: -4px; }
.cb-crm-board .kc .mv .cb-ibtn[disabled] { opacity: .3; cursor: default; }
.cb-crm-board .empty { color: var(--ink-3); border: 1px dashed var(--border); border-radius: 12px; padding: var(--space-3); text-align: center; }

/* 8 · TaskList */
.cb-crm-tasks .grp { display: grid; gap: 2px; }
.cb-crm-tasks .grp.overdue > .cb-crm-cap { color: var(--bad); }
.cb-crm-tasks li { align-items: flex-start; }
.cb-crm-tasks li .cb-check { margin-top: 1px; }
.cb-crm-tasks li.done .m > b { text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-2); }

/* 9 · SlaResponse */
.cb-crm-sla .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.cb-crm-sla .hist { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 96px; }
/* кнопка-колонка во всю высоту гистограммы (цель касания ≥ 24 px, на touch шире за счёт гэпа); видимая полоса — вложенный i */
.cb-crm-sla .hist .bar { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; border: 0; padding: 0; background: transparent; border-radius: 5px 5px 2px 2px; cursor: pointer; transition: opacity .15s; }
.cb-crm-sla .hist .bar > i { display: block; width: 100%; border-radius: 5px 5px 2px 2px; background: var(--ink); }
.cb-crm-sla .hist .bar.over > i { background: repeating-linear-gradient(-45deg, var(--flame) 0 2px, var(--flame-hatch) 2px 5px); }
@media (pointer: coarse) { .cb-crm-sla .hist { gap: 2px; height: 112px; } }
.cb-crm-sla .hist:hover .bar:not(.on) { opacity: .45; }
.cb-crm-sla .hist .pr { position: absolute; top: -4px; bottom: 0; width: 0; border-left: 1px dashed var(--ink-2); transform: translateX(-2px); pointer-events: none; }
.cb-crm-sla .ax { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.cb-crm-sla .read { color: var(--ink-2); min-height: 18px; font-variant-numeric: tabular-nums; }

/* 10 · QuietDeals, 12 · OwnerLoad — полоса с чертой нормы/медианы */
.cb-crm .track { position: relative; display: block; height: 8px; border-radius: var(--radius-pill); background: var(--inset); overflow: visible; }
.cb-crm .track i { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); background: var(--ink); }
.cb-crm .track i.over { right: auto; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: repeating-linear-gradient(-45deg, var(--flame) 0 2px, var(--flame-hatch) 2px 5px); }
.cb-crm .track em { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--ink-2); }
.cb-crm-quiet .q > li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--space-3); }
.cb-crm-quiet .bw { display: grid; gap: 6px; min-width: 0; }
.cb-crm-quiet .lb { color: var(--ink-3); }
.cb-crm-quiet .lb b { color: var(--ink); font-weight: 500; }
.cb-crm-quiet .lt { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; }
.cb-crm-quiet .cb-seg { align-self: flex-start; }
.cb-crm-load .lb { display: flex; align-items: center; gap: var(--space-2); min-width: 140px; }
.cb-crm-load .lb .track { flex: 1; }
.cb-crm-load .lb b { min-width: 22px; text-align: right; font-weight: 600; }
.cb-crm-load tr.med th, .cb-crm-load tr.med td { background: var(--inset); color: var(--ink-2); }
.cb-crm-load .help .cb-crm-list > li { padding: 6px 0; }

/* 11 · Promises */
.cb-crm-prom .grp { display: grid; gap: 2px; }
.cb-crm-prom li { flex-wrap: wrap; }
.cb-crm-prom .m { min-width: 200px; }
.cb-crm-prom .r { flex-direction: column; align-items: flex-end; gap: 2px; }
.cb-crm-prom .due { font-weight: 500; }
.cb-crm-prom li.done .m > b { text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-2); }

/* 13 · CallLog */
.cb-crm-call .hd { flex-direction: row; align-items: center; gap: var(--space-3); }
.cb-crm-call .hd .ic { width: 36px; height: 36px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--card); flex: none; }
.cb-crm-call .out { display: grid; gap: 2px; }
.cb-crm-call .out .l { color: var(--ink-3); }
.cb-crm-call .out b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-crm-call .pl { flex-direction: row; align-items: center; gap: var(--space-3); padding: 6px var(--space-4) 6px 6px; border-radius: var(--radius-pill); }
.cb-crm-call .pl .cb-ibtn:not(.on) { background: var(--card); }
.cb-crm-call .pl .t { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.cb-crm-call input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 6px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--ink) 0 var(--p), var(--mono-2) var(--p) 100%); cursor: pointer; margin: 0; }
.cb-crm-call input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--inset); }
.cb-crm-call input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink); }
.cb-crm-call .tr { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cb-crm-call .tr li { display: grid; grid-template-columns: auto 72px minmax(0, 1fr); gap: var(--space-2); align-items: baseline; padding: 6px 8px; border-radius: 10px; }
.cb-crm-call .tr li.on { background: var(--inset); }
.cb-crm-call .tc { border: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--radius-pill); height: 24px; padding: 0 8px; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--ink-2); }
.cb-crm-call .tc:hover { color: var(--ink); }
.cb-crm-call .sp { color: var(--ink-3); }

/* 14 · FieldHistory */
.cb-crm-fhist .fh > li { align-items: flex-start; flex-wrap: wrap; }
.cb-crm-fhist .fh .m { min-width: 220px; gap: 3px; }
.cb-crm-fhist .fn { color: var(--ink-3); }
.cb-crm .chg-v { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-crm .chg-v s { color: var(--ink-3); text-decoration-color: var(--ink-3); }
.cb-crm .chg-v b { font-weight: 500; }
.cb-crm-fhist .rs { color: var(--ink-2); }
.cb-crm-fhist .r { flex-direction: column; align-items: flex-end; gap: 2px; }
.cb-crm-fhist .at { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* 15 · DuplicateMerge */
.cb-crm-dup .cb-crm-tbl td.keep { background: color-mix(in oklab, var(--inset) 60%, transparent); font-weight: 500; }
.cb-crm-dup .mt { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); white-space: nowrap; }
.cb-crm-dup .mt.exact { color: var(--ok); font-weight: 500; }
.cb-crm-dup .mt.similar { color: var(--ink-2); font-weight: 500; }
.cb-crm-dup .src2 { display: flex; gap: var(--space-2) var(--space-5); flex-wrap: wrap; color: var(--ink-3); font-size: 12px; }
.cb-crm-dup .pick { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* 16 · BulkPreview, 17 · ImportMap */
.cb-crm-plate.chg { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px var(--space-2); }
.cb-crm-plate.chg b { font-weight: 600; }
.cb-crm-bulk .cb-crm-plate.st .cb-crm-bul { color: var(--ink-2); margin-top: 4px; }
.cb-crm-imp .map { display: grid; gap: 6px; }
.cb-crm-imp .mr { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--inset); }
.cb-crm-imp .mr > .cb-i { color: var(--ink-3); }
.cb-crm-imp .mr.skip .sc b { color: var(--ink-3); }
.cb-crm-imp .sc { display: grid; min-width: 0; }
.cb-crm-imp .sc b { font-weight: 500; }
.cb-crm-imp .sc span { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-crm-imp .cb-crm-plate.warnish { gap: 2px; }

/* 18 · AccessCard */
.cb-crm-acc .acc > li { flex-wrap: wrap; align-items: flex-start; }
.cb-crm-acc .acc .m { min-width: 200px; gap: 4px; }
.cb-crm-acc .sees { display: grid; gap: 2px; flex: 1; min-width: 160px; color: var(--ink-2); }
.cb-crm-acc .sees > span { display: inline-flex; align-items: center; gap: 6px; }
.cb-crm-acc .sees .hid { color: var(--ink-3); }
.cb-crm-acc .r { color: var(--ink-3); }

/* 19 · PipelineForecast */
.cb-crm-fcst .rows { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-crm-fcst .rows > li { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(120px, 1.4fr) 110px; gap: var(--space-3); align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.cb-crm-fcst .rows > li:first-child { border-top: 0; }
.cb-crm-fcst .m { display: grid; gap: 2px; min-width: 0; }
.cb-crm-fcst .m b { font-weight: 500; font-size: 14px; }
.cb-crm-fcst .m span { color: var(--ink-3); }
.cb-crm .nw { white-space: nowrap; }
.cb-crm-fcst .rb { position: relative; height: 14px; border-radius: var(--radius-pill); background: var(--inset); }
.cb-crm-fcst .rb.tot { height: 20px; }
.cb-crm-fcst .rb .band { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--seq-3); }
.cb-crm-fcst .rb .mid { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.cb-crm-fcst .rb em { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px dashed var(--ink-2); }
.cb-crm-fcst .v { display: grid; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cb-crm-fcst .v small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.cb-crm-fcst .total { border-top: 1px solid var(--mono-3) !important; }
.cb-crm-fcst .total .v b { font-size: 15px; }
.cb-crm-sw { display: inline-block; width: 14px; height: 9px; border-radius: 3px; flex: none; }
.cb-crm-sw.band { background: var(--seq-3); }
.cb-crm-sw.mid { width: 3px; height: 12px; border-radius: 2px; background: var(--ink); }

/* 20 · LostReasons */
.cb-crm-lost .rows { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-crm-lost .rows > li { border-top: 1px solid var(--border); display: grid; gap: var(--space-2); padding-bottom: 2px; }
.cb-crm-lost .rows > li:first-child { border-top: 0; }
.cb-crm-lost .rows > li.on { padding-bottom: var(--space-3); }
.cb-crm-lost .rw { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(120px, 1.3fr) 16px; gap: var(--space-3); align-items: center; width: 100%; border: 0; background: transparent; padding: 10px 4px; text-align: left; cursor: pointer; border-radius: 10px; }
.cb-crm-lost .rw:hover { background: var(--inset); }
.cb-crm-lost .nm { display: grid; gap: 2px; min-width: 0; }
.cb-crm-lost .nm b { font-weight: 500; font-size: 14px; }
.cb-crm-lost .nm span { color: var(--ink-3); }
.cb-crm-lost .bars { display: grid; gap: 4px; min-width: 0; }
.cb-crm-lost .bars .b { display: flex; align-items: center; gap: 6px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cb-crm-lost .bars i { display: block; height: 8px; border-radius: var(--radius-pill); min-width: 2px; }
.cb-crm-lost .bars i.cl { background: var(--ink); }
.cb-crm-lost .bars i.mg { background: var(--cold); }
.cb-crm-lost .chev { color: var(--ink-3); transition: transform .15s; }
.cb-crm-lost li.on .chev { transform: rotate(180deg); }

/* 21 · DealPage: shell → белые плитки → плашки */
.cb-crm-page { container-type: inline-size; background: var(--shell); border-radius: var(--radius-card); padding: var(--space-4); display: grid; gap: var(--space-4); min-width: 0; }
.cb-crm-page .pg-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: 4px 4px 0; }
.cb-crm-page .pg-h > div { display: grid; gap: 2px; min-width: 0; }
.cb-crm-page .pg-h b { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-crm-page .pg-h span { color: var(--ink-3); font-size: 13px; }
.cb-crm-page .grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-4); align-items: start; }
.cb-crm-page .col { display: grid; gap: var(--space-4); min-width: 0; }
.cb-crm-cell { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-5); min-width: 0; }
.cb-crm-page > .cb-crm-src { padding: 0 4px; }

@container (max-width: 900px) {
  .cb-crm-page .grid { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 520px) {
  .cb-crm-h { flex-wrap: wrap; }
  .cb-crm-touch .it { grid-template-columns: 52px minmax(0, 1fr); }
  .cb-crm-touch .it .body { grid-column: 1 / -1; }
  .cb-crm-quiet .q > li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cb-crm-fcst .rows > li { grid-template-columns: minmax(0, 1fr) auto; }
  .cb-crm-fcst .rb { grid-column: 1 / -1; grid-row: 2; }
  .cb-crm-lost .rw { grid-template-columns: minmax(0, 1fr) 16px; }
  .cb-crm-lost .bars { grid-column: 1 / -1; grid-row: 2; }
  .cb-crm-imp .mr { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cb-crm-imp .mr > .cb-i { display: none; }
  .cb-crm-sla .two { grid-template-columns: minmax(0, 1fr); }
  .cb-crm-page { padding: var(--space-2); border-radius: var(--radius-inset); }
  .cb-crm-cell { padding: var(--space-4); }
  .cb-crm-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cb-crm-deal .fl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cb-crm-call .tr li { grid-template-columns: auto minmax(0, 1fr); }
  .cb-crm-call .tr .tx { grid-column: 1 / -1; }
  .cb-crm-fhist .r, .cb-crm-prom .r { flex-direction: row; align-items: center; justify-content: flex-start; flex: 1 1 100%; gap: var(--space-2); }
}

/* углубление: признаки только при провайдере ([data-drill] ставит ядро) */
.cb-crm-board header[data-drill] { border-radius: 8px; margin: -2px -4px 0; padding: 4px 8px 2px; transition: background-color .12s; }
.cb-crm-board header[data-drill]:hover { background: var(--card); }
.cb-crm-quiet li[data-drill], .cb-crm-load tr[data-drill] { cursor: pointer; transition: background-color .12s; }
.cb-crm-quiet li[data-drill]:hover, .cb-crm-load tbody tr[data-drill]:hover { background: color-mix(in oklab, var(--ink) 4%, transparent); }
.cb-crm-quiet li[data-drill]:focus-visible, .cb-crm-load tr[data-drill]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ── src/styles/j-logo.css ── */
/* LogoStudio · рабочий инструмент: предпросмотр слева, открытые настройки справа. */
.cb-logostudio { width: min(100%, 1440px); margin: 0 auto; padding: var(--space-6); display: grid; gap: var(--space-5); color: var(--ink); background: var(--canvas); font-size: 14px; line-height: 20px; min-height: 100vh; box-sizing: border-box; }
.cb-logostudio *, .cb-logostudio *::before, .cb-logostudio *::after { box-sizing: border-box; }
.cb-logostudio-source { display: none; }
.cb-logostudio-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
.cb-logostudio-head > div:first-child { display: grid; gap: var(--space-2); min-width: 0; }
.cb-logostudio .eyebrow { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cb-logostudio h1, .cb-logostudio h2, .cb-logostudio p { margin: 0; }
.cb-logostudio h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -.035em; font-weight: 650; text-wrap: balance; }
.cb-logostudio-head p { color: var(--ink-3); max-width: 620px; font-size: 15px; line-height: 22px; }
.cb-logostudio .head-actions, .cb-logostudio .export-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.cb-logostudio-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: var(--space-5); align-items: start; }
.cb-logostudio-preview { min-width: 0; display: grid; gap: var(--space-4); position: sticky; top: var(--space-5); }
.cb-logostudio-stage { overflow: hidden; border-radius: var(--radius-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-ring); }
.cb-logostudio .stage-top, .cb-logostudio .stage-bottom { min-height: 48px; padding: 0 var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--ink-3); font-size: 12px; }
.cb-logostudio .stage-top { border-bottom: 1px solid var(--border); }
.cb-logostudio .stage-bottom { border-top: 1px solid var(--border); }
.cb-logostudio .stage-bottom > span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 500; }
.cb-logostudio .stage-canvas { position: relative; display: grid; place-items: center; min-height: 420px; padding: clamp(32px, 7vw, 88px); background-color: var(--inset); background-image: linear-gradient(45deg, var(--border) 25%, transparent 25%), linear-gradient(-45deg, var(--border) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--border) 75%), linear-gradient(-45deg, transparent 75%, var(--border) 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
.cb-logostudio-art { display: block; width: min(100%, 520px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 16px 24px color-mix(in oklab, var(--ink) 16%, transparent)); }
.cb-logostudio-export { border-radius: var(--radius-card); padding: var(--space-4); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.cb-logostudio-export > div:first-child { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.cb-logostudio-export h2, .cb-logostudio-section h2 { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-logostudio-export p { color: var(--ink-3); font-size: 12px; line-height: 17px; }
.cb-logostudio-export > .cb-btn { margin-left: auto; }
[data-theme="dark"] .cb-logostudio-export .cb-btn.primary { color: var(--on-flame); }
.cb-logostudio-controls { display: grid; gap: var(--space-3); min-width: 0; }
.cb-logostudio-section { display: grid; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); min-width: 0; }
.cb-logostudio .sec-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cb-logostudio .sec-title > span { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.cb-logostudio-search { display: flex; align-items: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-3); border-radius: var(--radius-chip); background: var(--inset); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border); }
.cb-logostudio-search:focus-within { box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 3px color-mix(in oklab, var(--focus) 14%, transparent); }
.cb-logostudio-search input { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; }
.cb-logostudio-search input::placeholder { color: var(--ink-3); }
.cb-logostudio-icons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-height: 254px; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.cb-logostudio-icons button { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 0; border-radius: var(--radius-chip); background: var(--inset); color: var(--ink-2); cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.cb-logostudio-icons button:hover { background: var(--inset-hover); color: var(--ink); }
.cb-logostudio-icons button.selected, .cb-logostudio-icons button[aria-pressed="true"] { background: var(--flame-soft); color: var(--flame-deep); box-shadow: inset 0 0 0 2px var(--flame); }
.cb-logostudio-icons button .cb-i { width: 22px; height: 22px; }
.cb-logostudio-empty { padding: var(--space-5) var(--space-3); text-align: center; border-radius: var(--radius-chip); background: var(--inset); color: var(--ink-3); font-size: 13px; }
.cb-logostudio .cb-seg.inset { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.cb-logostudio .cb-seg.inset button { padding-inline: 6px; white-space: normal; }
.cb-logostudio .color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.cb-logostudio-color { display: grid; gap: 6px; min-width: 0; color: var(--ink-2); font-size: 12px; }
.cb-logostudio-color .control { height: 44px; display: flex; align-items: center; gap: var(--space-2); padding: 5px var(--space-3) 5px 5px; border-radius: var(--radius-chip); background: var(--inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-logostudio-color input[type="color"] { width: 34px; height: 32px; flex: none; border: 0; border-radius: calc(var(--radius-chip) - 3px); padding: 0; background: transparent; cursor: pointer; }
.cb-logostudio-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cb-logostudio-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: calc(var(--radius-chip) - 3px); }
.cb-logostudio-color code { min-width: 0; color: var(--ink-2); font-family: var(--font-mono); font-size: 11px; }
.cb-logostudio-range { display: grid; gap: 7px; }
.cb-logostudio-range label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--ink-2); font-size: 13px; }
.cb-logostudio-range output { min-width: 48px; text-align: right; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.cb-logostudio-range input[type="range"] { width: 100%; height: 20px; margin: 0; accent-color: var(--flame); cursor: pointer; }
.cb-logostudio-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 32px; color: var(--ink-2); font-size: 13px; }
.cb-logostudio-switch input { width: 36px; height: 20px; accent-color: var(--flame); cursor: pointer; }
.cb-logostudio-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 24px; color: var(--ink-3); font-size: 12px; }
.cb-logostudio-foot > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.cb-logostudio-foot [role="status"] { color: var(--ink-2); text-align: right; }
.cb-logostudio :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

@media (max-width: 1080px) {
  .cb-logostudio-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); gap: var(--space-4); }
  .cb-logostudio .stage-canvas { min-height: 340px; }
  .cb-logostudio-export { align-items: flex-start; }
  .cb-logostudio-export .export-actions { width: 100%; }
  .cb-logostudio-export .export-actions .cb-btn { flex: 1; }
}
@media (max-width: 820px) {
  .cb-logostudio { padding: var(--space-5); }
  .cb-logostudio-layout { grid-template-columns: 1fr; }
  .cb-logostudio-preview { position: static; }
  .cb-logostudio .stage-canvas { min-height: 0; }
  .cb-logostudio-art { width: min(100%, 440px); }
  .cb-logostudio-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .cb-logostudio-section:first-child { grid-row: span 2; }
  .cb-logostudio-icons { max-height: 352px; }
}
@media (max-width: 560px) {
  .cb-logostudio { padding: var(--space-4) var(--space-3); gap: var(--space-4); }
  .cb-logostudio-head { align-items: flex-start; flex-direction: column; gap: var(--space-4); }
  .cb-logostudio h1 { font-size: 30px; }
  .cb-logostudio .head-actions { width: 100%; }
  .cb-logostudio .head-actions .cb-btn { flex: 1; min-height: 44px; }
  .cb-logostudio .head-actions .cb-ibtn { width: 44px; height: 44px; }
  .cb-logostudio .stage-canvas { padding: var(--space-6); }
  .cb-logostudio .stage-top, .cb-logostudio .stage-bottom { padding-inline: var(--space-3); }
  .cb-logostudio-export { padding: var(--space-3); }
  .cb-logostudio-export .export-actions { flex-direction: column; }
  .cb-logostudio-export .export-actions .cb-btn { width: 100%; min-height: 44px; }
  .cb-logostudio-export > .cb-btn { width: 100%; margin-left: 0; min-height: 44px; }
  .cb-logostudio-controls { grid-template-columns: 1fr; }
  .cb-logostudio-section:first-child { grid-row: auto; }
  .cb-logostudio-section { padding: var(--space-4) var(--space-3); }
  .cb-logostudio-icons { grid-template-columns: repeat(6, minmax(44px, 1fr)); max-height: 276px; overflow-x: auto; }
  .cb-logostudio-icons button { min-height: 44px; }
  .cb-logostudio .cb-seg.inset button { min-height: 44px; }
  .cb-logostudio-range input[type="range"] { height: 32px; }
  .cb-logostudio-foot { align-items: flex-start; flex-direction: column; }
  .cb-logostudio-foot [role="status"] { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-logostudio-icons button { transition: none; }
}

/* ── src/styles/k-comms.css ── */
/* ── Общение (src/charts/k-comms.js) ───────────────────────────────
   Подложки: ответ клиенту — inset; внутренний — песочная подложка sand + замок; агент — cold-подложка и квадратный аватар.
   Линии 1 px, радиусы токенами, цвет только токенами. */

/* общие: аватары, ИИ, объект, счётчик, фильтры-чипы, подвал */
.cb-cm-av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--flame-soft); color: color-mix(in oklab, var(--flame-deep) 60%, var(--ink)); font-size: 13px; font-weight: 600; line-height: 1; }
.cb-cm-av.sm { width: 32px; height: 32px; font-size: 12px; }
.cb-cm-av.xs { width: 24px; height: 24px; font-size: 10px; }
.cb-cm-av.ag { border-radius: 8px; background: var(--cold-1); color: var(--cold); }
.cb-cm-av.xs.ag { border-radius: 6px; }
.cb-cm-av.cl { background: var(--inset-hover); color: var(--ink-2); }
.cb-cm-av.sys { background: var(--inset); color: var(--ink-3); }
[data-theme="dark"] .cb-cm-av.ag { background: color-mix(in oklab, var(--cold) 45%, var(--card)); color: var(--ink); }
.cb-cm-ai { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 4px; background: var(--cold-1); color: var(--cold); font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1; flex: none; }
[data-theme="dark"] .cb-cm-ai { background: color-mix(in oklab, var(--cold) 55%, var(--card)); color: var(--ink); }
.cb-cm-obj { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: 26px; padding: 0 10px 0 8px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 12px; line-height: 16px; }
.cb-cm-obj .cb-i { color: var(--ink-3); }
.cb-cm-obj .k { color: var(--ink-3); flex: none; }
.cb-cm-obj .n { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cb-cm-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--flame-deep); color: var(--on-flame); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-cm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cb .cb-cm-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .15s, color .15s; }
.cb .cb-cm-chip:hover { background: var(--inset-hover); color: var(--ink); }
.cb-cm-chip .n { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12px; }
.cb-cm-chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.cb-cm-chip[aria-pressed="true"] .n { color: color-mix(in oklab, var(--on-primary) 70%, transparent); }
.cb-cm-foot { display: block; margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-cm-hit { background: var(--flame-hatch); color: var(--ink); border-radius: 3px; padding: 0 1px; }
.cb-cm-inl { color: var(--ink); font-weight: 600; background: var(--inset-hover); border-radius: 4px; padding: 0 3px; }
.cb-cm-inl.ag { background: var(--cold-1); color: var(--cold); }
[data-theme="dark"] .cb-cm-inl.ag { background: color-mix(in oklab, var(--cold) 30%, var(--card)); color: var(--cold-1); }
.cb-cm-file { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 10px; max-width: 100%; border-radius: var(--radius-chip); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; }
.cb-cm-file .n { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cb-cm-file .s { color: var(--ink-3); white-space: nowrap; }
.cb-cm-file .x, .cb-mention .x { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; }
.cb-cm-file .x:hover, .cb-mention .x:hover { background: var(--inset); color: var(--ink); }
.cb-cm-demo { display: grid; gap: var(--space-3); min-width: 0; }
.cb-cm-demo.split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.cb-cm-demo.tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: start; }
.cb-cm-demo.chips { justify-items: start; }
.cb-cm-demo.chips .row { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-cm-peek { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-cm-peek .ab, .cb-thread .ab { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cb-cm-peek .cb-cm-obj { background: var(--card); }
.cb-cm-peek p { margin: 0; font-size: 13px; color: var(--ink-2); }

/* кнопка плей и слайдер позиции */
.cb .cb-cm-play { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--primary); color: var(--on-primary); cursor: pointer; transition: transform .12s, background-color .15s; }
.cb .cb-cm-play:hover { background: color-mix(in oklab, var(--primary) 86%, var(--card)); }
.cb-cm-play:active { transform: scale(.96); }
.cb-cm-scrub { position: relative; cursor: pointer; border-radius: 8px; outline: none; }
.cb-cm-scrub:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ════ 1. Входящие ════ */
.cb-inbox { display: grid; gap: var(--space-3); min-width: 0; align-content: start; }
.cb-inbox .hd { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-inbox .hd .t { display: flex; align-items: center; gap: var(--space-2); }
.cb-inbox .hd .t b { font-size: 16px; line-height: 22px; font-weight: 600; }
.cb-inbox .hd .nil { font-size: 12px; color: var(--ink-3); }
.cb-inbox .list { display: grid; gap: var(--space-3); min-width: 0; }
.cb-inbox .grp { display: grid; gap: 2px; min-width: 0; }
.cb-inbox .gl { display: flex; gap: 6px; align-items: baseline; padding: 0 4px 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.cb-inbox .gl span { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.cb-inbox .row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) 10px; gap: var(--space-3); align-items: start; width: 100%; padding: var(--space-2) var(--space-3) var(--space-2) 8px; border: 0; border-radius: var(--radius-inset); background: transparent; text-align: left; cursor: pointer; transition: background-color .12s; }
.cb-inbox .row:hover { background: var(--inset); }
.cb-inbox .row.on { background: var(--inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-inbox .row .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-inbox .row:hover .ic, .cb-inbox .row.on .ic { background: var(--card); }
.cb-inbox .row .ic.decision, .cb-inbox .row .ic.due { color: var(--ink); }
.cb-inbox .body { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.cb-inbox .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; width: 100%; font-size: 12px; line-height: 16px; color: var(--ink-3); min-width: 0; }
.cb-inbox .meta > * { white-space: nowrap; }
.cb-inbox .meta .ty { color: var(--ink-2); font-weight: 600; }
.cb-inbox .meta .at { margin-left: auto; padding-left: 8px; font-variant-numeric: tabular-nums; }
.cb-inbox .ti { font-size: 14px; line-height: 19px; color: var(--ink-2); text-wrap: pretty; }
.cb-inbox .row.unread .ti { color: var(--ink); font-weight: 600; }
.cb-inbox .row .cb-cm-obj { height: 24px; }
.cb-inbox .row:hover .cb-cm-obj, .cb-inbox .row.on .cb-cm-obj { background: var(--card); }
.cb-inbox .sla { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-inbox .dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--flame); }
.cb-inbox.compact .row { padding: 8px 8px 8px var(--space-2); }
.cb-inbox.compact .cb-cm-chip { height: 28px; padding: 0 10px; font-size: 12px; }
.cb-inbox.compact .cb-cm-chip .cb-i { display: none; }

/* ════ 4. Упоминание ════ */
.cb-mention { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px var(--space-3) 4px 4px; border-radius: var(--radius-pill); background: var(--inset); font-size: 13px; line-height: 18px; flex-wrap: wrap; }
.cb-mention .n { font-weight: 500; white-space: nowrap; }
.cb-mention.ag { border-radius: var(--radius-chip); background: color-mix(in oklab, var(--cold-1) 55%, var(--card)); }
[data-theme="dark"] .cb-mention.ag { background: color-mix(in oklab, var(--cold) 16%, var(--card)); }
.cb-mention .sc { flex-basis: 100%; padding: 0 0 2px 30px; font-size: 12px; line-height: 16px; color: var(--ink-2); }

/* ════ 3. Поле ввода ════ */
.cb-compose { display: grid; gap: var(--space-2); min-width: 0; }
.cb-compose .field { position: relative; display: grid; border-radius: var(--radius-inset); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); transition: background-color .15s; }
.cb-compose.internal .field { background: color-mix(in oklab, var(--sand) 12%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sand) 40%, var(--border)); }
.cb-compose .field:focus-within { box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-compose textarea { display: block; width: 100%; min-height: 64px; resize: vertical; border: 0; outline: 0; background: transparent; padding: 12px var(--space-4) 4px; font: inherit; font-size: 14px; line-height: 20px; color: var(--ink); }
.cb-compose textarea::placeholder { color: var(--ink-3); }
.cb-compose textarea:disabled { cursor: not-allowed; }
.cb-compose.off .field { background: var(--inset); box-shadow: none; }
.cb-compose .files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 6px; }
.cb-compose .bar { display: flex; align-items: center; gap: 4px; padding: 4px 6px 6px; flex-wrap: wrap; }
.cb-compose .bar .kbd { margin-left: auto; padding-right: 6px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.cb-compose .sees { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-3); padding: 0 4px; }
.cb-compose .sees b { color: var(--ink-2); font-weight: 600; }
.cb-compose.internal .sees .cb-i { color: var(--sand); }
.cb-compose .calls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); padding: 0 4px; }
.cb-compose .calls .own { font-style: normal; }
.cb-cm-pop { position: absolute; left: 8px; right: 8px; top: calc(100% - 36px); z-index: 5; margin: 0; padding: 6px; list-style: none; max-width: 360px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-pop); display: grid; gap: 2px; }
.cb-cm-pop li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; min-width: 0; }
.cb-cm-pop li.on { background: var(--inset); }
.cb-cm-pop li.no { cursor: not-allowed; }
.cb-cm-pop li.no .cb-cm-av, .cb-cm-pop li.no b { opacity: .55; }
.cb-cm-pop .t { display: grid; min-width: 0; }
.cb-cm-pop .t b { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.cb-cm-pop .t small { font-size: 12px; line-height: 16px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ════ 5. Присутствие ════ */
.cb-presence { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-2); min-width: 0; }
.cb-presence b { color: var(--ink); font-weight: 600; }
.cb-presence.typing { padding: 4px 2px; }
.cb-presence .dots { display: inline-flex; gap: 3px; }
.cb-presence .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: cb-cm-blink 1.2s infinite ease-in-out; }
.cb-presence .dots i:nth-child(2) { animation-delay: .2s; }
.cb-presence .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes cb-cm-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.cb-presence.lock { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--warn-soft); color: var(--ink); align-items: start; }
.cb-presence.lock .ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--warn); }
.cb-presence.lock .t { display: grid; gap: 2px; }
.cb-presence.lock .t span { color: var(--ink-2); font-size: 12px; line-height: 16px; }
.cb-presence.lock .a { grid-column: 2; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cb-presence.over { padding: 8px 12px; border-radius: var(--radius-inset); background: var(--inset); }
.cb-presence.over .cb-i { color: var(--warn); }

/* ════ 2. Тред ════ */
.cb-thread { display: grid; gap: var(--space-3); min-width: 0; align-content: start; }
.cb-thread .th { display: grid; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.cb-thread .about { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.cb-thread .tt { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.cb-thread .tt b { font-size: 16px; line-height: 22px; font-weight: 600; }
.cb-thread .who { display: flex; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.cb-thread .who .own { display: inline-flex; align-items: center; gap: 6px; }
.cb-thread .who .own b { color: var(--ink); font-weight: 600; }
.cb-thread .who .ppl { display: inline-flex; align-items: center; }
.cb-thread .who .ppl .cb-cm-av { box-shadow: 0 0 0 2px var(--card); }
.cb-thread .who .ppl .cb-cm-av + .cb-cm-av { margin-left: -6px; }
.cb-thread .who .ppl .c { margin-left: 8px; }
.cb-thread .who .cb-btn { margin-left: auto; }
.cb-thread .msgs { list-style: none; margin: 0; padding: 2px; display: grid; gap: var(--space-3); overflow-y: auto; overscroll-behavior: contain; align-content: start; border-radius: var(--radius-inset); }
.cb-thread .msgs:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-thread .msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.cb-thread .msg .b { display: grid; gap: 4px; padding: 10px 12px; border-radius: 4px var(--radius-inset) var(--radius-inset) var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-thread .msg.reply:not(.in) .b { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-thread .msg.internal .b { background: color-mix(in oklab, var(--sand) 14%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sand) 34%, transparent); }
.cb-thread .msg.agent .b { background: color-mix(in oklab, var(--cold-1) 45%, var(--card)); }
[data-theme="dark"] .cb-thread .msg.agent .b { background: color-mix(in oklab, var(--cold) 14%, var(--card)); }
.cb-thread .mh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-thread .mh b { color: var(--ink); font-size: 13px; font-weight: 600; }
.cb-thread .mh .lb { display: inline-flex; align-items: center; gap: 4px; }
.cb-thread .mh .lb.internal { color: var(--ink-2); font-weight: 500; }
.cb-thread .mh .at { margin-left: auto; font-variant-numeric: tabular-nums; }
.cb-thread .msg p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); overflow-wrap: break-word; }
.cb-thread .cite { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-size: 12px; line-height: 16px; color: var(--ink-2); padding: 2px 8px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--card) 70%, transparent); }
.cb-thread .mf { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-thread .msg.sys { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 12px; line-height: 16px; color: var(--ink-3); text-align: center; flex-wrap: wrap; }
.cb-thread .msg.sys .at { font-variant-numeric: tabular-nums; }
.cb-thread .end { height: 0; list-style: none; }
.cb-thread.closed .msgs { opacity: .85; }
.cb-cm-closed { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--ok-soft); color: var(--ink); font-size: 13px; line-height: 18px; }
.cb-cm-closed .cb-i { color: var(--ok); }
.cb-thread.empty .cb-state { padding: var(--space-8) var(--space-4); }

/* ════ 6. Комментарий к цифре ════ */
.cb-cellc { position: relative; min-width: 0; }
.cb-cellc .tile { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4); min-height: 148px; padding: var(--space-4) var(--space-4) var(--space-3) var(--space-5); border-radius: var(--radius-card); background: var(--inset); }
.cb-cellc .h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cb-cellc .lbl { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink-2); }
.cb-cellc .val { font-size: 30px; line-height: 34px; font-weight: 560; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.cb-cellc .val small { font-size: 18px; font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.cb-cellc .ft { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-cellc .mk { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 8px; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; flex: none; transition: background-color .15s; }
.cb-cellc .mk:hover, .cb-cellc.open .mk { background: var(--primary); color: var(--on-primary); }
.cb-cellc .mk.chg::after { content: ""; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--inset); }
.cb-cellc .pop { position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; right: 0; min-width: min(300px, 100%); display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--card); box-shadow: var(--shadow-pop); outline: none; }
.cb-cellc .ph { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.cb-cellc .ph > div { display: grid; gap: 2px; min-width: 0; }
.cb-cellc .ph b { font-size: 14px; font-weight: 600; }
.cb-cellc .ph span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-cellc .pop .chg { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--radius-chip); background: var(--warn-soft); font-size: 13px; line-height: 18px; color: var(--ink); }
.cb-cellc .pop .chg .cb-i { color: var(--warn); margin-top: 1px; }
.cb-cellc .pop .chg b { font-variant-numeric: tabular-nums; }
.cb-cellc .cl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); max-height: 220px; overflow-y: auto; }
.cb-cellc .cl li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.cb-cellc .cl .mh { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; font-size: 12px; color: var(--ink-3); }
.cb-cellc .cl .mh b { font-size: 13px; color: var(--ink); font-weight: 600; }
.cb-cellc .cl p { margin: 2px 0 0; font-size: 13px; line-height: 18px; }
.cb-cellc .rep { display: flex; gap: 6px; }
.cb-cellc .rep input { flex: 1; min-width: 0; height: var(--control-h-sm); padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); font: inherit; font-size: 13px; outline: 0; }
.cb-cellc .rep input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-cellc .rep input::placeholder { color: var(--ink-3); }

/* ════ 7. Голосовое ════ */
.cb-voice { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; container-type: inline-size; }
/* узкая карточка (375 px): трек не растёт по волне, длительность не выпирает, столбики волны сжимаются */
.cb-voice > * { min-width: 0; }
.cb-voice .vh .dur { flex: none; white-space: nowrap; }
.cb-voice .vh .t b, .cb-voice .vh .t span { overflow-wrap: break-word; }
.cb-voice .pl > * { flex-shrink: 0; }
.cb-voice .pl > .wave { flex: 1 1 0; overflow: hidden; }
.cb-voice .vh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.cb-voice .vh .t { display: grid; min-width: 0; flex: 1; }
.cb-voice .vh .t b { font-size: 14px; font-weight: 600; }
.cb-voice .vh .t span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-voice .dur { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-voice .pl { display: flex; align-items: center; gap: var(--space-3); padding: 8px 12px 8px 8px; border-radius: var(--radius-pill); background: var(--inset); }
.cb-voice .wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 36px; min-width: 0; }
.cb-voice .wave i, .cb-call .wv i { flex: 1 1 0; min-width: 1px; border-radius: 2px; background: var(--mono-3); transition: background-color .12s; }
.cb-voice .wave i.on, .cb-call .wv i.on { background: var(--flame); }
.cb-voice .tm, .cb-call .tm { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-voice .tm span, .cb-call .tm span { color: var(--ink-3); font-weight: 500; }
.cb-voice .tr { display: grid; gap: var(--space-2); }
.cb-voice .trh { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.cb-voice .trh b { font-size: 13px; font-weight: 600; }
.cb-voice .trh .cb-search { height: var(--control-h-sm); flex: 1 1 180px; max-width: 280px; }
.cb-voice .trh .hits { font-size: 12px; color: var(--ink-3); }
.cb-voice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cb-voice ol button { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; width: 100%; padding: var(--space-1) 8px; border: 0; border-radius: var(--radius-chip); background: transparent; text-align: left; cursor: pointer; font-size: 13px; line-height: 19px; color: var(--ink); transition: background-color .12s, opacity .12s; }
.cb-voice ol button:hover { background: var(--inset); }
.cb-voice ol button.on { background: var(--accent-soft); }   /* выбранное — подложкой, без полосы-акцента (D16, У-0225) */
.cb-voice ol button.dim { opacity: .5; }
/* узкая карточка голосового: после базовых правил, чтобы перекрыть их */
@container (max-width: 420px) {
  .cb-voice .pl { gap: var(--space-2); padding-right: 10px; }
  .cb-voice .wave { gap: 1px; }
}
.cb-voice .ts, .cb-trans .ts, .cb-call .ts { font-family: var(--font-mono); font-size: 12px; font-size-adjust: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ════ 8. Цитата ════ */
.cb-quote { position: relative; margin: 0; display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); border-radius: var(--radius-inset); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); min-width: 0; transition: box-shadow .15s; }
.cb-quote.on { box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-quote .qi { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-quote blockquote { margin: 0; }
.cb-quote blockquote p { margin: 0; font-size: 16px; line-height: 23px; font-weight: 500; letter-spacing: -.005em; text-wrap: pretty; }
.cb-quote figcaption { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.cb-quote .w { display: grid; min-width: 0; flex: 1; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-quote .w b { font-size: 13px; color: var(--ink); font-weight: 600; }
.cb-quote .cb-btn { font-variant-numeric: tabular-nums; }
.cb-quote .src { display: flex; min-width: 0; }

/* ════ 9. Плеер звонка ════ */
.cb-call { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-call .chd { display: flex; align-items: flex-start; gap: 10px; }
.cb-call .chd .ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink-2); }
.cb-call .chd .t { display: grid; min-width: 0; flex: 1; }
.cb-call .chd .t b { font-size: 14px; line-height: 19px; font-weight: 600; }
.cb-call .chd .t span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-call .pl { display: flex; align-items: center; gap: var(--space-3); }
.cb-call .tl { display: grid; gap: 6px; padding: 4px 0; }
.cb-call .wv { display: flex; align-items: center; gap: 1px; height: 52px; }
.cb-call .wv i { background: var(--mono-2); }
.cb-call .mk { position: absolute; top: 0; height: 60px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--c); }
.cb-call .mk::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--inset); }
.cb-call .lane { display: grid; gap: 2px; }
.cb-call .lane .ln { padding-left: 6px; font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-call .lane .tk { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--card); overflow: hidden; }
.cb-call .lane .tk i { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill); }
.cb-call .lane.manager .tk i { background: var(--ink); }
.cb-call .lane.client .tk i { background: var(--cold); }
.cb-call .head { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; pointer-events: none; }
.cb-call .axis { display: flex; justify-content: space-between; font-size: 11px; line-height: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: -4px; }
.cb-call .marks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cb-call .mkb { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px 4px 10px; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font-size: 12px; line-height: 16px; cursor: pointer; text-align: left; transition: background-color .15s; }
.cb-call .mkb:hover { background: var(--inset-hover); }
.cb-call .mkb.on { background: var(--accent-soft); }   /* текущая метка — подложкой, без кольца (D16, У-0225) */
.cb-call .mkb i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.cb-call .mkb b { font-weight: 600; }
.cb-call .mkb .d { color: var(--ink-3); }
@media (hover: none), (pointer: coarse) { .cb-call .mkb { padding-top: 14px; padding-bottom: 14px; } } /* 44 px на телефоне: общее «не меньше 24» сильнее min-height */

/* ════ 10. Расшифровка ════ */
.cb-trans { display: grid; gap: var(--space-3); min-width: 0; }
.cb-trans .tb { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-trans .tb .cb-search { height: var(--control-h-sm); flex: 1 1 200px; max-width: 320px; }
.cb-trans .st { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-trans .st .ok { color: var(--ok); }
.cb-trans .ls { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-trans .ls li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: var(--space-2) var(--space-2); border-top: 1px solid var(--border); transition: opacity .12s, background-color .12s; }
.cb-trans .ls li:first-child { border-top: 0; }
.cb-trans .ls li.dim { opacity: 1; color: var(--ink-3); }   /* приглушение цветом ink-3, не прозрачностью: текст держит ≥ 4,5:1 */
.cb-trans .ls li.dim :is(b, span, p, q, small, button) { color: var(--ink-3); }
.cb-trans .ls li.on { background: var(--inset); border-radius: var(--radius-chip); }
.cb-trans .ls .ts { border: 0; background: transparent; padding: 2px 0; text-align: left; cursor: pointer; border-radius: 4px; }
.cb-trans .ls .ts:disabled { cursor: default; }
.cb-trans .ls .ts:not(:disabled):hover { color: var(--ink); text-decoration: underline; }
.cb-trans .b { display: grid; gap: 4px; min-width: 0; }
.cb-trans .who { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-trans .who i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.cb-trans li.client .who i { background: var(--cold); }
.cb-trans .who b { color: var(--ink-2); font-weight: 600; }
.cb-trans .b p { margin: 0; font-size: 14px; line-height: 20px; overflow-wrap: break-word; }
.cb-trans .rb { display: flex; flex-wrap: wrap; gap: 4px; }
.cb-cm-rub { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.cb-trans li.on .cb-cm-rub { background: var(--card); }
.cb-cm-rub.ok { background: var(--ok-soft); color: var(--ok); }

/* ════ 11. Список тредов ════ */
.cb-tlist { display: grid; gap: var(--space-3); min-width: 0; }
.cb-tlist .hd { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.cb-tlist .hd > div { display: flex; align-items: baseline; gap: 6px; }
.cb-tlist .hd b { font-size: 16px; line-height: 22px; font-weight: 600; }
.cb-tlist .hd .n { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.cb-tlist .hd .cb-btn { margin-left: auto; }
.cb-tlist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cb-tlist .row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; width: 100%; padding: var(--space-3); border: 0; border-radius: var(--radius-inset); background: transparent; text-align: left; cursor: pointer; transition: background-color .12s; }
.cb-tlist .row:hover { background: var(--inset); }
.cb-tlist .row.on { background: var(--inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-tlist .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-tlist .ic.int { background: color-mix(in oklab, var(--sand) 18%, var(--card)); color: var(--ink); }
.cb-tlist .row:hover .ic:not(.int), .cb-tlist .row.on .ic:not(.int) { background: var(--card); }
.cb-tlist .b { display: grid; gap: 4px; min-width: 0; }
.cb-tlist .ti { font-size: 14px; line-height: 19px; font-weight: 500; }
.cb-tlist .mt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-tlist .mt .cb-status { font-size: 12px; }
.cb-tlist .cnt { display: flex; align-items: center; gap: 6px; }
.cb-tlist .cnt .c { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ════ 12. Настройки уведомлений ════ */
.cb-nset { display: grid; gap: var(--space-4); min-width: 0; }
.cb-nset .tw { overflow-x: auto; border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-nset table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.cb-nset thead th { height: 40px; padding: 0 var(--space-3); background: var(--inset); color: var(--ink-2); font-weight: 400; font-size: 12px; text-align: left; white-space: nowrap; }
.cb-nset thead th.c { text-align: center; width: 1%; }
.cb-nset thead th.c .cb-i { display: none; }
.cb-nset tbody th, .cb-nset tbody td { padding: 8px var(--space-3); border-top: 1px solid var(--border); text-align: left; font-weight: 400; }
.cb-nset td.c { text-align: center; vertical-align: middle; line-height: 0; }
.cb-nset td.c .cb-check { vertical-align: middle; }
.cb-nset .ev { display: flex; align-items: center; gap: 10px; }
.cb-nset .ev .cb-i { color: var(--ink-3); }
.cb-nset .ev > span { display: grid; }
.cb-nset .ev b { font-weight: 500; }
.cb-nset .ev small { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-nset .quiet { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-nset .qh { display: flex; align-items: center; gap: var(--space-3); }
.cb-nset .ql { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.cb-nset .qt { display: flex; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.cb-nset .qt.off { opacity: .5; }
.cb-nset .qt label { display: inline-flex; align-items: center; gap: 6px; }
.cb-nset select { height: var(--control-h-sm); padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.cb-nset select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-nset .urg { flex-basis: 100%; }
.cb-nset .ft { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-nset .ft > span { flex: 1; font-size: 12px; color: var(--ink-3); min-width: 120px; }
.cb-cm-sw { position: relative; width: 40px; height: 24px; flex: none; border: 0; border-radius: var(--radius-pill); background: var(--mono-2); cursor: pointer; transition: background-color .15s; }
.cb-cm-sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-ring); transition: transform .15s; }
.cb-cm-sw[aria-checked="true"] { background: var(--primary); }
.cb-cm-sw[aria-checked="true"] i { transform: translateX(16px); background: var(--on-primary); }

/* ════ 13. Дайджест ════ */
.cb-digest { display: grid; gap: var(--space-3); min-width: 0; }
.cb-digest .dh { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.cb-digest .when { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.cb-digest .msg { border-radius: var(--radius-inset); background: var(--inset); padding: var(--space-3); display: grid; gap: var(--space-2); }
.cb-digest .mhd { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 0 4px 8px; border-bottom: 1px solid var(--border); font-size: 13px; }
.cb-digest .mhd span { color: var(--ink-3); font-size: 12px; }
.cb-digest .mb { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: 4px var(--radius-inset) var(--radius-inset) var(--radius-inset); background: var(--card); box-shadow: var(--shadow-ring); max-width: 460px; }
.cb-digest .msg.mail .mb { border-radius: var(--radius-chip); max-width: none; box-shadow: none; }
.cb-digest .fr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-digest .fr .cb-cm-av { background: var(--flame); color: var(--on-flame); }
.cb-digest .fr b { font-size: 14px; font-weight: 600; }
.cb-digest .pd { margin: -6px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-digest .nums { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cb-digest .nums li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-3); align-items: baseline; }
.cb-digest .nums .l { font-size: 13px; color: var(--ink-2); }
.cb-digest .nums b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.cb-digest .nums .b { grid-column: 1 / -1; font-size: 12px; line-height: 16px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-digest .nums .b.ok { color: var(--ok); }
.cb-digest .nums .b.bad { color: var(--bad); }
.cb-digest .ex { display: grid; gap: 4px; padding-top: var(--space-2); border-top: 1px solid var(--border); font-size: 13px; line-height: 18px; }
.cb-digest .ex ol { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.cb-digest .ex span { white-space: nowrap; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-digest .lk { display: flex; align-items: flex-start; gap: 8px; padding: 8px var(--space-3); border-radius: var(--radius-chip); background: var(--inset); font-size: 13px; line-height: 18px; }
.cb-digest .lk > span { display: grid; min-width: 0; }
.cb-digest .lk .u { color: var(--ink-3); font-size: 12px; font-family: var(--font-mono); font-size-adjust: none; overflow-wrap: break-word; }
.cb-digest .nt { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-digest .ft { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-digest .ft > span { flex: 1; font-size: 12px; color: var(--ink-3); min-width: 140px; }

/* ════ 14. Рабочая область ════ */
.cb-ws { container-type: inline-size; min-width: 0; }
.cb-ws-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.cb-ws-h .t { display: grid; gap: 2px; min-width: 0; }
.cb-ws-h .t b { font-size: 16px; font-weight: 600; color: var(--ink); }
.cb-ws-h .t span { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.cb-ws > .g { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(240px, 280px); gap: var(--space-3); align-items: stretch; }   /* R4: три панели одной высоты; у .col align-content: start */
.cb-ws .col { min-width: 0; padding: var(--space-4); border-radius: var(--radius-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); display: grid; gap: var(--space-3); align-content: start; }
.cb-ws .col.in .list { max-height: 720px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.cb-ws .col.obj { background: var(--inset); box-shadow: none; }
.cb-cm-objcard { display: grid; gap: var(--space-3); min-width: 0; }
.cb-cm-objcard .oh { display: flex; align-items: flex-start; gap: 10px; }
.cb-cm-objcard .oh > div { display: grid; min-width: 0; }
.cb-cm-objcard .oi { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--card); color: var(--ink-2); }
.cb-cm-objcard .ok { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cb-cm-objcard .oh b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-cm-objcard dl { margin: 0; display: grid; gap: 2px; border-radius: var(--radius-inset); background: var(--card); padding: 4px var(--space-3); }
.cb-cm-objcard dl > div { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--border); }
.cb-cm-objcard dl > div:first-child { border-top: 0; }
.cb-cm-objcard dt { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-cm-objcard dd { margin: 0; display: grid; }
.cb-cm-objcard dd b { font-size: 14px; line-height: 19px; font-weight: 600; }
.cb-cm-objcard dd span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-cm-objcard .ot { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.cb-cm-objcard .cb-btn.block { background: var(--card); }
@container (max-width: 1040px) {
  .cb-ws > .g { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
  .cb-ws .col.obj { grid-column: 1 / -1; }
}
@container (max-width: 700px) {
  .cb-ws > .g { grid-template-columns: minmax(0, 1fr); }
  .cb-ws .col { padding: var(--space-3); }
}

@media (max-width: 480px) {
  .cb-cellc .val { font-size: 24px; line-height: 30px; }
  .cb-quote blockquote p { font-size: 15px; line-height: 22px; }
  .cb-thread .who .cb-btn { margin-left: 0; }
  .cb-compose .bar .kbd { display: none; }
  .cb-compose .bar .cb-btn { margin-left: auto; }
  .cb-trans .ls li { grid-template-columns: minmax(0, 1fr) auto; }
  .cb-trans .ls .ts { grid-column: 1; grid-row: 1; justify-self: start; }
  .cb-trans .ls .b { grid-column: 1 / -1; }
  .cb-trans .ls .cb-ibtn { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-presence .dots i { animation: none; opacity: .6; }
}

/* ── src/styles/l-agents.css ── */
/* ── ИИ-агенты (CatalystBento · группа «ИИ-агенты») ─────────────────────
   Корень блока .cb-ag: по умолчанию плашка inset (внутри карточки), .card — самостоятельная плитка.
   --ag-plate — цвет вложенной плашки: на inset это card, на card это inset. */
.cb-ag { --ag-bg: var(--inset); --ag-plate: var(--card); background: var(--ag-bg); border-radius: var(--radius-inset); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; position: relative; color: var(--ink); font-size: 13px; line-height: 18px; }
.cb-ag.card { --ag-bg: var(--card); --ag-plate: var(--inset); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-5); }
.cb-ag .cb-btn.outline { background: var(--ag-plate); }
.cb-ag .cb-btn.outline:hover { background: var(--inset-hover); }
.cb-ag .cb-btn.ghost:hover { background: var(--ag-plate); }
.cb-ag .cb-ibtn:hover { background: var(--ag-plate); }
.cb-ag .cb-ibtn.sm { width: 32px; height: 32px; }
:where(.cb-ag) p { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-ag) ul, :where(.cb-ag) ol { list-style: none; margin: 0; padding: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-aplate { background: var(--ag-plate); border-radius: var(--radius-chip); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cb-alb { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2); }
.cb-alb .cb-i { color: var(--ink-3); }
.cb-alb .x { margin-left: auto; font-weight: 400; color: var(--ink-3); }
.cb-anote { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-2); font-size: 12px; line-height: 17px; }
.cb-anote .cb-i { color: var(--ink-3); margin-top: 0; }
.cb-afoot { font-size: 11px; line-height: 15px; color: var(--ink-3); }
.cb-alive { font-size: 12px; line-height: 16px; color: var(--ink-2); min-height: 0; }
.cb-alive:empty { display: none; }
.cb-ahd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-ahd > div:first-child { display: grid; gap: 2px; min-width: 0; }
.cb-ahd b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-ahd > div:first-child > span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-ag .acts { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.cb-ag .k { font-size: 11px; line-height: 15px; font-weight: 500; color: var(--ink-3); display: block; margin-bottom: 4px; }
.cb-atag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; background: var(--ag-plate); color: var(--ink-2); white-space: nowrap; }
.cb-atag.irr { background: var(--warn-soft); color: var(--warn); }
.cb-atag.fb { background: var(--ag-plate); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border); margin-left: 6px; }
.cb-alink { display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 0; color: var(--ink); font-size: 11px; font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-color: var(--mono-3); text-underline-offset: 2px; }
.cb-alink:hover { text-decoration-color: var(--ink); }

/* статус агента: точка + слово (закрытый список) */
.cb-ast { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.cb-ast i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.cb-ast.run i { background: var(--flame); box-shadow: 0 0 0 0 color-mix(in oklab, var(--flame) 50%, transparent); animation: cb-ag-pulse 1.6s ease-out infinite; }
.cb-ast.wait { color: var(--warn); } .cb-ast.wait i { background: var(--warn); }
.cb-ast.stopped i { border-radius: 1px; background: var(--ink-3); }
.cb-ast.done { color: var(--ok); } .cb-ast.done i { background: var(--ok); }
.cb-ast.partial { color: var(--warn); } .cb-ast.partial i { background: linear-gradient(90deg, var(--warn) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--warn); }
.cb-ast.error { color: var(--bad); } .cb-ast.error i { background: var(--bad); }
@keyframes cb-ag-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--flame) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 6px transparent; } }

/* аватар агента: квадрат со скруглением (человек — круг) */
.cb-aav { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--card-ink); color: var(--on-card-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--on-card-ink) 10%, transparent); }
.cb-aav.md { width: 44px; height: 44px; border-radius: 13px; }
.cb-aav.xs { width: 20px; height: 20px; border-radius: 6px; }
.cb-aitag { display: inline-grid; place-items: center; height: 16px; padding: 0 5px; border-radius: 5px; font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: .02em; background: var(--flame-soft); color: color-mix(in oklab, var(--flame-deep) 60%, var(--ink)); flex: none; }
[data-theme="dark"] .cb-aitag { color: var(--flame); }
.cb-ahum { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; }
.cb-ahum .cb-av.sm { width: 22px; height: 22px; font-size: 11px; }
.cb-ahum b { font-weight: 500; }
.cb-ahum > span:last-child > span { color: var(--ink-3); }

/* 1 · AgentBadge */
.cb-abadge { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; }
.cb-abadge .n { display: grid; gap: 1px; min-width: 0; }
.cb-abadge .nm { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cb-abadge .nm b { font-weight: 600; font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-abadge .rl { font-size: 12px; line-height: 16px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-abadge > .cb-ast { margin-left: var(--space-2); }
.cb-abadge.lg .nm b { font-size: 15px; line-height: 20px; }
.cb-abadge.xs { gap: 6px; }
.cb-abadge.xs .nm b { font-size: 12px; font-weight: 500; }
.cb-abadge.xs .cb-aitag { height: 14px; padding: 0 4px; font-size: 11px; }
.cb-aex { gap: var(--space-4); }
.cb-aex > .cb-abadge { justify-content: flex-start; }
.cb-aexrow { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.cb-aexcmp { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cb-aexcmp .k { margin: 0; }
.cb-aexstack { display: grid; gap: var(--space-3); min-width: 0; }

/* 2 · AgentCard */
.cb-acard .top, .cb-ascope .top, .cb-aappr .top, .cb-asig .top, .cb-achat .top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.cb-acard .facts { gap: 0; padding: 0 var(--space-3); }
.cb-acard .f { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--border); }
.cb-acard .f:first-child { border-top: 0; }
.cb-acard .f .k { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-3); font-weight: 400; }
.cb-acard .f .v { font-size: 13px; line-height: 18px; min-width: 0; }
.cb-acard .f .lim { display: grid; gap: 6px; }
.cb-acard .f .lim b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-acard .sub { color: var(--ink-3); font-size: 12px; }
.cb-acard .v .cb-ast { vertical-align: -2px; }
.cb-ameter { position: relative; height: 8px; border-radius: var(--radius-pill); background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; min-width: 60px; }
.cb-ameter i { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); background: var(--ink); }
.cb-ameter.full i { background: var(--bad); }
.cb-aask { display: grid; gap: var(--space-2); }
.cb-aask label { font-size: 12px; color: var(--ink-2); }
.cb-aask textarea { width: 100%; resize: vertical; min-height: 60px; border: 0; border-radius: var(--radius-chip); background: var(--ag-plate); box-shadow: inset 0 0 0 1px var(--border); padding: 10px 12px; font: inherit; font-size: 13px; color: var(--ink); }
.cb-aask textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 3 · AgentScope */
.cb-ascope .cols, .cb-aerr .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-2); }
.cb-alist { display: grid; gap: 6px; }
.cb-alist li { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 18px; }
.cb-alist li .cb-i { margin-top: 1px; }
.cb-alist.ok .cb-i { color: var(--ok); }
.cb-alist.no .cb-i { color: var(--bad); }
.cb-alist.no li { color: var(--ink-2); }
.cb-achips { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-achip { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--ag-plate); font-size: 12px; line-height: 16px; font-weight: 500; }
.cb-achip .cb-mono { font-size: 11px; color: var(--ink-2); }
.cb-achip.closed { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-2); }
.cb-achip .o { font-weight: 400; color: var(--ink-3); }
.cb-akill { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3); border-radius: var(--radius-chip); background: var(--bad-soft); }
.cb-akill .t { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.cb-akill .t b { font-size: 13px; font-weight: 600; color: var(--ink); }
.cb-akill .t span { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-akill.off { background: var(--ag-plate); }
.cb-ahold { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; height: var(--control-h-sm); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--bad); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bad) 45%, transparent); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.cb-ahold .fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--bad); }
.cb-ahold .cb-i, .cb-ahold .w { position: relative; }
.cb-ahold.on { color: var(--on-fill); }
[data-theme="dark"] .cb-ahold.on { color: var(--ink); }
.cb-ahold:active { transform: scale(.98); }

/* 4 · AgentQueueBoard */
.cb-aqb .scroll { overflow-x: auto; margin: 0 calc(var(--space-2) * -1); padding: 0 var(--space-2) var(--space-1); border-radius: var(--radius-chip); }
.cb-aqb .scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-aqb .cols { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(176px, 1fr)); gap: var(--space-2); }
.cb-aqb .col { background: var(--ag-plate); border-radius: var(--radius-chip); padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cb-aqb .col header { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 4px; font-size: 12px; font-weight: 600; }
.cb-aqb .col header .n { min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--ag-bg); display: inline-grid; place-items: center; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cb-aqb .col ul { display: grid; gap: var(--space-2); }
.cb-aqb .empty { padding: var(--space-3) 4px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border); text-align: center; color: var(--ink-3); font-size: 12px; border: 1px dashed var(--border); box-shadow: none; }
.cb-aqi { background: var(--ag-bg); border-radius: 10px; padding: var(--space-3); display: grid; gap: 6px; min-width: 0; }
.cb-aqi .r1 { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cb-aqi .cb-mono { font-size: 11px; color: var(--ink-3); }
.cb-aqi .age { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.cb-aqi > b { font-size: 13px; line-height: 17px; font-weight: 500; }
.cb-aqi .src { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-2); }
.cb-aqi .note { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-aqi .r2 { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cb-aqi .r2 .cb-abadge { min-width: 0; flex: 1 1 auto; }
.cb-aqi .qa { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; min-width: 0; }
.cb-aqi .cb-ibtn.sm { width: 28px; height: 28px; margin: -4px -4px -4px 0; }
.cb-aqbtn { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 9px; border: 0; border-radius: var(--radius-pill); background: var(--ag-plate); color: var(--ink); font-size: 11px; font-weight: 600; cursor: pointer; }
.cb-aqbtn:hover { background: var(--inset-hover); }
.cb-ag.card .cb-aqbtn { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }

/* 5 · RunPipeline */
.cb-arun .top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.cb-arun .top .t { display: grid; gap: 2px; min-width: 0; }
.cb-arun .top b { font-size: 14px; line-height: 19px; font-weight: 600; }
.cb-arun .top .t span { font-size: 12px; line-height: 16px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-arun .bar { display: flex; gap: 3px; }
.cb-arun .bar i { flex: 1; height: 4px; border-radius: 2px; background: var(--mono-1); }
.cb-arun .bar i.on { background: var(--ink); }
.cb-arun .bar i.cur { background: var(--flame); }
.cb-arun .steps { display: grid; gap: 0; }
.cb-astep { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: 9px 0; border-top: 1px solid var(--border); }
.cb-astep:first-child { border-top: 0; }
.cb-astep .mk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--ag-plate); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border); font-variant-numeric: tabular-nums; }
.cb-astep.done .mk { background: var(--ink); color: var(--ag-bg); box-shadow: none; }
.cb-astep.run .mk { background: var(--flame-deep); color: var(--on-flame); box-shadow: none; animation: cb-ag-ring 1.6s ease-out infinite; }
.cb-astep.error .mk { background: var(--bad); color: var(--on-fill); box-shadow: none; }
.cb-astep.stopped .mk { background: var(--ag-plate); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 6px; }
@keyframes cb-ag-ring { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--flame) 50%, transparent); } 80%, 100% { box-shadow: 0 0 0 7px transparent; } }
.cb-astep .b { display: grid; gap: 2px; min-width: 0; }
.cb-astep .b b { font-size: 13px; line-height: 18px; font-weight: 500; }
.cb-astep.wait .b b, .cb-astep.skip .b b { color: var(--ink-3); font-weight: 400; }
.cb-astep .m { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 11px; line-height: 15px; color: var(--ink-3); }
.cb-astep .r { display: grid; justify-items: end; gap: 2px; font-size: 11px; line-height: 15px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-astep .r .w { font-weight: 500; }
.cb-astep.run .r .w { color: var(--ink); }
.cb-astep.error .r .w { color: var(--bad); }
.cb-arun .ft { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.cb-arun .ft .sum { font-size: 12px; line-height: 16px; color: var(--ink-2); flex: 1 1 200px; }

/* 6 · ApprovalCard */
.cb-aappr .head { display: grid; gap: 2px; }
.cb-aappr .head .k { margin: 0; }
.cb-aappr .intent { font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-aappr .why { font-size: 12px; color: var(--ink-2); }
.cb-aappr .meta { font-size: 12px; color: var(--ink-3); }
.cb-adiff { background: var(--ag-plate); border-radius: var(--radius-chip); padding: var(--space-1) var(--space-3); font-size: 13px; line-height: 18px; }
.cb-adiff .hr, .cb-adiff .dr { display: grid; grid-template-columns: minmax(96px, .9fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-3); padding: 8px 0; align-items: baseline; }
.cb-adiff .hr { font-size: 11px; color: var(--ink-3); font-weight: 500; padding: 6px 0; }
.cb-adiff .dr { border-top: 1px solid var(--border); }
.cb-adiff .f { color: var(--ink-2); }
.cb-adiff .f .cb-mono { font-size: 11px; color: var(--ink-3); }
.cb-adiff .from { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--mono-3); }
.cb-adiff .to { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cb-adiff .to .cb-i { color: var(--ink-3); flex: none; align-self: center; }
.cb-adiff .to b { font-weight: 600; }
.cb-adiff input { width: 100%; height: 32px; border: 0; border-radius: 8px; background: var(--ag-bg); box-shadow: inset 0 0 0 1px var(--border); padding: 0 10px; font: inherit; font-size: 13px; color: var(--ink); }
.cb-adiff input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cb-afacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--space-2); margin: 0; }
.cb-afacts > div { background: var(--ag-plate); border-radius: var(--radius-chip); padding: 8px var(--space-3); display: grid; gap: 2px; }
.cb-afacts dt { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.cb-afacts dd { margin: 0; font-size: 12px; line-height: 16px; }
.cb-afacts .warn { background: var(--warn-soft); }
.cb-afacts .warn dt, .cb-afacts .warn dd { color: var(--ink); }
.cb-aappr.rej .intent { color: var(--ink-2); }

/* 7 · RunReceipt */
.cb-arcpt .top { display: flex; align-items: flex-start; gap: var(--space-3); }
.cb-arcpt .top .ok { width: 32px; height: 32px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; flex: none; }
.cb-arcpt .top .t { display: grid; gap: 2px; min-width: 0; }
.cb-arcpt .top b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-arcpt .top .t span { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-arcpt .rows { background: var(--ag-plate); border-radius: var(--radius-chip); padding: 0 var(--space-3); }
.cb-arcpt .rows li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.cb-arcpt .rows li:first-child { border-top: 0; }
.cb-arcpt .no { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ag-bg); font-size: 11px; font-weight: 600; color: var(--ink-2); }
.cb-arcpt .b { display: grid; gap: 2px; min-width: 0; }
.cb-arcpt .o { display: flex; gap: 6px; align-items: baseline; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.cb-arcpt .o .cb-mono { font-size: 11px; color: var(--ink-3); }
.cb-arcpt .d { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.cb-arcpt .d s { color: var(--ink-3); text-decoration-color: var(--mono-3); }
.cb-arcpt .d .cb-i { color: var(--ink-3); }
.cb-arcpt .d b { font-weight: 600; }
.cb-arcpt .back .d b { color: var(--ink-3); text-decoration: line-through; font-weight: 500; }
.cb-arcpt .irrw { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--warn); }
.cb-arcpt .bw { font-size: 11px; color: var(--ink-3); }
.cb-arcpt .ft { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; font-size: 11px; color: var(--ink-3); }

/* 8 · CiteChips */
.cb-acites { position: relative; display: grid; gap: 6px; min-width: 0; }
.cb-acites .row { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-acite { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 26px; padding: 0 10px 0 3px; border: 0; border-radius: var(--radius-pill); background: var(--ag-plate); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink); font-size: 12px; cursor: pointer; }
.cb-acite:hover, .cb-acite.on { box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-acite .no { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--ag-bg); font-size: 11px; font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.cb-acite .cb-i { color: var(--ink-3); }
.cb-acite .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cb-acite .t { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-size-adjust: none; }
.cb-acite-tip { position: absolute; left: 0; top: calc(100% + 6px); z-index: 4; width: min(100%, 340px); background: var(--card); color: var(--ink); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow-pop); display: grid; gap: 4px; font-size: 12px; line-height: 17px; }
.cb-acite-tip .m { display: flex; justify-content: space-between; gap: 8px; }
.cb-acite-tip .m b { font-weight: 600; }
.cb-acite-tip .m span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-size-adjust: none; }
.cb-acite-tip q, .cb-asig q, .cb-aret q { quotes: "«" "»"; }
.cb-acite-tip q { color: var(--ink); }
.cb-acite-tip .w { font-size: 11px; color: var(--ink-3); }
.cb-arefs sup { font-size: 11px; line-height: 0; color: var(--ink-3); font-weight: 600; margin-left: 1px; vertical-align: 4px; font-variant-numeric: tabular-nums; }
.cb-arefs sup.on { color: var(--ink); background: var(--flame-soft); border-radius: 3px; }

/* 9 · AgentAnswer */
.cb-aans .q, .cb-aret .q { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 19px; font-weight: 500; }
.cb-aret .q .cb-i { color: var(--ink-3); }
.cb-aans .q .cb-av.sm { width: 26px; height: 26px; }
.cb-aans .top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-aans .meta { font-size: 11px; color: var(--ink-3); }
.cb-aans .found, .cb-achat .found { display: grid; gap: 6px; }
.cb-aans .found li, .cb-achat .found li { position: relative; padding-left: 14px; font-size: 13px; line-height: 18px; }
.cb-aans .found li::before, .cb-achat .found li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }
.cb-aans .interp { border: 1px dashed var(--mono-3); border-radius: var(--radius-chip); padding: var(--space-3); display: grid; gap: 6px; }
.cb-aans .interp p { font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* 10 · ConfidenceRange */
.cb-aconf { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; min-width: 0; }
.cb-aconf .segs { display: inline-flex; gap: 2px; flex: none; }
.cb-aconf .segs i { width: 12px; height: 6px; border-radius: 2px; background: var(--mono-1); }
.cb-aconf .segs i.on { background: var(--ink); }
.cb-aconf .w b { font-weight: 600; }
.cb-aconf .w span { color: var(--ink-2); }
.cb-aconf.range { display: grid; gap: 6px; }
.cb-aconf.range .hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-aconf.range .hd .k { margin: 0; font-size: 12px; color: var(--ink-2); }
.cb-aconf.range .hd b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-aconf .axis { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--mono-1); }
.cb-aconf .axis .band { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill); background: repeating-linear-gradient(-45deg, var(--flame) 0 2px, var(--flame-hatch) 2px 5px); box-shadow: inset 0 0 0 1px var(--flame); }
.cb-aconf .ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-aconf.range p { color: var(--ink-2); font-size: 12px; }

/* 11 · AgentRuns */
.cb-aruns .budget { gap: 8px; }
.cb-aruns .budget .num b { font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cb-aruns .budget .num span { color: var(--ink-3); font-size: 13px; }
.cb-aruns .budget .cb-ameter { height: 10px; }
.cb-aruns .kv { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); font-size: 12px; color: var(--ink-3); }
.cb-aruns .kv b { color: var(--ink); font-weight: 500; }
.cb-aruns .cb-seg.inset { background: var(--ag-plate); align-self: flex-start; }
.cb-atbl { overflow-x: auto; border-radius: var(--radius-chip); background: var(--ag-plate); }
.cb-atbl:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-atbl table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; }
.cb-atbl th { text-align: left; font-size: 12px; font-weight: 400; color: var(--ink-2); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cb-atbl td { padding: 10px 12px; border-top: 1px solid var(--border); vertical-align: middle; }
.cb-atbl tbody tr:first-child td { border-top: 0; }
.cb-atbl .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-atbl .dt { color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cb-atbl .tools { color: var(--ink-2); font-size: 12px; }
.cb-atbl .none { text-align: center; color: var(--ink-3); padding: var(--space-5); }

/* 12 · AgentError */
.cb-aerr .top { display: flex; align-items: flex-start; gap: var(--space-3); }
.cb-aerr .top .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--bad-soft); color: var(--bad); display: grid; place-items: center; flex: none; }
.cb-aerr .top .t { display: grid; gap: 3px; min-width: 0; }
.cb-aerr .top .t .k { margin: 0; }
.cb-aerr .top .t b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-aerr .top .t > span:last-child { font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* 13 · AgentChat */
.cb-aexchat { display: flex; justify-content: flex-end; min-width: 0; }
.cb-achat { width: 100%; max-width: 400px; height: 600px; gap: var(--space-3); }
.cb-achat .ctx { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px; border-radius: var(--radius-chip); background: var(--ag-plate); font-size: 12px; color: var(--ink-2); }
.cb-achat .ctx b { color: var(--ink); font-weight: 600; }
.cb-achat .ctx .o { color: var(--ink-3); }
.cb-achat .msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); padding-right: 2px; }
.cb-achat .msgs > li { display: flex; }
.cb-achat .msgs > li.me { justify-content: flex-end; }
.cb-achat .bub { max-width: 92%; border-radius: 14px; padding: var(--space-2) 12px; font-size: 13px; line-height: 18px; display: grid; gap: var(--space-2); min-width: 0; }
.cb-achat .me .bub { background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 4px; }
.cb-achat .ag .bub { background: var(--ag-plate); border-bottom-left-radius: 4px; }
.cb-achat .bub.none { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cb-achat .bub.none b { font-size: 12px; font-weight: 600; }
.cb-achat .bub.none span { color: var(--ink-2); font-size: 12px; }
.cb-achat .ag .cb-acite { background: var(--card); }
.cb-achat .draft { display: grid; gap: 4px; justify-items: start; padding: 10px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-achat .draft .k { margin: 0; }
.cb-achat .draft b { font-weight: 600; }
.cb-achat .draft .d { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-achat .draft s { color: var(--ink-3); }
.cb-achat .draft .cb-btn { margin-top: 4px; }
.cb-achat .sugg { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.cb-achat .sugg::-webkit-scrollbar { display: none; }
.cb-achat .sugg button { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--ag-plate); color: var(--ink); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.cb-achat .sugg button:hover { background: var(--inset-hover); }
.cb-achat .sugg button:disabled { opacity: .45; cursor: not-allowed; }
.cb-achat .in { display: flex; align-items: center; gap: 6px; height: var(--control-h); padding: 0 4px 0 14px; border-radius: var(--radius-pill); background: var(--ag-bg); box-shadow: inset 0 0 0 1px var(--border); }
.cb-achat .in:focus-within { box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-achat .in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink); }
.cb-achat .in input::placeholder { color: var(--ink-3); }
.cb-achat .in .send { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; cursor: pointer; }
.cb-achat .in .send:disabled { opacity: .35; cursor: not-allowed; }
.cb-achat .lim { display: grid; gap: 6px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-achat .lim .cb-ameter { height: 6px; }
.cb-achat-closed { display: flex; justify-content: flex-end; }

/* 14 · Retrieval */
.cb-aret .src { display: grid; gap: 4px; }
.cb-aret .src li { border-radius: var(--radius-chip); background: var(--ag-plate); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .12s; }
.cb-aret .src li.on { box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-aret .src button { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; align-items: center; gap: 4px var(--space-3); padding: 8px 10px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); border-radius: var(--radius-chip); }
.cb-aret .src .no { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--ag-plate); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.cb-aret .src .l { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.cb-aret .src .l > span:not(.t) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-aret .src .l .cb-i { color: var(--ink-3); flex: none; }
.cb-aret .src .t { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-size-adjust: none; }
.cb-aret .sc { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: minmax(60px, 140px) auto; align-items: center; gap: 8px; }
.cb-aret .src button > .cb-i { grid-column: 3; grid-row: 1; }
.cb-aret .sc .track { height: 6px; border-radius: 3px; background: var(--mono-1); overflow: hidden; }
.cb-aret .sc .track i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.cb-aret .sc .w { font-size: 11px; line-height: 13px; color: var(--ink-3); white-space: nowrap; }
.cb-aret .src > li > .cb-i, .cb-aret .src button > .cb-i { color: var(--ink-3); }
.cb-aret .src q { display: block; padding: 0 12px 10px 44px; font-size: 12px; line-height: 17px; color: var(--ink-2); }
.cb-aret .ans p { font-size: 13px; line-height: 20px; }
.cb-aref { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin: 0 1px 0 3px; padding: 0 4px; border: 0; border-radius: 5px; background: var(--ag-bg); color: var(--ink-2); font-size: 11px; font-weight: 700; cursor: pointer; vertical-align: 1px; font-variant-numeric: tabular-nums; }
.cb-aref.on, .cb-aref:hover { background: var(--ink); color: var(--ag-plate); }

/* 15 · SignalCard */
.cb-asig .cls { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--flame-soft); color: var(--ink); font-size: 12px; font-weight: 600; }
.cb-asig .cls .cb-i { color: var(--flame-deep); }
[data-theme="dark"] .cb-asig .cls .cb-i { color: var(--flame); }
.cb-asig .sum { font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-asig .by { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.cb-asig .ev { display: grid; gap: 6px; margin-top: 6px; }
.cb-asig .ev li { background: var(--ag-plate); border-radius: var(--radius-chip); padding: var(--space-2) 12px; display: grid; gap: 4px; }
.cb-asig .ev q { font-size: 13px; line-height: 18px; }
.cb-asig .ev .m { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11px; color: var(--ink-3); }
.cb-asig .ev .m .cb-alink, .cb-asig .ev .m .cb-aref-t { margin-left: auto; }
.cb-aref-t { font-size: 11px; font-weight: 500; color: var(--ink-2); }
.cb-asig .prop p { font-size: 13px; line-height: 18px; }
.cb-asig .dec { justify-content: space-between; font-size: 12px; color: var(--ink-2); }

/* 16 · HitlQueue */
.cb-ahitl .cnt { min-width: 32px; height: 32px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-ahitl .list { display: grid; gap: var(--space-2); }
.cb-ahi { background: var(--ag-plate); border-radius: var(--radius-chip); padding: var(--space-3); display: grid; gap: 6px; }
.cb-ahi .r1 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cb-ahi .cb-atag { background: var(--ag-bg); }
.cb-ahi .cb-mono { font-size: 11px; color: var(--ink-3); }
.cb-ahi > b { font-size: 14px; line-height: 19px; font-weight: 600; }
.cb-ahi > p { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cb-ahi .meta { display: flex; align-items: center; gap: 6px var(--space-3); flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.cb-ahi .meta > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.cb-ahi .acts { margin-top: 4px; }
.cb-ahi .cb-btn.outline { background: var(--ag-bg); }
.cb-ahitl .done { display: grid; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.cb-ahitl .done li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: 4px 0; font-size: 12px; }
.cb-ahitl .done .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-ahitl .done .at { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* 17 · AgentsConsole */
.cb-acon { container-type: inline-size; gap: var(--space-4); }
.cb-acon > .cb-ahd .bud { display: grid; grid-template-columns: auto 140px auto; align-items: center; gap: var(--space-3); font-size: 12px; color: var(--ink-3); }
.cb-acon > .cb-ahd .bud b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13px; }
.cb-acon .grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-3); align-items: start; }
.cb-acon .agents { display: grid; gap: var(--space-2); }
.cb-acon .lst { display: grid; gap: 6px; }
.cb-acon .lst .it { display: grid; gap: 8px; padding: var(--space-3); border-radius: var(--radius-chip); background: var(--card); box-shadow: var(--shadow-ring); cursor: pointer; min-width: 0; }
.cb-acon .lst .it:hover { box-shadow: inset 0 0 0 1px var(--border); }
.cb-acon .lst .it.on, .cb-acon .lst .it.on:hover { background: var(--accent-soft); box-shadow: none; }   /* выбранное — подложкой, как в HitlQueue, не обводкой (D16); фон списка — inset, поэтому не inset */
.cb-acon .lst .it:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-acon .lst .sub { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-left: 40px; }
.cb-acon .appr > .cb-ag.card:not(.cb-aappr):not(.cb-arcpt) { padding: var(--space-5); }
@container (max-width: 1060px) {
  .cb-acon .grid { grid-template-columns: 240px minmax(0, 1fr); }
  .cb-acon .appr { grid-column: 1 / -1; }
}
@container (max-width: 640px) {
  .cb-acon .grid { grid-template-columns: minmax(0, 1fr); }
  .cb-acon > .cb-ahd .bud { grid-template-columns: 1fr auto; width: 100%; }
  .cb-acon > .cb-ahd .bud .cb-ameter { grid-column: 1 / -1; grid-row: 2; }
}

/* узкие плитки: одна колонка в сетках блока */
@media (max-width: 480px) {
  .cb-aex > .cb-abadge { flex-wrap: wrap; }
  .cb-aex > .cb-abadge > .cb-ast { margin-left: 40px; }
  .cb-ag.card { padding: var(--space-4); }
  .cb-acard .f { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cb-adiff .hr { display: none; }
  .cb-adiff .dr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2px var(--space-3); }
  .cb-adiff .dr .f { grid-column: 1 / -1; font-size: 11px; color: var(--ink-3); }
  .cb-ahitl .done li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cb-ahitl .done .at { display: none; }
  .cb-achat { height: 560px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-ast.run i, .cb-astep.run .mk { animation: none; }
  .cb-aret .src li { transition: none; }
}

/* ApprovalCard: причина отклонения */
.cb-arej { display: grid; gap: var(--space-2); }
.cb-arej label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-2); font-size: 12px; font-weight: 600; color: var(--ink); }
.cb-arej label small { font-weight: 400; color: var(--ink-3); }
.cb-arej textarea { width: 100%; resize: vertical; min-height: 60px; border: 0; border-radius: var(--radius-chip); background: var(--ag-plate); box-shadow: inset 0 0 0 1px var(--border); padding: 10px 12px; font: inherit; font-size: 13px; color: var(--ink); }
.cb-arej textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-areason { display: grid; gap: 2px; font-size: 13px; line-height: 18px; color: var(--ink); overflow-wrap: break-word; }
.cb-areason .k { font-size: 12px; color: var(--ink-3); }
/* HitlQueue: выбор записи — подложкой (D16), не обводкой и не полосой */
.cb-ahi.pick { cursor: pointer; transition: background .12s; }
.cb-ahi.pick:hover { background: var(--inset-hover); }
.cb-ahi.on, .cb-ahi.on:hover { background: var(--accent-soft); }
.cb-ahi .tt { all: unset; font-size: 14px; line-height: 19px; font-weight: 600; color: var(--ink); cursor: pointer; border-radius: 4px; overflow-wrap: break-word; }
.cb-ahi .tt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cb-ahi.pick { transition: none; } }

/* ── src/styles/m-insights.css ── */
/* ── Выводы и управление (m-insights). Только токены; контейнерные запросы вместо ширины окна ── */
.cb-ins { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; container-type: inline-size; }
.cb-ins.card { background: var(--card); border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--shadow-ring); }
.cb-ins-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-ins-h .t { display: grid; gap: 2px; min-width: 0; flex: 1 1 240px; }
.cb-ins-h .t small { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cb-ins-h h3 { margin: 0; font-size: 16px; line-height: 21px; font-weight: 600; text-wrap: balance; }
.cb-ins-h p { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-ins-h .a { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-ins-f { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-ins-src { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-ins-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-ins-p { margin: 0; font-size: 14px; }
.cb-ins small { font-size: 12px; line-height: 16px; }

/* ProvenanceTag */
.cb-prov { position: relative; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px 0 5px; margin-left: 6px; border-radius: var(--radius-pill); font-size: 11px; line-height: 14px; font-weight: 600; vertical-align: middle; white-space: nowrap; cursor: default; font-variant-numeric: normal; letter-spacing: 0; }
.cb-prov.fact { background: var(--inset); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border); }
.cb-prov.estimate { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-prov.none { background: transparent; color: var(--ink-3); outline: 1px dashed var(--ink-3); outline-offset: -1px; }
.cb-prov.demo { background: var(--flame-soft); color: var(--ink); }
.cb-prov:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-prov .tp { position: absolute; left: 0; top: calc(100% + 6px); z-index: 4; display: grid; gap: 2px; min-width: 200px; max-width: 280px; padding: 8px 10px; border-radius: 12px; background: var(--card); color: var(--ink-2); box-shadow: var(--shadow-pop); font-size: 12px; line-height: 16px; font-weight: 400; white-space: normal; }
.cb-prov .tp b { color: var(--ink); font-weight: 600; }
.cb-prov-ex { display: grid; gap: var(--space-3); }
.cb-prov-ex > div { display: flex; align-items: center; gap: 4px; font-size: 15px; }

/* Gate */
.cb-gate-i { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1px dashed var(--ink-3); border-radius: var(--radius-chip); color: var(--ink-2); font-size: 12px; line-height: 18px; font-weight: 500; max-width: 100%; vertical-align: middle; }
.cb-gate { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px dashed var(--ink-3); border-radius: var(--radius-inset); color: var(--ink); min-width: 0; }
.cb-gate .hd { display: flex; align-items: flex-start; gap: var(--space-3); }
.cb-gate .hd > div { display: grid; gap: 2px; min-width: 0; }
.cb-gate .hd span:not(.ic) { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-gate .ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-gate .bar { height: 10px; border-radius: var(--radius-pill); background: var(--inset); overflow: hidden; }
.cb-gate .bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: repeating-linear-gradient(-45deg, var(--ink-3) 0 2px, transparent 2px 5px); }
.cb-gate p { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cb-gate small { color: var(--ink-3); }

/* InsightCard */
.cb-inc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-3); }
.cb-inc { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--inset); border-radius: var(--radius-inset); min-width: 0; }
.cb-inc > header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-inc .ty { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.cb-inc > header .cb-tag { margin-left: auto; }
.cb-inc-out { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border); }
.cb-inc-out.on { color: var(--ink); background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-inc h4 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: pretty; }
.cb-inc-fig { background: var(--card); border-radius: 10px; padding: 0 8px; }
.cb-inc dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--space-3); margin: 0; font-size: 13px; line-height: 18px; }
.cb-inc dt { color: var(--ink-3); }
.cb-inc dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.cb-inc dd small { color: var(--ink-3); }
.cb-inc-dl { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-inc-rel { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cb-inc-go { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; border-radius: 4px; }
.cb-inc-go:hover { text-decoration-color: var(--ink); }
.cb-inc-go.btn { border: 0; background: transparent; padding: 0; font: inherit; cursor: pointer; min-height: 24px; }
.cb-inc-to { color: var(--ink); font-weight: 500; }
.cb-inc.small h4 { color: var(--ink-2); }

/* WhatsNew */
.cb-wn-l { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-wn-l li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--border); }
.cb-wn-l li:first-child { border-top: 0; padding-top: 0; }
.cb-wn-l .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-wn-l .t { display: grid; gap: 1px; min-width: 0; }
.cb-wn-l .t b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cb-wn-l .t small { color: var(--ink-3); }

/* ExceptionFeed */
.cb-ef-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-ef-l > li { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--inset); border-radius: var(--radius-inset); }
.cb-ef-l > li.muted { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-2); }
.cb-ef-l .m { display: grid; gap: 1px; }
.cb-ef-l .m b { font-size: 15px; font-weight: 600; }
.cb-ef-l .m small, .cb-ef-l .t small { color: var(--ink-3); }
.cb-ef-l .t { display: grid; gap: 2px; min-width: 0; }
.cb-ef-l .t b { font-weight: 500; }
.cb-ef-l .t .why { color: var(--ink-2); }
.cb-ef-l .recs { grid-column: 1 / -1; overflow-x: auto; background: var(--card); border-radius: 12px; }
.cb-ef-l .recs table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cb-ef-l .recs th { text-align: left; font-weight: 500; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cb-ef-l .recs td { padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cb-ef-l .recs tr:last-child td { border-bottom: 0; }
.cb-ef-l .recs .r { text-align: right; }

/* AttentionTile */
.cb-at-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-at-l li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--inset); border-radius: var(--radius-inset); }
.cb-at-l li .cb-check { margin-top: 1px; }
.cb-at-l .t { display: grid; gap: 2px; min-width: 0; }
.cb-at-l .t b { font-weight: 500; }
.cb-at-l .t small { color: var(--ink-3); }
.cb-at-l .m { display: grid; gap: 2px; justify-items: end; text-align: right; }
.cb-at-l .who { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); }
.cb-at-l li.done { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cb-at-l li.done .t b { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ink-3); }

/* ExpectedCorridor */
.cb-ec-type { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* PlanFact */
.cb-pf-hd, .cb-pf-l > li { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(0, 2.4fr) minmax(88px, .9fr) 64px; gap: var(--space-3); align-items: center; }
.cb-pf-hd { font-size: 12px; color: var(--ink-3); padding: 0 var(--space-4); }
.cb-pf-hd span:nth-child(n+3) { text-align: right; }
.cb-pf-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-pf-l > li { padding: var(--space-3) var(--space-4); background: var(--inset); border-radius: var(--radius-inset); }
.cb-pf-l .nm { font-weight: 500; }
.cb-pf-l .bar { display: grid; gap: 6px; min-width: 0; }
.cb-pf-l .lb { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.cb-pf-l .lb .cb-prov { margin-left: 0; }
.cb-pf-l .lb > span:not(.cb-prov) { flex: 1; min-width: 0; }
.cb-pf-l .lb b { color: var(--ink); font-size: 13px; }
.cb-pf-l .track { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--card); }
.cb-pf-l .track .norm { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 5px); }
.cb-pf-l .track i { position: absolute; inset: 2px auto 2px 0; border-radius: var(--radius-pill); background: var(--ink); }
.cb-pf-l .track .tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--flame-deep); border-radius: 1px; }
.cb-pf-l .fl, .cb-pf-l .pd { display: grid; justify-items: end; text-align: right; gap: 1px; }
.cb-pf-l .fl small { color: var(--ink-3); }
.cb-pf-l .fl small.warn { color: var(--warn); }
@container (max-width: 560px) {
  .cb-pf-hd { display: none; }
  .cb-pf-l > li { grid-template-columns: minmax(0, 1fr) auto; }
  .cb-pf-l .bar { grid-column: 1 / -1; grid-row: 2; }
  .cb-pf-l .fl { grid-row: 1; grid-column: 2; }
  .cb-pf-l .pd { display: none; }
}

/* Breaches */
.cb-br-hd, .cb-br-l > li { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(90px, .8fr) minmax(0, 1.2fr) minmax(90px, .7fr); gap: var(--space-3); align-items: center; }
.cb-br-hd { font-size: 12px; color: var(--ink-3); padding: 0 var(--space-4); }
.cb-br-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-br-l > li { padding: var(--space-3) var(--space-4); background: var(--inset); border-radius: var(--radius-inset); }
.cb-br-l > li > div { display: grid; gap: 1px; min-width: 0; }
.cb-br-l .nm b { font-weight: 500; }
.cb-br-l small { color: var(--ink-3); }
.cb-br-l .fa b, .cb-br-l .th b { font-size: 15px; font-weight: 600; }
.cb-br-l .df { justify-items: start; }
.cb-br-l .dis { grid-column: 1 / -1; display: flex !important; align-items: flex-start; gap: 6px; padding: 8px 10px; border: 1px dashed var(--ink-3); border-radius: 10px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-br-l .dis .cb-i { margin-top: 2px; }
@container (max-width: 560px) {
  .cb-br-hd { display: none; }
  .cb-br-l > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cb-br-l .nm { grid-column: 1 / -1; }
}

/* Blockers */
.cb-bl-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-bl-l li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--inset); border-radius: var(--radius-inset); }
.cb-bl-l .age { display: grid; justify-items: center; padding: 6px 0; background: var(--card); border-radius: 12px; }
.cb-bl-l .age b { font-size: 18px; line-height: 22px; font-weight: 600; }
.cb-bl-l .age small { color: var(--ink-3); font-size: 11px; line-height: 14px; }
.cb-bl-l .t { display: grid; gap: 2px; min-width: 0; }
.cb-bl-l .t .k { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-bl-l .t .k small { color: var(--ink-3); }
.cb-bl-l .t b { font-weight: 500; }
.cb-bl-l .t > small { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); }
.cb-bl-l .im { display: grid; justify-items: end; text-align: right; gap: 1px; }
.cb-bl-l .im b { font-weight: 600; }
.cb-bl-l .im small { color: var(--ink-3); }
@container (max-width: 480px) {
  .cb-bl-l li { grid-template-columns: 52px minmax(0, 1fr); }
  .cb-bl-l .im { grid-column: 2; justify-items: start; text-align: left; }
}

/* RagStatus */
.cb-rag { display: grid; gap: 6px; padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-rag .hd { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-rag .hd b { font-size: 15px; font-weight: 600; }
.cb-rag .hd small { color: var(--ink-3); flex-basis: 100%; }
.cb-rag .dot, .cb-rag-ed .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--ink-3); }
.cb-rag.ontrack .dot, .cb-rag-ed .ontrack .dot { background: var(--ok); }
.cb-rag.atrisk .dot, .cb-rag-ed .atrisk .dot { background: var(--warn); }
.cb-rag.offtrack .dot, .cb-rag-ed .offtrack .dot { background: var(--bad); }
.cb-rag.stale { background: transparent; border: 1px dashed var(--ink-3); }
.cb-rag.stale .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-3); }
.cb-rag p { margin: 0; font-size: 13px; line-height: 18px; }
.cb-rag .meta { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); }
.cb-rag-act { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cb-rag-act small { color: var(--ink-3); }
.cb-rag-ed { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-rag-ed .opts { display: flex; gap: var(--space-2); flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.cb-rag-ed .opt { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--inset); cursor: pointer; font-size: 13px; }
.cb-rag-ed .opt.on { background: var(--card); box-shadow: inset 0 0 0 1px var(--ink); }
.cb-rag-ed .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cb-rag-ed .opt:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-rag-ed .nt { display: grid; gap: 4px; font-size: 12px; color: var(--ink-3); }
.cb-rag-ed textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 0; box-shadow: inset 0 0 0 1px var(--border); border-radius: 12px; padding: 8px 12px; resize: vertical; }
.cb-rag-ed textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-rag-ed .bt { display: flex; gap: var(--space-2); }

/* Milestones */
.cb-ms-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.cb-ms-top .big { display: grid; gap: 2px; padding: var(--space-3); background: var(--inset); border-radius: var(--radius-inset); min-width: 0; }
.cb-ms-top .big b { font-size: 26px; line-height: 30px; font-weight: 560; }
.cb-ms-top .big b small { font-size: 14px; color: var(--ink-3); margin-left: 2px; font-weight: 500; }
.cb-ms-top .big span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-ms-l { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-ms-l li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 44px 96px; gap: var(--space-3); align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.cb-ms-l .t { display: grid; gap: 1px; min-width: 0; }
.cb-ms-l .t b { font-weight: 500; }
.cb-ms-l .t small { color: var(--ink-3); }
.cb-ms-l .track { height: 8px; border-radius: var(--radius-pill); background: var(--inset); overflow: hidden; }
.cb-ms-l .track i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--flame); }
.cb-ms-l .track i.full { background: var(--mono-3); }
.cb-ms-l .v { text-align: right; font-weight: 600; }
@container (max-width: 520px) {
  .cb-ms-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cb-ms-top .big:last-child { grid-column: 1 / -1; }
  .cb-ms-l li { grid-template-columns: minmax(0, 1fr) auto; }
  .cb-ms-l .track { grid-column: 1 / -1; grid-row: 2; }
  .cb-ms-l .v { display: none; }
}

/* Countdown */
.cb-cd-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: var(--space-3); }
.cb-cd { display: grid; align-content: start; gap: 4px; padding: var(--space-4); background: var(--inset); border-radius: var(--radius-inset); min-width: 0; }
.cb-cd .lb { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-weight: 500; }
.cb-cd .v { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; min-height: 36px; }
.cb-cd .v b { font-size: 30px; line-height: 34px; font-weight: 560; }
.cb-cd .v b small { font-size: 14px; color: var(--ink-3); margin-left: 4px; font-weight: 500; }
.cb-cd.past { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cb-cd.past .v b { font-size: 22px; line-height: 28px; }
.cb-cd .dt { font-size: 13px; font-variant-numeric: tabular-nums; }
.cb-cd .au { color: var(--ink-3); }

/* LeadFact */
.cb-lead-w { container-type: inline-size; min-width: 0; }
.cb-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-4); min-width: 0; }
.cb-lead.card { background: var(--card); border-radius: var(--radius-card); padding: var(--space-5); box-shadow: var(--shadow-ring); }
.cb-lead .v { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-4); background: var(--inset); border-radius: var(--radius-inset); min-width: 0; }
.cb-lead .lb { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.cb-lead .big { font-size: 40px; line-height: 44px; font-weight: 560; letter-spacing: -.02em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; }
.cb-lead .big .pv { order: 3; align-self: center; }
.cb-lead .big .pv .cb-prov { margin-left: 0; }
.cb-lead .big small { font-size: 18px; font-weight: 500; color: var(--ink-3); }
.cb-lead .t { display: grid; align-content: start; gap: var(--space-3); min-width: 0; }
.cb-lead .t p { margin: 0; font-size: 15px; line-height: 21px; text-wrap: pretty; }
.cb-lead .items { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-2); }
.cb-lead .it { display: grid; gap: 2px; padding: 10px 12px; background: var(--inset); border-radius: 12px; min-width: 0; }
.cb-lead .it small { color: var(--ink-3); }
.cb-lead .it b { font-size: 15px; font-weight: 600; }
.cb-lead .ft { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.cb-lead .ft span { display: inline-flex; align-items: center; gap: 4px; }
@container (max-width: 560px) { .cb-lead { grid-template-columns: minmax(0, 1fr); } .cb-lead .big { font-size: 32px; line-height: 36px; } }

/* MetricsSystem */
.cb-msys-pre { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-msys-pre button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 13px; cursor: pointer; }
.cb-msys-pre button:hover { color: var(--ink); background: var(--inset-hover); }
.cb-msys-pre button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.cb-msys-pre .n { font-variant-numeric: tabular-nums; opacity: .72; }
.cb-msys-w { overflow-x: auto; border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-msys-t { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 18px; }
.cb-msys-t th { text-align: left; font-weight: 400; color: var(--ink-2); background: var(--inset); height: 40px; padding: 0 12px; white-space: nowrap; }
.cb-msys-t td { padding: 10px 12px; border-top: 1px solid var(--border); vertical-align: top; }
.cb-msys-t td small { display: block; color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-msys-t td small.warn { color: var(--warn); }
.cb-msys-t td small.q { color: var(--ink-3); }
.cb-msys-t .rw { cursor: pointer; transition: background-color .12s; }
.cb-msys-t .rw:hover { background: color-mix(in oklab, var(--inset) 60%, transparent); }
.cb-msys-t .rw.on { background: var(--inset); }
.cb-msys-t .rw:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cb-msys-t .fa b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.cb-msys-t .fa b.ok { color: var(--ok); }
.cb-msys-t .fa b.bad { color: var(--bad); }
.cb-msys-t .sp { width: 110px; }
.cb-msys-t .sp .cb-plot { width: 96px; }
.cb-msys-t td .cb-delta { margin-bottom: 2px; }
.cb-msys-t .ex td { background: var(--inset); border-top: 0; }
.cb-msys-p { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-2); white-space: nowrap; }
.cb-msys-p::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--mono-3)); flex: none; }
.cb-msys-p.finance { --c: var(--flame); }
.cb-msys-p.customer { --c: var(--ink); }
.cb-msys-p.process { --c: var(--cold); }
.cb-msys-p.learning { --c: var(--sand); }
.cb-msys-d { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-4); margin: 0; }
.cb-msys-d dt { color: var(--ink-3); }
.cb-msys-d dd { margin: 0; white-space: normal; }

/* DataReadiness */
.cb-dr-sum { display: grid; gap: var(--space-2); }
.cb-dr-sum .bar { display: flex; gap: 2px; height: 12px; border-radius: var(--radius-pill); overflow: hidden; }
.cb-dr-sum .bar i, .cb-dr-sum .lg i { display: block; background: var(--ink); }
.cb-dr-sum .lg { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.cb-dr-sum .lg span { display: inline-flex; align-items: center; gap: 6px; }
.cb-dr-sum .lg i { width: 10px; height: 10px; border-radius: 3px; }
.cb-dr-sum i.ready { background: var(--ink); }
.cb-dr-sum i.partial { background: repeating-linear-gradient(-45deg, var(--ink-3) 0 2px, var(--inset) 2px 4px); }
.cb-dr-sum i.missing { background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-dr-sum .bar i.missing { outline: 1px dashed var(--ink-3); outline-offset: -1px; box-shadow: none; }
.cb-dr-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-3); }
.cb-dr-g section { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-4); background: var(--inset); border-radius: var(--radius-inset); }
.cb-dr-g h4 { margin: 0; display: flex; justify-content: space-between; gap: var(--space-2); font-size: 14px; font-weight: 600; }
.cb-dr-g h4 span { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.cb-dr-g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-dr-g li { display: grid; gap: 2px; padding: var(--space-2) 12px; background: var(--card); border-radius: 12px; }
.cb-dr-g li b { font-weight: 500; }
.cb-dr-g li p { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cb-dr-g li small { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); }

/* StrategyMap */
.cb-smap-plot svg { overflow: visible; }
.cb-smap-html { position: absolute; inset: 0; }
.cb-smap-tier { position: absolute; left: 0; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cb-smap-ln { fill: none; stroke: var(--mono-3); stroke-width: 1.25; transition: opacity .15s, stroke .15s; }
.cb-smap-ln.on { stroke: var(--flame-deep); stroke-width: 2; }
.cb-smap-ar { fill: none; stroke: var(--mono-3); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.cb-smap-ar.on { stroke: var(--flame-deep); stroke-width: 2; }
.cb-smap-ln.dim, .cb-smap-ar.dim { opacity: .25; }
.cb-smap-n { position: absolute; display: grid; align-content: center; gap: 1px; padding: 4px 10px; border: 0; border-radius: 12px; background: var(--inset); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink); text-align: left; cursor: pointer; transition: background-color .15s, opacity .15s; overflow: hidden; }
.cb-smap-n b { font-size: 12px; line-height: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cb-smap-n small { font-size: 12px; line-height: 15px; color: var(--ink-2); font-weight: 600; }
.cb-smap-n:hover { background: var(--inset-hover); }
.cb-smap-n.key { box-shadow: inset 0 0 0 1px var(--ink-2); }
.cb-smap-n.sel { background: var(--primary); color: var(--on-primary); }
.cb-smap-n.sel small { color: var(--on-primary); }
.cb-smap-n.dim { opacity: .4; }
.cb-smap-info { display: flex; gap: 4px var(--space-4); flex-wrap: wrap; padding: 10px 12px; background: var(--inset); border-radius: 12px; font-size: 13px; line-height: 18px; color: var(--ink-2); min-height: 40px; }
.cb-smap-info b { color: var(--ink); font-weight: 600; }

/* MetricTree */
.cb-mt-l, .cb-mt-l ul { list-style: none; margin: 0; padding: 0; }
.cb-mt-l ul { margin-left: 20px; padding-left: 12px; border-left: 1px solid var(--border); }
.cb-mt-n > .row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: 8px var(--space-3); margin: 4px 0; background: var(--inset); border-radius: 12px; }
.cb-mt-n.root > .row { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-mt-n .op { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink-2); font-weight: 600; font-size: 13px; }
.cb-mt-n .tg { width: 24px; height: 24px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--ink-2); cursor: pointer; }
.cb-mt-n .tg:hover { background: var(--inset-hover); }
.cb-mt-n .tg-sp { width: 24px; flex: none; }
.cb-mt-n .t { display: grid; gap: 0; min-width: 0; flex: 1 1 140px; }
.cb-mt-n .t b { font-weight: 500; }
.cb-mt-n .t small { color: var(--ink-3); }
.cb-mt-n .v { font-weight: 600; white-space: nowrap; }
.cb-mt-n .cov { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; color: var(--ink-2); border: 1px dashed var(--ink-3); white-space: nowrap; }
.cb-mt-n .cov.on { border: 0; background: var(--card); color: var(--ink-2); }

/* PaperVsCash */
.cb-pvc-cum small { font-size: 12px; color: var(--ink-2); font-weight: 500; }

/* RevenueBridge */
.cb-rb { display: grid; gap: var(--space-3); min-width: 0; }
.cb-rb-note { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-rb-note .cb-tag { flex: none; }
.cb-rb-l { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-rb-l li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-3); padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.cb-rb-l li b { font-weight: 500; }
.cb-rb-l li span { font-weight: 600; text-align: right; }
.cb-rb-l li small { grid-column: 1 / -1; color: var(--ink-3); }

/* IndependentFunnels */
.cb-if-warn { display: flex; align-items: flex-start; gap: var(--space-2); padding: 10px 12px; border: 1px dashed var(--ink-3); border-radius: 12px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cb-if-warn .cb-i { margin-top: 1px; flex: none; }
.cb-if-warn b { color: var(--ink); }
.cb-if-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-3); }
.cb-if-c { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-4); background: var(--inset); border-radius: var(--radius-inset); min-width: 0; }
.cb-if-c header { display: grid; gap: 2px; }
.cb-if-c header b { font-weight: 600; }
.cb-if-c header small { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); }
.cb-if-c ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-if-c li { display: grid; grid-template-columns: minmax(84px, .9fr) minmax(0, 1.4fr) auto; gap: var(--space-2); align-items: center; padding: 4px 6px; border-radius: 8px; transition: opacity .15s; outline: none; }
.cb-if-c li:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cb-if-c li.dim { opacity: .45; }
.cb-if-c .nm { font-size: 13px; }
.cb-if-c .tr { height: 14px; display: flex; align-items: center; }
.cb-if-c .tr i { display: block; height: 14px; min-width: 2px; border-radius: 4px; }
.cb-if-c li b { font-size: 13px; font-weight: 600; text-align: right; }
.cb-if-c .nt { color: var(--ink-3); }

/* ExecutiveSummary */
.cb-es { display: grid; gap: var(--space-4); padding: var(--space-4); background: var(--shell); border-radius: var(--radius-card); min-width: 0; }
.cb-es-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.cb-es-h small { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cb-es-h h2 { margin: 2px 0 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.cb-es-h p { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cb-es-ctx { padding: 10px 14px; background: var(--card); border-radius: var(--radius-pill); font-size: 13px; }
/* сетка частного пояса — только для старой разметки .cb-kpis (шаблоны); экран ставит утилиту .cb-kpis-4 */
.cb-kpis.cb-es-k { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cb-es-k .cb-kpi { background: var(--card); box-shadow: var(--shadow-ring); min-height: 128px; }
.cb-es-k .cb-kpi.accent { background: var(--grad-accent, linear-gradient(150deg, var(--flame-deep) 0%, var(--flame-deep) 38%, var(--flame) 100%)); }
.cb-es-k .cb-kpi .ico { background: var(--inset); }
.cb-es-k .cb-kpi.accent .ico { background: color-mix(in oklab, var(--on-flame) 22%, transparent); }
.cb-es-k .cb-kpi .val { font-size: 26px; line-height: 30px; }
.cb-es-ring { height: 100%; }
.cb-es-ring > .cb-vf { height: 100%; }
.cb-es-b > * > .cb-gaps { height: 100%; }
@media (max-width: 1180px) { .cb-kpis.cb-es-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .cb-es { padding: var(--space-3); }
  .cb-es-h h2 { font-size: 18px; line-height: 24px; }
  .cb-es-k .cb-kpi .val { font-size: 20px; line-height: 26px; }
}

@container (max-width: 480px) {
  .cb-ef-l > li { grid-template-columns: minmax(0, 1fr) auto; }
  .cb-ef-l .t { grid-column: 1 / -1; grid-row: 2; }
  .cb-at-l li { grid-template-columns: auto minmax(0, 1fr); }
  .cb-at-l .m { grid-column: 2; justify-items: start; text-align: left; }
  .cb-wn-l li { grid-template-columns: auto minmax(0, 1fr); }
  .cb-wn-l li > :last-child { grid-column: 2; justify-self: start; }
}
.cb-pf-l .bar > .cb-prov { justify-self: start; margin-left: 0; }

/* углубление: признаки только при провайдере ([data-drill] ставит V.mark) */
.cb-ins [data-drill] { cursor: pointer; border-radius: var(--radius-inset); }
.cb-ins [data-drill]:hover { background-color: color-mix(in oklab, var(--ink) 5%, var(--inset)); }
.cb-ins [data-drill]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-msys-t td.fa[data-drill]:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ── src/styles/n-fil.css ── */
/* ── Фил: что ещё вывести (CatalystBento · группа «Фил») ─────────────
   Корень .cb-fil: по умолчанию плашка inset внутри карточки, .card — самостоятельная плитка.
   --fl-plate — цвет вложенной плашки: на inset это card, на card это inset. Только токены. */
.cb-fil { --fl-bg: var(--inset); --fl-plate: var(--card); background: var(--fl-bg); border-radius: var(--radius-inset); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; position: relative; color: var(--ink); font-size: 13px; line-height: 18px; }
.cb-fil.card { --fl-bg: var(--card); --fl-plate: var(--inset); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-5); }
:where(.cb-fil) p { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-fil) ul, :where(.cb-fil) ol { list-style: none; margin: 0; padding: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-fil q { quotes: "«" "»"; }
.cb-fil .cb-btn.outline { background: var(--fl-plate); }
.cb-fil .cb-btn.outline:hover, .cb-fil .cb-btn.ghost:hover { background: var(--inset-hover); }
.cb-fil .cb-seg.inset { background: var(--fl-plate); }
.cb-fil .cb-tag { background: var(--fl-plate); }
.cb-fil .cb-tag.demo { background: var(--flame-soft); }
.cb-filex { display: flex; flex-direction: column; gap: var(--space-3); align-items: stretch; }
.cb-filex > .cb-seg { align-self: flex-start; }

.cb-filhd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.cb-filhd .t { display: grid; gap: 2px; min-width: 0; }
.cb-filhd h3 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-fil.card .cb-filhd h3 { font-size: 16px; line-height: 21px; }
.cb-filhd .t > span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-filhd .a { display: flex; gap: var(--space-2); align-items: center; flex: none; }
.cb-fillb { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2); margin-bottom: var(--space-2); }
.cb-fillb .cb-i { color: var(--ink-3); }
.cb-fillb .x { margin-left: auto; font-weight: 400; color: var(--ink-3); text-align: right; }
.cb-filplate { background: var(--fl-plate); border-radius: var(--radius-chip); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cb-filplate .cb-fillb { margin-bottom: 0; }
.cb-filplate:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-filnote { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-filnote .cb-i { margin-top: 2px; }
.cb-fillive { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-fillive:empty { display: none; }
.cb-filacts { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* класс, решение, покрытие */
.cb-filcls { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--fl-plate); color: var(--ink); font-size: 12px; font-weight: 500; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cb-filcls .cb-i { color: var(--ink-2); }
.cb-filcls.plain { background: transparent; padding: 0; height: auto; white-space: normal; align-items: flex-start; }
.cb-filcls.plain .cb-i { margin-top: 3px; }
.cb-fildec { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-2); }
.cb-fildec.show { box-shadow: none; background: var(--primary); color: var(--on-primary); }
.cb-filcov { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; white-space: nowrap; }
.cb-filcov.on { background: var(--ok-soft); color: var(--ok); }
.cb-filcov.part { background: var(--warn-soft); color: var(--warn); }
.cb-filcov.off { background: transparent; color: var(--ink-2); outline: 1px dashed var(--ink-3); outline-offset: -1px; }

/* ключ-значение */
.cb-filkv { display: grid; gap: var(--space-2); margin: 0; }
.cb-filkv > div { display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: var(--space-3); }
.cb-filkv dt { color: var(--ink-3); font-size: 12px; }
.cb-filkv dd { margin: 0; min-width: 0; }
.cb-filkv.sm { font-size: 12px; line-height: 17px; }

/* кнопка-вход в источник */
.cb-filgo { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--fl-plate); color: var(--ink); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; transition: background-color .15s; }
.cb-filgo:hover { background: var(--inset-hover); }
.cb-filplate .cb-filgo { background: var(--fl-bg); }

/* ответ владельца */
.cb-filans { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.cb-filans.done { justify-content: space-between; font-size: 12px; color: var(--ink-2); }
.cb-filans.done b { color: var(--ink); font-weight: 600; }
.cb-filans.ask { align-items: flex-end; }
.cb-filans.ask label { display: grid; gap: 4px; flex: 1 1 220px; font-size: 12px; color: var(--ink-2); }
.cb-filans.ask input { height: var(--control-h-sm); border: 0; border-radius: var(--radius-pill); padding: 0 var(--space-3); background: var(--fl-plate); color: var(--ink); font: inherit; font-size: 13px; box-shadow: inset 0 0 0 1px var(--border); min-width: 0; }
.cb-filans.ask input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-filans.ask .b { display: flex; gap: var(--space-2); }

/* превью формы */
.cb-filprev { position: relative; overflow: hidden; border-radius: var(--radius-chip); background: var(--fl-bg); pointer-events: none; }
.cb-filprev .in { transform-origin: 0 0; position: absolute; left: 12px; top: 12px; }   /* поле 12 px = PAD в FormPreview */
.cb-filprev.cut::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36px; background: linear-gradient(to bottom, transparent, var(--fl-bg)); }
.cb-filprev.none { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); color: var(--ink-3); outline: 1px dashed var(--ink-3); outline-offset: -1px; pointer-events: auto; }
.cb-filprev.none div { display: grid; gap: 2px; }
.cb-filprev.none b { font-family: var(--font-mono); font-size: 12px; color: var(--ink); font-weight: 500; font-size-adjust: none; }
.cb-filprev.none span { font-size: 12px; line-height: 16px; }

/* 1 · компас */
.cb-filbet { background: var(--fl-plate); border-radius: var(--radius-chip); padding: var(--space-4); display: grid; gap: 4px; min-width: 0; }
.cb-filbet .cb-fillb { margin-bottom: 2px; }
.cb-filbet .v { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cb-filbet .v b { font-size: 30px; line-height: 34px; font-weight: 560; letter-spacing: -.015em; }
.cb-filbet .v small { font-size: 15px; color: var(--ink-3); font-weight: 500; }
.cb-filbet .sub { color: var(--ink-2); font-size: 12px; }
.cb-filbet .goal { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.cb-filbet .goal .cb-i { color: var(--flame-deep); }
.cb-filbet q { font-size: 13px; color: var(--ink); margin-top: 4px; }
.cb-filbet .st { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); margin-top: 2px; flex-wrap: wrap; }
.cb-filbet .st .cb-tag { background: var(--fl-bg); }
.cb-filgoals { display: grid; gap: var(--space-2); }
.cb-filgoals li { display: flex; gap: var(--space-3); align-items: flex-start; }
.cb-filgoals .pr { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--fl-plate); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-filgoals li:first-child .pr { background: var(--primary); color: var(--on-primary); }
.cb-filgoals div { display: grid; min-width: 0; }
.cb-filgoals b { font-weight: 500; }
.cb-filgoals span { font-size: 12px; color: var(--ink-3); }
.cb-filrules { display: grid; gap: 6px; }
.cb-filrules li { display: flex; justify-content: space-between; gap: 2px var(--space-3); flex-wrap: wrap; padding: 8px var(--space-3); border-radius: var(--radius-chip); background: var(--fl-plate); }
.cb-filrules .by { font-size: 12px; color: var(--ink-3); }
.cb-filsrcs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.cb-filsrcs .k { color: var(--ink-3); width: 100%; margin-top: 2px; }
.cb-filsrcs .chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--fl-plate); }
.cb-filsrcs .chip.off { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border); }
.cb-filol { list-style: decimal; padding-left: 20px; display: grid; gap: 4px; }
.cb-fil ol.cb-filol { list-style: decimal; padding-left: 20px; }

/* 2 · дерево драйверов */
.cb-filroot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: var(--space-2) 12px; border-radius: var(--radius-chip); background: var(--fl-plate); }
.cb-filroot b { font-size: 14px; font-weight: 600; }
.cb-filroot .v { font-weight: 600; }
.cb-filroot .n { color: var(--ink-3); font-size: 12px; width: 100%; padding-left: 24px; }
.cb-filcnt { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-filnodes, .cb-filnodes .sub { display: grid; gap: 2px; }
.cb-filnodes .sub { margin-left: 14px; padding-left: 12px; border-left: 1px solid var(--border); margin-top: 2px; }
.cb-filnodes .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 34px; padding: 3px 0; }
.cb-filnodes .nm { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; min-width: 0; }
.cb-filnodes span.nm i { width: 12px; height: 1px; background: var(--border); flex: none; }
.cb-filnodes button.nm { border: 0; background: transparent; padding: 4px 8px 4px 4px; margin-left: -4px; border-radius: var(--radius-pill); cursor: pointer; text-align: left; min-height: 28px; }
.cb-filnodes button.nm:hover { background: var(--fl-plate); }
.cb-filnodes button.nm[aria-expanded="true"] { background: var(--fl-plate); }
.cb-filnodes .wh { font-size: 12px; color: var(--ink-3); }
.cb-filsug { margin: 4px 0 8px; padding: var(--space-3); border-radius: var(--radius-chip); background: var(--fl-plate); display: grid; gap: var(--space-2); justify-items: start; }
.cb-filsug ul { display: grid; gap: var(--space-3); width: 100%; }
.cb-filsug li { display: grid; gap: 4px; justify-items: start; }
.cb-filsug .cb-filcls { background: var(--fl-bg); }
.cb-filsug .tx { font-weight: 500; }
.cb-filsug .fm { font-size: 12px; color: var(--ink-3); }
.cb-filsug code { font-family: var(--font-mono); font-size: 12px; color: var(--ink); font-size-adjust: none; }
.cb-filsug .cb-btn.outline { background: var(--fl-bg); }

/* 3 · что прочитано */
.cb-filsrc { display: grid; gap: 2px; }
.cb-filsrc li { display: grid; grid-template-columns: 20px 32px minmax(0, 1fr) minmax(120px, 40%); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.cb-filsrc li:first-child { border-top: 0; }
.cb-filsrc .ord { font-size: 11px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: center; }
.cb-filsrc .ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fl-plate); color: var(--ink-2); }
.cb-filsrc .nm { display: grid; min-width: 0; }
.cb-filsrc .nm b { font-weight: 500; }
.cb-filsrc .nm span { font-size: 12px; color: var(--ink-3); }
.cb-filsrc .q { display: grid; gap: 4px; font-size: 12px; color: var(--ink-2); text-align: right; }
.cb-filsrc .bar { display: block; height: 6px; border-radius: var(--radius-pill); background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.cb-filsrc .bar i { display: block; height: 100%; background: var(--ink); border-radius: var(--radius-pill); }
.cb-filplate.blind ul { display: grid; gap: 6px; }
.cb-filplate.blind li { display: grid; gap: 1px; }
.cb-filplate.blind li b { font-weight: 500; }
.cb-filplate.blind li span { font-size: 12px; color: var(--ink-3); }
.cb-filgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 6px; margin-bottom: var(--space-2); }
.cb-filgrid li { display: grid; grid-template-columns: 16px 1fr auto; gap: 6px; align-items: center; padding: 6px 8px; border-radius: var(--radius-chip); background: var(--fl-plate); font-size: 12px; line-height: 15px; }
.cb-filgrid li .cb-i { color: var(--ink-2); }
.cb-filgrid li b { font-weight: 600; }
.cb-filgrid li.zero { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border); }
.cb-filgrid li.zero b { font-weight: 400; }
.cb-fildecs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cb-fildecs > div { display: grid; gap: 6px; justify-items: start; padding: var(--space-3); border-radius: var(--radius-chip); background: var(--fl-plate); }
.cb-fildecs b { font-size: 20px; line-height: 24px; font-weight: 560; }

/* 4 · полная карточка */
.cb-filcard .top, .cb-filchs .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-filcard .ttl, .cb-filchs .ttl { font-size: 15px; line-height: 21px; font-weight: 600; text-wrap: pretty; }
.cb-filev { display: grid; gap: var(--space-2); }
.cb-filev li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: var(--space-3); border-radius: var(--radius-chip); background: var(--fl-plate); }
.cb-filev .no, .cb-fillinks .no { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--fl-bg); font-size: 11px; font-weight: 700; flex: none; }
.cb-filev li > div { display: grid; gap: 4px; min-width: 0; }
.cb-filev q { font-size: 13px; line-height: 19px; }
.cb-filev .m { display: block; font-size: 11px; line-height: 16px; color: var(--ink-3); }
.cb-filev .m .cb-i { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.cb-filev .rl { display: inline-block; margin-left: 6px; padding: 0 6px; line-height: 15px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--border); }
.cb-filev .cb-filgo { background: var(--fl-bg); }
.cb-fillinks { display: grid; gap: 4px; margin-top: var(--space-2); font-size: 12px; }
.cb-fillinks li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink-2); }
.cb-fillinks .no { background: var(--fl-plate); }
.cb-fillinks b { font-weight: 600; color: var(--ink); }
.cb-filref { display: grid; gap: 4px; }
.cb-filref li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); font-size: 12px; padding: 6px 0; border-top: 1px solid var(--border); }
.cb-filref li:first-child { border-top: 0; padding-top: 0; }
.cb-filref b { font-weight: 500; text-align: right; }
.cb-filrub { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); gap: 6px; margin: 0; }
.cb-filrub > div { padding: 8px var(--space-3); border-radius: var(--radius-chip); background: var(--fl-plate); display: grid; gap: 2px; }
.cb-filrub dt { font-size: 11px; color: var(--ink-3); }
.cb-filrub dd { margin: 0; font-size: 12px; font-weight: 500; }
.cb-filplate.prop > b { font-size: 14px; line-height: 19px; font-weight: 600; }
.cb-filbasis { font-size: 12px; color: var(--ink-3); }
.cb-filbasis b { color: var(--ink); font-weight: 600; }

/* 5 · что ещё вывести */
.cb-filchs .grow { flex: 1; }
.cb-filchs .cnt { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-filchs.hl { box-shadow: var(--shadow-ring), 0 0 0 2px var(--flame); }
.cb-filchs { container-type: inline-size; }
/* цепочка сигнал → драйвер → показатель: одна строка равных плашек со стрелкой между; на узком — столбик со стрелкой вниз. Никогда не переносится так, что стрелка открывает новую строку (У-0238) */
.cb-filchain { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px 20px; align-items: stretch; }
.cb-filchain li { display: grid; align-content: start; gap: 1px; padding: 8px 12px; border-radius: var(--radius-chip); background: var(--fl-plate); font-size: 12px; font-weight: 500; position: relative; min-width: 0; overflow-wrap: break-word; }
.cb-filchain li + li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid var(--ink-3); border-right: 1.5px solid var(--ink-3); transform: translateY(-50%) rotate(45deg); }
@container (max-width: 520px) {
  .cb-filchain { grid-auto-flow: row; grid-auto-columns: auto; gap: 16px; }
  .cb-filchain li + li::before { left: 20px; top: -13px; transform: rotate(135deg); }
}
.cb-filchain .k { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.cb-filform { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-chip); background: var(--fl-plate); --fl-bg: var(--card); }
.cb-fil:not(.card) .cb-filform { --fl-bg: var(--inset); }
.cb-filform .hd { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-filform .hd > div:first-child { display: grid; gap: 1px; }
.cb-filform .k { font-size: 11px; color: var(--ink-3); }
.cb-filform code { font-family: var(--font-mono); font-size: 13px; font-weight: 500; font-size-adjust: none; }
.cb-filform .q { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--ink-2); }
.cb-filform .q .cb-i { margin-top: 2px; color: var(--ink-3); }
.cb-filform .cb-seg.inset { background: var(--fl-bg); }
.cb-filform .cb-seg.inset button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); box-shadow: none; }

/* 6 · очередь */
.cb-filtop { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-3); align-items: stretch; }   /* R4: карточки ряда одной высоты */
.cb-filq > .cb-filtop .cb-fil.card { box-shadow: var(--shadow-ring); }
.cb-fil.card .cb-filtop .cb-fil.card { background: var(--inset); --fl-bg: var(--inset); --fl-plate: var(--card); box-shadow: none; border-radius: var(--radius-inset); padding: var(--space-4); }
.cb-fil.card .cb-filtop .cb-filchs.hl { box-shadow: 0 0 0 2px var(--flame); }
.cb-fil.card .cb-filtop .cb-filform { --fl-bg: var(--inset); }
.cb-filtw { overflow-x: auto; border-radius: var(--radius-chip); }
.cb-filtbl { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 16px; min-width: 720px; }
.cb-filtbl th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cb-filtbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cb-filtbl tr:last-child td { border-bottom: 0; }
.cb-filtbl tr[aria-selected="true"] td { background: var(--fl-bg); }
.cb-filtbl td:first-child { width: 170px; }
.cb-filtbl .qt { min-width: 200px; }
.cb-filtbl .src { color: var(--ink-2); min-width: 140px; }
.cb-filtbl .dt { white-space: nowrap; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-filtbl .rub { color: var(--ink-3); }
.cb-filtbl .op { width: 1%; }
.cb-filtbl .cb-filgo { background: var(--fl-bg); }
.cb-fildrawer { position: relative; border-radius: var(--radius-inset); }
.cb-fildrawer:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-fildrawer > .x { position: absolute; top: 10px; right: 10px; z-index: 1; }
.cb-fildrawer > .cb-fil.card { padding-right: 52px; }
.cb-filwatch { border-radius: var(--radius-chip); box-shadow: inset 0 0 0 1px var(--border); }
.cb-filwatch > button { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; background: transparent; border-radius: var(--radius-chip); cursor: pointer; text-align: left; }
.cb-filwatch > button:hover { background: var(--fl-plate); }
.cb-filwatch > button b { font-weight: 600; }
.cb-filwatch > button span { font-size: 12px; color: var(--ink-3); }
.cb-filwatch ul { display: grid; gap: 6px; padding: 4px 12px 12px; }
.cb-filwatch li { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr) auto; gap: var(--space-3); font-size: 12px; align-items: start; }

/* 7 · звонки */
.cb-filheat { display: grid; grid-template-columns: minmax(84px, auto) repeat(var(--n), minmax(0, 1fr)); gap: 3px; overflow-x: auto; }
.cb-filheat > div { display: contents; }
.cb-filheat .hr span { font-size: 11px; line-height: 13px; font-variant-numeric: tabular-nums; color: var(--ink-3); padding: 0 2px 2px; text-align: center; align-self: end; }
.cb-filheat .hr span.cur { color: var(--ink); font-weight: 700; }
.cb-filheat .l { font-size: 12px; font-weight: 500; align-self: center; padding-right: 6px; }
.cb-filheat .c { display: grid; justify-items: center; gap: 0; padding: 6px 2px; border-radius: 8px; font-size: 11px; line-height: 14px; font-variant-numeric: tabular-nums; }
.cb-filheat .c b { font-size: 13px; font-weight: 600; }
.cb-filheat .c span { font-weight: 400; }   /* подпись доли без прозрачности: ≥ 4,5:1 */
.cb-filcrows { display: grid; gap: 2px; }
.cb-filcrows > li { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--border); }
.cb-filcrows > li:first-child { border-top: 0; }
.cb-filcrows .r1 { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 6px 10px; align-items: start; }
.cb-filcrows .tg { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cb-filcrows .ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fl-plate); color: var(--ink-2); }
.cb-filcrows .nm { display: grid; min-width: 0; }
.cb-filcrows .nm b { font-weight: 500; }
.cb-filcrows .nm span { font-size: 12px; color: var(--ink-3); }
.cb-filcrows .ex { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; margin-left: 42px; padding: 8px var(--space-3); border-radius: var(--radius-chip); background: var(--fl-plate); align-items: start; }
.cb-filcrows .ex q { grid-column: 1; }
.cb-filcrows .ex .m { grid-column: 1; font-size: 11px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.cb-filcrows .ex .crm { color: var(--ink-2); }
.cb-filcrows .ex .cb-filgo { grid-column: 2; grid-row: 1 / span 2; background: var(--fl-bg); }
.cb-filcrows .cb-filnote { margin-left: 42px; }

/* 8 · журнал */
.cb-fillearn { display: grid; gap: 8px; }
.cb-fillearn li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; font-size: 12px; }
.cb-fillearn .bar { grid-column: 1 / -1; grid-row: 2; }
.cb-fillearn .bar { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; gap: 2px; }
.cb-fillearn .n { color: var(--ink-2); white-space: nowrap; }
.cb-filgate { font-size: 12px; color: var(--ink-3); align-self: flex-start; border-bottom: 1px dashed var(--ink-3); line-height: 16px; }
.cb-fillearn .gate { grid-column: 1 / -1; grid-row: 3; color: var(--ink-3); font-size: 11px; border-bottom: 1px dashed var(--ink-3); justify-self: start; line-height: 14px; }
.cb-fillearn i, .cb-fillegend i { display: block; }
.cb-fillearn i.took, .cb-fillegend i.took { background: var(--ink); }
.cb-fillearn i.noise, .cb-fillegend i.noise { background: repeating-linear-gradient(-45deg, var(--flame) 0 2px, var(--flame-hatch) 2px 4px); }
.cb-fillearn i.oth, .cb-fillegend i.oth { background: var(--mono-3); }
.cb-fillegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--ink-3); }
.cb-fillegend span { display: inline-flex; align-items: center; gap: 5px; }
.cb-fillegend i { width: 10px; height: 10px; border-radius: 3px; }
.cb-fillogl { display: grid; gap: 0; }
.cb-fillogl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 12px; align-items: start; }
.cb-fillogl .b { grid-column: 1 / -1; }
.cb-fillogl li:first-child { border-top: 0; }
.cb-fillogl .dt { color: var(--ink-2); }
.cb-fillogl .b { display: grid; gap: 2px; min-width: 0; }
.cb-fillogl .r1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cb-fillogl .why { color: var(--ink-2); }
.cb-fillogl .why b { color: var(--ink); font-weight: 600; }
.cb-fillogl .v { color: var(--ink-3); white-space: nowrap; font-size: 11px; }

/* 9 · рабочий экран */
.cb-filws { display: grid; gap: var(--space-4); min-width: 0; }
.cb-filws > .hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.cb-filws > .hd h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-filws > .hd span { font-size: 13px; color: var(--ink-3); }
.cb-filws > .g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }   /* R4: бенто-ряд; .cb-fil { height: 100% } ниже работает только при stretch */
.cb-filws .c4 { grid-column: span 4; } .cb-filws .c5 { grid-column: span 5; } .cb-filws .c7 { grid-column: span 7; } .cb-filws .c8 { grid-column: span 8; } .cb-filws .c12 { grid-column: 1 / -1; }
.cb-filws .g > div { min-width: 0; }
.cb-filws .g > div > .cb-fil { height: 100%; }
@media (max-width: 1180px) {
  .cb-filws .c4, .cb-filws .c5, .cb-filws .c7, .cb-filws .c8 { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .cb-fil.card { padding: var(--space-4); }
  .cb-filsrc li { grid-template-columns: 16px 32px minmax(0, 1fr); }
  .cb-filsrc .q { grid-column: 2 / -1; text-align: left; }
  .cb-filkv > div { grid-template-columns: 1fr; gap: 2px; }
  .cb-filcrows .ex, .cb-filcrows .cb-filnote { margin-left: 0; }
  .cb-filwatch li { grid-template-columns: minmax(0, 1fr) auto; }
  .cb-filwatch li > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .cb-filref li { grid-template-columns: 1fr; }
  .cb-filref b { text-align: left; }
  .cb-filev li { grid-template-columns: 22px minmax(0, 1fr); }
  .cb-filev li > .cb-filgo { grid-column: 2; justify-self: start; }
  .cb-filtbl { min-width: 0; }
  .cb-filtbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cb-filtbl, .cb-filtbl tbody, .cb-filtbl tr, .cb-filtbl td { display: block; width: auto; }
  .cb-filtbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .cb-filtbl tr:last-child { border-bottom: 0; }
  .cb-filtbl td { padding: 0; border: 0; min-width: 0; grid-column: 1; }
  .cb-filtbl td:first-child { width: auto; }
  .cb-filtbl .qt, .cb-filtbl .src { min-width: 0; }
  .cb-filtbl td.op { grid-column: 2; grid-row: 1; width: auto; }
  .cb-filtbl .src, .cb-filtbl .dt { display: inline; font-size: 11px; color: var(--ink-3); }
}
@media (prefers-reduced-motion: reduce) { .cb-fil *, .cb-filgo { transition: none !important; } }
.cb-fillinks .bs { flex: 1 1 180px; color: var(--ink-3); }

/* ── src/styles/o-calls.css ── */
/* ── Колл-центр (src/charts/o-calls.js) · префикс cb-kc- · цвет только токенами ── */
.cb-kc { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cb-kc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-kc-h .t { min-width: 0; flex: 1 1 280px; display: grid; gap: 2px; }
.cb-kc-h h3 { margin: 0; font-size: 16px; line-height: 21px; font-weight: 600; text-wrap: balance; }
.cb-kc-h p { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-kc-h .a { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-kc-src { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-kc-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-kc-p { margin: 0; font-size: 14px; line-height: 20px; }
.cb-kc-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-kc small { font-size: 11px; line-height: 14px; }
.cb-kc-tw { overflow-x: auto; border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); max-width: 100%; }
.cb .lnkbtn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 2px 4px; margin: -2px -4px; border-radius: 6px; color: var(--ink); font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; white-space: nowrap; }
.cb .lnkbtn:hover { text-decoration-color: currentColor; }
.cb-kc-tb { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* чипы */
.cb-kc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-kc-chips button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .15s; }
.cb-kc-chips button:hover { background: var(--inset-hover); color: var(--ink); }
.cb-kc-chips button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-kc-chips .n { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 12px; }

/* плашки-предупреждения и шлюз */
.cb-kc-warn { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) 12px; border-radius: 12px; background: var(--warn-soft); color: var(--ink); font-size: 13px; line-height: 18px; }
.cb-kc-warn > .cb-i { color: var(--warn); margin-top: 1px; }
.cb-kc-warn.soft { background: var(--inset); }
.cb-kc-warn.soft > .cb-i { color: var(--ink-2); }
.cb-kc-gate { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) 12px; border-radius: 12px; background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 7px), var(--inset); font-size: 13px; line-height: 18px; }
.cb-kc-gate > div { display: grid; gap: 2px; }
.cb-kc-gate > div span { color: var(--ink-2); font-size: 12px; line-height: 16px; }
.cb-kc-gate.ok { background: var(--inset); }
.cb-kc-gate > .cb-i { color: var(--ink-2); margin-top: 1px; }
.cb-kc-out { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); color: var(--ink-2); }
.cb-kc-out div { display: grid; gap: 2px; font-size: 13px; }
.cb-kc-out b { color: var(--ink); }

/* ── ScorePill ── */
.cb-kc-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 4px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--inset); color: var(--ink-2); }
.cb-kc-pill b { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; background: var(--card); color: var(--ink); }
.cb-kc-pill.z-ok { background: var(--ok-soft); color: var(--ok); }
.cb-kc-pill.z-mid { background: var(--warn-soft); color: var(--ink); }
.cb-kc-pill.z-bad { background: var(--bad-soft); color: var(--bad); }
.cb-kc-pill.out { padding: 0 9px; color: var(--ink-3); background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 6px), var(--inset); }

/* ── CallScorecard ── */
.cb-kc-sc { display: grid; gap: var(--space-3); min-width: 0; }
.cb-kc-sc .top { position: relative; display: grid; gap: var(--space-2); }
.cb-kc-sc .score { display: flex; align-items: center; gap: 6px var(--space-3); flex-wrap: wrap; min-width: 0; }
.cb-kc-sc .score > b { font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-kc-sc .score > b small { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.cb-kc-sc .score .alt { font-size: 12px; line-height: 16px; color: var(--ink-2); white-space: nowrap; }
.cb-kc-pill.word { padding: 0 9px; }
.cb-kc-sc .top > .cb-tag { justify-self: start; }
/* «как посчитано» — поповер под шапкой балла от её левого края, не шире карточки */
.cb-kc-sc .how { display: inline-flex; }
.cb-kc-sc .how > .lnkbtn { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.cb-kc-sc .how .pop { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; width: min(360px, 100%); padding: 12px 14px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-pop); }
.cb-kc-sc .how dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; font-size: 12px; line-height: 16px; }
.cb-kc-sc .how dt { color: var(--ink-3); }
.cb-kc-sc .how dd { margin: 0; color: var(--ink); overflow-wrap: break-word; }
/* встреча назначена — одна плашка-вердикт */
.cb-kc-sc .verdict { display: flex; gap: var(--space-2); align-items: flex-start; flex-wrap: wrap; font-size: 13px; line-height: 18px; padding: var(--space-2) 12px; border-radius: 12px; background: var(--ok-soft); }
.cb-kc-sc .verdict > .cb-i { color: var(--ok); margin-top: 1px; }
.cb-kc-sc .verdict .tx { flex: 1 1 200px; min-width: 0; }
.cb-kc-sc .verdict.has { background: var(--bad-soft); }
.cb-kc-sc .verdict.has > .cb-i { color: var(--bad); }
.cb-kc-sc .blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-kc-sc .blocks > li { background: var(--inset); border-radius: 12px; padding: var(--space-2) 12px; display: grid; gap: 6px; }
/* главная потеря — подписью «главная потеря», без кольца (D16) */
.cb-kc-sc .bh { display: flex; align-items: center; gap: var(--space-2); border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; width: 100%; border-radius: 6px; min-height: 24px; }
.cb-kc-sc .bh .nm { flex: 1; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.cb-kc-sc .bh .sc { font-weight: 600; white-space: nowrap; }
.cb-kc-sc .bh .sc small { color: var(--ink-3); font-weight: 500; }
.cb-kc-sc .flag { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--flame-soft); color: var(--ink); }
.cb-kc-sc .bar { position: relative; height: 8px; border-radius: var(--radius-pill); background: var(--card); overflow: hidden; }
.cb-kc-sc .bar i { position: absolute; top: 0; bottom: 0; left: 0; }
.cb-kc-sc .bar .got { background: var(--ink); border-radius: var(--radius-pill); }
.cb-kc-sc .bl { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-kc-sc .bl.na { color: var(--ink-3); }
.cb-kc-sc .items { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.cb-kc-sc .items li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 8px; border-radius: 10px; background: var(--card); }
.cb-kc-sc .items .mk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--inset); color: var(--ink-3); letter-spacing: -.03em; }
.cb-kc-sc .items li.ok .mk { background: var(--ok-soft); color: var(--ok); }
.cb-kc-sc .items li.bad .mk { background: var(--bad-soft); color: var(--bad); }
.cb-kc-sc .items .tx { display: grid; gap: 3px; min-width: 0; }
.cb-kc-sc .items .r1 { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; font-size: 13px; line-height: 18px; }
.cb-kc-sc .items .r1 b { font-weight: 500; }
.cb-kc-sc .items .g { font-size: 11px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); }
.cb-kc-sc .items .r2 { display: flex; gap: 4px 10px; flex-wrap: wrap; font-size: 11px; line-height: 15px; color: var(--ink-3); }
.cb-kc-sc .items .r2 .st { color: var(--ink-2); font-weight: 600; }
.cb-kc-sc .items .src { display: inline-flex; align-items: center; gap: 3px; }
.cb-kc-sc .items .r3 { font-size: 11px; line-height: 15px; color: var(--ink-3); }
.cb-kc-sc .items .q { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 17px; color: var(--ink-2); flex-wrap: wrap; }
.cb-kc-sc .items .q > span { flex: 1 1 180px; min-width: 0; }
.cb-kc-sc .items .q.none { color: var(--ink-3); font-style: italic; }
.cb .tc { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.cb .tc:hover { background: var(--inset-hover); }
/* цели касания на телефоне — 44 px зоной нажатия, вид не меняется (брендбук «Приёмка экрана») */
@media (hover: none), (pointer: coarse) {
  .cb-kc-sc .lnkbtn, .cb-kc-sc .bh, .cb .tc { position: relative; }
  .cb-kc-sc .lnkbtn::after, .cb .tc::after { content: ""; position: absolute; inset: -10px -4px; }
  .cb-kc-sc .bh::after { content: ""; position: absolute; inset: -10px -12px; }
}

/* ── CallReview ── */
.cb-kc-rev { display: grid; gap: var(--space-4); min-width: 0; }
.cb-kc-rev > .hd { display: grid; gap: 4px; }
.cb-kc-rev .when { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-kc-rev h3 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-kc-rev .tags { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.cb-kc-stage { font-size: 12px; color: var(--ink-2); }
.cb-kc-sec { display: grid; gap: var(--space-2); min-width: 0; }
.cb-kc-sec > h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 19px; font-weight: 600; }
.cb-kc-sec .cnt { font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.cb-kc-miss { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-kc-miss span { font-size: 12px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); border: 0; }
.cb-kc-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-3) var(--space-4); }
.cb-kc-grid2:empty { display: none; }
.cb-kc-ql { margin: 0; padding: 0 0 0 18px; display: grid; gap: 4px; font-size: 13px; line-height: 18px; }
.cb-kc-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cb-kc-chain li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px var(--space-3); border-radius: 12px; background: var(--inset); }
.cb-kc-chain li.cur { background: var(--card); } /* текущий — подложкой и тегом «этот звонок», без кольца (D16) */
.cb-kc-chain .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--card); font-size: 12px; font-weight: 600; }
.cb-kc-chain .b { display: grid; gap: 2px; min-width: 0; }
.cb-kc-chain .r1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.cb-kc-chain .k { font-size: 12px; color: var(--ink-3); }
.cb-kc-chain p { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-kc-chain.thin li { padding: 4px 10px; background: transparent; }
.cb-kc-fold summary { cursor: pointer; font-size: 12px; color: var(--ink-2); padding: 6px 0; border-radius: 6px; }
.cb-kc-dlg { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cb-kc-dlg li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 8px; border-radius: 12px; }
.cb-kc-dlg li.op { background: var(--inset); }
.cb-kc-dlg li.cl { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-kc-dlg li.unk { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 7px); }
.cb-kc-dlg li.on { background: var(--accent-soft); }   /* выбранное — подложкой, без полосы-акцента (D16, У-0225) */
.cb-kc-dlg .tc { justify-self: start; }
.cb-kc-dlg .b { display: grid; gap: 2px; min-width: 0; }
.cb-kc-dlg .w { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.cb-kc-dlg .dbt { font-size: 11px; font-weight: 600; padding: 0 7px; border-radius: var(--radius-pill); background: var(--warn-soft); color: var(--ink); }
.cb-kc-dlg p { margin: 0; font-size: 13px; line-height: 18px; }
.cb-kc-mplay { display: flex; align-items: center; gap: var(--space-3); padding: 8px; border-radius: var(--radius-inset); background: var(--inset); }
.cb-kc-mplay input { flex: 1; min-width: 0; accent-color: var(--ink); }
.cb-kc-mplay span { font-size: 12px; color: var(--ink-2); }

/* выдвижка */
.cb-kc-layer { position: relative; z-index: 1000; }
.cb-kc-scrim { position: fixed; inset: 0; background: color-mix(in oklab, var(--ink) 28%, transparent); }
.cb-kc-drw { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 96vw); background: var(--card); color: var(--ink); box-shadow: var(--shadow-pop); border-radius: var(--radius-card) 0 0 var(--radius-card); display: flex; flex-direction: column; outline: none; animation: cb-kc-in .2s ease-out; }
.cb-kc-drw .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); }
.cb-kc-drw .bar b { font-size: 14px; font-weight: 600; }
.cb-kc-drw .body { flex: 1; overflow: auto; padding: var(--space-4) var(--space-5) var(--space-6); }
@keyframes cb-kc-in { from { transform: translateX(24px); opacity: 0; } }

/* ── таблицы ── */
.cb-kc-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.cb-kc-tbl th { text-align: left; font-weight: 400; color: var(--ink-2); font-size: 12px; background: var(--inset); height: 38px; padding: 0 10px; white-space: nowrap; }
.cb-kc-tbl td, .cb-kc-tbl tbody th, .cb-kc-tbl tfoot th { height: 44px; padding: 4px 10px; border-top: 1px solid var(--border); white-space: nowrap; text-align: left; font-weight: 400; color: var(--ink); background: transparent; }
.cb-kc-tbl.sm td { height: 36px; }
.cb-kc-tbl .r { text-align: right; }
.cb-kc-tbl small { display: block; color: var(--ink-3); font-size: 11px; }
.cb-kc-tbl td small, .cb-kc-tbl .r small { display: inline; }
.cb-kc-tbl tbody th small, .cb-kc-tbl td > b + small { display: block; }
.cb-kc-tbl tbody th b, .cb-kc-tbl td > b { font-weight: 500; }
.cb-kc-tbl tr.click { cursor: pointer; }
.cb-kc-tbl tr.click:hover td, .cb-kc-tbl tr.on td { background: color-mix(in oklab, var(--inset) 70%, transparent); }
.cb-kc-tbl td.gist { white-space: normal; min-width: 220px; max-width: 360px; color: var(--ink-2); font-size: 12px; line-height: 16px; }
.cb-kc-tbl tfoot th, .cb-kc-tbl tfoot td { font-weight: 600; background: var(--inset); }
.cb-kc-reg .cb-kc-tbl { min-width: 760px; }

/* ── RipeMarker ── */
.cb-kc-ripe { position: relative; display: inline-flex; }
.cb-kc-ripe > button { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 7px 0 5px; border: 0; border-radius: var(--radius-pill); cursor: help; font-size: 11px; font-weight: 600; background: repeating-linear-gradient(-45deg, var(--flame-hatch) 0 2px, transparent 2px 5px), var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--flame); }
.cb-kc-ripe .tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 240px; display: none; gap: 2px; background: var(--card); color: var(--ink); border-radius: 12px; padding: 8px 10px; box-shadow: var(--shadow-pop); font-size: 12px; line-height: 16px; z-index: 5; font-weight: 400; text-align: left; }
.cb-kc-ripe .tip span { color: var(--ink-2); }
.cb-kc-ripe:hover .tip, .cb-kc-ripe:focus-within .tip { display: grid; }
.cb-kc-ripedemo { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--inset); font-size: 13px; }
.cb-kc-ripecol { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.cb-kc-ripecol > .cb-kc-ripedemo:nth-child(2) { margin-top: 56px; }
.cb-kc-ripedemo b { font-size: 18px; }

/* ── InboundPeople ── */
.cb-kc-inb .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.cb-kc-inb .tile { background: var(--inset); border-radius: 14px; padding: 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.cb-kc-inb .tile.main { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-kc-inb .tile .l { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-kc-inb .tile b { font-size: 26px; line-height: 30px; font-weight: 600; letter-spacing: -.01em; }
.cb-kc-inb .tile .s { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-kc-inb .tile .cb-kc-ripe { justify-self: start; }
.cb-kc-inb .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cb-kc-inb .ok .dot, .cb-kc-inb .zones .ok { background: var(--ok); }
.cb-kc-inb .warn .dot, .cb-kc-inb .zones .warn { background: var(--warn); }
.cb-kc-inb .bad .dot, .cb-kc-inb .zones .bad { background: var(--bad); }
.cb-kc-inb .zones { display: flex; gap: 2px; height: 24px; border-radius: var(--radius-pill); overflow: hidden; }
.cb-kc-inb .zones i { display: grid; place-items: center; min-width: 30px; }
.cb-kc-inb .zones span { font-size: 11px; font-weight: 600; font-style: normal; color: var(--on-fill); }
.cb-kc-inb .lg { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-kc-inb .next { display: grid; gap: var(--space-2); }
.cb-kc-inb .next > b { font-size: 13px; }
.cb-kc-inb .next .cb-kc-tbl { min-width: 340px; }
.cb-kc-inb .calls { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 12px; line-height: 16px; color: var(--ink-2); padding-top: var(--space-3); border-top: 1px solid var(--border); }

/* ── SpeedFirstCall ── */
.cb-kc-speed .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.cb-kc-speed .nums > div { background: var(--inset); border-radius: 14px; padding: 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.cb-kc-speed .nums .l { font-size: 12px; color: var(--ink-2); }
.cb-kc-speed .nums b { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
.cb-kc-speed .nums .s { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-kc-speed .hist { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 150px; padding-top: 18px; }
.cb-kc-speed .col { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 4px; min-width: 0; }
.cb-kc-speed .col .v { font-size: 11px; font-weight: 600; text-align: center; align-self: end; }
.cb-kc-speed .col i { align-self: end; width: 100%; max-width: 40px; justify-self: center; border-radius: 6px 6px 2px 2px; background: var(--mono-3); }
.cb-kc-speed .col.in i { background: var(--ink); }
.cb-kc-speed .col .x { font-size: 11px; color: var(--ink-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-kc-speed .col .thr { position: absolute; right: -4px; top: -18px; bottom: 18px; border-right: 1px dashed var(--ink-2); font-size: 11px; color: var(--ink-2); padding-right: 4px; white-space: nowrap; }
.cb-kc-speed .lg, .cb-kc-rhythm .lg, .cb-kc-cal .lg, .cb-kc-shifts .lg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); align-items: center; }
.cb-kc-speed .lg span, .cb-kc-rhythm .lg span, .cb-kc-cal .lg span, .cb-kc-shifts .lg span { display: inline-flex; align-items: center; gap: 6px; }
.cb-kc-speed .lg i { width: 10px; height: 10px; border-radius: 3px; background: var(--mono-3); }
.cb-kc-speed .lg i.in { background: var(--ink); }
.cb-kc-speed .lg i.dash { width: 14px; height: 0; border-radius: 0; background: none; border-top: 1px dashed var(--ink-2); }

/* ── DayRhythm ── */
.cb-kc-rhythm { --nm: 160px; --sm: 170px; }
.cb-kc-rhythm .axis { display: grid; grid-template-columns: var(--nm) minmax(0, 1fr) var(--sm); gap: var(--space-3); height: 14px; }
.cb-kc-rhythm .axis .sc { position: relative; grid-column: 2; }
.cb-kc-rhythm .axis .sc span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-kc-rhythm .rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cb-kc-rhythm .rw { display: grid; grid-template-columns: var(--nm) minmax(0, 1fr) var(--sm); gap: var(--space-3); align-items: center; width: 100%; border: 0; background: var(--inset); padding: 8px var(--space-3); border-radius: 12px; cursor: pointer; text-align: left; }
.cb-kc-rhythm .rw:hover { background: var(--inset-hover); }
.cb-kc-rhythm .rw[disabled] { cursor: default; background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cb-kc-rhythm .nm { display: grid; min-width: 0; font-size: 13px; line-height: 17px; }
.cb-kc-rhythm .nm small { color: var(--ink-3); }
.cb-kc-rhythm .tr { position: relative; height: 16px; border-radius: var(--radius-pill); background: var(--card); }
.cb-kc-rhythm .tr i, .cb-kc-rhythm .lg i { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill); }
.cb-kc-rhythm .win, .cb-kc-rhythm .lg i.win { background: var(--ink); }
.cb-kc-rhythm .ps, .cb-kc-rhythm .lg i.ps { background: repeating-linear-gradient(-45deg, var(--flame) 0 2px, var(--flame-hatch) 2px 5px); box-shadow: 0 0 0 1px var(--card); }
.cb-kc-rhythm .lg i { position: static; display: inline-block; width: 16px; height: 10px; }
.cb-kc-rhythm .sm { font-size: 12px; color: var(--ink-2); text-align: right; }
.cb-kc-rhythm .pl { list-style: none; margin: 4px 0 4px calc(var(--nm) + var(--space-3)); padding: 0; display: grid; gap: 2px; font-size: 12px; color: var(--ink-2); }
.cb-kc-rhythm .pl li { display: flex; gap: 6px; align-items: center; }

/* ── MeetingsCalendar ── */
.cb-kc-cal { container-type: inline-size; }
.cb-kc-cal .four { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.cb-kc-cal .four .n { background: var(--inset); border-radius: 12px; padding: var(--space-2) 12px; display: grid; gap: 2px; min-width: 0; }
.cb-kc-cal .four .l { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.cb-kc-cal .four b { font-size: 22px; line-height: 26px; font-weight: 600; }
.cb-kc-cal .four .s { font-size: 11px; color: var(--ink-3); min-height: 14px; }
.cb-kc-cal .wk, .cb-kc-cal .grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cb-kc-cal .wk span { font-size: 11px; color: var(--ink-3); text-align: center; }
.cb-kc-cal .day { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 2px; min-height: 96px; padding: var(--space-1) var(--space-2); border: 0; border-radius: 12px; background: var(--inset); text-align: left; cursor: pointer; min-width: 0; }
.cb-kc-cal .day:hover { background: var(--inset-hover); }
.cb-kc-cal .day.on { background: var(--inset); }
.cb-kc-cal .day.today { box-shadow: inset 0 0 0 1px var(--flame); }
.cb-kc-cal .day.fut { background: transparent; box-shadow: inset 0 0 0 1px var(--border); cursor: default; }
.cb-kc-cal .pad { min-height: 96px; }
.cb-kc-cal .dn { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-kc-cal .dn small { font-size: 11px; font-weight: 600; color: var(--ink); }
.cb-kc-cal .set { font-size: 18px; line-height: 22px; font-weight: 600; }
.cb-kc-cal .q { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4px; font-size: 11px; line-height: 14px; color: var(--ink-2); align-content: start; }
.cb-kc-cal .q span { display: inline-flex; align-items: center; gap: 3px; }
.cb-kc-cal .q .cb-sw { width: 6px; height: 6px; }
.cb-kc-cal .bar { display: flex; gap: 1px; height: 5px; border-radius: var(--radius-pill); overflow: hidden; background: var(--card); }
.cb-kc-cal .bar .reached { background: var(--ok); }
.cb-kc-cal .bar .cancelled { background: var(--bad); }
.cb-kc-cal .bar .unmarked { background: repeating-linear-gradient(-45deg, var(--mono-3) 0 2px, transparent 2px 4px); }
.cb-kc-cal .panel { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); }
.cb-kc-cal .panel .ph { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 13px; }
.cb-kc-cal .panel .cb-kc-tw { background: var(--card); }
@container (max-width: 560px) {
  .cb-kc-cal .four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cb-kc-cal .q { display: none; }
  .cb-kc-cal .day, .cb-kc-cal .pad { min-height: 58px; padding: 4px var(--space-1); }
  .cb-kc-cal .set { font-size: 15px; line-height: 18px; }
  .cb-kc-cal .dn small { display: none; }
}
@container (max-width: 400px) {   /* телефон: три колонки по ~100 px не вмещают «подтверждено» — две колонки, нечётная последняя во всю ширину (как .cb-kpis-N; У-0238) */
  .cb-kc-cal .four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-kc-cal .four > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── ClosureQueue ── */
.cb-kc-cq .card { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-kc-cq .r1 { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 12px; }
.cb-kc-cq .r1 .m { color: var(--ink-2); }
.cb-kc-cq .r1 .pos { margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-kc-cq dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: 13px; line-height: 18px; }
.cb-kc-cq dt { color: var(--ink-3); font-size: 12px; }
:where(.cb-kc-cq) dd { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-kc-cq .quote { margin: 0; padding: var(--space-2) 12px; border-radius: 12px; background: var(--card); display: grid; gap: 6px; }
.cb-kc-cq blockquote { margin: 0; font-size: 14px; line-height: 20px; }
.cb-kc-cq figcaption { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.cb-kc-cq .flag { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--warn-soft); }
.cb-kc-cq .acts, .cb-kc-plan .acts, .cb-kc-cq .form .acts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cb-kc-cq .form, .cb-kc-plan .reason { display: grid; gap: 6px; }
.cb-kc-cq label, .cb-kc-plan .reason label { font-size: 12px; color: var(--ink-2); }
.cb-kc textarea { font: inherit; font-size: 13px; color: var(--ink); background: var(--card); border: 0; box-shadow: inset 0 0 0 1px var(--border); border-radius: 12px; padding: 8px 10px; resize: vertical; width: 100%; }
.cb-kc textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-kc-cq .recent { display: grid; gap: 6px; }
.cb-kc-cq .recent > b { font-size: 13px; }
.cb-kc-cq .recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cb-kc-cq .recent li { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 4px 0; border-top: 1px solid var(--border); }
.cb-kc-cq .recent .t { color: var(--ink-3); white-space: nowrap; }
.cb-kc-cq .recent .x { flex: 1; min-width: 0; }

/* ── LeadJourneyByDay ── */
.cb-kc-lj .cb-kc-tbl { min-width: 760px; }
.cb-kc-lj td.low { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.cb-kc-lj td.low .cb-i { vertical-align: -1px; margin-right: 2px; }
.cb-kc-lj tr.exp td { background: var(--inset); white-space: normal; }
.cb-kc-lj .split { display: flex; gap: 2px; height: 12px; border-radius: var(--radius-pill); overflow: hidden; margin: 4px 0 6px; max-width: 520px; }
.cb-kc-lj .split .noAnswer { background: var(--mono-4); }
.cb-kc-lj .split .auto { background: var(--mono-3); }
.cb-kc-lj .split .closed { background: var(--mono-2); }
.cb-kc-lj .split .qual { background: var(--ink); }
.cb-kc-lj .split .rest { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 5px), var(--card); }
.cb-kc-lj tr.exp p { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); max-width: 720px; }

/* ── PeopleByDay (тепловая сетка) ── */
.cb-kc-heat { border-collapse: separate; border-spacing: 2px; font-size: 12px; width: 100%; }
.cb-kc-heat th { font-weight: 400; color: var(--ink-3); font-size: 11px; padding: 4px; text-align: center; white-space: nowrap; }
.cb-kc-heat th.we { color: var(--ink-2); font-weight: 600; }
.cb-kc-heat tbody th, .cb-kc-heat tfoot th, .cb-kc-heat thead th:first-child { text-align: left; min-width: 118px; color: var(--ink); font-size: 12px; }
.cb-kc-heat tbody th b { font-weight: 500; display: block; }
.cb-kc-heat tbody th small { color: var(--ink-3); }
.cb-kc-heat td { min-width: 30px; height: 30px; text-align: center; border-radius: 6px; font-variant-numeric: tabular-nums; background: var(--inset); color: var(--ink); }
.cb-kc-heat td.off { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 6px); }
.cb-kc-heat td.zero { color: var(--ink-3); }
.cb-kc-heat td.tot, .cb-kc-heat tfoot td { background: transparent; font-weight: 600; }
.cb-kc-heat td.r { text-align: right; }
.cb-kc-heat td.tot, .cb-kc-heat tfoot td { padding-inline: var(--space-2); }   /* итог справа: без поля число стояло в 3 px от рамки обёртки */
.cb-kc-tw:has(> :is(.cb-kc-heat, .cb-kc-sg)) { padding: 4px; }   /* как у RouteMatrix: клетки и подписи не касаются кольца рамки (У-0247) */

/* ── PlanEditor ── */
.cb-kc-plan .cb-kc-tbl { min-width: 560px; }
.cb-kc-plan .cellin { display: inline-grid; gap: 2px; justify-items: end; }
.cb-kc-plan input { width: 84px; height: 32px; border: 0; border-radius: 10px; padding: 0 8px; text-align: right; font: inherit; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-kc-plan input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-kc-plan td.ch input { background: var(--inset); box-shadow: inset 0 0 0 1px var(--ink-2); font-weight: 600; }
.cb-kc-plan td.ch small { color: var(--ink-2); }
.cb-kc-plan .hist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-size: 12px; line-height: 16px; }
.cb-kc-plan .hist li { display: flex; gap: 10px; padding: 4px 0; border-top: 1px solid var(--border); }
.cb-kc-plan .hist .t { color: var(--ink-3); white-space: nowrap; }

/* ── ShiftsGrid ── */
.cb-kc-shifts .now { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.cb-kc-shifts .now > div { background: var(--inset); border-radius: 12px; padding: var(--space-2) 12px; display: grid; gap: 4px; min-width: 0; }
.cb-kc-shifts .now .l { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.cb-kc-shifts .now p { margin: 0; font-size: 13px; line-height: 18px; }
.cb-kc-sg { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.cb-kc-sg th { font-weight: 400; color: var(--ink-3); font-size: 11px; padding: 2px; text-align: center; }
.cb-kc-sg thead th span, .cb-kc-sg thead th small { display: block; line-height: 13px; }
.cb-kc-sg th.we { color: var(--ink-2); }
.cb-kc-sg th.td { color: var(--ink); font-weight: 700; }
.cb-kc-sg tbody th, .cb-kc-sg thead th:first-child { text-align: left; min-width: 118px; color: var(--ink); font-size: 12px; padding-right: 8px; }
.cb-kc-sg tbody th b { display: block; font-weight: 500; }
.cb-kc-sg tbody th small { color: var(--ink-3); }
.cb-kc-sg td { padding: 0; }
.cb-kc-sg td.td { box-shadow: inset 0 0 0 1px var(--flame); border-radius: 8px; }
.cb-kc-sg .c { display: grid; place-items: center; width: 26px; height: 28px; border: 0; border-radius: 7px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; background: transparent; color: var(--ink-3); padding: 0; }
.cb-kc-sg .c.w { background: var(--ink); color: var(--on-primary); }
.cb-kc-sg .c.o { background: var(--inset); color: var(--ink-3); }
.cb-kc-sg.edit .c { cursor: pointer; box-shadow: inset 0 0 0 1px var(--border); }
.cb-kc-sg.edit .c.w { background: var(--ok); color: var(--on-fill); box-shadow: none; }
.cb-kc-sg.edit .c.dirty { box-shadow: 0 0 0 2px var(--flame); }
.cb-kc-sg td.tot { font-weight: 600; padding-left: 8px; }
.cb-kc-shifts .lg i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 11px; font-style: normal; font-weight: 600; }
.cb-kc-shifts .lg i.w { background: var(--ink); color: var(--on-primary); }
.cb-kc-shifts .lg i.o { background: var(--inset); color: var(--ink-3); }
.cb-kc-shifts .lg i.td { box-shadow: inset 0 0 0 1px var(--flame); }

/* ── ManagerRoutine ── */
.cb-kc-rt .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--space-3); }
.cb-kc-rt fieldset { margin: 0; padding: var(--space-3); border: 0; border-radius: var(--radius-inset); background: var(--inset); display: grid; gap: 4px; align-content: start; min-width: 0; }
.cb-kc-rt legend { float: left; width: 100%; display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; padding: 0 0 6px; }
.cb-kc-rt legend .n { font-weight: 500; color: var(--ink-3); }
.cb-kc-rt .it { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 4px; border-radius: 8px; }
.cb-kc-rt .it .cb-check { margin-top: 1px; }
.cb-kc-rt .it label { font-size: 13px; line-height: 18px; cursor: pointer; display: grid; }
.cb-kc-rt .it.on label { color: var(--ink-2); }
.cb-kc-rt .it small { color: var(--ink-3); }
.cb-kc-rt .past { display: grid; gap: var(--space-2); }
.cb-kc-rt .past > b { font-size: 13px; }
.cb-kc-rt .hr { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--space-2); align-items: center; }
.cb-kc-rt .hr .l { font-size: 12px; color: var(--ink-2); }
.cb-kc-rt .cells { display: flex; gap: 3px; flex-wrap: wrap; }
.cb-kc-rt .cells .c { display: grid; place-items: center; min-width: 46px; height: 38px; padding: 2px 6px; border-radius: 8px; background: var(--inset); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 13px; }
.cb-kc-rt .cells .c small { font-weight: 400; font-size: 11px; }
.cb-kc-rt .cells .c.fut { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-3); }

/* ── CcSummary ── */
.cb-kc-sum .bigs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.cb-kc-sum .big { background: var(--inset); border-radius: 14px; padding: 12px var(--space-4); display: grid; gap: 4px; align-content: start; min-width: 0; }
.cb-kc-sum .big .l { font-size: 13px; color: var(--ink-2); }
.cb-kc-sum .big b { font-size: 30px; line-height: 34px; font-weight: 560; letter-spacing: -.015em; }
.cb-kc-sum .big .s { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-kc-sum .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.cb-kc-sum .fig { min-width: 0; }
.cb-kc-sum .why { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-kc-sum .why > b { font-size: 14px; }
.cb-kc-sum .why dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; align-items: baseline; }
.cb-kc-sum .why dt { font-size: 24px; line-height: 28px; font-weight: 600; }
.cb-kc-sum .why dd { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* ── RouteMatrix ── */
.cb-kc-rm { border-collapse: separate; border-spacing: 2px; font-size: 11px; min-width: 900px; width: 100%; }
.cb-kc-rm thead th { font-weight: 400; color: var(--ink-2); padding: 6px 4px; text-align: center; vertical-align: bottom; line-height: 14px; }
.cb-kc-rm tbody th, .cb-kc-rm thead th:first-child { text-align: left; min-width: 150px; font-size: 12px; color: var(--ink); font-weight: 500; padding: 4px 8px 4px 12px; }   /* подписи строк не прижаты к рамке обёртки (У-0241) */
.cb-kc-tw:has(> .cb-kc-rm) { padding: 4px; }   /* клетки не касаются рамки справа и снизу */
.cb-kc-rm tbody th small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11px; white-space: normal; }
.cb-kc-rm td { position: relative; height: 42px; min-width: 84px; border-radius: 8px; text-align: center; padding: 4px; background: var(--inset); }
.cb-kc-rm td.q { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 7px); }
.cb-kc-rm td.on { background: var(--inset); }
.cb-kc-rm tr.off th b { color: var(--ink-3); }
.cb-kc-rm code { font-family: var(--font-mono); font-size: 11px; font-size-adjust: none; color: var(--ink); }
.cb-kc-rm .n { display: block; font-weight: 600; color: var(--ink-2); }
.cb-kc-rm .n.qn { color: var(--bad); }
.cb-kc-route .pick { display: grid; gap: var(--space-2); }
.cb-kc-route .steps { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); }
.cb-kc-route .steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.cb-kc-route .steps li { display: flex; align-items: center; gap: 8px; }
.cb-kc-route .steps .mk, .cb-kc-meet .mk { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--card); color: var(--ink-3); font-size: 11px; }
.cb-kc-route .steps li.ok .mk, .cb-kc-meet li.ok .mk { background: var(--ok-soft); color: var(--ok); }
.cb-kc-route .steps li.bad .mk, .cb-kc-meet li.bad .mk { background: var(--bad-soft); color: var(--bad); }
.cb-kc-route .steps li.skip { color: var(--ink-3); }
.cb-kc-route .res { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 18px; padding: 10px 12px; border-radius: 12px; background: var(--card); }
.cb-kc-route .res.q { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 7px), var(--card); }
.cb-kc-route .res code { font-family: var(--font-mono); font-size: 12px; font-size-adjust: none; }

/* ── TwoAxisMeeting ── */
.cb-kc-meet .axes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.cb-kc-meet .ax { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-kc-meet .ax header { display: flex; align-items: center; gap: 10px; }
.cb-kc-meet .ax header > div { display: grid; flex: 1; min-width: 0; }
.cb-kc-meet .ax header b { font-size: 14px; }
.cb-kc-meet .ax header small { color: var(--ink-3); }
.cb-kc-meet .ax .k { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card); font-weight: 700; font-size: 13px; }
.cb-kc-meet .ax .cnt { font-size: 13px; font-weight: 600; white-space: nowrap; }
.cb-kc-meet .ax ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cb-kc-meet .ax li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--card); align-items: start; }
.cb-kc-meet .ax li > div { display: grid; }
.cb-kc-meet .ax li .t { font-size: 13px; line-height: 18px; }
.cb-kc-meet .ax li small { color: var(--ink-3); }

/* ── SaidDone ── */
.cb-kc-sd .list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-kc-sd .list > li { display: grid; grid-template-columns: minmax(0, 1.4fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr); gap: var(--space-2); align-items: start; padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); }
.cb-kc-sd .st { display: grid; gap: 3px; min-width: 0; }
.cb-kc-sd .st .l { font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: .02em; }
.cb-kc-sd .st p { margin: 0; font-size: 13px; line-height: 18px; }
.cb-kc-sd .st small { color: var(--ink-3); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cb-kc-sd .st .lnkbtn { margin: 0; font-size: 11px; }
.cb-kc-sd .ar { color: var(--ink-3); margin-top: 16px; }

.cb-kc-rm td.sk { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-kc-rm .skl { display: block; color: var(--ink-3); font-size: 11px; }

/* ── узкие контейнеры: блок сам знает свою ширину (container queries) ── */
.cb-kc, .cb-kc-sc, .cb-kc-rev { container-type: inline-size; }
@container (max-width: 720px) {
  .cb-kc-inb .tiles, .cb-kc-sum .bigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-kc-sum .row2, .cb-kc-meet .axes, .cb-kc-shifts .now { grid-template-columns: minmax(0, 1fr); }
  .cb-kc-rhythm .axis { display: none; }
  .cb-kc-rhythm .rw { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm sm" "tr tr"; gap: 6px var(--space-2); }
  .cb-kc-rhythm .rw .nm { grid-area: nm; }
  .cb-kc-rhythm .rw .sm { grid-area: sm; }
  .cb-kc-rhythm .rw .tr { grid-area: tr; }
  .cb-kc-rhythm .pl { margin-left: 0; }
  .cb-kc-sd .list > li { grid-template-columns: minmax(0, 1fr); }
  .cb-kc-sd .ar { display: none; }
  .cb-kc-rt .hr { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 460px) {
  .cb-kc-sc .three b, .cb-kc-speed .nums b { font-size: 18px; line-height: 22px; }
  .cb-kc-sc .three > div, .cb-kc-speed .nums > div { padding: 8px var(--space-3); }
  .cb-kc-rhythm .rw { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nm" "sm" "tr"; }
  .cb-kc-rhythm .sm { text-align: left; }
  .cb-kc-dlg li { grid-template-columns: minmax(0, 1fr); }
  .cb-kc-chain li { grid-template-columns: 26px minmax(0, 1fr); }
  .cb-kc-chain li > .cb-btn { grid-column: 2; justify-self: start; }
  .cb-kc-cq dl { grid-template-columns: minmax(0, 1fr); }
  .cb-kc-sum .big b { font-size: 24px; line-height: 28px; }
  .cb-kc-speed .col .x { font-size: 11px; letter-spacing: -.02em; }
  .cb-kc-speed .hist { gap: 3px; }
}
@container (max-width: 330px) {
  .cb-kc-sc .three, .cb-kc-speed .nums { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .cb-kc-drw { border-radius: var(--radius-inset) 0 0 var(--radius-inset); width: 100vw; }
  .cb-kc-drw .body { padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .cb-kc-drw { animation: none; } }

/* углубление: признаки только при провайдере ([data-drill] ставит V.mark) */
.cb-kc [data-drill] { cursor: pointer; }
.cb-kc-tbl td[data-drill]:hover { background-color: var(--inset); }
.cb-kc-tbl td[data-drill]:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cb-kc-tbl td[data-drill]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ── src/styles/p-people.css ── */
/* ── Оценка сотрудников (src/charts/p-people.js) · классы cb-ppl-*. Кегли блока: 22 число · 15 заголовок · 13 текст ── */
.cb-ppl { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; font-size: 13px; line-height: 18px; }
.cb-ppl-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-ppl-h .t { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; }
.cb-ppl-h .t b { font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-ppl-h .t span { color: var(--ink-3); }
.cb-ppl-h .a { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; max-width: 100%; }
.cb-ppl-h .a .cb-seg { max-width: 100%; }
.cb-ppl-src { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-ppl-note { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-ppl-muted { color: var(--ink-3); }
.cb-ppl-cap { color: var(--ink-2); font-weight: 500; }
.cb-ppl-stack { display: grid; gap: var(--space-3); }
.cb-ppl-sec { display: grid; gap: var(--space-2); min-width: 0; }
.cb-ppl-acts { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-ppl-done { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 500; }
.cb-ppl-plate { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.cb-ppl-plate .cap { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 500; }
.cb-ppl-bul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.cb-ppl-tc { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 12px; }

/* факт-строка: число + что это */
.cb-ppl-fact { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.cb-ppl-fact b { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.cb-ppl-fact span { color: var(--ink-2); }
.cb-ppl-fact.big b { font-size: 30px; line-height: 34px; }
.cb-ppl-fact.big span { font-size: 15px; }

/* чипы */
.cb-ppl-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 12px; line-height: 16px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--border); white-space: normal; }
.cb-ppl-chip.ok { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.cb-ppl-chip.wait, .cb-ppl-chip.signal { background: var(--warn-soft); color: var(--ink); box-shadow: none; }
.cb-ppl-chip.gate, .cb-ppl-chip.na { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border); border: 0; }
.cb-ppl-chip.na { box-shadow: none; outline: 1px dashed var(--ink-3); outline-offset: -1px; }
.cb-ppl-chip.trend { background: var(--inset); color: var(--ink-2); }
.cb-ppl-chip.hyp { background: transparent; color: var(--ink-2); box-shadow: none; outline: 1px dashed var(--ink-3); outline-offset: -1px; }
.cb-ppl-chip.crit { background: var(--card-ink); color: var(--on-card-ink); box-shadow: none; }
.cb-ppl-chip.focus { background: var(--flame-soft); color: var(--ink); box-shadow: none; }
.cb-ppl-chip.lock { background: var(--inset); color: var(--ink-2); }
.cb-ppl-chip.miss { background: var(--bad-soft); color: var(--bad); box-shadow: none; }
.cb-ppl-chip.pen { background: var(--card-ink); color: var(--on-card-ink); box-shadow: none; font-size: 11px; min-height: 18px; }

/* пояс мерок */
.cb-ppl-belt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--space-3); }
.cb-ppl-meter { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3) var(--space-4); display: grid; gap: 2px; align-content: start; min-width: 0; height: 100%; }
.cb-ppl-meter .l { color: var(--ink-2); font-weight: 500; }
.cb-ppl-meter .v { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.cb-ppl-meter .v small { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.cb-ppl-meter .v .txt { font-size: 15px; line-height: 20px; letter-spacing: 0; display: block; }
.cb-ppl-meter .v .cb-na { font-size: 13px; font-weight: 400; }
.cb-ppl-meter .b { color: var(--ink-3); font-size: 12px; line-height: 16px; }

/* доказательство */
.cb-ppl-ev { margin: 0; padding: var(--space-3) var(--space-4); background: var(--card); border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); display: grid; gap: var(--space-2); min-width: 0; }
.cb-ppl-ev blockquote { margin: 0; color: var(--ink); font-size: 13px; line-height: 19px; }
.cb-ppl-ev blockquote::before { content: "«"; } .cb-ppl-ev blockquote::after { content: "»"; }
.cb-ppl-ev figcaption { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--ink-3); font-size: 12px; }
.cb-ppl-ev.none { color: var(--ink-3); box-shadow: none; outline: 1px dashed var(--border); }
.cb-ppl-listen { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 500; transition: background-color .15s; }
.cb-ppl-listen:hover { background: var(--inset-hover); }
.cb-ppl-listen.on { background: var(--primary); color: var(--on-primary); }
.cb-ppl-listen .tc { font-variant-numeric: tabular-nums; opacity: .8; }

/* Gate */
.cb-ppl-gate { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-inset); background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 7px), var(--inset); min-height: 120px; font-size: 13px; line-height: 18px; }
.cb-ppl-gate.compact { min-height: 0; padding: var(--space-3) var(--space-4); }
.cb-ppl-gate .ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink-2); }
.cb-ppl-gate .m { display: grid; gap: 4px; min-width: 0; }
.cb-ppl-gate .m b { font-size: 14px; font-weight: 600; }
.cb-ppl-gate .m span { color: var(--ink-2); }
.cb-ppl-gate .m .r { color: var(--ink-3); font-size: 12px; }
.cb-ppl-gate .dots { display: flex; gap: 4px; margin-top: 2px; }
.cb-ppl-gate .dots i { width: 10px; height: 10px; border-radius: 3px; background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-ppl-gate .dots i.on { background: var(--ink-2); box-shadow: none; }

/* распределение по зонам */
.cb-ppl-stack100 { display: flex; gap: 2px; height: 16px; border-radius: var(--radius-pill); overflow: hidden; }
.cb-ppl-stack100 i, .cb-ppl-units i, .cb-ppl-zb .bar i { transition: opacity .15s; }
.cb-ppl-stack100 i { flex-basis: 0; min-width: 3px; }
.cb-ppl .sw.ok, .cb-ppl-units i.ok, .cb-ppl-stack100 i.ok, .cb-ppl-zb .bar i.ok { background: var(--ok); }
.cb-ppl .sw.warn, .cb-ppl-units i.warn, .cb-ppl-stack100 i.warn, .cb-ppl-zb .bar i.warn { background: var(--warn); }
.cb-ppl .sw.bad, .cb-ppl-units i.bad, .cb-ppl-stack100 i.bad, .cb-ppl-zb .bar i.bad { background: var(--bad); }
.cb-ppl .dim { opacity: .25; }
.cb-ppl-units { display: flex; flex-wrap: wrap; gap: 3px; }
.cb-ppl-units i { width: 14px; height: 14px; border-radius: 4px; }
.cb-ppl-zrows { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-ppl-zrows li { border-top: 1px solid var(--border); }
.cb-ppl-zrows li:first-child { border-top: 0; }
.cb-ppl-zrows button, .cb-ppl-zrows .row { width: 100%; display: grid; grid-template-columns: auto 1fr auto 52px; align-items: center; gap: var(--space-2); padding: 7px 4px; background: transparent; border: 0; border-radius: 8px; text-align: left; font-size: 13px; line-height: 18px; }
.cb-ppl-zrows button { cursor: pointer; transition: background-color .15s; }
.cb-ppl-zrows button:hover, .cb-ppl-zrows button[aria-pressed="true"] { background: var(--inset); }
.cb-ppl-zrows .l { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.cb-ppl-zrows .l small { color: var(--ink-3); font-size: 12px; }
.cb-ppl-zrows b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-ppl-zrows .s { color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
.cb-ppl-zrows .grey .row { grid-template-columns: auto 1fr auto auto; color: var(--ink-2); }
.cb-ppl .sw { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.cb-ppl .sw.grey { background: var(--mono-2); box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-ppl-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-ppl-ref { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }

/* малые кратные */
.cb-ppl-mults { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: var(--space-3); }
.cb-ppl-mults.wt { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.cb-ppl-mult { display: flex; flex-direction: column; gap: 8px; padding: var(--space-3) var(--space-4); background: var(--inset); border: 0; border-radius: var(--radius-inset); text-align: left; min-width: 0; color: var(--ink); font-size: 13px; line-height: 18px; }
button.cb-ppl-mult { cursor: pointer; transition: box-shadow .15s, background-color .15s; }
button.cb-ppl-mult:hover { background: var(--inset-hover); }
.cb-ppl-mult.on { background: var(--inset); }
.cb-ppl-mult .hd { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.cb-ppl-mult .hd b { font-weight: 600; min-width: 0; }
.cb-ppl-mult .hd small { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.cb-ppl-mult .track { position: relative; height: 18px; margin: 4px 6px 0; }
.cb-ppl-mult .track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 1px; background: var(--mono-2); }
.cb-ppl-mult .track .gap { position: absolute; top: 7px; height: 4px; background: var(--flame-soft); }
.cb-ppl-mult .track .med { position: absolute; top: 1px; width: 2px; height: 16px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.cb-ppl-mult .track .me { position: absolute; top: 3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 2px var(--inset); }
.cb-ppl-mult .ax { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 11px; line-height: 14px; font-variant-numeric: tabular-nums; }
.cb-ppl-mult .vals { display: flex; gap: var(--space-3); flex-wrap: wrap; color: var(--ink-2); font-size: 12px; }
.cb-ppl-mult .vals b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-ppl-mult .k { display: inline-block; vertical-align: middle; margin-right: 4px; }
.cb-ppl-mult .k.me { width: 8px; height: 8px; border-radius: 50%; background: var(--flame); }
.cb-ppl-mult .k.med { width: 2px; height: 10px; background: var(--ink); }
.cb-ppl-mult .ft { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-ppl-mult .few { color: var(--ink-3); padding: 10px; border-radius: 10px; background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 7px); }
.cb-ppl-pickline { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: 8px 12px; border-radius: var(--radius-inset); background: var(--inset); color: var(--ink-2); }

/* карточка человека */
.cb-ppl-who { display: flex; align-items: center; gap: var(--space-3); }
.cb-ppl-who .av, .cb-ppl-av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); font-weight: 600; font-size: 14px; }
.cb-ppl-av { width: 28px; height: 28px; font-size: 11px; }
.cb-ppl-who .t { display: grid; gap: 2px; flex: 1; min-width: 0; }
.cb-ppl-who .t b { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-ppl-who .t span { color: var(--ink-3); }
.cb-ppl-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: var(--space-4); align-items: start; }
.cb-ppl-duo.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-3); align-items: stretch; }   /* R4: две плашки одной высоты */
@container (max-width: 760px) { .cb-ppl-duo { grid-template-columns: minmax(0, 1fr); } }

/* таблица команды */
.cb-ppl-sortnote { display: flex; gap: 6px; align-items: flex-start; color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-ppl-sortnote .cb-i { margin-top: 1px; }
.cb-ppl-scroll { overflow-x: auto; border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-ppl-tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; min-width: 660px; }
.cb-ppl-tbl th, .cb-ppl-tbl td { text-align: left; padding: 8px 12px; border-top: 1px solid var(--border); vertical-align: middle; }
.cb-ppl-tbl thead th { border-top: 0; background: var(--inset); color: var(--ink-2); font-weight: 400; white-space: nowrap; }
.cb-ppl-tbl .r { text-align: right; }
.cb-ppl-tbl tbody tr { transition: background-color .12s; }
.cb-ppl-tbl tbody tr[aria-selected="true"] { background: var(--inset); }
.cb-ppl-tbl tbody th { font-weight: 400; }
.cb-ppl-tbl .nm { display: grid; gap: 1px; padding: 4px 8px; margin: -4px -8px; border: 0; background: transparent; border-radius: 10px; text-align: left; cursor: pointer; }
.cb-ppl-tbl .nm:hover { background: var(--inset-hover); }
.cb-ppl-tbl .nm b { font-weight: 500; white-space: nowrap; }
.cb-ppl-tbl .nm small, .cb-ppl-tbl td small { color: var(--ink-3); font-size: 12px; }
.cb-ppl-tbl .pc { display: inline-grid; justify-items: end; line-height: 16px; }
.cb-ppl-zb { display: grid; gap: 4px; min-width: 150px; }
.cb-ppl-zb .bar { display: flex; gap: 2px; height: 8px; border-radius: var(--radius-pill); overflow: hidden; }
.cb-ppl-zb .bar i { flex-basis: 0; min-width: 2px; }
.cb-ppl-zb .nums { display: flex; gap: 10px; font-size: 12px; color: var(--ink-2); }
.cb-ppl-zb .nums span { display: inline-flex; align-items: center; gap: 4px; }
.cb-ppl-zb .nums .sw { width: 7px; height: 7px; }
.cb-ppl-zb-gate { display: inline-block; color: var(--ink-3); font-size: 12px; padding: 2px 8px; border-radius: 8px; background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 7px); }

/* матрица навыков */
.cb-ppl-mx { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 520px; font-size: 12px; font-variant-numeric: tabular-nums; }
.cb-ppl-mx th { font-weight: 400; color: var(--ink-2); text-align: left; padding: 4px 6px; white-space: nowrap; }
.cb-ppl-mx thead th { text-align: center; white-space: normal; line-height: 15px; vertical-align: bottom; }
.cb-ppl-mx td { padding: 0; }
.cb-ppl-mx .cell { width: 100%; height: 36px; border: 0; border-radius: 8px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-ppl-mx .cell.ok { background: var(--card); color: var(--ink-3); font-weight: 500; }
.cb-ppl-mx .cell.few { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, var(--card) 2px 7px); color: var(--ink-3); font-weight: 500; }
.cb-ppl-mx .cell[aria-pressed="true"] { background: var(--inset); }
.cb-ppl-mxleg { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-2); font-size: 12px; line-height: 16px; }
.cb-ppl-mxleg .it { display: inline-flex; align-items: center; gap: 6px; }
.cb-ppl-mxleg .it > i { width: 16px; height: 10px; border-radius: 3px; display: inline-block; }
.cb-ppl-mxleg .it > i.ok { background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-ppl-mxleg .it > i.few { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, var(--card) 2px 5px); box-shadow: inset 0 0 0 1px var(--border); }
.cb-ppl-mxleg .it > i.solid { background: var(--mono-4); }
.cb-ppl-mxleg .it > i.mat { background: repeating-linear-gradient(-45deg, var(--mono-4) 0 2px, var(--hatch-ghost) 2px 4px); }

/* фокус и проверки */
.cb-ppl-focus { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-ppl-focus .ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--flame-soft); color: color-mix(in oklab, var(--flame-deep) 60%, var(--ink)); }
.cb-ppl-focus .m { display: grid; gap: 4px; min-width: 0; }
.cb-ppl-focus .l { color: var(--ink-3); font-size: 12px; }
.cb-ppl-focus b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-ppl-focus .meta { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; color: var(--ink-2); }
.cb-ppl-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: var(--space-2); }
.cb-ppl-checks li { display: grid; gap: 2px; padding: var(--space-3); border-radius: 12px; background: var(--inset); position: relative; }
.cb-ppl-checks li.wait { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-ppl-checks li.base { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cb-ppl-checks .d { color: var(--ink-3); font-size: 12px; }
.cb-ppl-checks b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-ppl-checks b.wait, .cb-ppl-checks b.few { color: var(--ink-3); font-weight: 500; }
.cb-ppl-checks small { color: var(--ink-3); font-size: 12px; }

/* трек */
.cb-ppl-wk { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-ppl-wk > li { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--border); }
.cb-ppl-wk > li:first-child { border-top: 0; padding-top: 0; }
.cb-ppl-wk .hd { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: baseline; }
.cb-ppl-wk .hd span { color: var(--ink-2); }
.cb-ppl-wk .bul, .cb-ppl-skills .bul, .cb-ppl-cal .bar { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--inset); }
.cb-ppl-wk .bul .f, .cb-ppl-skills .bul .f, .cb-ppl-cal .bar .f { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--mono-4); }
.cb-ppl-wk .bul .t, .cb-ppl-skills .bul .t, .cb-ppl-cal .bar .t { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed var(--ink); margin-left: -1px; }
.cb-ppl-wk .tx { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; color: var(--ink-3); font-size: 12px; }
.cb-ppl-wk .tx b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-ppl-wk .st { display: flex; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
.cb-ppl-wk .st .cb-btn { margin-left: auto; }

/* калибровка */
.cb-ppl-cal { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-ppl-cal li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(90px, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.cb-ppl-cal li:first-child { border-top: 0; }
.cb-ppl-cal .nm { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
.cb-ppl-cal .nm b { font-weight: 500; }
.cb-ppl-cal .v { display: grid; justify-items: end; min-width: 92px; }
.cb-ppl-cal .v b { font-variant-numeric: tabular-nums; }
.cb-ppl-cal .v small { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.cb-ppl-cal .v small.below { color: var(--warn); font-weight: 500; }
@container (max-width: 460px) { .cb-ppl-cal li { grid-template-columns: minmax(0, 1fr) auto; } .cb-ppl-cal .bar { grid-column: 1 / -1; grid-row: 2; } }
.cb-ppl-raters { display: grid; gap: 6px; }
.cb-ppl-raters .scale, .cb-ppl-raters .row { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 96px; gap: var(--space-3); align-items: center; }
.cb-ppl-raters .scale { color: var(--ink-3); font-size: 11px; display: flex; justify-content: space-between; padding-left: calc(min(150px, 30%) + var(--space-3)); padding-right: calc(96px + var(--space-3)); }
.cb-ppl-raters .nm { display: flex; gap: 6px; align-items: center; min-width: 0; }
.cb-ppl-raters .ai { height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--card-ink); color: var(--on-card-ink); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.cb-ppl-raters .strip { position: relative; height: 22px; }
.cb-ppl-raters .strip::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--mono-2); border-radius: 1px; }
.cb-ppl-raters .strip .t { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--ink); margin-left: -1px; }
.cb-ppl-raters .strip .d { position: absolute; top: 5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 2px var(--card); }
.cb-ppl-raters .strip .d.ai { background: var(--flame); }
.cb-ppl-raters .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cb-ppl-raters .v small { color: var(--ink-3); font-weight: 400; }
@container (max-width: 460px) { .cb-ppl-raters .row { grid-template-columns: minmax(0, 1fr) auto; } .cb-ppl-raters .strip { grid-column: 1 / -1; grid-row: 2; } .cb-ppl-raters .scale { display: none; } }
.cb-ppl-warnline { display: flex; gap: 6px; align-items: flex-start; padding: 8px 12px; border-radius: var(--radius-inset); background: var(--warn-soft); color: var(--ink); font-size: 12px; line-height: 16px; }
.cb-ppl-warnline .cb-i { margin-top: 1px; color: var(--warn); }

/* списки строк */
.cb-ppl-list { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-ppl-list > li { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--border); min-width: 0; flex-wrap: wrap; }
.cb-ppl-list > li:first-child { border-top: 0; }
.cb-ppl-list .m { display: grid; gap: 3px; min-width: 0; flex: 1 1 180px; }
.cb-ppl-list .m > b { font-weight: 500; font-size: 14px; line-height: 19px; }
.cb-ppl-list .m > span { color: var(--ink-3); }
.cb-ppl-list .l1, .cb-ppl-list .l2 { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; color: var(--ink-3); }
.cb-ppl-list .l1 { color: var(--ink); font-weight: 500; }
.cb-ppl-list .r { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.cb-ppl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-ppl-chips button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; font-size: 12px; transition: background-color .15s, color .15s; }
.cb-ppl-chips button:hover { color: var(--ink); background: var(--inset); }
.cb-ppl-chips button[aria-pressed="true"] { background: var(--inset); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-ppl-chips .c { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.cb-ppl-sel { height: 30px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }

/* апелляция */
.cb-ppl-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-2); }
.cb-ppl-scores > div { display: grid; gap: 2px; padding: var(--space-3); border-radius: 12px; background: var(--inset); }
.cb-ppl-scores span { color: var(--ink-3); font-size: 12px; }
.cb-ppl-scores b { font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-ppl-scores b.wait { font-size: 15px; color: var(--ink-3); font-weight: 500; }
.cb-ppl-scores small { color: var(--ink-3); font-size: 12px; }
.cb-ppl-claim, .cb-ppl-verdict { display: grid; gap: 4px; }
.cb-ppl-claim .l, .cb-ppl-verdict .l { color: var(--ink-3); font-size: 12px; }
:where(.cb-ppl-claim) p, :where(.cb-ppl-verdict) p { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-ppl-verdict { padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-ppl-hist { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 6px; border-left: 1px solid var(--border); }
.cb-ppl-hist li { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-2); color: var(--ink-2); font-size: 12px; line-height: 16px; }
.cb-ppl-hist li span:first-child { color: var(--ink-3); font-variant-numeric: tabular-nums; }
@container (max-width: 420px) { .cb-ppl-hist li { grid-template-columns: 1fr; gap: 0; } }

/* 1:1 */
.cb-ppl-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cb-ppl-agenda > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-ppl-agenda > li > div { display: grid; gap: 6px; min-width: 0; }
.cb-ppl-agenda > li > div > b { font-size: 14px; font-weight: 600; }
.cb-ppl-agenda p { margin: 0; color: var(--ink-2); }
.cb-ppl-agenda .rec { display: flex; gap: 6px; align-items: flex-start; color: var(--ink); }
.cb-ppl-agenda .rec .cb-i { color: var(--ok); margin-top: 2px; }
.cb-ppl-agenda .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink-2); font-weight: 600; font-size: 12px; }
.cb-ppl-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-ppl-todo li { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-ppl-todo label { display: inline-flex; gap: 8px; align-items: flex-start; cursor: pointer; min-width: 0; }
.cb-ppl-todo label .done { text-decoration: line-through; color: var(--ink-3); }
.cb-ppl-todo small { color: var(--ink-3); font-size: 12px; }
.cb-ppl-add { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cb-ppl-add input { flex: 1 1 200px; min-width: 0; height: var(--control-h-sm); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); font: inherit; font-size: 13px; }
.cb-ppl-add input::placeholder { color: var(--ink-3); }

/* цель */
.cb-ppl-goalbar { position: relative; height: 28px; margin: 4px 8px; }
.cb-ppl-goalbar .line { position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--mono-2); border-radius: 1px; }
.cb-ppl-goalbar .tg { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--ink); margin-left: -1px; }
.cb-ppl-goalbar .bs { position: absolute; top: 7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--ink-3); }
.cb-ppl-goalbar .cur { position: absolute; top: 6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 2px var(--card); }
.cb-ppl-goaldl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: var(--space-2); }
.cb-ppl-goaldl > div { display: grid; gap: 2px; padding: var(--space-3); border-radius: 12px; background: var(--inset); }
.cb-ppl-goaldl dt { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12px; }
.cb-ppl-goaldl dd { margin: 0; display: grid; gap: 2px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-ppl-goaldl dd small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.cb-ppl-goaldl .k { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.cb-ppl-goaldl .k.bs { box-shadow: inset 0 0 0 2px var(--ink-3); }
.cb-ppl-goaldl .k.cur { background: var(--flame); }
.cb-ppl-goaldl .k.tg { width: 0; height: 12px; border-radius: 0; border-left: 2px dashed var(--ink); }

/* недели малыми кратными */
.cb-ppl-mult .bars { position: relative; display: flex; gap: 6px; align-items: stretch; height: 132px; }
.cb-ppl-mult .col .well .thw { position: absolute; left: -4px; right: -4px; height: 0; border-top: 2px dashed var(--ink); z-index: 1; pointer-events: none; }
.cb-ppl-mult .col { flex: 1; min-width: 0; display: grid; grid-template-rows: 16px 1fr 14px 14px; gap: 2px; justify-items: center; border-radius: 8px; outline: none; cursor: default; }
.cb-ppl-mult .col:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-ppl-mult .col.on { background: var(--inset-hover); }
.cb-ppl-mult .col .v { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-ppl-mult .col .well { position: relative; width: 100%; max-width: 28px; }
.cb-ppl-mult .col .well i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 5px 5px 2px 2px; background: var(--mono-4); }
.cb-ppl-mult .col .well i.mat { background: repeating-linear-gradient(-45deg, var(--mono-4) 0 2px, var(--hatch-ghost) 2px 5px); box-shadow: inset 0 0 0 1px var(--mono-4); }
.cb-ppl-mult .col .well i.few { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-ppl-mult .col .x { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.cb-ppl-mult .col .n { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* видимость */
.cb-ppl-scope { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-ppl-scope li { display: flex; gap: 8px; align-items: flex-start; }
.cb-ppl-scope li .cb-i { margin-top: 1px; color: var(--ok); }
.cb-ppl-scope.hid li .cb-i { color: var(--ink-3); }
.cb-ppl-scope li span { display: grid; gap: 1px; }
.cb-ppl-scope small { color: var(--ink-3); font-size: 12px; }

/* признание */
.cb-ppl-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cb-ppl-feed > li { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-ppl-feed .who { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.cb-ppl-feed .who span, .cb-ppl-feed .by { color: var(--ink-3); font-size: 12px; }
:where(.cb-ppl-feed) p { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */

/* рубрика */
.cb-ppl-sum { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-ppl-sum b { font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-ppl-sum span { color: var(--ink-2); flex: 1 1 200px; }
.cb-ppl-sum.off { background: var(--warn-soft); }
.cb-ppl-rblocks { display: grid; gap: var(--space-2); }
.cb-ppl-rblock { border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.cb-ppl-rblock .hd { width: 100%; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-4); border: 0; background: var(--card); text-align: left; cursor: pointer; transition: background-color .15s; border-radius: var(--radius-inset); }
.cb-ppl-rblock .hd:hover { background: var(--inset); }
.cb-ppl-rblock .hd b { font-weight: 600; flex: 1 1 auto; }
.cb-ppl-rblock .hd .w { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-2); }
.cb-ppl-rblock .items { list-style: none; margin: 0; padding: 0 var(--space-4) var(--space-2); display: grid; }
.cb-ppl-rblock .items li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.cb-ppl-rblock .items .lb { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; min-width: 0; flex: 1 1 200px; }
.cb-ppl-rblock .items .lb small { flex-basis: 100%; color: var(--ink-3); font-size: 12px; }
.cb-ppl-rblock .items .wi { display: inline-flex; align-items: center; gap: 4px; }
.cb-ppl-rblock .items .minus { color: var(--ink-2); font-weight: 600; }
.cb-ppl-rblock .items input { width: 72px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; text-align: right; }
.cb-ppl-rblock .items .stc { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cb-ppl-rblock .items .stc small { color: var(--ink-3); font-size: 12px; }

/* служебные плитки экранов */
.cb-ppl-dl { margin: 0; display: grid; gap: var(--space-2); }
.cb-ppl-dl > div { display: grid; gap: 2px; padding: var(--space-3); border-radius: 12px; background: var(--inset); }
.cb-ppl-dl dt { color: var(--ink-3); font-size: 12px; }
.cb-ppl-dl dd { margin: 0; display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.cb-ppl-dl dd b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-ppl-dl dd small { color: var(--ink-3); font-size: 12px; }

/* карта навыков */
.cb-ppl-skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cb-ppl-skills .row { width: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(80px, 1fr) minmax(96px, auto); gap: var(--space-3); align-items: center; padding: 8px var(--space-3); border: 0; border-radius: 12px; background: transparent; text-align: left; font-size: 13px; line-height: 18px; color: var(--ink); }
.cb-ppl-skills button.row { cursor: pointer; transition: background-color .15s; }
.cb-ppl-skills button.row:hover { background: var(--inset); }
.cb-ppl-skills li.on .row { background: var(--inset-hover); }
.cb-ppl-skills .nm { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cb-ppl-skills .nm b { font-weight: 500; }
.cb-ppl-skills li.on .bul .f { background: var(--flame); }
.cb-ppl-skills .v { display: grid; justify-items: end; }
.cb-ppl-skills .v b { font-variant-numeric: tabular-nums; }
.cb-ppl-skills .v small { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
@container (max-width: 460px) { .cb-ppl-skills .row { grid-template-columns: minmax(0, 1fr) auto; } .cb-ppl-skills .bul { grid-column: 1 / -1; grid-row: 2; } }

/* недельный цикл */
.cb-ppl-loops { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cb-ppl-loops > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-ppl-loops > li.mat { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 9px), var(--inset); }
.cb-ppl-loops .wk { display: grid; align-content: start; gap: 2px; }
.cb-ppl-loops .wk small { color: var(--ink-3); font-size: 12px; }
.cb-ppl-loops .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.cb-ppl-loops .steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; align-content: start; }
.cb-ppl-loops .dot { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-3); grid-row: span 2; }
.cb-ppl-loops .done .dot { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.cb-ppl-loops .l { font-weight: 600; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.cb-ppl-loops .l small { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.cb-ppl-loops .tx { color: var(--ink-2); font-size: 12px; line-height: 16px; }
@container (max-width: 560px) { .cb-ppl-loops > li { grid-template-columns: minmax(0, 1fr); } .cb-ppl-loops .steps { grid-template-columns: minmax(0, 1fr); } }

/* экраны */
.cb-ppl-scr { container-type: inline-size; container-name: pplscr; display: grid; gap: var(--space-4); min-width: 0; font-size: 13px; line-height: 18px; }
.cb-ppl-scrh { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-ppl-scrh .t { display: grid; gap: 2px; min-width: 0; flex: 1 1 240px; }
.cb-ppl-scrh .t b { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.015em; }
.cb-ppl-scrh .t span { color: var(--ink-3); }
.cb-ppl-scrh .t .cr { color: var(--ink-2); font-size: 12px; }
.cb-ppl-scrh .a { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-ppl-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.cb-ppl-cl { grid-column: span var(--s, 12); min-width: 0; display: grid; }
.cb-ppl-cl > .cb-ppl, .cb-ppl-cl > .cb-ppl-gate { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-5); }
.cb-ppl-scr > .cb-ppl-off { display: grid; gap: var(--space-4); }
.cb-ppl-scr > .cb-ppl-off > * { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); }
.cb-ppl-scr > .cb-ppl-off > .cb-ppl { padding: var(--space-5); }
@container pplscr (max-width: 980px) { .cb-ppl-cl { grid-column: span 12; } }
@container pplscr (max-width: 520px) { .cb-ppl-cl > .cb-ppl { padding: var(--space-4); } .cb-ppl-scrh .t b { font-size: 20px; line-height: 26px; } .cb-ppl-fact.big b { font-size: 24px; line-height: 30px; } }
.cb-ppl-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px 4px 6px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 500; text-align: left; }
.cb-ppl-switch .k { position: relative; width: 36px; height: 22px; flex: none; border-radius: var(--radius-pill); background: var(--mono-3); transition: background-color .15s; }
.cb-ppl-switch .k::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); transition: transform .15s; }
.cb-ppl-switch.on .k { background: var(--primary); }
.cb-ppl-switch.on .k::after { transform: translateX(14px); background: var(--on-primary); }
.cb-ppl-tbl .cb-ppl-chip { white-space: nowrap; }
.cb-ppl-mult .col .v.na { color: var(--ink-3); font-weight: 400; }
.cb-ppl-scr > .cb-ppl-belt .cb-ppl-meter { background: var(--card); box-shadow: var(--shadow-ring); }

/* углубление (разбор метрики): признаки только при провайдере — ядро ставит [data-drill] */
.cb-ppl-tbl td[data-drill] { cursor: pointer; border-radius: 0; transition: background-color .12s; }
.cb-ppl-tbl td[data-drill]:hover { background: var(--inset-hover); }
.cb-ppl-tbl td[data-drill]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
div.cb-ppl-mult[data-drill] { cursor: pointer; transition: background-color .15s; }
div.cb-ppl-mult[data-drill]:hover { background: var(--inset-hover); }

/* ── src/styles/q-market.css ── */
/* ── Рынок и конкуренты (src/charts/q-market.js) · классы cb-mk-*. «мы» — flame, соседи — mono. Кегли: 13 текст · 11 подписи · 15/22 числа ── */
.cb-mk-rel { position: relative; min-width: 0; display: grid; gap: var(--space-3); }
.cb-mk-stack { display: grid; gap: var(--space-3); min-width: 0; }
.cb-mk-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-3); align-items: stretch; }   /* R4: карточки пары одной высоты */
.cb-mk-duo > .cb-mk-cc { align-content: start; }   /* лишняя высота уходит вниз, строки не растягиваются */
.cb-mk-we { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-left: 6px; border-radius: var(--radius-pill); background: var(--flame-soft); color: var(--ink); font-size: 11px; font-weight: 600; vertical-align: 1px; }
.cb-mk-muted { color: var(--ink-3); }
.cb-mk-gate { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 14px; color: var(--ink-2); border-bottom: 1px dashed var(--ink-3); white-space: nowrap; }
.cb-mk-dn { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 8px 0 6px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-mk-dn .b { font-weight: 400; color: var(--ink-3); margin-left: 2px; }
.cb-mk-base { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--flame-soft); color: var(--ink); font-size: 11px; font-weight: 600; }
.cb-mk-fact { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.cb-mk-fact.late { background: var(--warn-soft); color: var(--ink); }
.cb-mk-thr { display: inline-flex; align-items: center; gap: 6px; }
.cb-mk-thr i { width: 14px; height: 0; border-top: 1px dashed var(--ink-2); }
.cb-mk-thr.none { color: var(--ink-3); font-style: italic; }
.cb-mk-foot { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-2); flex-wrap: wrap; }
.cb-mk-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; color: var(--ink-2); }
.cb-mk-sw { display: inline-block; width: 14px; height: 9px; border-radius: 3px; flex: none; }
.cb-mk-sw.band { background: var(--mono-2); }
.cb-mk-sw.tick { width: 2px; height: 12px; border-radius: 1px; background: var(--ink); }
.cb-mk-sw.kb, .cb-mk-sw.gap { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--border); }
.cb-mk-sw.proj { background: color-mix(in oklab, var(--flame) 30%, transparent); }
.cb-mk-sw.yes { background: var(--ink); }
.cb-mk-sw.no { background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-mk-chips button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-2); font-size: 13px; cursor: pointer; }
.cb-mk-chips button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.cb-mk-chips .c { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── карточка корпуса ── */
.cb-mk-cc { background: var(--card); border-radius: var(--radius-inset); padding: var(--space-4); display: grid; gap: var(--space-3); min-width: 0; font-size: 13px; line-height: 18px; box-shadow: var(--shadow-ring); }
.cb-mk-cc.ours { background: var(--accent-soft); }   /* D17: без полосы-метки (У-0248) */
.cb-mk-cc .hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.cb-mk-cc .hd .t { display: grid; gap: 2px; min-width: 0; }
.cb-mk-cc .hd b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-mk-cc .hd span { color: var(--ink-3); }
.cb-mk-cc .pr { display: grid; gap: 4px; }
.cb-mk-cc .pr .l, .cb-mk-cc .pr .q { color: var(--ink-3); font-size: 11px; line-height: 14px; }
.cb-mk-cc .pr b { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; }
.cb-mk-cc .pr b small { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.cb-mk-cc .rg { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--inset); }
.cb-mk-cc .rg i { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--mono-2); }
.cb-mk-cc .rg s { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.cb-mk-cc.ours .rg s { background: var(--flame); }
.cb-mk-cc .kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.cb-mk-cc .kv div { background: var(--inset); border-radius: 10px; padding: 6px 8px; min-width: 0; }
.cb-mk-cc .kv dt { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-mk-cc .kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.cb-mk-cc .terms { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-mk-cc .ft { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-mk-cc.compact { box-shadow: none; padding: 0; background: transparent; }
.cb-mk-cc.compact .kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── карта ── */
.cb-mk-map { display: grid; gap: var(--space-3); min-width: 0; }
.cb-mk-prov { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-2); font-size: 13px; }
.cb-mk-map .stage { position: relative; overflow: hidden; border-radius: 12px; background: var(--card); touch-action: none; cursor: grab; user-select: none; }
.cb-mk-map .stage:active { cursor: grabbing; }
.cb-mk-map .stage > svg { position: absolute; inset: 0; display: block; }
.cb-mk-mgrid { stroke: var(--border); stroke-width: 1; }
.cb-mk-ring { fill: none; stroke: var(--mono-4); stroke-width: 1; stroke-dasharray: 4 5; }
.cb-mk-ringl { fill: var(--ink-3); font-size: 11px; font-weight: 500; font-family: var(--font-sans); }
.cb-mk-sbar line { stroke: var(--ink-2); stroke-width: 1; }
.cb-mk-sbar text { fill: var(--ink-2); font-size: 11px; font-family: var(--font-sans); }
.cb-mk-map .lay { position: absolute; inset: 0; pointer-events: none; }
.cb-mk-map .mk { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; border: 0; cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; transition: background-color .12s, transform .12s; }
.cb-mk-map .mk.pill { height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), var(--shadow-ring); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cb-mk-map .mk.pill.ours { background: var(--flame-deep); color: var(--on-flame); box-shadow: var(--shadow-ring); z-index: 2; }
.cb-mk-map .mk.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--ink); }
.cb-mk-map .mk.dot::after { content: ""; position: absolute; inset: -8px; }
.cb-mk-map .mk.cluster { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--card); font-size: 13px; font-weight: 700; box-shadow: 0 0 0 3px var(--card); }
.cb-mk-map .mk.on { background: var(--ink); color: var(--card); z-index: 3; }
.cb-mk-map .mk.ours.on { background: var(--flame-deep); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--flame-deep); }
.cb-mk-map .mk:hover { transform: translate(-50%, -50%) scale(1.04); }
.cb-mk-map .mk:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; z-index: 4; }
.cb-mk-map .pop { position: absolute; z-index: 5; width: 290px; max-width: calc(100% - 16px); max-height: calc(100% - 16px); overflow: auto; background: var(--card); border-radius: var(--radius-inset); padding: var(--space-4); box-shadow: var(--shadow-pop); display: grid; gap: var(--space-2); cursor: default; }
.cb-mk-map .pop:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-mk-map .pop .x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); cursor: pointer; z-index: 1; }
.cb-mk-map .pop .cb-mk-cc .hd { padding-right: 32px; }
.cb-mk-map .pop .km { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-mk-map .zoom { position: absolute; right: 10px; top: 10px; display: grid; gap: 2px; padding: 3px; background: var(--card); border-radius: var(--radius-pill); box-shadow: var(--shadow-ring); z-index: 4; }
.cb-mk-map .zoom button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); cursor: pointer; }
.cb-mk-map .zoom button:hover { background: var(--inset); }
.cb-mk-mlist { display: none; list-style: none; margin: 0; padding: 0; gap: 6px; }
.cb-mk-mlist li { background: var(--card); border-radius: 12px; display: grid; gap: var(--space-2); }
.cb-mk-mlist li.ours { background: var(--accent-soft); }   /* D17: без полосы-метки (У-0248) */
.cb-mk-mlist li > button { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 16px; align-items: center; gap: var(--space-2); width: 100%; min-height: 48px; padding: 8px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; border-radius: 12px; }
.cb-mk-mlist .d { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 12px; }
.cb-mk-mlist .n { display: grid; min-width: 0; }
.cb-mk-mlist .n small { color: var(--ink-3); font-size: 11px; }
.cb-mk-mlist .v { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.cb-mk-mlist .cb-mk-cc { margin: 0 12px 12px; }
@media (max-width: 860px) {
  .cb-mk-map .stage { display: none; }
  .cb-mk-mlist { display: grid; }
}

/* ── таблицы ── */
.cb-mk-tw { overflow-x: auto; border-radius: 12px; background: var(--card); min-width: 0; }
.cb-mk-tbl { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.cb-mk-tbl th { text-align: left; font-weight: 400; color: var(--ink-2); font-size: 12px; padding: 0 10px; height: 40px; background: var(--inset); white-space: nowrap; }
.cb-mk-tbl th.r { text-align: right; }
.cb-mk-tbl th button { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px; margin: 0 -6px; border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; cursor: pointer; }
.cb-mk-tbl th button:hover { background: var(--inset-hover); color: var(--ink); }
.cb-mk-tbl td { height: 52px; padding: 0 10px; border-top: 1px solid var(--border); white-space: nowrap; }
.cb-mk-tbl td.r { text-align: right; }
.cb-mk-tbl .nm { display: grid; }
.cb-mk-tbl .nm small { color: var(--ink-3); font-size: 11px; }
.cb-mk-tbl .sg { color: var(--ink-2); }
.cb-mk-tbl tr.ours td { background: var(--accent-soft); }   /* D17: без полосы-метки (У-0248) */
.cb-mk-tbl tr.small td.num, .cb-mk-tbl tr.small .nm b { color: var(--ink-3); }
.cb-mk-tbl.pass { min-width: 640px; }
.cb-mk-tbl.pass td { height: 40px; }
.cb-mk-dvb { display: flex; align-items: center; gap: 8px; }
.cb-mk-dvb .tr { position: relative; width: 96px; height: 10px; flex: none; }
.cb-mk-dvb .tr::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--mono-3); }
.cb-mk-dvb .tr i { position: absolute; top: 0; bottom: 0; background: var(--mono-4); border-radius: 2px; }
.cb-mk-dvb .v { font-weight: 600; min-width: 56px; }

/* ── строки с полосой: общий каркас ── */
.cb-mk-cor, .cb-mk-l4l, .cb-mk-bars, .cb-mk-so, .cb-mk-tt { display: grid; gap: 4px; min-width: 0; font-size: 13px; line-height: 18px; }
.cb-mk-cor .row, .cb-mk-l4l .row, .cb-mk-bars .row { display: grid; grid-template-columns: minmax(96px, 38%) minmax(60px, 1fr) auto; align-items: center; gap: var(--space-3); padding: 6px 8px; border-radius: 10px; outline: none; min-width: 0; }
.cb-mk-cor .row:hover, .cb-mk-l4l .row:hover, .cb-mk-bars .row:hover, .cb-mk-so .row:hover, .cb-mk-tt .row:hover { background: color-mix(in oklab, var(--card) 60%, transparent); }
.cb-mk-cor .row:focus-visible, .cb-mk-l4l .row:focus-visible, .cb-mk-bars .row:focus-visible, .cb-mk-so .row:focus-visible, .cb-mk-tt .row:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.cb-mk-cor .nm, .cb-mk-l4l .nm, .cb-mk-bars .nm, .cb-mk-so .nm, .cb-mk-tt .nm { display: grid; min-width: 0; }
.cb-mk-cor .nm b, .cb-mk-l4l .nm b, .cb-mk-bars .nm b, .cb-mk-so .nm b, .cb-mk-tt .nm b { font-weight: 500; overflow-wrap: break-word; }
.cb-mk-cor .nm small, .cb-mk-l4l .nm small, .cb-mk-bars .nm small, .cb-mk-so .nm small, .cb-mk-tt .nm small { color: var(--ink-3); font-size: 11px; line-height: 14px; }
.cb-mk-cor .v, .cb-mk-l4l .v, .cb-mk-bars .v { display: grid; justify-items: end; text-align: right; font-variant-numeric: tabular-nums; min-width: 52px; }
.cb-mk-cor .v b, .cb-mk-bars .v b, .cb-mk-l4l .v b { font-weight: 600; }
.cb-mk-cor .v small, .cb-mk-bars .v small { color: var(--ink-3); font-size: 11px; }
.cb-mk-bars .v b small { margin-left: 3px; font-weight: 500; }

/* коридор цен */
.cb-mk-cor .tr, .cb-mk-l4l .tr { position: relative; height: 18px; }
.cb-mk-cor .tr::before, .cb-mk-l4l .tr::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); }
.cb-mk-cor .band { position: absolute; top: 3px; bottom: 3px; border-radius: var(--radius-pill); background: var(--mono-2); }
.cb-mk-cor .med { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.cb-mk-cor .we, .cb-mk-l4l .we { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 2px var(--inset); }
.cb-mk-cor .row.small .band { background: repeating-linear-gradient(-45deg, var(--mono-2) 0 2px, transparent 2px 5px); }
.cb-mk-cor .row.small .med { opacity: .5; }
.cb-mk-cor .row.ax { padding-top: 0; padding-bottom: 0; }
.cb-mk-cor .row.ax .tr::before { display: none; }
.cb-mk-cor .row.ax span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-mk-cor .row.ax .v small { font-size: 11px; color: var(--ink-3); }

/* равное к равному */
.cb-mk-sum { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; padding: var(--space-2) 12px; border-radius: 12px; background: var(--card); }
.cb-mk-sum .l { color: var(--ink-2); font-size: 13px; }
.cb-mk-sum b { font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-mk-sum .b { color: var(--ink-3); font-size: 11px; line-height: 14px; flex-basis: 100%; }
.cb-mk-l4l .ln { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--mono-3); }
.cb-mk-l4l .mk { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--inset); box-shadow: inset 0 0 0 2px var(--ink); }
.cb-mk-l4l .grp { font-size: 11px; line-height: 14px; color: var(--ink-3); padding: 8px 8px 2px; border-top: 1px solid var(--border); margin-top: 4px; }
.cb-mk-l4l .row.small .nm b, .cb-mk-l4l .row.nob .nm b { color: var(--ink-2); }
.cb-mk-l4l .row.small .mk, .cb-mk-l4l .row.small .ln { opacity: .5; }

/* разложение одной выборки */
.cb-mk-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-2); }
.cb-mk-split .pt { display: grid; gap: 4px; align-content: start; justify-items: start; text-align: left; padding: var(--space-2) 12px; border: 0; border-radius: 12px; background: var(--card); cursor: pointer; min-width: 0; }
.cb-mk-split .pt.on { background: var(--inset); }
.cb-mk-split .pt .l { color: var(--ink-2); font-size: 12px; line-height: 16px; }
.cb-mk-split .pt b { font-size: 20px; line-height: 26px; font-weight: 600; }
.cb-mk-split .pt b small { font-size: 11px; color: var(--ink-3); margin-left: 3px; font-weight: 500; }
.cb-mk-split .pt .n { color: var(--ink-3); font-size: 11px; }
.cb-mk-split .pt .note { color: var(--ink-3); font-size: 11px; line-height: 14px; }
.cb-mk-split .pt.small b { color: var(--ink-2); }

/* запас, доли */
.cb-mk-bars .tr { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--card); overflow: hidden; }
.cb-mk-bars .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--mono-4); }
.cb-mk-bars .row.ours .tr i { background: var(--flame); }
.cb-mk-bars .row.tail .tr i { background: var(--mono-2); }
.cb-mk-bars .tr .norm { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 5px); box-shadow: inset 1px 0 0 var(--ink-3), inset -1px 0 0 var(--ink-3); text-decoration: none; z-index: 1; }
.cb-mk-bars.share .row { grid-template-columns: minmax(96px, 42%) minmax(50px, 1fr) auto; }

/* распроданность */
.cb-mk-so .row { display: grid; grid-template-columns: minmax(0, 1.3fr) 64px minmax(48px, 2fr); grid-template-areas: "nm pc tr" "nd nd nd"; align-items: center; gap: 4px var(--space-3); padding: 8px; border-radius: 10px; outline: none; }
.cb-mk-so .nm { grid-area: nm; }
.cb-mk-so .pc { grid-area: pc; display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.cb-mk-so .pc b { font-weight: 600; }
.cb-mk-so .pc small { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.cb-mk-so .tr { grid-area: tr; position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--card); }
.cb-mk-so .tr .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--mono-4); }
.cb-mk-so .row.ours .tr .fill { background: var(--flame); }
.cb-mk-so .tr .proj { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--mono-4) 30%, transparent); }
.cb-mk-so .row.ours .tr .proj { background: color-mix(in oklab, var(--flame) 30%, transparent); }
.cb-mk-so .tr s { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 1px dashed var(--ink); text-decoration: none; }
.cb-mk-so .nd { grid-area: nd; color: var(--ink-2); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.cb-mk-so .nd b { color: var(--ink); font-weight: 600; }

/* темп по типам */
.cb-mk-tt .row { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(90px, 1.4fr) minmax(120px, 1.1fr); align-items: center; gap: var(--space-3); padding: 8px; border-radius: 10px; outline: none; }
.cb-mk-tt .st { display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; background: var(--card); }
.cb-mk-tt .st i { height: 100%; }
.cb-mk-tt .st .s { background: var(--ink); }
.cb-mk-tt .st .e { background: var(--flame); }
.cb-mk-tt .st .k { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 5px); }
.cb-mk-tt .dv { display: grid; grid-template-columns: minmax(50px, 1fr) auto; grid-template-areas: "ax v" "o o"; align-items: center; gap: 2px 8px; }
.cb-mk-tt .dv .ax { grid-area: ax; position: relative; height: 14px; }
.cb-mk-tt .dv .ax::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); }
.cb-mk-tt .dv .ax u { position: absolute; left: 50%; top: 1px; bottom: 1px; width: 1px; background: var(--mono-3); }
.cb-mk-tt .dv .ax s { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--ink-2); }
.cb-mk-tt .dv .ax i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--inset); }
.cb-mk-tt .dv .v { grid-area: v; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.cb-mk-tt .dv .o { grid-area: o; font-size: 11px; line-height: 14px; color: var(--ink-2); }

/* лента запусков */
.cb-mk-ev { stroke-width: 2; }
.cb-mk-ev.x { stroke-width: 2.25; stroke-linecap: round; }
.cb-mk-life { stroke: var(--mono-3); stroke-width: 1; }
.cb-mk-evhl { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.cb-mk-we-t { fill: var(--ink); font-weight: 600; }
.cb-mk-evleg svg { overflow: visible; flex: none; }

/* упоминания */
.cb-mk-men { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cb-mk-men li { border-radius: 12px; }
.cb-mk-men .hd { display: grid; grid-template-columns: minmax(96px, 1.2fr) minmax(50px, 1fr) auto auto; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; font-size: 13px; }
.cb-mk-men .hd:hover { background: color-mix(in oklab, var(--card) 60%, transparent); }
.cb-mk-men .nm { display: grid; min-width: 0; }
.cb-mk-men .nm small { color: var(--ink-3); font-size: 11px; }
.cb-mk-men .tr { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--card); overflow: hidden; }
.cb-mk-men .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--mono-4); }
.cb-mk-men .v { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.cb-mk-men .ex { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.cb-mk-men .qs { display: grid; gap: 6px; padding: 2px 8px 8px; }
.cb-mk-quote { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--card); display: grid; gap: 4px; }
.cb-mk-quote blockquote { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink); }
.cb-mk-quote figcaption { font-size: 11px; line-height: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* разница срезов */
.cb-mk-diff { display: grid; gap: var(--space-3); min-width: 0; justify-items: start; }
.cb-mk-diff .cnt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); width: 100%; }
.cb-mk-diff .cnt button { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 8px var(--space-3); border: 0; border-radius: 12px; background: var(--card); cursor: pointer; min-width: 0; }
.cb-mk-diff .cnt button[aria-pressed="true"] { background: var(--inset); }
.cb-mk-diff .cnt .l { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 12px; }
.cb-mk-diff .cnt b { font-size: 20px; line-height: 26px; font-weight: 600; }
.cb-mk-diff .cnt small { color: var(--ink-3); font-size: 11px; line-height: 14px; }
.cb-mk-diff .feed { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; }
.cb-mk-diff .feed li { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; padding: 4px 0; align-items: center; gap: var(--space-2); min-height: 36px; border-top: 1px solid var(--border); font-size: 13px; }
.cb-mk-diff .feed .k { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 12px; }
.cb-mk-diff .feed .lp { display: grid; min-width: 0; }
.cb-mk-diff .feed .lp small { color: var(--ink-3); font-size: 11px; line-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-mk-diff .feed .d { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* условия */
.cb-mk-terms { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13px; }
.cb-mk-terms th { text-align: left; font-weight: 400; color: var(--ink-2); font-size: 12px; padding: 0 10px; height: 40px; background: var(--inset); white-space: nowrap; }
.cb-mk-terms tbody th { background: var(--card); color: var(--ink); font-weight: 500; font-size: 13px; border-top: 1px solid var(--border); position: sticky; left: 0; }
.cb-mk-terms td { padding: 6px 10px; border-top: 1px solid var(--border); height: 44px; }
.cb-mk-terms tr.ours :is(th, td) { background: var(--accent-soft); }   /* D17: без полосы-метки (У-0248) */
.cb-mk-terms .yes, .cb-mk-terms .no, .cb-mk-terms .gap { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 8px; font-size: 12px; white-space: nowrap; }
.cb-mk-terms .yes { background: var(--ink); color: var(--card); font-weight: 500; }
.cb-mk-terms .no { box-shadow: inset 0 0 0 1px var(--ink-3); color: var(--ink-2); }
.cb-mk-terms .gap { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 5px); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border); }

/* шахматка */
.cb-mk-fs { display: grid; gap: var(--space-3); min-width: 0; justify-items: start; }
.cb-mk-fs .cnt { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-2); }
.cb-mk-fs .cnt b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.cb-mk-fs .cnt .ty { color: var(--ink-3); }
.cb-mk-fs .wrap { width: 100%; overflow-x: auto; background: var(--card); border-radius: 12px; padding: 8px; }
.cb-mk-fs .grid { display: grid; grid-template-columns: 32px repeat(var(--risers, 1), minmax(40px, 76px)); gap: 3px; min-width: max-content; }
.cb-mk-fs .hd, .cb-mk-fs .fl { font-size: 11px; color: var(--ink-3); display: grid; place-items: center; font-variant-numeric: tabular-nums; height: 26px; }
.cb-mk-fs .fl { justify-items: end; padding-right: 6px; }
.cb-mk-fs .c { height: 26px; min-width: 40px; border: 0; border-radius: 6px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; padding: 0; color: var(--ink); transition: transform .12s; }
.cb-mk-fs .c:hover { transform: scale(1.06); }
.cb-mk-fs .c.booked, .cb-mk-cellsw.booked { background: repeating-linear-gradient(-45deg, var(--ink-3) 0 2px, var(--card) 2px 5px); }
.cb-mk-fs .c.reserve, .cb-mk-cellsw.reserve { background: repeating-linear-gradient(90deg, var(--mono-3) 0 2px, var(--card) 2px 5px); }
.cb-mk-fs .c.sold, .cb-mk-cellsw.sold { background: var(--mono-2); }
.cb-mk-fs .c.withdrawn, .cb-mk-cellsw.withdrawn { background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-3); background-image: linear-gradient(135deg, transparent 46%, var(--ink-3) 46% 54%, transparent 54%); }
.cb-mk-fs .c.na { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-mk-fs .c.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); position: relative; z-index: 1; }
.cb-mk-fs .none { height: 26px; }
.cb-mk-cellsw { display: inline-block; width: 16px; height: 12px; border-radius: 3px; flex: none; }
.cb-mk-scale { gap: 6px; }
.cb-mk-scale .ramp { display: inline-flex; gap: 2px; }
.cb-mk-scale .ramp i { width: 14px; height: 10px; border-radius: 3px; }
.cb-mk-scale .mn { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-mk-fs .det { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 22px; font-size: 13px; color: var(--ink-2); }
.cb-mk-fs .det b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* сверка источников */
.cb-mk-rec { display: grid; gap: var(--space-3); min-width: 0; }
.cb-mk-rec .q { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-mk-rec .q li { display: grid; grid-template-columns: 150px minmax(90px, 1fr) minmax(200px, 1.4fr) 160px; align-items: center; gap: var(--space-3); padding: 8px 4px; border-top: 1px solid var(--border); font-size: 13px; }
.cb-mk-rec .k { color: var(--ink); font-weight: 500; }
.cb-mk-rec .lot, .cb-mk-rec .at { display: grid; }
.cb-mk-rec small { color: var(--ink-3); font-size: 11px; line-height: 14px; }
.cb-mk-rec .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cb-mk-rec .cmp > span { display: grid; background: var(--card); border-radius: 8px; padding: 4px 8px; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: break-word; }
.cb-mk-rec .at { font-variant-numeric: tabular-nums; }

/* экран */
.cb-mk-screen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.cb-mk-screen .top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-mk-screen .top h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-mk-screen .top p { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
.cb-mk-screen .top .a { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; max-width: 100%; }
.cb-mk-screen .top .t { min-width: 0; }
.cb-mk-screen .fact { margin: 0; font-size: 15px; line-height: 20px; font-weight: 500; text-wrap: balance; }
.cb-mk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.cb-mk-kpis .k { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3) var(--space-4); display: grid; gap: 4px; align-content: start; min-width: 0; }
.cb-mk-kpis .l { color: var(--ink-2); font-size: 13px; }
.cb-mk-kpis b { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }
.cb-mk-kpis b small { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.cb-mk-kpis .b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--ink-3); font-size: 11px; line-height: 14px; }
.cb-mk-bento { gap: var(--space-3); }
.cb-mk-cardcell { height: 100%; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; }
.cb-mk-cardcell .cap { color: var(--ink-2); font-size: 13px; }
.cb-mk-cardcell .cb-mk-cc { box-shadow: none; background: var(--inset); }
.cb-mk-bento .cb-vf.card { height: 100%; padding: var(--space-4); }
.cb-mk-bento .cb-vf.card .cb-mk-map .stage, .cb-mk-bento .cb-vf.card .cb-mk-tw, .cb-mk-bento .cb-vf.card .cb-mk-fs .wrap, .cb-mk-bento .cb-vf.card .cb-mk-sum, .cb-mk-bento .cb-vf.card .cb-mk-split .pt, .cb-mk-bento .cb-vf.card .cb-mk-diff .cnt button, .cb-mk-bento .cb-vf.card .cb-mk-quote, .cb-mk-bento .cb-vf.card .cb-mk-rec .cmp > span { background: var(--inset); }
.cb-mk-bento .cb-vf.card .cb-mk-bars .tr, .cb-mk-bento .cb-vf.card .cb-mk-so .tr, .cb-mk-bento .cb-vf.card .cb-mk-men .tr, .cb-mk-bento .cb-vf.card .cb-mk-tt .st, .cb-mk-bento .cb-vf.card .cb-mk-mlist li { background: var(--inset); }
.cb-mk-bento .cb-vf.card .cb-mk-cor .we, .cb-mk-bento .cb-vf.card .cb-mk-l4l .we { box-shadow: 0 0 0 2px var(--card); }
.cb-mk-bento .cb-vf.card .cb-mk-l4l .mk { background: var(--card); }
.cb-mk-bento .cb-vf.card .cb-mk-tbl th, .cb-mk-bento .cb-vf.card .cb-mk-terms thead th { background: var(--card); box-shadow: inset 0 -1px 0 var(--border); }
.cb-mk-bento .cb-vf.card .cb-mk-terms tbody th { background: var(--inset); }
.cb-mk-pass { display: grid; gap: var(--space-2); background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-4); font-size: 13px; }
.cb-mk-pass .cb-mk-tw { background: var(--inset); }
.cb-mk-pass .cb-mk-tbl th { background: var(--inset); box-shadow: inset 0 -1px 0 var(--border); }

@media (max-width: 1180px) {
  .cb-mk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-mk-bento > * { grid-column: span 6; }
  .cb-mk-bento > .w8, .cb-mk-bento > .w12 { grid-column: span 12; }
}
@media (max-width: 860px) {
  .cb-mk-bento > *, .cb-mk-bento > .w8 { grid-column: span 12; }
}
@media (max-width: 480px) {
  .cb-mk-kpis { grid-template-columns: minmax(0, 1fr); }
  .cb-mk-cc .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-mk-so .row { grid-template-columns: minmax(0, 1fr) 64px; grid-template-areas: "nm pc" "tr tr" "nd nd"; }
  .cb-mk-tt .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cb-mk-tt .row .dv { grid-column: 1 / -1; }
  .cb-mk-men .hd { grid-template-columns: minmax(0, 1fr) auto auto; }
  .cb-mk-men .hd .tr { grid-column: 1 / -1; grid-row: 2; }
  .cb-mk-diff .feed li { grid-template-columns: 92px minmax(0, 1fr) auto; }
  .cb-mk-diff .cnt b { font-size: 17px; }
  .cb-mk-diff .cnt { gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 104px), 1fr)); }   /* R2: «переоценено» не помещалось в треть ширины; ряд переносится по кнопкам, слово целиком */
  .cb-mk-diff .cnt button { padding: 8px; }
  .cb-mk-diff .cnt .l { font-size: 11px; gap: 2px; }
  .cb-mk-diff .cnt .l .cb-i { display: none; }
}

/* узкий контейнер: подпись строки над полосой; очередь сверки в две колонки */
.cb-mk-cor, .cb-mk-l4l, .cb-mk-rec { container-type: inline-size; }
@container (max-width: 520px) {
  .cb-mk-cor .row, .cb-mk-l4l .row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); }
  .cb-mk-cor .row > .nm, .cb-mk-l4l .row > .nm { grid-column: 1 / -1; }
  .cb-mk-cor .row.ax > .nm { display: none; }
  .cb-mk-rec .q li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--space-3); }
  .cb-mk-rec .q .cmp { grid-column: 1 / -1; }
}
.cb-mk-rec .cmp > span { white-space: nowrap; }
.cb-mk-foot > span { flex: 1; min-width: 0; }
.cb-mk-fs .grid { justify-content: start; }
.cb-mk-cardcell .cb-mk-cc .kv div { background: var(--card); }

/* углубление: строка таблицы и коридора открывает разбор (признаки только при провайдере) */
.cb-mk-tbl tr[data-drill] { cursor: pointer; }
.cb-mk-tbl tr[data-drill]:hover td { background: var(--inset); }
.cb-mk-tbl tr[data-drill]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ПРАВКИ_2026-10-15 · чип «мы» не отрывается от имени; ряды одной высоты */
.cb-mk-cor .nm b, .cb-mk-l4l .nm b, .cb-mk-bars .nm b, .cb-mk-so .nm b, .cb-mk-tt .nm b { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: normal; }
.cb-mk-we { flex: none; margin-left: 0; white-space: nowrap; }
.cb-mk-so .row { min-height: 64px; }
@media (min-width: 481px) { .cb-mk-so .row { grid-template-columns: minmax(150px, 1.4fr) 64px minmax(80px, 2fr); } }
/* ПРАВКИ_2026-10-15 · смысл цветом-токеном, не серым (semantic) */
.cb-mk-fact:not(.late) { background: var(--positive-soft); color: var(--ink); }
.cb-mk-fact:not(.late) svg { color: var(--positive); }
.cb-mk-fact.late { background: var(--warning-soft); }

/* ── src/styles/r-pricing.css ── */
/* ── Цена и решения (r-pricing) · префикс cb-p… · только токены ───────── */
.cb-vf:has(.cb-pans, .cb-pscale, .cb-pdrv, .cb-pconf, .cb-pq, .cb-pcal, .cb-prv, .cb-pout, .cb-pesc, .cb-psrc, .cb-psrc-off, .cb-pgraph, .cb-prq, .cb-pcav, .cb-pfl) { container-type: inline-size; }
.cb-pdemo { display: grid; gap: var(--space-3); justify-items: start; min-width: 0; }
.cb-pdemo > .cb-vf { width: 100%; }
.cb-prow { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cb-plive { font-size: 12px; line-height: 16px; color: var(--ink-2); min-height: 16px; }
.cb-plive:empty { min-height: 0; }
.cb-pkv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; font-size: 13px; line-height: 18px; }
.cb-pkv .k { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.cb-pkv .k .cb-i { color: var(--ink-3); }
.cb-pkv .v { display: grid; gap: 2px; min-width: 0; }
.cb-pkv .v small { color: var(--ink-3); font-size: 12px; }
@container (max-width: 420px) { .cb-pkv { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* исход: пилюля реестра */
.cb-pob { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ink); background: color-mix(in oklab, var(--c) 16%, var(--card)); }   /* мягкая подложка без кольца-обводки (У-0248) */
.cb-pob .cb-i { color: var(--c); }

/* 1 · ответ */
.cb-pans { display: grid; gap: var(--space-3); min-width: 0; }
.cb-pans .top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-pans .top code { color: var(--ink-3); }
.cb-pans .big { display: flex; align-items: baseline; gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
.cb-pans .m2 { font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-pans .m2 small { font-size: 18px; font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.cb-pans .all { font-size: 13px; color: var(--ink-3); }
.cb-pans .all b { color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-pans .cav { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.cb-pans .cav .cb-i { color: var(--warn); margin-top: 1px; }
.cb-pans .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.cb-pans .facts > div { background: var(--inset); border-radius: var(--radius-chip); padding: var(--space-3); display: grid; gap: 2px; min-width: 0; }
.cb-pans .facts span { font-size: 12px; color: var(--ink-2); }
.cb-pans .facts b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.cb-pans .facts small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-pans .chat { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-4); display: grid; gap: var(--space-2); min-width: 0; }
.cb-pans .chat.bad { box-shadow: inset 0 0 0 1px var(--bad); }
.cb-pans .chat .ph { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.cb-pans .chat .ph > .cb-i { color: var(--ink-3); }
.cb-pans .chat .ph b { font-weight: 600; margin-right: auto; }
.cb-pans .chat .line { display: block; background: var(--card); border-radius: var(--radius-chip); padding: var(--space-2) 12px; font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-size-adjust: none; white-space: pre-wrap; overflow-wrap: break-word; user-select: all; }
.cb-pans .chat .why { margin: 0; font-size: 12px; line-height: 17px; color: var(--bad); }
.cb-pans .chat .act { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
@container (max-width: 420px) { .cb-pans .facts { grid-template-columns: minmax(0, 1fr); } .cb-pans .m2 { font-size: 26px; line-height: 30px; } }

/* 2 · шкала пути цены */
.cb-pscale { display: grid; gap: var(--space-3); min-width: 0; }
.cb-pscale .lane { position: relative; padding: 24px 8px 8px; }
.cb-pscale .pin { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cb-pscale .pin.l { transform: translateX(-8px); }
.cb-pscale .pin.r { transform: translateX(calc(-100% + 8px)); }
.cb-pscale .track { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-pscale .track .path { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--radius-pill); background: var(--ink); }
.cb-pscale .track .cut { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, var(--ink-3) 0 2px, transparent 2px 5px); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.cb-pscale .track s { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px solid var(--ink); text-decoration: none; }
.cb-pscale .track s.lim { border-left: 2px dashed var(--ink-2); }
.cb-pscale .track b { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; }
.cb-pscale .track b.now { background: var(--inset); margin-left: 0; }
.cb-pscale .track b.offer { background: var(--flame); box-shadow: 0 0 0 2px var(--card); }
.cb-pscale .rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-pscale .rows li { display: grid; grid-template-columns: 14px minmax(110px, auto) auto minmax(0, 1fr); gap: var(--space-2); align-items: baseline; font-size: 13px; line-height: 18px; }
.cb-pscale .rows .n { color: var(--ink-2); }
.cb-pscale .rows b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-pscale .rows .w { color: var(--ink-3); font-size: 12px; min-width: 0; }
.cb-pscale .sw { width: 12px; height: 12px; border-radius: 50%; align-self: center; }
.cb-pscale .sw.now { background: var(--inset); }
.cb-pscale .sw.offer { background: var(--flame); }
.cb-pscale .sw.cut { border-radius: 3px; background: repeating-linear-gradient(-45deg, var(--ink-3) 0 2px, transparent 2px 4px); }
.cb-pscale .sw.cap { width: 2px; border-radius: 0; background: var(--ink); justify-self: center; height: 14px; }
.cb-pscale .sw.lim { width: 0; border-radius: 0; border-left: 2px dashed var(--ink-2); justify-self: center; height: 14px; }
@container (max-width: 420px) { .cb-pscale .rows li { grid-template-columns: 14px minmax(0, 1fr) auto; } .cb-pscale .rows .w { grid-column: 2 / -1; } }

/* 3 · драйверы */
.cb-pdrv { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-pdrv li { display: grid; grid-template-columns: 76px 64px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3); background: var(--inset); border-radius: var(--radius-chip); }
.cb-pdrv li.tot { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cb-pdrv .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-pdrv .bar { position: relative; height: 8px; margin-top: 6px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--mono-2) 45%, transparent); }
.cb-pdrv li.tot .bar { background: none; }
.cb-pdrv .bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 1px solid var(--mono-4); }
.cb-pdrv li.tot .bar::after { display: none; }
.cb-pdrv .bar i { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--ink); }
.cb-pdrv .bar i.neg { background: var(--mono-4); }
.cb-pdrv .t { display: grid; gap: 2px; min-width: 0; font-size: 13px; line-height: 18px; }
.cb-pdrv .t b { font-weight: 600; }
.cb-pdrv .t span { color: var(--ink-2); }
.cb-pdrv .t small { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 11px; line-height: 14px; }
@container (max-width: 340px) { .cb-pdrv li { grid-template-columns: 70px minmax(0, 1fr); } .cb-pdrv .bar { grid-row: 2; grid-column: 1; } .cb-pdrv .t { grid-row: 1 / 3; grid-column: 2; } }

/* 6 · уверенность */
.cb-pconf { display: grid; gap: var(--space-3); }
.cb-pconf .model { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-4); display: grid; gap: var(--space-2); }
.cb-pconf .model .ph { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.cb-pconf .model .k { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin-right: auto; }
.cb-pconf .model .k .cb-i { color: var(--ink-3); }
.cb-pconf .model .n { font-size: 30px; line-height: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-pconf .model .thr { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-pconf .meter { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-pconf .meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--ink); }
.cb-pconf .meter s { position: absolute; top: -5px; bottom: -5px; border-left: 2px dashed var(--ink-2); text-decoration: none; }
.cb-pconf .model small { font-size: 12px; line-height: 17px; color: var(--ink-3); }

/* форма с причиной */
.cb-pform { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: var(--space-3); align-items: start; background: var(--card); border-radius: var(--radius-chip); padding: var(--space-3); box-shadow: inset 0 0 0 1px var(--border); }
.cb-pform .fld { display: grid; gap: 4px; font-size: 12px; color: var(--ink-2); min-width: 0; }
.cb-pform .fld:only-of-type { grid-column: 1 / -1; }
.cb-pform .in { display: flex; align-items: center; gap: 6px; }
.cb-pform input, .cb-pform textarea { width: 100%; min-width: 0; font: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 0; border-radius: var(--radius-chip); box-shadow: inset 0 0 0 1px var(--border); padding: 8px 10px; }
.cb-pform textarea { resize: vertical; min-height: 40px; }
.cb-pform input:focus-visible, .cb-pform textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-pform .in small { color: var(--ink-3); font-size: 13px; }
.cb-pform .hint { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--ink-3); }
.cb-pform .btns { grid-column: 1 / -1; display: flex; gap: var(--space-2); flex-wrap: wrap; }
@container (max-width: 480px) { .cb-pform { grid-template-columns: minmax(0, 1fr); } }

/* 7 · очередь решений */
.cb-pq { display: grid; gap: var(--space-3); min-width: 0; }
.cb-pq .list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-pq .list > li { display: grid; grid-template-columns: minmax(170px, 1.5fr) minmax(90px, 1fr) minmax(80px, .8fr) minmax(96px, .8fr) minmax(0, 2fr); gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); background: var(--inset); border-radius: var(--radius-inset); }
/* li.over — без полосы: расхождение сказано флажком с иконкой «от N п.п.» в колонке расхождения (D17, У-0248) */
.cb-pq .lot { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.cb-pq .lot b { font-size: 14px; font-weight: 600; }
.cb-pq .lot span { font-size: 12px; color: var(--ink-3); }
.cb-pq .side, .cb-pq .delta { display: grid; gap: 2px; min-width: 0; }
.cb-pq .k { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-pq .side b, .cb-pq .delta b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-pq .wait { color: var(--ink-3); font-weight: 500; }
.cb-pq .side small { font-size: 12px; color: var(--ink-3); overflow-wrap: break-word; }
.cb-pq .flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--warn); font-weight: 600; }
.cb-pq .act { min-width: 0; }
.cb-pq .btns { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.cb-pq .dec { display: grid; gap: 2px; justify-items: start; font-size: 13px; }
.cb-pq .dec > span { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.cb-pq .dec > span .cb-i { color: var(--ok); }
.cb-pq .dec small { color: var(--ink-3); font-size: 12px; }
.cb-pq .dec .prec { color: var(--ink-2); }
.cb-pq .foot { margin: 0; font-size: 12px; color: var(--ink-3); }
@container (max-width: 860px) {
  .cb-pq .list > li { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cb-pq .lot, .cb-pq .act { grid-column: 1 / -1; }
  .cb-pq .btns { justify-content: flex-start; }
}
@container (max-width: 380px) { .cb-pq .list > li { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-3); } }

/* 8 · калибровка */
.cb-pcal { display: grid; gap: var(--space-3); min-width: 0; }
.cb-pcal .lot { display: flex; flex-wrap: wrap; gap: 4px var(--space-2); align-items: baseline; font-size: 13px; }
.cb-pcal .lot span { color: var(--ink-3); font-size: 12px; }
.cb-pcal .scale { position: relative; background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-2) var(--space-4); }
.cb-pcal .lb { position: relative; display: inline-block; font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cb-pcal .lb.an { color: var(--cold); }
.cb-pcal .lb { left: 0; }
.cb-pcal .scale > .lb { display: block; width: max-content; }
.cb-pcal .track { position: relative; height: 10px; margin: 8px 0; border-radius: var(--radius-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-pcal .track .gap { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, var(--ink-3) 0 2px, transparent 2px 5px); }
.cb-pcal .track b { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; box-shadow: 0 0 0 2px var(--inset); }
.cb-pcal .track b.sys { background: var(--ink); }
.cb-pcal .track b.an { background: var(--cold); border-radius: 3px; }
.cb-pcal .diff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.cb-pcal .diff > div { display: grid; gap: 2px; padding: var(--space-3); border-radius: var(--radius-chip); box-shadow: inset 0 0 0 1px var(--border); min-width: 0; }
.cb-pcal .diff span { font-size: 12px; color: var(--ink-2); }
.cb-pcal .diff b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.cb-pcal .notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-pcal .notes li { display: grid; gap: 2px; font-size: 13px; line-height: 18px; padding: var(--space-2) var(--space-3); background: var(--inset); border-radius: var(--radius-chip); }
.cb-pcal .notes b { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.cb-pcal .ver { display: grid; gap: var(--space-2); justify-items: start; }
.cb-pcal .ver .k { font-size: 12px; color: var(--ink-2); }
.cb-pcal .ver .cb-pform { width: 100%; }
@container (max-width: 420px) { .cb-pcal .diff { grid-template-columns: minmax(0, 1fr); } }

/* 9 · версии правил */
.cb-prv { display: grid; gap: var(--space-3); min-width: 0; }
.cb-prv .list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-prv .list > li { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); }
.cb-prv .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--space-3); align-items: center; }
.cb-prv .nm { display: grid; gap: 2px; min-width: 0; }
.cb-prv .nm b { font-size: 14px; font-weight: 600; }
.cb-prv .nm code { color: var(--ink-3); }
.cb-prv .val { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.cb-prv .by { font-size: 12px; color: var(--ink-3); }
.cb-prv .btns { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.cb-prv .why { margin: 0; font-size: 12px; line-height: 17px; color: var(--ink-2); }
.cb-prv .hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cb-prv .hist li { display: grid; grid-template-columns: 32px auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; font-size: 12px; line-height: 16px; padding: 6px 8px; background: var(--card); border-radius: var(--radius-chip); }
.cb-prv .hist b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-prv .hist span { color: var(--ink-3); }
.cb-prv .key { margin: 0; font-size: 12px; color: var(--ink-3); overflow-wrap: break-word; }
.cb-prv .key code { color: var(--ink-2); }
@container (max-width: 420px) { .cb-prv .row { grid-template-columns: minmax(0, 1fr); } .cb-prv .val { text-align: left; } .cb-prv .btns { justify-content: flex-start; } .cb-prv .hist li { grid-template-columns: 28px minmax(0, 1fr) auto; } .cb-prv .hist li > span { grid-column: 2 / -1; grid-row: 2; } }

/* 10 · исходы */
.cb-pout { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--space-2); }
.cb-pout li { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); align-content: start; min-width: 0; }
.cb-pout .ph { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }   /* длинный исход «эскалация директору» переносит долю вниз, а не вылезает (R1) */
.cb-pout .ph b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-pout .bar { height: 4px; border-radius: var(--radius-pill); background: var(--card); overflow: hidden; }
.cb-pout .bar i { display: block; height: 100%; border-radius: var(--radius-pill); }
.cb-pout dl { margin: 0; display: grid; gap: 2px; font-size: 12px; line-height: 17px; }
.cb-pout dt { color: var(--ink-3); font-size: 11px; }
.cb-pout dd { margin: 0 0 4px; color: var(--ink); }

/* 11 · лестница */
.cb-pesc { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-pesc > li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-2); margin-left: calc(var(--i) * 8px); }
.cb-pesc .n { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 12px; white-space: nowrap; }
.cb-pesc .b { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3); display: grid; gap: 6px; min-width: 0; }
.cb-pesc .ph { display: flex; align-items: center; gap: 6px var(--space-2); flex-wrap: wrap; }
.cb-pesc .ph b { font-size: 14px; font-weight: 600; }
.cb-pesc .ph small { font-size: 12px; color: var(--ink-3); }
.cb-pesc ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cb-pesc p { margin: 0; font-size: 12px; line-height: 17px; }
.cb-pesc p span { color: var(--ink-3); }
@container (max-width: 380px) { .cb-pesc > li { grid-template-columns: minmax(0, 1fr); margin-left: 0; } .cb-pesc .n { padding-top: 0; } }

/* 12 · паспорт источников */
.cb-psrc { display: grid; gap: var(--space-3); min-width: 0; }
.cb-psrc .banner { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 13px; line-height: 18px; padding: var(--space-3); border-radius: var(--radius-chip); background: var(--bad-soft); color: var(--ink); }
.cb-psrc .banner .cb-i { color: var(--bad); margin-top: 1px; }
.cb-psrc .grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--space-2); }
.cb-psrc .grid > li { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3); display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.cb-psrc .grid > li.stale { box-shadow: inset 0 0 0 1px var(--warn); }
.cb-psrc .grid > li.down { box-shadow: inset 0 0 0 1px var(--bad); }
.cb-psrc .ph { display: flex; align-items: center; gap: 6px; }
.cb-psrc .ph b { font-size: 14px; font-weight: 600; margin-right: auto; min-width: 0; }
.cb-psrc .ic { display: inline-grid; }
.cb-psrc .ic.ok, .cb-psrc .st.ok { color: var(--ok); }
.cb-psrc .ic.warn, .cb-psrc .st.warn { color: var(--warn); }
.cb-psrc .ic.bad, .cb-psrc .st.bad { color: var(--bad); }
.cb-psrc .ic.neutral, .cb-psrc .st.neutral { color: var(--ink-3); }
.cb-psrc dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-3); font-size: 12px; line-height: 16px; }
.cb-psrc dt { color: var(--ink-3); }
.cb-psrc dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.cb-psrc dd small { color: var(--ink-3); }
.cb-psrc dd.st { font-weight: 600; }
.cb-psrc-off { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-4); display: grid; gap: var(--space-2); justify-items: start; }
.cb-psrc-off .ph { display: flex; align-items: center; gap: var(--space-2); }
.cb-psrc-off .ph .cb-i { color: var(--bad); }
.cb-psrc-off .ph b { font-size: 15px; }
.cb-psrc-off p { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); max-width: 33em; }
.cb-psrc-off ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; width: 100%; }
.cb-psrc-off li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.cb-psrc-off li small { margin-left: auto; color: var(--ink-3); font-size: 12px; }

/* 13 · граф */
.cb-pgraph { display: grid; gap: var(--space-3); min-width: 0; }
.cb-pgraph .bar { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.cb-pgraph .bar .at { margin-right: auto; }
.cb-pgraph .bar .at b { color: var(--ink); font-weight: 600; }
.cb-pgraph .chips { display: flex; gap: 4px; flex-wrap: wrap; }
.cb-pgraph .chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-3); font-size: 12px; font-weight: 500; cursor: pointer; }
.cb-pgraph .chip[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
.cb-pgraph .chip[aria-pressed="false"] .cb-sw { opacity: .35; }
.cb-pgraph .body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-3); align-items: start; }
.cb-pgraph .fig { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-2) var(--space-2) 32px; min-width: 0; }   /* нижнее поле — под строку «подписано N из M»: она рисуется под полотном и выпадала из плашки (У-0247) */
.cb-pgraph .cnt { font-size: 11px; line-height: 14px; color: var(--ink-3); padding: 6px var(--space-3) 0; }
.cb-pg-e { fill: none; stroke: var(--mono-3); stroke-width: 1; }
.cb-pg-e.hot { stroke: var(--ink-2); stroke-width: 1.5; }
.cb-pg-n { cursor: pointer; outline: none; }
.cb-pg-n .ring { fill: none; stroke: var(--ink); stroke-width: 2; }
.cb-pg-n:focus-visible .ring, .cb-pg-n:focus-visible > circle:first-child { stroke: var(--focus); stroke-width: 2; }
.cb-pg-n:focus-visible { outline: none; }
.cb-pg-n:focus-visible circle:nth-last-child(2), .cb-pg-n:focus-visible circle.cb-hit { stroke: var(--focus); stroke-width: 2; stroke-dasharray: 3 2; }
.cb-pg-l { fill: var(--ink-2); font-size: 12px; font-weight: 500; }
.cb-pg-l.sel { fill: var(--ink); font-weight: 700; }
.cb-pgraph .panel { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.cb-pgraph .panel .ey { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.cb-pgraph .panel h4 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-pgraph .panel dl { margin: 0; display: grid; gap: 2px; font-size: 13px; line-height: 18px; }
.cb-pgraph .panel dt { font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.cb-pgraph .panel dd { margin: 0; }
.cb-pgraph .rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cb-pgraph .rel li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.cb-pgraph .rel button { border: 0; background: none; padding: 2px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mono-3); cursor: pointer; font-size: 13px; text-align: left; }
.cb-pgraph .rel button:hover { text-decoration-color: var(--ink); }
.cb-pgraph .rel small { color: var(--ink-3); font-size: 11px; }
@container (max-width: 640px) { .cb-pgraph .body { grid-template-columns: minmax(0, 1fr); } }

/* 15 · RICE */
.cb-prq { display: grid; gap: var(--space-3); justify-items: start; min-width: 0; }
.cb-prq ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); width: 100%; }
.cb-prq li { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-3); }
.cb-prq .ph { display: flex; gap: var(--space-3); align-items: flex-start; }
.cb-prq .sc { font-size: 24px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 52px; }
.cb-prq .t { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.cb-prq .t b { font-size: 14px; font-weight: 600; }
.cb-prq .t .cb-status { white-space: normal; }
.cb-prq .fs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.cb-prq .f { display: grid; gap: 4px; min-width: 0; }
.cb-prq .f small { font-size: 11px; color: var(--ink-3); }
.cb-prq .f .b { height: 6px; border-radius: var(--radius-pill); background: var(--card); overflow: hidden; }
.cb-prq .f .b i { display: block; height: 100%; background: var(--ink); border-radius: var(--radius-pill); }
.cb-prq .f > b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-prq .foot { margin: 0; font-size: 12px; color: var(--ink-3); }
@container (max-width: 460px) { .cb-prq .fs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* шахматка */
.cb-pfl { overflow-x: auto; }
.cb-pfl table { border-collapse: separate; border-spacing: 3px; font-size: 12px; font-variant-numeric: tabular-nums; margin: 0 auto; }
.cb-pfl th { font-weight: 500; color: var(--ink-3); font-size: 11px; padding: 0 4px; white-space: nowrap; }
.cb-pfl td { width: 56px; height: 26px; text-align: center; border-radius: 6px; font-weight: 500; }
.cb-pfl td.sold { background: repeating-linear-gradient(-45deg, var(--mono-3) 0 2px, transparent 2px 5px); }
.cb-pfl td.na { outline: 1px dashed var(--mono-3); outline-offset: -1px; }
.cb-pfl td.lot { box-shadow: 0 0 0 2px var(--ink); font-weight: 700; }
.cb-pfl td.anc { outline: 2px dashed var(--ink); outline-offset: 1px; }

/* оговорки */
.cb-pcav { list-style: decimal; margin: 0; padding-left: 20px; display: grid; gap: var(--space-2); }
.cb-pcav li { padding-left: 4px; }
.cb-pcav li { display: list-item; }
.cb-pcav li > .t { display: grid; gap: 2px; font-size: 13px; line-height: 18px; margin-bottom: 6px; }
.cb-pcav li small { color: var(--ink-3); font-size: 12px; }
.cb-pcav li .mk { color: var(--ink-2); }

/* экраны */
.cb-plc, .cb-pws { display: grid; gap: var(--space-3); min-width: 0; }
.cb-plc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-plc-h h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-plc-h p { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }
.cb-plc-h .tags { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-plc-h .tags code { color: var(--ink-3); }
.cb-plc-f { padding: 0 var(--space-2); }

/* паспорт: компактные строки */
.cb-psrc .rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cb-psrc .rows li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px var(--space-2); align-items: start; padding: var(--space-2) var(--space-3); background: var(--inset); border-radius: var(--radius-chip); font-size: 12px; line-height: 16px; }
.cb-psrc .rows li.down { box-shadow: inset 0 0 0 1px var(--bad); }
.cb-psrc .rows li.stale { box-shadow: inset 0 0 0 1px var(--warn); }
.cb-psrc .rows .n { display: grid; gap: 1px; min-width: 0; }
.cb-psrc .rows .n b { font-size: 13px; font-weight: 600; }
.cb-psrc .rows .n small { color: var(--ink-3); font-size: 11px; }
.cb-psrc .rows .a { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cb-psrc .rows .st { grid-column: 2 / -1; font-weight: 600; }

/* KPI рабочей области */
.cb-pkpi .nt { margin-top: 4px; font-size: 12px; color: var(--ink-3); }

/* оговорки: текст и выбор в одну строку на широкой карточке */
.cb-pcav li { display: list-item; }
.cb-pcav li > .t { margin-bottom: 6px; }
@container (min-width: 640px) {
  .cb-pcav li > .t { display: inline-grid; width: calc(100% - 200px); vertical-align: top; margin: 0; }
  .cb-pcav li > .cb-seg { float: right; }
  .cb-pcav li::after { content: ""; display: block; clear: both; }
}
.cb-pans .chat .line { font-family: var(--font-sans); font-size: 13px; font-size-adjust: .527; font-variant-numeric: tabular-nums; }
.cb-pg-l { paint-order: stroke; stroke: var(--inset); stroke-width: 4px; stroke-linejoin: round; }
@container (max-width: 400px) {
  .cb-pdrv li { grid-template-columns: 64px minmax(0, 1fr); }
  .cb-pdrv .bar { grid-row: 2; grid-column: 1; }
  .cb-pdrv .t { grid-row: 1 / 3; grid-column: 2; }
}
.cb-psrc .rows .a { white-space: normal; max-width: 55%; justify-self: end; }

/* углубление: строка очереди решений открывает разбор; кнопки и форма строки — нет */
.cb-pq .list > li[data-drill] { cursor: pointer; }
.cb-pq .list > li[data-drill]:hover { background: var(--inset-hover); }
.cb-pq .list > li[data-drill] .act, .cb-pq .list > li[data-drill] .cb-pform { cursor: auto; }

/* ── src/styles/s-project.css ── */
/* ── Пульт и портал (src/charts/s-project.js) · классы cb-pj-*. Кегли блока: 22 число · 15 заголовок · 13 текст и подписи ── */
.cb-pj { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; font-size: 13px; line-height: 18px; overflow-wrap: break-word; }
.cb-pj-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-pj-h .t { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.cb-pj-h .t i { font-style: normal; font-size: 11px; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.cb-pj-h .t b { font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-pj-h .t span { color: var(--ink-3); }
.cb-pj-h .a { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-pj-src { display: flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-pj-muted { color: var(--ink-3); }
.cb-pj-note { margin: 0; display: flex; align-items: flex-start; gap: 6px; color: var(--ink-2); font-size: 12px; line-height: 17px; }
.cb-pj-note .cb-i { margin-top: 2px; }
.cb-pj-stack { display: grid; gap: var(--space-3); min-width: 0; }
.cb-pj .acts { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* флажки, порог, автор */
.cb-pj-flag { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 12px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--border); white-space: nowrap; }
.cb-pj-flag.bad { background: var(--bad-soft); color: var(--bad); box-shadow: none; }
.cb-pj-flag.warn { background: var(--warn-soft); color: var(--warn); box-shadow: none; }
.cb-pj-flag.ok { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.cb-pj-thr { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-pj-thr b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-pj-thr.none { color: var(--ink-3); border-bottom: 1px dashed var(--ink-3); }
.cb-pj-draft { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-3); background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, transparent 2px 5px); }
.cb-pj-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.cb-pj-who .av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 10px; font-weight: 700; background: var(--flame-soft); color: color-mix(in oklab, var(--flame-deep) 60%, var(--ink)); }
.cb-pj-who.agent .av { background: var(--card-ink); color: var(--on-card-ink); }
.cb-pj-who.system .av { background: var(--inset-hover); color: var(--ink-2); border-radius: 6px; }
.cb-pj-who .n { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.cb-pj-who .ai { height: 18px; padding: 0 6px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; background: var(--card-ink); color: var(--on-card-ink); }

/* чипы */
.cb-pj-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-pj-chips button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; font-size: 13px; transition: background-color .15s, color .15s; }
.cb-pj-chips button:hover { color: var(--ink); background: var(--inset); }
.cb-pj-chips button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.cb-pj-chips .c { font-variant-numeric: tabular-nums; opacity: .72; }

/* полоса, мерки */
.cb-pj-bar { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--inset-hover); overflow: hidden; min-width: 40px; }
.cb-pj-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.cb-pj-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cb-pj-stats .st { flex: 1 1 86px; background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3); overflow-wrap: normal; display: grid; gap: 2px; align-content: start; min-width: min-content; }   /* У-0238: плитка не уже своего числа и самого длинного слова — лишняя уходит на новую строку, текст не вываливается */
.cb-pj-stats:is(.cb-kpis-3, .cb-kpis-4, .cb-kpis-5) .st { min-width: 0; }
.cb-pj-stats b { white-space: nowrap; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.cb-pj-stats b small { font-size: 15px; font-weight: 500; color: var(--ink-3); }
.cb-pj-stats .st.bad b { color: var(--bad); }
.cb-pj-stats span { color: var(--ink-2); }
.cb-pj-stats em { font-style: normal; color: var(--ink-3); font-size: 12px; }

/* поле в строке */
.cb-pj-inline { display: grid; gap: 6px; background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3); min-width: 0; }
.cb-pj-inline .l { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.cb-pj-inline textarea, .cb-pj-inline input, .cb-pj-input { width: 100%; min-width: 0; font: inherit; font-size: 14px; line-height: 20px; color: var(--ink); background: var(--card); border: 0; border-radius: 12px; padding: 8px 12px; box-shadow: inset 0 0 0 1px var(--border); resize: vertical; }
.cb-pj-input { height: 40px; border-radius: var(--radius-pill); padding: 0 16px; }
.cb-pj-inline textarea:focus-visible, .cb-pj-inline input:focus-visible, .cb-pj-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-pj-inline [aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--bad); }
.cb-pj-inline .hint { color: var(--ink-3); font-size: 12px; }
.cb-pj-inline .err { color: var(--bad); font-size: 12px; }
.cb-pj-inline textarea::placeholder, .cb-pj-input::placeholder { color: var(--ink-3); }

/* списки */
.cb-pj-list { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-pj-list > li { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--border); min-width: 0; flex-wrap: wrap; }
.cb-pj-list > li:first-child { border-top: 0; }
.cb-pj-list > li.col { display: grid; gap: var(--space-2); }
.cb-pj-list .row { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.cb-pj-list .m { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; }
.cb-pj-list .m > b { font-weight: 500; font-size: 14px; line-height: 19px; }
.cb-pj-list .m > span { color: var(--ink-3); }
.cb-pj-list .r { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; font-variant-numeric: tabular-nums; margin-left: auto; }
.cb-pj-list .w { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-pj .ans { background: var(--inset); border-radius: 12px; padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.cb-pj .ans p { margin: 0; flex-basis: 100%; color: var(--ink); }
.cb-pj .at { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.cb-pj-hist { list-style: none; margin: 0; padding: 0 0 0 var(--space-3); display: grid; gap: 8px; border-left: 1px solid var(--border); }
.cb-pj-hist li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.cb-pj-hist li p { margin: 0; flex-basis: 100%; color: var(--ink-2); }
.cb-pj-hist li.old { opacity: .62; }

/* 1. готовность */
.cb-pj-pulse .top { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.cb-pj-pulse .ring { position: relative; width: 140px; height: 140px; }
.cb-pj-pulse .ring svg { display: block; }
.cb-pj-pulse .ring circle { fill: none; }
.cb-pj-pulse .ring .tr { stroke: var(--inset-hover); }
.cb-pj-pulse .ring .wk { stroke: var(--flame); stroke-linecap: round; }
.cb-pj-pulse .ring .tm { stroke: var(--ink-3); stroke-linecap: round; }
.cb-pj-pulse .ring .c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.cb-pj-pulse .ring .c b { font-size: 30px; line-height: 34px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cb-pj-pulse .ring .c small { font-size: 16px; color: var(--ink-3); font-weight: 500; }
.cb-pj-pulse .ring .c span { font-size: 11px; line-height: 13px; color: var(--ink-3); max-width: 64px; margin: 0 auto; }
.cb-pj-pulse .facts { display: grid; gap: var(--space-2); min-width: 0; }
.cb-pj-pulse .lg { display: flex; gap: 6px 16px; flex-wrap: wrap; color: var(--ink-2); }
.cb-pj-pulse .lg span { display: inline-flex; align-items: center; gap: 6px; }
.cb-pj-pulse .lg b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-pj-pulse .facts .cb-status { white-space: normal; }
.cb-pj-pulse .segs { display: flex; gap: 3px; height: 12px; }
.cb-pj-pulse .sg { position: relative; flex-basis: 0; border-radius: 4px; overflow: hidden; background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, var(--inset) 2px 5px); }
.cb-pj-pulse .sg.done { background: var(--flame); }
.cb-pj-pulse .sg.work { background: repeating-linear-gradient(-45deg, var(--flame) 0 2px, var(--flame-hatch) 2px 5px); }
.cb-pj-pulse .sg.work i { position: absolute; inset: 0 auto 0 0; background: var(--flame); }
.cb-pj-pulse .cap { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-pj-pulse .time { display: grid; gap: 6px; }
.cb-pj-pulse .track { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--inset-hover); }
.cb-pj-pulse .track i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ink-3); }
.cb-pj-pulse .track b { position: absolute; top: -5px; width: 2px; height: 16px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.cb-pj-pulse .time .lbl { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.cb-pj-pulse .time .lbl .mid { color: var(--ink); font-weight: 600; }
.cb-pj-pulse .kd { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr)); gap: var(--space-2); }
.cb-pj-pulse .kd .d { background: var(--inset); border-radius: 12px; padding: 8px var(--space-3); display: grid; gap: 2px; }
.cb-pj-pulse .kd .d b { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-pj-pulse .kd .d.done b { color: var(--ok); }
.cb-pj-pulse .kd .d.next { background: var(--card); box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-pj-pulse .kd .d span { color: var(--ink-2); }
.cb-pj-pulse .kd .d em { font-style: normal; color: var(--ink-3); font-size: 12px; }
.cb-pj-pulse .how { display: grid; gap: 6px; justify-items: start; }
.cb-pj-pulse .how p { margin: 0; color: var(--ink-2); background: var(--inset); border-radius: 12px; padding: 8px 12px; }
.cb-pj-pulse .how .cb-btn { margin-left: calc(var(--space-3) * -1); }

/* 3. приёмка */
.cb-pj-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-pj-docs > li { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); min-width: 0; }
.cb-pj-docs .hd { display: flex; align-items: flex-start; gap: var(--space-3); justify-content: space-between; flex-wrap: wrap; }
.cb-pj-docs .m { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; }
.cb-pj-docs .m b { font-size: 14px; line-height: 19px; font-weight: 600; }
.cb-pj-docs .m > span { color: var(--ink-3); }
.cb-pj-docs .ver { margin-left: 8px; font-weight: 500; font-size: 12px; color: var(--ink-2); padding: 1px 8px; border-radius: var(--radius-pill); background: var(--card); white-space: nowrap; }
.cb-pj-docs .facts { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2); font-size: 12px; }
.cb-pj-docs .facts span { display: inline-flex; align-items: center; gap: 4px; }
.cb-pj-docs .facts .ok { color: var(--ok); font-weight: 500; }
.cb-pj-docs .facts .muted { color: var(--ink-3); }
.cb-pj-docs .cb-pj-inline, .cb-pj-docs .ans { background: var(--card); }

/* 4. согласование пунктов */
.cb-pj-fr .sumw { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; background: var(--inset); border-radius: 12px; padding: 8px 12px; }
.cb-pj-fr .sumw b { font-variant-numeric: tabular-nums; }
.cb-pj-fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-pj-fr-list > li { border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); min-width: 0; }
.cb-pj-fr-list .hd { display: flex; align-items: flex-start; gap: var(--space-3); }
.cb-pj-fr-list .n, .cb-pj-kb-list .n { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--inset); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-pj-fr-list .m { display: grid; gap: 2px; flex: 1; min-width: 0; }
.cb-pj-fr-list .m b { font-size: 14px; font-weight: 500; }
.cb-pj-fr-list .m span { color: var(--ink-3); }
.cb-pj-fr-list .w { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--inset); padding: 1px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.cb-pj-fr .roles { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-pj-fr .rv { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--inset); font-size: 12px; }
.cb-pj-fr .rv .r { color: var(--ink-2); }
.cb-pj-fr .rv .cb-status { font-size: 12px; }

/* 5. встречи */
.cb-pj-meet .sec { display: grid; gap: var(--space-2); }
.cb-pj-meet .sh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.cb-pj-meets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-pj-meets > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); }
.cb-pj-meets > li.past { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cb-pj-meets .dt { width: 48px; height: 52px; border-radius: 12px; background: var(--card); display: grid; place-content: center; text-align: center; line-height: 1; }
.cb-pj-meets .dt b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-pj-meets .dt span { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.cb-pj-meets .past .dt { background: var(--inset); }
.cb-pj-meets .b { display: grid; gap: 4px; min-width: 0; }
.cb-pj-meets .hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-pj-meets .hd b { font-size: 14px; font-weight: 600; }
.cb-pj-meets .when { font-variant-numeric: tabular-nums; color: var(--ink); }
.cb-pj-meets .meta { display: block; color: var(--ink-3); }
.cb-pj-meets .meta .cb-i { vertical-align: -2px; margin-right: 4px; }
.cb-pj-meets .ag { color: var(--ink-2); }
.cb-pj-meets .miss { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 500; }
.cb-pj-meets .past .ans { background: var(--inset); }

/* 6. файлы */
.cb-pj-vault .up { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); min-width: 0; }
.cb-pj-vault .fld { display: grid; gap: 4px; min-width: 0; }
.cb-pj-vault .fld .l { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.cb-pj-vault .fld .cb-seg { background: var(--card); justify-self: start; }
.cb-pj-vault .fld .cb-seg button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.cb-pj-vault .row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-pj-file { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-pj-file:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-pj-ck { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); cursor: pointer; }
.cb-pj-vault .row .cb-btn.primary { margin-left: auto; }
.cb-pj-list.files .fi { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); flex: none; }
.cb-pj-list.files .sz { color: var(--ink-3); font-size: 12px; white-space: nowrap; }

/* 7. база знаний */
.cb-pj-kb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-pj-kb-list > li { border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); padding: var(--space-3); display: grid; gap: var(--space-2); }
.cb-pj-kb-list .hd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.cb-pj-kb-list .hd p { margin: 0; font-size: 14px; line-height: 20px; }
.cb-pj-src-b { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--inset); box-shadow: inset 0 0 0 1px var(--border); white-space: nowrap; vertical-align: 1px; }
.cb-pj-src-b.canon { background: var(--flame-soft); color: var(--ink); box-shadow: none; }

/* 8. лента этапов */
.cb-pj-track .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: var(--space-2); overflow-x: auto; padding: 4px; margin: -4px; scrollbar-width: thin; }
.cb-pj-track .stg { position: relative; display: grid; gap: 2px; justify-items: start; text-align: left; border: 0; cursor: pointer; padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); color: var(--ink); min-width: 0; transition: background-color .15s; }
.cb-pj-track .stg:hover { background: var(--inset-hover); }
.cb-pj-track .stg .mk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--card); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border); margin-bottom: 4px; }
.cb-pj-track .stg.past .mk { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.cb-pj-track .stg.cur { background: var(--card-ink); color: var(--on-card-ink); }
.cb-pj-track .stg.cur .mk { background: var(--flame-deep); color: var(--on-flame); box-shadow: none; }
.cb-pj-track .stg.cur .d, .cb-pj-track .stg.cur .o { color: color-mix(in oklab, var(--on-card-ink) 72%, transparent); }
.cb-pj-track .stg b { font-weight: 600; font-size: 13px; line-height: 17px; }
.cb-pj-track .stg .d { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-pj-track .stg .o { font-size: 12px; color: var(--ink-3); }
.cb-pj-track .stg.sel { box-shadow: 0 0 0 2px var(--ink); }
.cb-pj-track .stg.cur.sel { box-shadow: 0 0 0 2px var(--flame); }
.cb-pj-track .det { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); }
.cb-pj-track .det .hd { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-pj-dl { margin: 0; display: grid; gap: 6px; }
.cb-pj-dl > div { display: grid; grid-template-columns: minmax(90px, 30%) minmax(0, 1fr); gap: var(--space-3); }
.cb-pj-dl dt { color: var(--ink-3); }
:where(.cb-pj-dl) dd { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */

/* 9. липкая полоса */
.cb-pj-foot { display: flex; align-items: center; gap: 8px var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-4); border-radius: var(--radius-inset); background: var(--card-ink); color: var(--on-card-ink); font-size: 13px; line-height: 18px; z-index: 1; }
.cb-pj-foot.sticky { position: sticky; bottom: 0; }
.cb-pj-foot .p { color: color-mix(in oklab, var(--on-card-ink) 72%, transparent); font-variant-numeric: tabular-nums; }
.cb-pj-foot .bar { flex: 1 1 80px; height: 6px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--on-card-ink) 18%, transparent); overflow: hidden; min-width: 60px; }
.cb-pj-foot .bar i { display: block; height: 100%; background: var(--flame); border-radius: inherit; }
.cb-pj-foot .r { font-variant-numeric: tabular-nums; }
.cb-pj-foot .nx { background: var(--on-card-ink); color: var(--card-ink); }
.cb-pj-footdemo { display: grid; gap: var(--space-2); }
.cb-pj-footdemo .scroll { max-height: 250px; overflow: auto; border-radius: var(--radius-inset); background: var(--inset); padding: var(--space-3) var(--space-3) 0; }
.cb-pj-footdemo ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 4px; }
.cb-pj-footdemo li label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border-radius: 12px; cursor: pointer; }

/* 10. регламент: diff */
.cb-pj-diff .vh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-2); }
.cb-pj-diff .ops, .cb-pj-diff .acks { display: grid; gap: var(--space-2); }
.cb-pj-diff .oh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-pj-diff .lines { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; background: var(--inset); border-radius: var(--radius-inset); }
.cb-pj-diff .lines li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; padding: 5px 8px; border-radius: 8px; font-size: 13px; line-height: 19px; }
.cb-pj-diff .lines .mk { font-family: var(--font-mono); font-weight: 600; font-size-adjust: none; }
.cb-pj-diff .lines .same { color: var(--ink-2); }
.cb-pj-diff .lines .add { background: var(--ok-soft); color: var(--ink); }
.cb-pj-diff .lines .add .mk { color: var(--ok); }
.cb-pj-diff .lines .del { background: var(--bad-soft); color: var(--ink-2); }
.cb-pj-diff .lines .del .tx { text-decoration: line-through; text-decoration-color: var(--bad); }
.cb-pj-diff .lines .del .mk { color: var(--bad); }

/* 11. идеи */
.cb-pj-ideas .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--space-2); }
.cb-pj-ideas .idea { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cb-pj-ideas .idea .hd { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-pj-ideas .idea > b { font-size: 14px; line-height: 19px; font-weight: 600; }
.cb-pj-ideas .idea p { margin: 0; color: var(--ink-2); }
.cb-pj-ideas .idea .why { color: var(--ink); background: var(--card); border-radius: 10px; padding: 6px 10px; }
.cb-pj-ideas .idea .acts { margin-top: auto; padding-top: 4px; }
.cb-pj-ideas .idea .cb-btn.outline { background: var(--card); }
.cb-pj-ideas .stset { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-pj-ideas .cb-pj-inline { background: var(--card); }

/* 12. ведомость */
.cb-pj-pay .steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-3); font-size: 12px; }
.cb-pj-pay .steps span { display: inline-flex; align-items: center; gap: 8px; }
.cb-pj-pay .rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-pj-pay .rows > li { display: grid; grid-template-columns: minmax(140px, 1.1fr) minmax(0, 2.2fr) minmax(130px, 1fr); gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-pj-pay .who { display: grid; gap: 2px; min-width: 0; }
.cb-pj-pay .am { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.cb-pj-pay .am dt { color: var(--ink-3); font-size: 12px; }
.cb-pj-pay .am dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-pj-pay .am .net dd { font-weight: 600; }
/* статус строки ведомости — только в .rows: иначе правило ложилось и на плитки .cb-pj-stats .st (min-width 0) и «508 950 ₽» вываливалось (У-0237) */
.cb-pj-pay .rows .st { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cb-pj-pay .rows .st .cb-pj-flag { max-width: 100%; white-space: normal; padding-block: 2px; }
/* узкая ведомость (768 и острова): статус под суммами, строка не выпирает из карточки */
.cb-pj-pay .rows { container-type: inline-size; }
@container (max-width: 640px) {
  .cb-pj-pay .rows > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cb-pj-pay .rows > li > .am { grid-column: 1 / -1; grid-row: 2; }
}
.cb-pj-pay .rows > li > .acts, .cb-pj-pay .rows > li > .cb-pj-hist { grid-column: 1 / -1; }

/* 13. ТВ */
.cb-pj-tv .code-wrap { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-4); display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.cb-pj-tv .code { display: flex; gap: 16px; font-family: var(--font-mono); font-size-adjust: none; font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.cb-pj-tv .code span { background: var(--card); border-radius: 12px; padding: 4px 8px 4px 14px; box-shadow: var(--shadow-ring); }
.cb-pj-tv .code.dim { opacity: .45; }
.cb-pj-tv .meta { display: grid; gap: 4px; justify-items: center; }
.cb-pj-tv .meta .cb-status { white-space: normal; }
.cb-pj-tv .howto { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--ink-2); }

/* 14. две двери */
.cb-pj-doors { display: grid; gap: var(--space-4); background: var(--shell); border-radius: var(--radius-card); padding: var(--space-5); font-size: 13px; line-height: 18px; }
.cb-pj-doors .brand { display: flex; align-items: center; gap: var(--space-3); }
.cb-pj-doors .brand > div { display: grid; }
.cb-pj-doors .brand b { font-size: 20px; line-height: 26px; font-weight: 600; }
.cb-pj-doors .brand span { color: var(--ink-2); }
.cb-pj-doors .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); }
.cb-pj-doors .door { position: relative; display: grid; gap: 4px; justify-items: start; text-align: left; border: 0; cursor: pointer; padding: var(--space-5); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-ring); color: var(--ink); min-height: 150px; align-content: end; transition: background-color .15s, transform .12s; }
.cb-pj-doors .door:hover { background: var(--inset); }
.cb-pj-doors .door:active { transform: scale(.98); }
.cb-pj-doors .door .ic { position: absolute; top: var(--space-4); left: var(--space-4); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--inset); }
.cb-pj-doors .door b { font-size: 20px; line-height: 26px; font-weight: 600; }
.cb-pj-doors .door > span:not(.ic) { color: var(--ink-2); }
.cb-pj-doors .door .go { position: absolute; top: var(--space-5); right: var(--space-5); color: var(--ink-3); }
.cb-pj-doors .door.on { box-shadow: 0 0 0 2px var(--ink); }
.cb-pj-doors .door.on .ic { background: var(--flame); color: var(--on-flame); }
.cb-pj-doors .form { background: var(--card); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-3); box-shadow: var(--shadow-ring); }
.cb-pj-doors .fld { display: grid; gap: 6px; }
.cb-pj-doors .fld .l { color: var(--ink-2); font-weight: 500; }
.cb-pj-doors .foot { margin: 0; color: var(--ink-3); font-size: 12px; text-align: center; }

/* 29. шлюз */
.cb-pj-gate .sumg { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-pj-gate .sumg b { font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-pj-gate .sumg .cb-pj-bar { flex: 1 1 120px; }
.cb-pj-gate .holders { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-pj-gate .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.cb-pj-gate .col { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3); display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.cb-pj-gate .ch { display: flex; justify-content: space-between; align-items: center; }
.cb-pj-gate ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-pj-gate li { background: var(--card); border-radius: 10px; padding: 8px var(--space-3); display: grid; gap: 2px; }
.cb-pj-gate li b { font-weight: 500; }
.cb-pj-gate li span { color: var(--ink-3); font-size: 12px; }
.cb-pj-gate li em { font-style: normal; color: var(--ink-2); font-size: 12px; }
.cb-pj-gate .col p { margin: 0; }

/* 30. реестр */
.cb-pj-reg .rows { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-pj-reg .rows > li { border-top: 1px solid var(--border); }
.cb-pj-reg .rows > li:first-child { border-top: 0; }
.cb-pj-reg .rh { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; gap: var(--space-3); align-items: center; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 10px 6px; border-radius: 12px; color: var(--ink); }
.cb-pj-reg .rh:hover, .cb-pj-reg .on .rh { background: var(--inset); }
.cb-pj-reg .rh .m { display: grid; gap: 2px; min-width: 0; }
.cb-pj-reg .rh .m b { font-weight: 500; font-size: 14px; }
.cb-pj-reg .rh .m span { color: var(--ink-3); }
.cb-pj-reg .nums { display: flex; gap: 4px 14px; flex-wrap: wrap; justify-content: flex-end; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-pj-reg .nums b { color: var(--ink); font-weight: 600; }
.cb-pj-reg .nums .bad b { color: var(--bad); }
.cb-pj-reg .nums .sil { color: var(--ink-2); }
.cb-pj-reg .det { display: grid; gap: var(--space-2); padding: 4px 6px var(--space-3); }
.cb-pj-reg .bl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-pj-reg .bl li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 31. возраст блокеров */
.cb-pj-age .rows { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-pj-age .rows > li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(90px, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.cb-pj-age .rows > li:first-child { border-top: 0; }
.cb-pj-age .m { display: grid; gap: 2px; min-width: 0; }
.cb-pj-age .m b { font-weight: 500; font-size: 14px; }
.cb-pj-age .m span { color: var(--ink-3); }
.cb-pj-age .track { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--inset); }
.cb-pj-age .track i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ink); }
.cb-pj-age .track i.over { background: repeating-linear-gradient(-45deg, var(--flame) 0 2px, var(--flame-hatch) 2px 5px); }
.cb-pj-age .track .thr { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--ink-2); }
.cb-pj-age .r { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.cb-pj-age .age { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 32. журнал решений */
.cb-pj-dec .rows { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-pj-dec .rows > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--border); }
.cb-pj-dec .rows > li:first-child { border-top: 0; }
.cb-pj-dec .n { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; padding-top: 1px; }
.cb-pj-dec .m { display: grid; gap: 6px; min-width: 0; }
.cb-pj-dec .m p { margin: 0; font-size: 14px; line-height: 20px; }
.cb-pj-dec .meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink-3); font-size: 12px; }
.cb-pj-dec .old .m p { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.cb-pj-dec .rb { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 12px; }
.cb-pj-dec .newd { display: grid; gap: var(--space-2); }
.cb-pj-dec .newd .cb-seg { justify-self: start; }

/* 33. стоимость */
.cb-pj-cost .pick { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-3) var(--space-4); display: grid; gap: 2px; }
.cb-pj-cost .pick b { font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-pj-tblw { overflow-x: auto; border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-pj-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 520px; }
.cb-pj-tbl th, .cb-pj-tbl td { padding: 0 var(--space-3); height: 44px; text-align: left; white-space: nowrap; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.cb-pj-tbl thead th { background: var(--inset); color: var(--ink-2); font-weight: 400; border-top: 0; }
.cb-pj-tbl tbody th { font-weight: 500; }
.cb-pj-tbl .r { text-align: right; }
.cb-pj-tbl .b { font-weight: 600; }
.cb-pj-tbl tbody tr { cursor: pointer; }
.cb-pj-tbl tbody tr:hover { background: color-mix(in oklab, var(--inset) 60%, transparent); }
.cb-pj-tbl tbody tr[aria-selected="true"] { background: var(--inset); }

/* 34. покрытие */
.cb-pj-cov .pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.cb-pj-cov .side { display: grid; gap: 6px; min-width: 0; }
.cb-pj-cov .side .l { color: var(--ink-2); }
.cb-pj-cov .side > b { font-size: 30px; line-height: 34px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cb-pj-cov .side .base { color: var(--ink-3); font-size: 12px; }
.cb-pj-cov .arrow { color: var(--ink-3); }
.cb-pj-cov .waf { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; max-width: 220px; }
.cb-pj-cov .waf i { aspect-ratio: 1; border-radius: 2px; background: var(--mono-2); }
.cb-pj-cov .waf i.on { background: var(--ink); }
.cb-pj-cov .waf i.on.h { background: repeating-linear-gradient(-45deg, var(--flame) 0 2px, var(--flame-hatch) 2px 4px); }

/* 35. расходы на нейросети */
.cb-pj-inv .rows { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-pj-inv .rows > li { display: grid; grid-template-columns: 90px minmax(80px, 1fr) 100px minmax(0, 1.1fr); gap: var(--space-3); align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.cb-pj-inv .rows > li:first-child { border-top: 0; }
.cb-pj-inv .mo { display: grid; font-weight: 500; }
.cb-pj-inv .mo em { font-style: normal; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.cb-pj-inv .stack { display: flex; gap: 2px; height: 12px; }
.cb-pj-inv .stack i { border-radius: 3px; min-width: 2px; }
.cb-pj-inv .stack .asr { background: var(--ink); }
.cb-pj-inv .stack .llm { background: var(--flame); }
.cb-pj-inv .stack .infra { background: var(--mono-3); }
.cb-pj-inv .stack i.h { background-image: repeating-linear-gradient(-45deg, transparent 0 2px, var(--card) 2px 4px); }
.cb-pj-inv .sum { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cb-pj-inv .payer { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 12px; }
.cb-pj-inv .tot { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; background: var(--inset); border-radius: 12px; padding: 8px 12px; }
.cb-pj-inv .tot b { font-size: 15px; font-variant-numeric: tabular-nums; }

/* ── Jev ── */
.cb-pj-two { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch; }
.cb-pj-two > div { display: grid; gap: 0; padding: 6px 12px; border-radius: 12px; background: var(--inset); min-width: 0; }
.cb-pj-two > div span { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-pj-two > div b { font-variant-numeric: tabular-nums; font-weight: 600; }
.cb-pj-two > div.na b { color: var(--ink-3); font-weight: 500; border-bottom: 1px dashed var(--ink-3); justify-self: start; }
.cb-pj-two em { font-style: normal; color: var(--ink-3); font-size: 12px; flex-basis: 100%; }

.cb-pj-noul { display: grid; gap: 6px; font-size: 13px; line-height: 18px; min-width: 0; }
.cb-pj-noul .q { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cb-pj-noul .q b { font-size: 14px; }
.cb-pj-noul .scale { position: relative; margin-top: 22px; }
.cb-pj-noul .zones { display: flex; gap: 2px; height: 30px; }
.cb-pj-noul .z { position: relative; display: grid; place-items: center; border-radius: 8px; overflow: hidden; min-width: 0; background: var(--inset-hover); color: var(--ink-2); }
.cb-pj-noul .z em { font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.cb-pj-noul .z.manual { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, var(--inset) 2px 6px); }
.cb-pj-noul .z.yes { background: var(--mono-2); }
.cb-pj-noul .z.none { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, var(--inset) 2px 6px); color: var(--ink-3); }
.cb-pj-noul .z.on { background: var(--inset); color: var(--ink); }
.cb-pj-noul .mk { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--flame-deep); border-radius: 1px; }
.cb-pj-noul .mk span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--flame-deep); color: var(--on-flame); font-size: 11px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-pj-noul .ticks { position: relative; height: 14px; margin: 0; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-pj-noul .ticks span { position: absolute; transform: translateX(-50%); }
.cb-pj-noul .ticks span:first-child { transform: none; }
.cb-pj-noul .ticks span:last-child { transform: translateX(-100%); }
.cb-pj-noul .foot { display: grid; gap: 6px; }
.cb-pj-noul .za { color: var(--ink-2); }
.cb-pj-noul .za b { color: var(--ink); }
.cb-pj-noul .thrs { display: flex; gap: 4px 16px; flex-wrap: wrap; }
.cb-pj-range { display: grid; gap: 4px; font-size: 12px; color: var(--ink-2); }
.cb-pj-range input { width: 100%; accent-color: var(--ink); height: 24px; }

.cb-pj-choice, .cb-pj-score { display: grid; gap: var(--space-2); font-size: 13px; line-height: 18px; min-width: 0; }
.cb-pj-choice .bars, .cb-pj-score .lv { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-pj-choice .bars li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 1.2fr) 36px; gap: var(--space-2); align-items: center; }
.cb-pj-choice .nm, .cb-pj-score .nm { min-width: 0; color: var(--ink-2); }
.cb-pj-choice .lead .nm, .cb-pj-score .lead .nm { color: var(--ink); font-weight: 600; }
.cb-pj-choice .tr, .cb-pj-score .tr { height: 10px; border-radius: 4px; background: var(--inset); overflow: hidden; }
.cb-pj-choice .tr i, .cb-pj-score .tr i { display: block; height: 100%; background: var(--mono-3); border-radius: inherit; }
.cb-pj-choice .lead .tr i, .cb-pj-score .lead .tr i { background: var(--flame); }
.cb-pj-choice .bars b, .cb-pj-score .lv b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cb-pj-choice .gap { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; color: var(--ink-2); }
.cb-pj-choice .gap b { text-align: left; }
.cb-pj-score .lv li { display: grid; grid-template-columns: 18px minmax(0, 1.4fr) minmax(50px, 1fr) 36px; gap: var(--space-2); align-items: center; }
.cb-pj-score .lv .i { font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-pj-score .res { display: grid; gap: 4px; }
.cb-pj-score .axis { position: relative; height: 24px; margin: 20px 10px 0; border-top: 2px solid var(--inset-hover); }
.cb-pj-score .axis .t { position: absolute; top: 4px; transform: translateX(-50%); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-pj-score .axis .mk { position: absolute; top: -8px; width: 2px; height: 14px; margin-left: -1px; background: var(--flame-deep); }
.cb-pj-score .axis .mk span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--flame-deep); color: var(--on-flame); font-size: 11px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.cb-pj-score .res .f { color: var(--ink-2); font-size: 12px; }
.cb-pj-score > .cb-seg { justify-self: start; }

.cb-pj-trace { display: grid; gap: var(--space-2); font-size: 13px; line-height: 18px; }
.cb-pj-trace .rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cb-pj-trace .rules li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; padding: var(--space-2) var(--space-3); border-radius: 10px; background: var(--inset); }
.cb-pj-trace .rules li .mk { color: var(--ink-3); padding-top: 1px; }
.cb-pj-trace .rules li.fired .mk { color: var(--ink); }
.cb-pj-trace .rules .m { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; min-width: 0; }
.cb-pj-trace .rules .m b { font-weight: 500; }
.cb-pj-trace .rules .m span { color: var(--ink-3); }
.cb-pj-trace .rules .e { color: var(--ink-3); font-size: 12px; text-align: right; max-width: 45%; }
.cb-pj-trace .rules .fired .e { color: var(--ink); font-weight: 500; }
.cb-pj-trace .out { display: grid; gap: 6px; }
.cb-pj-trace .out > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-pj-trace .out > div > span:first-child { color: var(--ink-3); font-size: 12px; }
.cb-pj-trace .fin { background: var(--card-ink); color: var(--on-card-ink); border-radius: 12px; padding: 8px 12px; }
.cb-pj-trace .fin > span:first-child { color: color-mix(in oklab, var(--on-card-ink) 70%, transparent) !important; }

.cb-pj-judge { display: grid; gap: var(--space-3); background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-4); font-size: 13px; line-height: 18px; min-width: 0; overflow-wrap: break-word; }
.cb-pj-judge .hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-pj-judge .hd > b { font-size: 15px; line-height: 20px; font-weight: 600; flex: 1 1 160px; }
.cb-pj-judge .in { margin: 0; background: var(--card); border-radius: 12px; padding: 8px 12px; display: grid; gap: 2px; }
.cb-pj-judge .in span { font-size: 12px; color: var(--ink-3); }
.cb-pj-judge .in p { margin: 0; }
.cb-pj-judge .tr { background: var(--card); }
.cb-pj-judge .cb-pj-two > div { background: var(--card); }
.cb-pj-judge .cb-pj-noul .z { background: var(--card); }
.cb-pj-judge .cb-pj-noul .z.manual { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, var(--card) 2px 6px); }
.cb-pj-judge .cb-pj-noul .z.yes { background: var(--mono-2); }
.cb-pj-judge .pol { display: flex; gap: 4px 16px; flex-wrap: wrap; }
.cb-pj-judge .act { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; background: var(--card); border-radius: 12px; padding: 8px 12px; }
.cb-pj-judge .act > span:first-of-type { color: var(--ink-3); }
.cb-pj-judge .act.human { box-shadow: inset 0 0 0 1px var(--warn); background: var(--warn-soft); }
.cb-pj-judge .act.human span { color: var(--ink-2); }
.cb-pj-judge .act .why { flex-basis: 100%; color: var(--ink-2); }
.cb-pj-judge .ft { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: 12px; }
.cb-pj-judge .ft .cb-btn { margin-left: calc(var(--space-3) * -1); }
.cb-pj-judge .cb-pj-trace .rules li { background: var(--card); }

/* действующий порог — подложка-полоса, а не линия толще 1 px (БРЕНДБУК «Линии и глубина», D16) */
.cb-pj-cal-cur { fill: color-mix(in oklab, var(--ink) 10%, transparent); stroke: none; }
.cb-pj-cal .acc { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-pj-cal .acc > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink-2); }

.cb-pj-agree .gate { display: flex; flex-wrap: wrap; gap: 4px 16px; background: var(--inset); border-radius: 12px; padding: 8px 12px; color: var(--ink-2); }
.cb-pj-mx { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 520px; font-size: 13px; }
.cb-pj-mx th { text-align: left; font-weight: 400; color: var(--ink-2); font-size: 12px; padding: 4px 6px; white-space: nowrap; }
.cb-pj-mx th.cur { color: var(--ink); font-weight: 700; }
.cb-pj-mx tbody th { color: var(--ink); font-size: 13px; font-weight: 500; white-space: normal; min-width: 150px; }
.cb-pj-mx .crit { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--ink-2); padding: 0 6px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--border); }
.cb-pj-mx td { padding: 0; }
.cb-pj-mx .cell { display: grid; justify-items: center; align-content: center; gap: 0; min-height: 46px; border-radius: 8px; padding: 4px; font-variant-numeric: tabular-nums; }
.cb-pj-mx .cell b { font-weight: 600; font-size: 13px; }
.cb-pj-mx .cell small { font-size: 11px; font-weight: 400; }
.cb-pj-mx .cell em { font-style: normal; font-size: 11px; font-weight: 700; }
.cb-pj-mx .cell.few { background: repeating-linear-gradient(-45deg, var(--hatch-ghost) 0 2px, var(--inset) 2px 6px); color: var(--ink-2); }
.cb-pj-mx .cell.below { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3px var(--card); }
.cb-pj-mx .cell.na { background: var(--inset); }
.cb-pj-mx .drift { font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-pj-agree .cb-vleg .ramp { display: inline-flex; gap: 2px; }
.cb-pj-agree .cb-vleg .ramp i { width: 16px; height: 10px; border-radius: 3px; }

.cb-pj-hq .rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-pj-hq .rows > li { border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); padding: var(--space-3); display: grid; gap: 6px; }
.cb-pj-hq .rows > li.done { background: var(--inset); box-shadow: none; }
.cb-pj-hq .hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-pj-hq .tx { margin: 0; font-size: 14px; line-height: 20px; }
.cb-pj-hq .det { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-pj-hq .res { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink-2); }
.cb-pj-hq .res b { color: var(--ink); }
.cb-pj-hq .opts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-pj-hq .done .cb-btn.outline { background: var(--card); }

/* экраны */
.cb-pj-screen { display: grid; gap: var(--space-4); min-width: 0; font-size: 13px; line-height: 18px; }
.cb-pj-screen-h { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-pj-screen-h > div:first-child { display: grid; gap: 4px; min-width: 0; flex: 1 1 320px; }
.cb-pj-screen-h i { font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.cb-pj-screen-h h2 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.cb-pj-screen-h .ctx { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-pj-screen-h .ctx > span { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 12px; }
.cb-pj-rule { margin: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-inset); background: var(--card-ink); color: var(--on-card-ink); font-weight: 500; }
.cb-pj-tile { gap: var(--space-3); }
.cb-pj-screen .cb-bento > * > .cb-card { height: 100%; }

@container (max-width: 520px) {
  .cb-pj-pulse .top { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cb-pj-pulse .facts { justify-self: stretch; }
  .cb-pj-pay .rows > li { grid-template-columns: minmax(0, 1fr); }
  .cb-pj-pay .am { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .cb-pj-gate .cols { grid-template-columns: minmax(0, 1fr); }
  .cb-pj-age .rows > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .cb-pj-age .r { justify-content: flex-start; }
  .cb-pj-inv .rows > li { grid-template-columns: 80px minmax(0, 1fr) auto; }
  .cb-pj-inv .payer { grid-column: 1 / -1; }
  .cb-pj-cov .pair { grid-template-columns: minmax(0, 1fr); }
  .cb-pj-cov .arrow { transform: rotate(90deg); justify-self: start; }
  .cb-pj-reg .rh { grid-template-columns: minmax(0, 1fr) 16px; }
  .cb-pj-reg .nums { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .cb-pj-kb-list .hd { grid-template-columns: auto minmax(0, 1fr); }
  .cb-pj-kb-list .hd > .cb-btn { grid-column: 2; justify-self: start; }
  .cb-pj-tv .code { font-size: 30px; line-height: 38px; gap: 8px; }
  .cb-pj-meets > li { grid-template-columns: minmax(0, 1fr); }
  .cb-pj-meets .dt { width: auto; height: auto; display: flex; gap: 6px; justify-self: start; padding: 4px 10px; place-content: start; }
  .cb-pj-meets .dt span { margin: 0; }
  .cb-pj-trace .rules li { grid-template-columns: 18px minmax(0, 1fr); }
  .cb-pj-trace .rules .e { grid-column: 2; text-align: left; max-width: none; }
  .cb-pj-vault .row .cb-btn.primary { margin-left: 0; }
  .cb-pj-score .lv li { grid-template-columns: 18px minmax(0, 1fr) 36px; }
  .cb-pj-score .lv .tr { grid-column: 2 / -1; grid-row: 2; }
  .cb-pj-choice .bars li { grid-template-columns: minmax(0, 1fr) 36px; }
  .cb-pj-choice .bars .tr { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 480px) {
  .cb-pj-doors { padding: var(--space-4); }
  .cb-pj-screen-h h2 { font-size: 20px; line-height: 26px; }
}
.cb-pj-screen > .cb-pj-stats .st { background: var(--card); box-shadow: var(--shadow-ring); }

/* экраны на контракте V.screen: подзаголовок шапки и пояс KPI на утилитах .cb-kpis-N (частный .cb-pj-stats остаётся оформлением) */
.cb-pj-screen-h .sub { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cb-pj-stats:is(.cb-kpis-3, .cb-kpis-4, .cb-kpis-5) { display: grid; }

/* ПРАВКИ_2026-10-15 · таблица помещается в карточку 560 */
.cb-pj-tbl { min-width: 0; }
.cb-pj-tbl th, .cb-pj-tbl td { padding: 0 10px; }
.cb-pj-tbl thead th { white-space: normal; line-height: 16px; overflow-wrap: normal; word-break: keep-all; hyphens: none; }

/* ── src/styles/t-grid.css ── */
.cb-tg { color: var(--ink); }
.cb-tg button, .cb-tg input { font: inherit; }
.cb-tg-toolbar, .cb-tg-work > header, .cb-tg-views, .cb-tg-filterline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-tg-toolbar { margin-bottom: var(--space-3); }
.cb-tg-toolbar .left, .cb-tg-toolbar .right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-tg-toolbar .left span, .cb-tg-foot, .cb-tg-exline, .cb-tg-menu-sec { color: var(--ink-3); font-size: 13px; }
.cb-tg-menu { position: relative; display: inline-flex; max-width: 100%; }
.cb-tg-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(320px, calc(100vw - 32px)); max-height: min(430px, 70vh); overflow: auto; display: grid; gap: 2px; padding: 6px; border-radius: var(--radius-inset); background: var(--card); box-shadow: var(--shadow-pop); }
.cb-tg-mi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.cb-tg-mi:hover, .cb-tg-mi:focus-visible { background: var(--inset); }
.cb-tg-mi > span { flex: 1; display: grid; min-width: 0; }
.cb-tg-mi small { color: var(--ink-3); font-size: 11px; line-height: 14px; overflow: hidden; text-overflow: ellipsis; }
.cb-tg-mi.on { font-weight: 650; }
.cb-tg-menu-sec { padding: 8px 10px 4px; text-transform: lowercase; }
.cb-tg-headbtn { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); cursor: pointer; }
.cb-tg-headbtn:hover, .cb-tg-headbtn:focus-visible { background: var(--inset-hover); color: var(--ink); }
.cb-tg-tablewrap { position: relative; overflow: auto; max-height: 680px; border-radius: var(--radius-inset); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-tg-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.cb-tg-table th, .cb-tg-table td { min-width: 92px; height: 48px; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; background: var(--card); }
.cb-tg-table thead th { position: sticky; top: 0; z-index: 8; color: var(--ink-2); background: var(--inset); font-weight: 650; text-align: left; }
.cb-tg-table tfoot td, .cb-tg-table tfoot th { position: sticky; bottom: 0; z-index: 7; background: var(--inset); color: var(--ink-2); }
.cb-tg-table .sticky { position: sticky; left: 0; z-index: 9; min-width: 44px; width: 44px; }
.cb-tg-table .sticky2 { position: sticky; left: 44px; z-index: 9; min-width: 230px; width: 230px; box-shadow: 1px 0 0 var(--border); }
.cb-tg-table thead .sticky, .cb-tg-table thead .sticky2 { z-index: 12; }
.cb-tg-table tfoot .sticky, .cb-tg-table tfoot .sticky2 { z-index: 10; }
.cb-tg-table tbody tr:hover td, .cb-tg-table tbody tr:hover th { background: var(--inset); }
.cb-tg-table tr.sel td, .cb-tg-table tr.sel th { background: var(--flame-soft); }
.cb-tg-table tr.grp th { height: 38px; background: var(--inset); color: var(--ink); text-align: left; padding-left: var(--space-3); }
.cb-tg-table tr.grp th > button { position: sticky; left: var(--space-3); }
.cb-tg-table tr.grp button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: inherit; font-weight: 650; cursor: pointer; }
.cb-tg-table tr.grp span { margin-left: 8px; color: var(--ink-3); font-weight: 500; }
.cb-tg-table th .hline { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cb-tg-table th .hline > button:not(.mini) { display: inline-flex; align-items: center; gap: 4px; min-width: 0; border: 0; background: transparent; color: inherit; font-weight: inherit; cursor: pointer; }
.cb-tg-table th .mini { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-3); cursor: pointer; }
.cb-tg-table th .mini:hover { background: var(--card); color: var(--ink); }
.cb-tg-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cb-tg-table td.range { outline: 2px solid var(--focus); outline-offset: -2px; }
.cb-tg-table th.title button { display: grid; gap: 2px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.cb-tg-table th.title span { color: var(--ink-3); font-size: 12px; }
.cb-tg-cellv { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; max-width: 100%; }
.cb-tg-cellv.money, .cb-tg-cellv.number, .cb-tg-cellv.percent, .cb-tg-cellv.rubric, .cb-tg-total { border: 0; background: transparent; color: var(--ink); font-variant-numeric: tabular-nums; cursor: default; }
.cb-drill-on .cb-tg-cellv.money, .cb-drill-on .cb-tg-cellv.number, .cb-drill-on .cb-tg-cellv.percent, .cb-drill-on .cb-tg-cellv.rubric, .cb-drill-on .cb-tg-total { cursor: pointer; border-radius: 8px; }
.cb-drill-on .cb-tg-cellv.money:hover, .cb-drill-on .cb-tg-cellv.number:hover, .cb-drill-on .cb-tg-cellv.percent:hover, .cb-drill-on .cb-tg-cellv.rubric:hover, .cb-drill-on .cb-tg-total:hover { background: var(--inset-hover); }
.cb-tg-cellv.due { display: grid; gap: 1px; }
.cb-tg-cellv.due small, .cb-tg-cellv.readonly small, .cb-tg-cellv.rubric .zone { color: var(--ink-3); font-size: 11px; }
.cb-tg-cellv.due.late { color: var(--bad); }
.cb-tg-cellv.locked { color: var(--ink-3); }
.cb-tg-na { color: var(--ink-3); border-bottom: 1px dashed var(--border); }
.cb-tg-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; max-width: 100%; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); white-space: nowrap; }
.cb-tg-pill.label { background: var(--flame-soft); }
.cb-tg-pill.rel, .cb-tg-pill.file { box-shadow: inset 0 0 0 1px var(--border); background: var(--card); }
.cb-tg-avatars { display: inline-flex; align-items: center; }
.cb-tg-avatars .cb-av, .cb-tg-avatars .ai, .cb-tg-avatars .more { width: 24px; height: 24px; margin-left: -6px; box-shadow: 0 0 0 2px var(--card); }
.cb-tg-avatars .cb-av:first-child, .cb-tg-avatars .ai:first-child { margin-left: 0; }
.cb-tg-avatars .ai, .cb-tg-avatars .more { display: inline-grid; place-items: center; border-radius: 8px; background: var(--card-ink); color: var(--on-card-ink); font-size: 10px; font-weight: 700; }
.cb-tg-edit { width: 100%; min-height: 34px; border: 1px solid var(--focus); border-radius: 10px; padding: 0 8px; background: var(--card); color: var(--ink); }
.cb-tg-bulk, .cb-tg-receipt { position: sticky; left: var(--space-4); bottom: var(--space-4); z-index: 20; display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--card); box-shadow: var(--shadow-pop); }
.cb-tg-bulk > div, .cb-tg-receipt { align-items: center; }
.cb-tg-bulk input { min-height: 38px; border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; background: var(--inset); color: var(--ink); }
.cb-tg-drawer { position: fixed; right: var(--space-4); top: var(--space-4); bottom: var(--space-4); z-index: 50; width: min(460px, calc(100vw - 32px)); overflow: auto; display: grid; align-content: start; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-pop); }
.cb-tg-drawer > header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); }
.cb-tg-drawer small, .cb-tg-activity span, .cb-tg-thread span { color: var(--ink-3); font-size: 12px; }
.cb-tg-dfields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cb-tg-dfields > div, .cb-tg-thread, .cb-tg-activity { display: grid; gap: 5px; padding: 10px; border-radius: var(--radius-inset); background: var(--inset); }
.cb-tg-views { margin-bottom: var(--space-3); }
.cb-tg-views .modes { display: flex; gap: 4px; overflow: auto; padding: 4px; border-radius: var(--radius-pill); background: var(--inset); }
.cb-tg-views .modes button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.cb-tg-views .modes button.on { background: var(--primary); color: var(--on-primary); }
.cb-tg-views .saved { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }
.cb-tg-views .saved .cb-chip { flex: none; }   /* кнопка «Ссылка на вид» не сжимается до обреза текста — переносится */
.cb-tg-views code { max-width: 360px; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); font-size: 12px; }
.cb-tg-board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: var(--space-3); overflow: auto; }
.cb-tg-board .col { display: grid; align-content: start; gap: 8px; min-height: 420px; padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); }
.cb-tg-board .col.over { box-shadow: inset 0 0 0 2px var(--warn); }
.cb-tg-board .col header { display: grid; gap: 3px; }
.cb-tg-board .col header span { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.cb-tg-board article { display: grid; gap: 7px; padding: var(--space-3); border: 0; border-radius: var(--radius-inset); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); cursor: grab; }
.cb-tg-board article:active { cursor: grabbing; }
.cb-tg-board article > span, .cb-tg-board article p { margin: 0; color: var(--ink-3); font-size: 12px; }
.cb-tg-list { display: grid; gap: 8px; }
.cb-tg-list article { border-radius: var(--radius-inset); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.cb-tg-list article > button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.cb-tg-list article > button span { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.cb-tg-list ul { margin: 0; padding: 0 14px 12px 42px; display: grid; gap: 8px; list-style: none; }
.cb-tg-list li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.cb-tg-cal { display: grid; grid-template-columns: 1fr 220px; gap: var(--space-3); }
.cb-tg-cal .grid { display: grid; grid-template-columns: repeat(7, minmax(96px, 1fr)); gap: 1px; overflow: auto; border-radius: var(--radius-inset); background: var(--border); }
.cb-tg-cal .grid > div { min-height: 116px; display: grid; align-content: start; gap: 5px; padding: 8px; background: var(--card); }
.cb-tg-cal .grid > div.today { box-shadow: inset 0 0 0 2px var(--focus); }
.cb-tg-cal b { font-size: 12px; color: var(--ink-3); }
.cb-tg-cal button, .cb-tg-cal .nodate span { display: block; width: 100%; min-height: 26px; border: 0; border-radius: 8px; padding: 4px 6px; background: var(--inset); color: var(--ink); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: grab; }   /* без nowrap многоточие не работает: длинное слово резалось о край плашки в колонке 76 px (У-0239) */
.cb-tg-cal .nodate { display: grid; align-content: start; gap: 6px; padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); }
.cb-tg-time { position: relative; display: grid; gap: 8px; padding-top: 30px; }
.cb-tg-time .scale { position: absolute; left: 220px; right: 16px; top: 0; display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12px; }
.cb-tg-time .row { display: grid; grid-template-columns: 210px minmax(260px, 1fr); align-items: center; gap: 10px; min-height: 36px; }
.cb-tg-time .track { position: relative; height: 18px; border-radius: var(--radius-pill); background: var(--inset); overflow: hidden; }
.cb-tg-time .track i { position: absolute; top: 3px; bottom: 3px; border-radius: var(--radius-pill); background: var(--flame); }
.cb-tg-time > .today { position: absolute; top: 18px; bottom: 0; width: 1px; background: var(--bad); }
.cb-tg-time > .today > b { position: absolute; top: -2px; left: 4px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font-size: 11px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-ring); }
.cb-tg-editor { display: grid; gap: var(--space-4); }
.cb-tg-editor .new { display: grid; grid-template-columns: minmax(160px, 1fr) auto minmax(180px, 1fr) auto auto; gap: var(--space-2); align-items: end; padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-tg-editor label { display: grid; gap: 5px; color: var(--ink-3); font-size: 12px; }
.cb-tg-editor input { min-height: 38px; border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; background: var(--card); color: var(--ink); }
.cb-tg-editor .fields { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: var(--space-3); }
.cb-tg-editor article { display: grid; gap: 6px; padding: var(--space-3); border-radius: var(--radius-inset); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-tg-editor article small, .cb-tg-editor article span { color: var(--ink-3); }
.cb-tg-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.cb-tg-work > *, .cb-tg-grid, .cb-tg-grid > * { min-width: 0; }
.cb-tg-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.cb-tg-work > header h2 { margin: 0; font-size: 20px; line-height: 1.15; }
.cb-tg-work > header small { color: var(--ink-3); }
.cb-tg-filterline { justify-content: flex-start; }
.cb-tg-feed { display: grid; gap: 8px; padding: var(--space-4); border-radius: var(--radius-inset); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-tg-feed p { margin: 0; color: var(--ink-2); }
.cb-tg-exline { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 900px) {
  .cb-tg-board { grid-template-columns: repeat(5, minmax(210px, 78vw)); }
  .cb-tg-cal { grid-template-columns: 1fr; }
  .cb-tg-editor .new, .cb-tg-editor .fields { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .cb-tg-table th, .cb-tg-table td { height: 44px; padding: 7px 8px; }
  .cb-tg-table .sticky2 { min-width: 190px; width: 190px; }
  .cb-tg-views .saved code { display: none; }
  .cb-tg-cal .grid { grid-template-columns: repeat(7, minmax(76px, 1fr)); }
  .cb-tg-time .row { grid-template-columns: 1fr; }
  .cb-tg-time .scale { left: 0; }
  .cb-tg-dfields { grid-template-columns: 1fr; }
}
@media (hover: none), (pointer: coarse) {
  .cb-tg-mi, .cb-tg-views .modes button, .cb-tg-cal button, .cb-tg-list article > button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-tg * { transition: none !important; }
}

/* Адаптация (Claude, 23.09): управление колонкой видно при наведении и фокусе — в покое только название и активная сортировка */
.cb-tg-table thead th .mini, .cb-tg-table thead th .hline > .cb-i:first-child, .cb-tg-table thead th .cb-tg-menu > button:not([aria-expanded="true"]),
.cb-tg-table thead th .hline > button:not(.mini) .cb-i.cb-tg-sort-idle { opacity: 0; transition: opacity .12s; }
.cb-tg-table thead th:hover .mini, .cb-tg-table thead th:focus-within .mini,
.cb-tg-table thead th:hover .hline > .cb-i:first-child, .cb-tg-table thead th:focus-within .hline > .cb-i:first-child,
.cb-tg-table thead th:hover .cb-tg-menu > button, .cb-tg-table thead th:focus-within .cb-tg-menu > button,
.cb-tg-table thead th:hover .cb-tg-sort-idle, .cb-tg-table thead th:focus-within .cb-tg-sort-idle { opacity: 1; }
@media (hover: none) { .cb-tg-table thead th .mini, .cb-tg-table thead th .cb-tg-menu > button { opacity: 1; } }
.cb-tg-table thead th .cb-tg-sort-idle { opacity: 0; display: inline-flex; transition: opacity .12s; }
.cb-tg-table thead th:hover .cb-tg-sort-idle, .cb-tg-table thead th:focus-within .cb-tg-sort-idle { opacity: 1; }

/* DataGrid readOnly: колонки выбора нет — заголовок объекта прилипает к левому краю */
.cb-tg-grid.ro .cb-tg-table .sticky2 { left: 0; }

/* ── src/styles/u-team.css ── */
/* Команда и взаимодействие. Цвет и радиус только токенами. */
.cb-tm { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; position: relative; color: var(--ink); font-size: 13px; line-height: 18px; }
.cb-tm.flat { background: transparent; padding: 0; }
:where(.cb-tm) p, :where(.cb-tm) ul, :where(.cb-tm) ol, :where(.cb-tm) dl { margin: 0; padding: 0; list-style: none; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-tm .hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-tm .hd > div:first-child { display: grid; gap: 2px; min-width: 0; }
.cb-tm .hd b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-tm .hd > div:first-child > span, .cb-tm .ft { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-tm .hd-x { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; max-width: 100%; }
.cb-tm .hd-x .cb-seg { max-width: 100%; }
.cb-tm .live:empty { display: none; }
.cb-tm .live { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-tm .cb-check { width: 24px; height: 24px; }
.cb-tm .na { color: var(--ink-3); }
.cb-tm .ai { display: inline-grid; place-items: center; height: 16px; padding: 0 4px; margin-left: 4px; border-radius: 4px; background: var(--flame-soft); color: color-mix(in oklab, var(--flame-deep) 60%, var(--ink)); font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; }
[data-theme="dark"] .cb-tm .ai { color: var(--flame); }
.cb-tm .acts { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.cb-tm textarea, .cb-tm select, .cb-tm input[type="time"] { width: 100%; border: 0; border-radius: var(--radius-chip); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink); font: inherit; font-size: 13px; padding: 8px 10px; }
.cb-tm select { width: auto; min-height: 32px; }
.cb-tm input[type="time"] { width: auto; min-height: 32px; }
.cb-tm textarea:focus-visible, .cb-tm select:focus-visible, .cb-tm input[type="time"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-tm-dig { cursor: pointer; border-radius: 6px; }
.cb-tm-dig:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); }
.cb-tm-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.cb-tm-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-3); }

/* лицо */
.cb-tm-face { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; position: relative; flex: none; font-weight: 600; font-size: 12px; color: var(--ink); background: var(--flame-soft); }
.cb-tm-face.s16 { width: 16px; height: 16px; font-size: 11px; line-height: 11px; letter-spacing: -.05em; }
.cb-tm-face.s20 { width: 20px; height: 20px; font-size: 11px; line-height: 11px; }
.cb-tm-face.s24 { width: 24px; height: 24px; font-size: 11px; }
.cb-tm-face.s32 { width: 32px; height: 32px; }
.cb-tm-face.s40 { width: 40px; height: 40px; font-size: 14px; }
.cb-tm-face.s56 { width: 56px; height: 56px; font-size: 18px; }
.cb-tm-face.t0 { background: var(--flame-soft); }
.cb-tm-face.t1 { background: var(--cold-1); }
.cb-tm-face.t2 { background: var(--seq-1); }
.cb-tm-face.t3 { background: var(--inset-hover); }
.cb-tm-face.t4 { background: var(--mono-2); }
.cb-tm-face.t5 { background: var(--seq-2); }
.cb-tm-face.t6 { background: var(--cold-2); }
.cb-tm-face.t7 { background: var(--mono-1); }
.cb-tm-face.ag { border-radius: 10px; background: var(--card-ink); color: var(--on-card-ink); }
.cb-tm-face.ag.s16 { border-radius: 4px; }
.cb-tm-face.ag.s20 { border-radius: 6px; }
.cb-tm-face.ag.s24 { border-radius: 7px; }
.cb-tm-face.ag.s40 { border-radius: 12px; }
.cb-tm-face.ag.s56 { border-radius: 16px; }
.cb-tm-face img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cb-tm-face > .ai { position: absolute; right: -6px; top: -4px; margin: 0; }   /* метка «ИИ» — в верхнем углу, точка присутствия — в нижнем: не накладываются (У-0251) */
.cb-tm-face .dot { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card); }
.cb-tm-face.s16 .dot, .cb-tm-face.s20 .dot { width: 6px; height: 6px; }
.cb-tm-face .dot.online { background: var(--ok); }
.cb-tm-face .dot.away { background: var(--warn); }
.cb-tm-face .dot.offline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3), 0 0 0 2px var(--card); }
.cb-tm-face .dot.dnd { background: var(--ink); }

.cb-tm-av { position: relative; display: inline-flex; }
.cb-tm-av .hit { border: 0; background: transparent; padding: 0; min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); cursor: pointer; }
.cb-tm-av .tip { display: none; position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); z-index: 4; white-space: nowrap; background: var(--card-ink); color: var(--on-card-ink); border-radius: 8px; padding: 4px 8px; font-size: 12px; line-height: 16px; pointer-events: none; }
.cb-tm-av .hit:hover .tip, .cb-tm-av .hit:focus-visible .tip { display: block; }
.cb-tm-av .pop { position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; width: min(360px, 80vw); background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); padding: var(--space-3); }

.cb-tm-stack { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.cb-tm-stack .row { display: flex; align-items: center; }
.cb-tm-stack .one, .cb-tm-stack .more { border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 50%; min-width: 24px; min-height: 24px; }
.cb-tm-stack .one { margin-left: -8px; }
.cb-tm-stack .one:first-child { margin-left: 0; }
.cb-tm-stack .cb-tm-face { box-shadow: 0 0 0 2px var(--card); }
.cb-tm-stack .more { margin-left: -8px; width: 32px; height: 32px; background: var(--inset); color: var(--ink); font-weight: 600; font-size: 12px; }
.cb-tm-face .ini { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; line-height: 1; }
.cb-tm-face:is(.s16, .s20, .s24, .s32) > .ai { display: none; }   /* до 32 px метка «ИИ» шире лица и ложится на него и на точку присутствия: агента видно по квадрату с искрой и тегу «ИИ» у имени (К-0927-090) */
.cb-tm-stack .pop, .cb-tm-stack .cardpop, .cb-tm .peek { position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; width: min(360px, 86vw); background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); padding: var(--space-2); }
.cb-tm-stack .pop ul { display: grid; }
.cb-tm-stack .pop button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 6px; cursor: pointer; min-height: 36px; }
.cb-tm-stack .pop button:hover, .cb-tm-stack .pop li.on { background: var(--inset); }
.cb-tm-stack .pop small, .cb-tm-stack .pop .t small { display: block; color: var(--ink-3); font-size: 12px; }

/* карточка коллеги */
.cb-tm-card .who { display: flex; gap: var(--space-3); align-items: center; }
.cb-tm-card .who b { font-size: 16px; line-height: 22px; }
.cb-tm-card .who span:not(.cb-tm-face):not(.ini):not(.ai):not(.pres) { display: block; color: var(--ink-2); font-size: 13px; }   /* тег «ИИ» и присутствие — строчные, не на всю ширину (У-0251) */
.cb-tm-card .who .ai { vertical-align: 2px; }
.cb-tm-card .pres { display: inline-flex !important; align-items: center; gap: 6px; color: var(--ink-2) !important; }
.cb-tm-card .pres i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.cb-tm-card .pres i.online { background: var(--ok); }
.cb-tm-card .pres i.away { background: var(--warn); }
.cb-tm-card .pres i.offline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.cb-tm-card .pres i.dnd { background: var(--ink); }
.cb-tm-card dl { display: grid; gap: 0; }
.cb-tm-card dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-2); padding: 8px 0; border-top: 1px solid var(--border); }
.cb-tm-card dt { color: var(--ink-3); }
.cb-tm-card dd { margin: 0; min-width: 0; }
.cb-tm .load { display: grid; gap: 4px; min-width: 0; }
.cb-tm .load b { font-variant-numeric: tabular-nums; }
.cb-tm .load small { color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-tm .load .bar { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--mono-1); overflow: hidden; }
.cb-tm .load .bar em { display: block; height: 100%; background: var(--ink); border-radius: inherit; }

/* комментарии */
.cb-tm-thread .tools { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cb-tm-thread .list { display: grid; gap: var(--space-3); }
.cb-tm .cb-btn.icon { width: var(--control-h-sm); padding: 0; justify-content: center; }   /* Btn с иконкой и ariaLabel — квадратная кнопка-иконка */
/* сообщение (К-0927-090): «32 px аватар | содержимое», аватар у первой строки, ответ — отступом под колонку текста, без своей плашки */
.cb-tm-thread .cmt { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.cb-tm-thread .cmt > .cb-tm-av { align-self: start; margin-top: 10px; }
.cb-tm-thread .cmt.nest { grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-2); }
.cb-tm-thread .cmt.nest > .cb-tm-av { margin-top: 0; }
.cb-tm-thread .cmt.nest > .b { background: transparent; padding: 0; }
/* непрочитанное — точка «не прочитано» у заголовка (.ud), без полосы у карточки (D17, У-0248) */
.cb-tm-thread .b { display: grid; gap: var(--space-2); min-width: 0; background: var(--card); border-radius: var(--radius-chip); padding: var(--space-2) var(--space-3) var(--space-2); }
.cb-tm-thread .cmt.external .b { background: color-mix(in oklab, var(--warn-soft) 65%, var(--card)); }
.cb-tm-thread .mh { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; line-height: 20px; }
.cb-tm-thread .mh > * { white-space: nowrap; }   /* перенос только целыми элементами */
@media (max-width: 480px) { .cb-tm-thread .mh > b, .cb-tm-thread .mh > .lb { white-space: normal; overflow-wrap: break-word; min-width: 0; } }
.cb-tm-thread .mh b { font-weight: 600; }
.cb-tm-thread .atime, .cb-tm-thread .ed, .cb-tm-thread .ud { color: var(--ink-3); font-size: 12px; }
.cb-tm-thread .ud { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--flame); }   /* непрочитанное — точка, слово в aria-label и подсказке */
.cb-tm-thread .lb { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-2); background: var(--inset); border-radius: var(--radius-pill); padding: 2px 8px; }
.cb-tm-thread .cmt p { white-space: pre-wrap; }
.cb-tm-thread .cmt .b, .cb-tm-thread .cmt .mh { min-width: 0; }
.cb-tm-thread .cmt .b { grid-template-columns: minmax(0, 1fr); }   /* дорожка не растёт по min-content черновика */
.cb-tm-thread .cmt .mh { flex-wrap: wrap; overflow-wrap: break-word; }
.cb-tm-thread .at { border: 0; background: var(--flame-soft); color: var(--ink); border-radius: var(--radius-pill); padding: 0 6px; min-height: 24px; font-weight: 600; cursor: pointer; }
.cb-tm-thread blockquote { margin: 0; padding: var(--space-2) var(--space-3); color: var(--ink-2); background: var(--inset); border-radius: 8px; display: flex; justify-content: space-between; gap: 8px; }
.cb-tm-thread blockquote button { border: 0; background: transparent; cursor: pointer; min-width: 24px; min-height: 24px; }
.cb-tm-thread .files { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-tm-thread .file, .cb-tm-appr .file { display: inline-flex; align-items: center; gap: 4px; background: var(--inset); border-radius: var(--radius-pill); padding: 4px 8px; min-height: 28px; }
.cb-tm-thread .file small, .cb-tm-appr .file small { color: var(--ink-3); }
.cb-tm-thread .applied, .cb-tm-thread .rights { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.cb-tm-thread .asg { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }   /* служебная строка — одна, мелко */
.cb-tm-thread .asg .cb-i { flex: none; }
.cb-tm-thread .asg .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-tm-thread .asg b { color: var(--ink-2); font-weight: 600; }
.cb-tm-thread .asg .lnk { flex: none; margin-left: auto; border: 0; background: transparent; padding: 0 4px; min-height: 24px; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; border-radius: 6px; }
.cb-tm-thread .asg .lnk:hover { background: var(--inset); }
/* низ сообщения: реакции слева, действия справа; группа действий не рвётся по одной кнопке */
.cb-tm-thread .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--space-2); }
.cb-tm-thread .tb { display: flex; flex-wrap: nowrap; gap: 2px; margin-left: auto; }
.cb-tm-thread .ib { display: inline-grid; place-items: center; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; }
.cb-tm-thread .ib:hover, .cb-tm-thread .ib[aria-expanded="true"] { background: var(--inset); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {   /* на десктопе действия видны при наведении и фокусе, на таче — всегда */
  .cb-tm-thread .b > .foot .tb { opacity: 0; transition: opacity .12s; }
  .cb-tm-thread .b:hover > .foot .tb, .cb-tm-thread .b:focus-within > .foot .tb, .cb-tm-thread .tb:has([aria-expanded="true"]) { opacity: 1; }
}
.cb-tm-thread .rxpick { display: flex; flex-wrap: wrap; gap: 4px; }
.cb-tm-thread .rx { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cb-tm-thread .rc { display: inline-flex; align-items: center; gap: 4px; height: 24px; min-height: 24px; border: 0; background: var(--inset); border-radius: var(--radius-pill); padding: 0 8px; cursor: pointer; font-size: 12px; white-space: nowrap; color: var(--ink); }
.cb-tm-thread .rc.on { background: var(--flame-soft); }
.cb-tm-thread .menu { display: grid; gap: 2px; background: var(--inset); border-radius: var(--radius-chip); padding: 4px; }
.cb-tm-thread .menu button, .cb-tm-thread .menu li { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 6px; cursor: pointer; min-height: 32px; }
.cb-tm-thread .menu li.on, .cb-tm-thread .menu button:hover { background: var(--card); }
.cb-tm-thread .menu small { display: block; color: var(--ink-3); font-size: 12px; }
.cb-tm-thread .reps { display: grid; gap: var(--space-3); margin-top: 4px; }
.cb-tm-thread .draft { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; background: var(--inset); border-radius: var(--radius-chip); padding: var(--space-3); }
.cb-tm-thread .draft .dh { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 2px 6px; }
.cb-tm-thread .draft .dh > .cb-i { margin-top: 2px; }
.cb-tm-thread .draft .dh > b, .cb-tm-thread .draft .dh > span { min-width: 0; overflow-wrap: break-word; }
.cb-tm-thread .draft .dh > span { grid-column: 2; font-size: 12px; color: var(--ink-3); }
/* черновик ИИ: «Принять» — основная; «Править · Отклонить» — пара, переносится только вместе */
.cb-tm-thread .draft .acts { gap: 4px var(--space-2); }
.cb-tm-thread .draft .sec { display: inline-flex; flex-wrap: nowrap; gap: 2px; }
@media (max-width: 480px) { .cb-tm-thread .draft .sec { flex-wrap: wrap; } .cb-tm-thread .draft .acts { min-width: 0; } }
.cb-tm-thread .draft .sec .cb-btn { padding: 0 var(--space-2); }
.cb-tm-thread .box { display: grid; gap: var(--space-2); background: var(--card); border-radius: var(--radius-chip); padding: var(--space-3); }
.cb-tm-thread .box.external { background: color-mix(in oklab, var(--warn-soft) 55%, var(--card)); }
.cb-tm-thread .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cb-tm-thread .kbd { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.cb-tm-thread .sees { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12px; }
.cb-tm-thread .quoting { font-size: 12px; color: var(--ink-2); display: flex; gap: 8px; }
.cb-tm-thread .quoting button { border: 0; background: none; color: var(--ink); cursor: pointer; text-decoration: underline; min-height: 24px; }
.cb-tm-thread .peek { position: relative; }

/* журнал */
.cb-tm-log ol { display: grid; gap: var(--space-2); }
.cb-tm-log li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: flex-start; }
.cb-tm-log .mh { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.cb-tm-log .mh span { color: var(--ink-3); font-size: 12px; }
.cb-tm-log .what { font-weight: 600; }
.cb-tm-log .diff { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cb-tm-log .diff s { color: var(--ink-3); text-decoration: line-through; }
.cb-tm-log .why { display: block; color: var(--ink-3); font-size: 12px; }

/* моя работа */
.cb-tm-work .scroll { display: grid; gap: var(--space-3); max-height: 640px; overflow: auto; }
.cb-tm-work section header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.cb-tm-work section header span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.cb-tm-work section header b { font-variant-numeric: tabular-nums; }
.cb-tm-work ul { display: grid; gap: 4px; }
.cb-tm-work li { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--card); border-radius: 10px; padding: var(--space-1) 8px; }
.cb-tm-work .go .cb-status { display: flex; width: fit-content; font-size: 12px; margin-top: 2px; }   /* срок словом с точкой вместо полосы у строки (D17, У-0248) */
.cb-tm-work li.done { opacity: .7; }
.cb-tm-work .go { border: 0; background: transparent; text-align: left; cursor: pointer; min-height: 32px; min-width: 0; flex: 1; }
.cb-tm-work .go b { display: block; font-weight: 600; }
.cb-tm-work .go small, .cb-tm-work li small { color: var(--ink-3); font-size: 12px; }
.cb-tm-work .qa { display: inline-flex; gap: 2px; flex: none; }
.cb-tm-work .empty { color: var(--ink-3); font-size: 12px; padding: 2px 4px 8px; }

/* следят */
.cb-tm-watch .ppl { display: grid; gap: 6px; }
.cb-tm-watch .ppl li { display: flex; align-items: center; gap: 8px; }
.cb-tm-watch .ppl small { display: block; color: var(--ink-3); }
.cb-tm-watch .now { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-tm-watch .type { display: flex; align-items: center; gap: 6px; min-height: 24px; color: var(--ink-3); font-size: 12px; }
.cb-tm-watch .type.on { color: var(--ink); }
.cb-tm-watch .dots { display: inline-flex; gap: 3px; }
.cb-tm-watch .dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); animation: cb-tm-dot 1.2s infinite; }
.cb-tm-watch .dots i:nth-child(2) { animation-delay: .15s; }
.cb-tm-watch .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cb-tm-dot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cb-tm-watch .dots i { animation: none; opacity: 1; }
}

/* исполнители */
.cb-tm-pick .recent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cb-tm-pick .recent button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--card); border-radius: var(--radius-pill); padding: 2px 8px 2px 2px; min-height: 28px; cursor: pointer; }
.cb-tm-pick .recent button.on { background: var(--flame-soft); }
.cb-tm-pick ul { display: grid; gap: 4px; }
.cb-tm-pick li { display: grid; gap: 4px; background: var(--card); border-radius: 10px; padding: var(--space-1) 8px; position: relative; }
.cb-tm-pick li label { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.cb-tm-pick .t small { display: block; color: var(--ink-3); font-size: 12px; }
.cb-tm-pick .rights { color: var(--ink-2); font-size: 12px; line-height: 16px; padding-left: 28px; }
.cb-tm-pick .sel { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; min-height: 28px; }

/* передача и согласование */
.cb-tm-hand .cols, .cb-tm-hand .fld { display: grid; gap: 6px; }
.cb-tm-hand .cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.cb-tm-hand li { display: flex; gap: 6px; align-items: flex-start; padding: 3px 0; }
.cb-tm-hand .sum { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.cb-tm-hand .okl { color: var(--ink-2); }
.cb-tm-appr dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); }
.cb-tm-appr dt { color: var(--ink-3); }
:where(.cb-tm-appr) dd { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-tm-appr .files { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-tm-appr .hist { display: grid; gap: 6px; }
.cb-tm-appr .hist li { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--ink-2); }
.cb-tm-appr .back { display: grid; gap: 8px; }

/* справочник */
.cb-tm-dir .bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.cb-tm-dir .bar .cb-search { flex: 1; min-width: 180px; background: var(--card); }
.cb-tm-dir section { display: grid; gap: 4px; }
.cb-tm-dir h3 { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.cb-tm-dir li button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: var(--card); border-radius: 10px; padding: 6px 8px; cursor: pointer; min-height: 44px; }
.cb-tm-dir .t { flex: 1; min-width: 0; }
.cb-tm-dir .t small { display: block; color: var(--ink-3); }
.cb-tm-dir .pres { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.cb-tm-dir .pres::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--ink-3); vertical-align: 1px; }
.cb-tm-dir .pres.online::before { background: var(--ok); }
.cb-tm-dir .pres.away::before { background: var(--warn); }
.cb-tm-dir .pres.offline::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.cb-tm-dir .pres.dnd::before { background: var(--ink); }
.cb-tm-dir .peek { position: relative; }

/* оргструктура */
.cb-tm-org .tree, .cb-tm-org .tree ul { display: grid; gap: 2px; }
.cb-tm-org .tree ul { margin-left: 22px; padding-left: 10px; border-left: 1px solid var(--border); }
.cb-tm-org .row { display: flex; align-items: center; gap: 6px; min-height: 32px; }
.cb-tm-org .exp { width: 24px; height: 24px; border: 0; background: transparent; border-radius: 6px; display: inline-grid; place-items: center; flex: none; }
.cb-tm-org button.exp { cursor: pointer; }
.cb-tm-org button.exp:hover { background: var(--inset-hover); }
.cb-tm-org .t { line-height: 20px; }
.cb-tm-org .t small { display: block; color: var(--ink-3); font-size: 12px; line-height: 18px; }
.cb-tm-org .peek { margin-top: var(--space-2); }

/* нагрузка */
.cb-tm-load .scroll { overflow: auto; }
.cb-tm-load table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 12px; }
.cb-tm-load th, .cb-tm-load td { text-align: left; vertical-align: top; padding: 6px; border-bottom: 1px solid var(--border); font-weight: 500; }
.cb-tm-load thead th { color: var(--ink-3); font-weight: 600; }
.cb-tm-load th[scope="row"] { white-space: nowrap; }
.cb-tm-load th[scope="row"] .cb-tm-face { display: inline-grid; vertical-align: middle; margin-right: 6px; }
.cb-tm-load td.miss { color: var(--ink-3); }
.cb-tm-load td.hot { background: var(--flame-soft); }
.cb-tm-load .chip { display: flex; align-items: center; gap: 4px; margin-top: 4px; border: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); border-radius: 8px; padding: 4px 6px; cursor: grab; text-align: left; min-height: 28px; max-width: 140px; }
.cb-tm-load .sum small { display: block; color: var(--ink-3); }
.cb-tm-load .ag th { color: var(--ink-3); }
.cb-tm-load .prev { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--card); border-radius: var(--radius-chip); padding: 10px 12px; }

/* уведомления */
.cb-tm-rules .scroll { overflow: auto; }
.cb-tm-rules table { border-collapse: collapse; width: 100%; min-width: 420px; }
.cb-tm-rules th, .cb-tm-rules td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
.cb-tm-rules thead th { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.cb-tm-rules thead .cb-i { vertical-align: -3px; margin-right: 4px; }
.cb-tm-rules td { text-align: center; }
.cb-tm-rules .opts { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cb-tm-rules .opt, .cb-tm-rules .hours { display: inline-flex; align-items: center; gap: 8px; }
.cb-tm-rules .hours label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }

/* пространство */
.cb-tm-space { gap: var(--space-4); }
.cb-tm-space .top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-tm-space .top b { font-size: 18px; line-height: 24px; display: block; }
.cb-tm-space .top span { color: var(--ink-2); font-size: 13px; }
.cb-tm-space .opened { display: block; color: var(--ink); font-weight: 600; }
.cb-tm-space .grid { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(220px, 280px); gap: var(--space-3); align-items: start; }
.cb-tm-space .col { display: grid; gap: var(--space-3); min-width: 0; background: var(--card); border-radius: var(--radius-card); padding: var(--space-3); }
.cb-tm-space .obj { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.cb-tm-space .obj b { display: block; }
.cb-tm-space .obj span { color: var(--ink-3); font-size: 12px; }
.cb-tm-space .as { margin-left: auto; }
@media (max-width: 980px) {
  .cb-tm-space .grid { grid-template-columns: 1fr; }
  .cb-tm-card dl > div, .cb-tm-appr dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* адаптация 23.09: тинты аватаров — только нейтральные ряды (статусные ok/warn/bad означают статус, не человека);
   зона нажатия равна лицу, «+N» того же роста — стопка ровная на любом размере */
.cb-tm-stack .one { min-width: 0; min-height: 0; display: inline-grid; }
.cb-tm-stack .row:has(.s24) .one + .one, .cb-tm-stack .row:has(.s24) .more { margin-left: -4px; }
.cb-tm-stack .row:has(.s20) .one + .one, .cb-tm-stack .row:has(.s20) .more { margin-left: -3px; }
.cb-tm-stack .row:has(.s24) .more { width: auto; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--radius-pill); font-size: 11px; }
.cb-tm-stack .row:has(.s20) .more { width: auto; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-pill); font-size: 11px; }
.cb-tm-face.s24 .ini, .cb-tm-face.s20 .ini { letter-spacing: -.02em; }
@media (pointer: coarse) { .cb-tm-stack .one, .cb-tm-stack .more { min-width: 24px; min-height: 24px; } }

/* инициалы всегда --ink на своём тинте: чужие правила span карточек и строк их не перекрашивают (G3, тёмная, 23.09) */
.cb-tm-face > .ini.ini { color: var(--ink); }

/* OrgChart / mindmap: overview, one branch, role details. No whole-screen shrinking. */
.cb-org-map { min-width:0; }
.cb-om-context { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); min-height:var(--control-h); flex-wrap:wrap; }
.cb-om-scope { background:var(--inset); border-radius:var(--radius-pill); padding:var(--space-2) var(--space-4); color:var(--ink); font-size:13px; font-weight:500; }
.cb-om-context-label { color:var(--ink-3); font-size:13px; flex:1; }
.cb-om-viewport { border-radius:var(--radius-inset); background:var(--inset); overflow:auto; max-height:780px; overscroll-behavior:contain; }
.cb-om-stage { position:relative; margin:0 auto; }
.cb-om-links { position:absolute; top:0; left:0; pointer-events:none; }
.cb-om-links path { fill:none; stroke:var(--ink-3); stroke-width:1; }
.cb-om-node { position:absolute; width:264px; height:96px; padding:var(--space-4); display:flex; align-items:center; gap:var(--space-3); border:0; border-radius:var(--radius-inset); box-shadow:var(--shadow-ring); background:var(--card); color:var(--ink); text-align:left; font:inherit; cursor:pointer; }
.cb-om-node:hover { background:var(--inset-hover); }
.cb-om-node:focus-visible, .cb-om-parent:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.cb-om-node.hub { height:96px; box-shadow:var(--shadow-ring),inset 0 3px var(--flame); }
.cb-om-node.selected { outline:2px solid var(--focus); outline-offset:2px; }
.cb-om-copy { display:grid; gap:var(--space-1); min-width:0; flex:1; }
.cb-om-copy b { font-size:15px; line-height:20px; font-weight:600; overflow-wrap: break-word; }
.cb-om-copy small { font-size:13px; line-height:18px; color:var(--ink-3); }
.cb-om-parent { position:absolute; display:flex; align-items:center; justify-content:center; gap:var(--space-2); width:224px; height:68px; border:0; border-radius:var(--radius-pill); background:var(--card); color:var(--ink-2); box-shadow:var(--shadow-ring); font:inherit; font-size:14px; cursor:pointer; }
.cb-om-parent:hover { background:var(--inset-hover); }
.cb-om-footer { display:flex; gap:var(--space-2); align-items:center; padding-top:var(--space-4); font-size:13px; line-height:18px; color:var(--ink-3); }
.cb-om-details { margin-top:var(--space-4); padding:var(--space-5); border-radius:var(--radius-inset); background:var(--inset); }
.cb-om-detail-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.cb-om-detail-head h3 { margin:0; font-size:20px; line-height:26px; font-weight:600; }
.cb-om-details p { margin:var(--space-3) 0; font-size:14px; line-height:20px; color:var(--ink-2); }
.cb-om-details dl { display:flex; flex-wrap:wrap; gap:var(--space-6); margin:0; }
.cb-om-details dt { color:var(--ink-3); font-size:13px; }
.cb-om-details dd { margin:var(--space-1) 0 0; font-size:14px; overflow-wrap: break-word; }
/* The scroller owns safe inner space; the rounded shell never clips its heading. */
.cb-tm-org.embedded { padding:0; gap:0; }
.cb-org-tree-viewport { overflow:auto; max-height:780px; padding:var(--space-1); margin:calc(-1 * var(--space-1)); overscroll-behavior:contain; scroll-padding:var(--space-4); }
.cb-tm-org.embedded .cb-org-tree-viewport { padding:var(--space-4); margin:0; border-radius:var(--radius-inset); }
.cb-org-tree-viewport > .tree { min-width:0; }
.cb-org-tree-viewport .node { min-width:0; }
.cb-tm-org .t { min-width:0; flex:1; overflow-wrap: break-word; }
.cb-tm-org .row > svg { flex:none; }
.cb-tm-org button:focus-visible, .cb-org-tree-viewport:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
@media(max-width:600px) { .cb-org-tree-viewport { max-height:650px; } }
@media(max-width:600px) { .cb-org-map > .cb-card-h { flex-wrap:wrap; gap:var(--space-4); } .cb-om-context-label { flex-basis:100%; } .cb-om-viewport { max-height:650px; } .cb-org-map .cb-tm-org .exp { min-width:44px; min-height:44px; } }

.cb-org-map .cb-tm-face.ag > .ini.ini { color:var(--on-card-ink); }
.cb-org-map .cb-tm-face > .ai { display:inline-grid; place-items:center; height:16px; padding:0 var(--space-1); border-radius:var(--radius-check); background:var(--inset); color:var(--ink-2); font-size:11px; line-height:14px; font-weight:600; }
@media(max-width:600px) {
  .cb-om-stage { width:var(--om-mobile-width,100%) !important; height:auto !important; display:flex; flex-direction:column; align-items:center; gap:var(--space-4); padding:var(--space-4) 0; }
  .cb-om-links { display:none; }
  .cb-om-node,.cb-om-parent { position:relative; left:auto !important; top:auto !important; width:calc(100% - var(--space-6)); flex:none; }
  .cb-om-node.branch { width:calc(100% - var(--space-8)); margin-left:var(--space-4); }
  .cb-om-node.branch::before { content:''; position:absolute; left:calc(-1 * var(--space-3)); top:48px; width:var(--space-3); border-top:1px solid var(--ink-3); }
  .cb-om-node.branch::after { content:''; position:absolute; left:calc(-1 * var(--space-3)); top:calc(-1 * var(--space-4)); bottom:calc(-1 * var(--space-4)); border-left:1px solid var(--ink-3); }
  .cb-om-node.branch:last-child::after { bottom:48px; }
}

/* User-controlled map zoom leaves the screen and role details at native size. */
.cb-om-zoom { display:flex; align-items:center; gap:var(--space-1); flex:none; border-radius:var(--radius-pill); background:var(--inset); padding:var(--space-1); }
.cb-om-zoom-reset { min-width:64px; font-variant-numeric:tabular-nums; }
.cb-om-zoom .cb-ibtn { min-width:44px; min-height:44px; }
.cb-om-zoom .cb-ibtn:disabled { opacity:.4; cursor:default; }

/* ── src/styles/v-os.css ── */
/* ── ОС: знания и отделы (CatalystBento · группа v-os) ─────────────────
   SSOT-пространство, раздел, предложение правки, каскад, доступ, свежесть, контекст агента;
   домашний экран отдела, навигация пространств, оболочка ОС, матрица «кому что важно».
   Корень блока .cb-os: самостоятельная плашка на inset внутри карточки; раскладка реагирует на ширину контейнера. */
.cb-os { --os-bg: var(--inset); --os-plate: var(--card); color: var(--ink); font-size: 13px; line-height: 18px; min-width: 0; }
:where(.cb-os) p { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-os) h2, :where(.cb-os) h3, :where(.cb-os) h4 { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-os) ul, :where(.cb-os) ol { list-style: none; margin: 0; padding: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-os .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cb-os [tabindex="-1"]:focus { outline: none; }

/* люди и агенты */
.cb-os-pav { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: color-mix(in oklab, var(--flame) 16%, var(--card)); color: var(--ink); box-shadow: 0 0 0 2px var(--os-plate, var(--card)); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.cb-os-pav.xs { width: 22px; height: 22px; font-size: 11px; }
.cb-os-pav.sm { width: 28px; height: 28px; }
.cb-os-pav .pr { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card); background: var(--ink-3); }
.cb-os-pav .pr.on { background: var(--ok); }
.cb-os-pav .pr.away { background: var(--warn); }
.cb-os-pav .pr.off { background: transparent; box-shadow: 0 0 0 2px var(--card), inset 0 0 0 1.5px var(--ink-3); }
.cb-os-aav { width: 28px; height: 28px; flex: none; border-radius: 8px; display: inline-grid; place-items: center; background: var(--card-ink); color: var(--on-card-ink); }
.cb-os-aav.xs { width: 22px; height: 22px; border-radius: 6px; }
.cb-os-ai { display: inline-grid; place-items: center; height: 16px; padding: 0 5px; margin-left: 6px; border-radius: 5px; font-size: 11px; line-height: 1; font-weight: 700; background: var(--flame-soft); color: color-mix(in oklab, var(--flame-deep) 60%, var(--ink)); vertical-align: middle; }
[data-theme="dark"] .cb-os-ai { color: var(--flame); }
.cb-os-stack { display: inline-flex; align-items: center; }
.cb-os-stack > .cb-os-pav + .cb-os-pav { margin-left: -4px; }
.cb-os-stack .more { margin-left: -4px; height: 28px; min-width: 28px; padding: 0 6px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; background: var(--inset); box-shadow: 0 0 0 2px var(--card); font-size: 11px; font-weight: 600; color: var(--ink-2); }
.cb-os-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--ink-2); }
.cb-os-who b { color: var(--ink); font-weight: 600; }
.cb-os-n { font-variant-numeric: tabular-nums; border-radius: 4px; }
.cb-os-live { font-size: 12px; color: var(--ink-2); }
.cb-os-live:empty { display: none; }

/* шапка блока */
.cb-os-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-os-hd .t { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; flex: 1 1 260px; }
.cb-os-hd .ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--os-plate); color: var(--ink-2); }
.cb-os-hd h3 { font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-os-hd .t p { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-os-hd .x { display: flex; align-items: center; gap: var(--space-2); }
.cb-os-note { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 17px; color: var(--ink-2); }
.cb-os-note .cb-i, .cb-os-src .cb-i { flex: none; margin-top: 1px; color: var(--ink-3); }
.cb-os-src { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-os-hint { font-size: 11px; line-height: 15px; color: var(--ink-3); }
.cb-os-link { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; border: 0; background: none; padding: 0; color: var(--ink); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-color: var(--mono-3); text-underline-offset: 2px; border-radius: 4px; }
.cb-os-link:hover { text-decoration-color: var(--ink); }
.cb-os-link:focus-visible, .cb-os-tree [role="treeitem"]:focus-visible, .cb-os-tabs [role="tab"]:focus-visible, .cb-os-lists .row:focus-visible, .cb-os-my .row:focus-visible,
.cb-os-nav .it:focus-visible, .cb-os-find:focus-visible, .cb-os-swb:focus-visible, .cb-os-rmb:focus-visible, .cb-os-chip:focus-visible, .cb-os-burger:focus-visible, .cb-os-q:focus-visible,
.cb-os-in:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* поля ввода и таблицы */
.cb-os-in { width: 100%; box-sizing: border-box; min-height: 36px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; line-height: 18px; resize: vertical; }
.cb-os-form { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--os-plate); }
.cb-os-form label { display: flex; flex-direction: column; gap: 4px; }
.cb-os-form label > span { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.cb-os-tw { overflow-x: auto; min-width: 0; border-radius: 12px; }
.cb-os-tbl { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.cb-os-tbl thead th { text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--os-plate); padding: 8px 12px; white-space: nowrap; }
.cb-os-tbl tbody th, .cb-os-tbl tbody td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--border); vertical-align: top; }
.cb-os-tbl tbody th { font-weight: 600; }
.cb-os-tbl .r { text-align: right; }
.cb-os-tbl .c { text-align: center; }
.cb-os-tbl td.chg { background: var(--flame-soft); }

/* ══ 1. SsotSpace ══ */
.cb-os-space, .cb-os-sec, .cb-os-prop, .cb-os-imp, .cb-os-acc, .cb-os-fr, .cb-os-ctx, .cb-os-rm, .cb-os-nav, .cb-os-dh { display: flex; flex-direction: column; gap: var(--space-4); }
.cb-os-space { container-type: inline-size; background: var(--os-bg); border-radius: var(--radius-inset); padding: var(--space-4); }
.cb-os-space-g { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@container (max-width: 760px) { .cb-os-space-g { grid-template-columns: minmax(0, 1fr); } }
.cb-os-tree-w { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-os-tree-w .cb-seg { flex-wrap: wrap; }
.cb-os-closed { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-2); padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--mono-3); }
.cb-os-closed .cb-i { flex: none; margin-top: 1px; }
.cb-os-tree { display: flex; flex-direction: column; gap: 2px; background: var(--os-plate); border-radius: var(--radius-inset); padding: var(--space-1); }
.cb-os-tree [role="treeitem"] { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: var(--space-1) 8px; border-radius: 10px; cursor: pointer; transition: background-color .12s; }
.cb-os-tree [role="treeitem"]:hover { background: var(--inset); }
.cb-os-tree .cat { color: var(--ink-2); }
.cb-os-tree .cat b { font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.cb-os-tree .cat .n { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-os-tree .sec { padding-left: 28px; align-items: flex-start; }
.cb-os-tree .sec.on { background: var(--inset); }   /* выбранное — подложкой, без полосы-акцента (D16, У-0225) */
.cb-os-tree .sec .own { padding-top: 1px; }
.cb-os-tree .tt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cb-os-tree .tt b { display: flex; align-items: center; gap: 4px; font-weight: 500; }
.cb-os-tree .tt small { font-size: 11px; line-height: 15px; color: var(--ink-3); }
.cb-os-tree .sec.locked .tt b { color: var(--ink-2); }
.cb-os-tree .late { color: var(--warn); padding-top: 2px; }
.cb-os-dot { flex: none; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.cb-os-space-r { min-width: 0; }

/* ══ 2. SsotSection ══ */
.cb-os-sec { background: var(--os-plate); border-radius: var(--radius-inset); padding: var(--space-4); --os-plate: var(--inset); }
.cb-os-sec.card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-5); }
.cb-os-sech { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.cb-os-sech .t { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 280px; }
.cb-os-sech .t > small { font-size: 11px; line-height: 15px; color: var(--ink-3); }
.cb-os-sech h3 { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-os-sech .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: var(--ink-2); }
.cb-os-sech .meta .late { color: var(--warn); font-weight: 500; }
.cb-os-sech .a { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-os-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.cb-os-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 10px 10px 0 0; box-shadow: inset 0 -2px 0 transparent; }
.cb-os-tabs [role="tab"]:hover { color: var(--ink); }
.cb-os-tabs [role="tab"].on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.cb-os-tabs .n { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-os-body { display: flex; flex-direction: column; gap: var(--space-4); }
.cb-os-blk { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-os-blk h4 { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); }
.cb-os-blk > p { font-size: 14px; line-height: 21px; max-width: 42em; }
.cb-os-rules { counter-reset: r; display: flex; flex-direction: column; gap: 6px; }
.cb-os-rules li { counter-increment: r; display: flex; gap: 8px; font-size: 14px; line-height: 20px; }
.cb-os-rules li::before { content: counter(r); flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--os-plate); font-size: 11px; font-weight: 600; color: var(--ink-2); margin-top: 0; }
.cb-os-blk.pass dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0; padding: var(--space-3); border-radius: 12px; background: var(--os-plate); }
.cb-os-blk.pass dt { font-size: 12px; color: var(--ink-3); }
.cb-os-blk.pass dd { margin: 0; }
.cb-os-sec .cb-os-tbl thead th { background: var(--inset); }
.cb-os-hist { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); }
.cb-os-hist li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 2px 12px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.cb-os-hist li > b { grid-row: span 3; font-weight: 600; }
.cb-os-hist li > span { font-size: 12px; color: var(--ink-3); }
.cb-os-hist li > small { font-size: 12px; color: var(--ink-2); }

/* ══ 3. SsotProposal ══ */
.cb-os-prop { background: var(--os-bg); border-radius: var(--radius-inset); padding: var(--space-4); gap: var(--space-3); }
.cb-os-sec .cb-os-prop { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); --os-plate: var(--inset); }
.cb-os-proph { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.cb-os-proph > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-os-proph small { font-size: 11px; line-height: 15px; color: var(--ink-3); }
.cb-os-proph b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-os-auth { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cb-os-auth .at { font-size: 12px; color: var(--ink-3); }
.cb-os-why { font-size: 13px; line-height: 19px; padding: var(--space-2) 12px; border-radius: 12px; background: var(--os-plate); }
.cb-os-why .k { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); margin-bottom: 2px; }
.cb-os-why.miss { background: var(--warn-soft); color: var(--warn); }
.cb-os-diff { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-os-diff li { display: flex; flex-direction: column; gap: 4px; padding: var(--space-2) 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border); }
.cb-os-diff .k { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.cb-os-diff .pair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cb-os-diff .pair > .cb-i { color: var(--ink-3); flex: none; }
.cb-os-diff del { text-decoration: line-through; text-decoration-color: var(--bad); color: var(--ink-2); background: var(--bad-soft); padding: 1px 6px; border-radius: 6px; }
.cb-os-diff ins { text-decoration: none; color: var(--ink); font-weight: 500; background: var(--ok-soft); padding: 1px 6px; border-radius: 6px; }
.cb-os-diff .dl { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-os-dec { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--ok-soft); }
.cb-os-dec b { font-weight: 600; }
.cb-os-dec span { font-size: 12px; color: var(--ink-2); }
.cb-os-log { display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 15px; color: var(--ink-3); border-top: 1px solid var(--border); padding-top: var(--space-2); }

/* ══ 4. SsotImpact ══ */
.cb-os-imp { background: var(--os-bg); border-radius: var(--radius-inset); padding: var(--space-4); }
.cb-os-imp.flat, .cb-os-acc.flat { background: none; padding: var(--space-2) 0 0; }
.cb-os-chg { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 12px; border-radius: 12px; background: var(--os-plate); }
.cb-os-chg .k { font-size: 11px; color: var(--ink-3); }
.cb-os-chg b { font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-os-cnt { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-2); }
.cb-os-cnt b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-os-cnt .ok b { color: var(--ok); }
.cb-os-cnt .bad b { color: var(--bad); }
.cb-os-cnt .warn b { color: var(--warn); }
.cb-os-rg { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-os-rg h4 { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.cb-os-rg h4 .n { font-weight: 400; color: var(--ink-3); }
.cb-os-rg > ul { display: flex; flex-direction: column; background: var(--os-plate); border-radius: 12px; }
.cb-os-rg > ul > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 12px; }
.cb-os-rg > ul > li + li { border-top: 1px solid var(--border); }
.cb-os-rg .t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.cb-os-rg .t b { font-weight: 500; }
.cb-os-rg .t small { font-size: 12px; color: var(--ink-3); }
.cb-os-rg .m { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cb-os-rg .task { font-size: 12px; color: var(--ink-2); }
.cb-os-sec .cb-os-rg > ul, .cb-os-sec .cb-os-chg { background: var(--inset); }

/* ══ 5. SsotAccess ══ */
.cb-os-acc { background: var(--os-bg); border-radius: var(--radius-inset); padding: var(--space-4); }
.cb-os-tbl.acc tbody th, .cb-os-tbl.acc tbody td { padding: 6px 12px; vertical-align: middle; }
.cb-os-tbl.acc .cb-check { margin: 0; }
.cb-os-exc { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-os-exc h4 { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.cb-os-exc ul { display: flex; flex-direction: column; background: var(--os-plate); border-radius: 12px; }
.cb-os-exc li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 8px 12px; }
.cb-os-exc li + li { border-top: 1px solid var(--border); }
.cb-os-exc .t { display: flex; flex-direction: column; min-width: 0; }
.cb-os-exc .t small { font-size: 12px; color: var(--ink-3); }
.cb-os-exc li.off .t { text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-3); }
.cb-os-prev { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--mono-3); }
.cb-os-prev h4 { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.cb-os-prev.on { border-style: solid; border-color: var(--flame); background: var(--flame-soft); }
.cb-os-prev li { font-size: 12px; line-height: 17px; padding-left: 12px; position: relative; }
.cb-os-prev li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); }
.cb-os-sec .cb-os-exc ul { background: var(--inset); }

/* ══ 6. SsotFreshness ══ */
.cb-os-fr { background: var(--os-bg); border-radius: var(--radius-inset); padding: var(--space-4); }
.cb-os-frk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.cb-os-frk > div { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 12px; border-radius: 12px; background: var(--os-plate); }
.cb-os-frk > div > span { font-size: 12px; color: var(--ink-2); }
.cb-os-frk .cb-os-n { font-size: 24px; line-height: 30px; font-weight: 600; align-self: flex-start; }
@media (max-width: 860px) { .cb-os-frk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cb-os-fil { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: var(--os-plate); }   /* без полосы-метки (D17, У-0248) */
.cb-os-fil .h { display: flex; align-items: center; gap: 8px; }
.cb-os-fil .h b { font-weight: 600; }
.cb-os-fil small { font-size: 12px; color: var(--ink-3); }
.cb-os-frl { display: flex; flex-direction: column; background: var(--os-plate); border-radius: 12px; }
.cb-os-frl > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 12px; }
.cb-os-frl > li + li { border-top: 1px solid var(--border); }
.cb-os-frl .t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px; }
.cb-os-frl .t b { font-weight: 500; }
.cb-os-frl .t small { font-size: 12px; color: var(--ink-3); }
.cb-os-frl .use { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: 10px; background: var(--inset); }
.cb-os-frl .use li { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.cb-os-frl .use small { color: var(--ink-3); margin-left: auto; }

/* ══ 7. SsotAgentContext ══ */
.cb-os-ctx { background: var(--os-bg); border-radius: var(--radius-inset); padding: var(--space-4); }
.cb-os-ctxw { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-os-ctxw .k, .cb-os-ssotl .k { font-size: 12px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.cb-os-ctxl { display: flex; flex-direction: column; background: var(--os-plate); border-radius: 12px; }
.cb-os-ctxl li { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 8px 12px; }
.cb-os-ctxl li + li { border-top: 1px solid var(--border); }
.cb-os-ctxl .st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.cb-os-ctxl li.on .st { color: var(--ok); }
.cb-os-ctxl li.off .st { color: var(--ink-3); }
.cb-os-ctxl li.off b { font-weight: 400; color: var(--ink-3); }
.cb-os-ctxl b { font-weight: 500; min-width: 0; }
.cb-os-ctxl .m { font-size: 12px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .cb-os-ctxl li { grid-template-columns: minmax(0, 1fr); } .cb-os-ctxl .m { text-align: left; } }

/* ══ 8. DeptHome ══ */
.cb-os-dh { container-type: inline-size; gap: var(--space-4); }
.cb-os-dhh { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cb-os-dhh > .ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--card-ink); color: var(--on-card-ink); }
.cb-os-dhh .t { flex: 1 1 200px; min-width: 0; }
.cb-os-dhh h2 { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-os-dhh .t p { font-size: 12px; color: var(--ink-3); }
.cb-os-ctxline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); padding: 8px 12px; border-radius: var(--radius-pill); background: var(--inset); align-self: flex-start; max-width: 100%; }
.cb-os-ctxline .cb-i { flex: none; color: var(--ink-3); }
.cb-os-fact { display: flex; flex-direction: column; gap: 4px; }
.cb-os-fact small { font-size: 12px; color: var(--ink-3); }
.cb-os-fact h3 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; max-width: 36em; }
.cb-os-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); align-items: stretch; }
.cb-os-cell { grid-column: span 12; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-4); --os-plate: var(--inset); }
.cb-os-cell.s8 { grid-column: span 8; } .cb-os-cell.s4 { grid-column: span 4; } .cb-os-cell.s5 { grid-column: span 5; } .cb-os-cell.s3 { grid-column: span 3; }
@container (max-width: 1360px) { .cb-os-cell.lists, .cb-os-cell.agents { grid-column: span 6; } .cb-os-cell.my { grid-column: span 12; } }
@container (max-width: 1000px) { .cb-os-cell.s8, .cb-os-cell.s4 { grid-column: span 12; } }
@container (max-width: 760px) { .cb-os-cell.lists, .cb-os-cell.agents { grid-column: span 12; } .cb-os-fact h3 { font-size: 20px; line-height: 26px; } }
.cb-os-lists { display: flex; flex-direction: column; background: var(--inset); border-radius: 12px; }
.cb-os-lists li + li { border-top: 1px solid var(--border); }
.cb-os-lists .row { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: 12px; transition: background-color .12s; }
.cb-os-lists .row:hover, .cb-os-lists .row.on { background: color-mix(in oklab, var(--ink) 5%, var(--inset)); }
.cb-os-lists .nm { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cb-os-lists .nm > b { font-weight: 600; }
.cb-os-lists .c { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-os-lists .c b { color: var(--ink); }
.cb-os-lists .c .late { color: var(--warn); font-weight: 500; }
.cb-os-lists .row > .cb-i:last-child { color: var(--ink-3); }
.cb-os-list { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cb-os-agents { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-os-agents > li { padding: 8px; border-radius: 12px; background: var(--inset); min-width: 0; }
.cb-os-my ul { display: flex; flex-direction: column; }
.cb-os-my > ul { background: var(--inset); border-radius: 12px; }
.cb-os-my > ul > li + li { border-top: 1px solid var(--border); }
.cb-os-my .row { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; border-radius: 12px; }
.cb-os-my .row:disabled { cursor: default; color: var(--ink-2); }
.cb-os-my .row:not(:disabled):hover { background: color-mix(in oklab, var(--ink) 5%, var(--inset)); }
.cb-os-my .row > span { flex: 1; }
.cb-os-my .row .cb-i { color: var(--ink-3); }
.cb-os-my .row b { font-variant-numeric: tabular-nums; font-weight: 600; }
.cb-os-my li.late .row b, .cb-os-my li.late .row .cb-i { color: var(--warn); }
.cb-os-my .it { padding: 0 12px 10px 38px; gap: 4px; }
.cb-os-my .it li { font-size: 12px; line-height: 17px; color: var(--ink-2); }
.cb-os-my.full > ul { background: var(--card); box-shadow: var(--shadow-ring); border-radius: var(--radius-card); padding: var(--space-2); }
.cb-os-ssotl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cb-os-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--inset); border: 0; color: var(--ink); font: inherit; font-size: 12px; font-weight: 500; }
.cb-os-chip > span { display: inline-flex; align-items: center; gap: 4px; }
.cb-os-chip small { font-weight: 400; color: var(--ink-3); }
button.cb-os-chip { cursor: pointer; }
button.cb-os-chip:hover { background: color-mix(in oklab, var(--ink) 6%, var(--inset)); }
.cb-os-fresh { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--ink-3); }

/* ══ 9. SpacesNav и DeptSwitcher ══ */
.cb-os-nav { gap: var(--space-2); min-width: 0; }
.cb-os-nav.card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-3); width: 260px; max-width: 100%; }
.cb-os-find { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.cb-os-find span { flex: 1; }
.cb-os-find kbd, .cb-os-q kbd { font-family: var(--font-sans); font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--inset); color: var(--ink-3); }
.cb-os-nav .grp { display: flex; flex-direction: column; gap: 1px; }
.cb-os-nav .lbl { margin: var(--space-2) 0 0; padding: 0 10px; font-size: 11px; line-height: 15px; font-weight: 500; color: var(--ink-3); }
.cb-os-nav .it { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; transition: background-color .12s; }
.cb-os-nav .it:hover { background: var(--inset); color: var(--ink); }
.cb-os-nav .it.on { background: var(--primary); color: var(--on-primary); }
.cb-os-nav .it.on .cnt b, .cb-os-nav .it.on .lock { color: var(--on-primary); }
.cb-os-nav .it .nm { flex: 1; min-width: 0; }
.cb-os-nav .it.locked .nm { color: var(--ink-3); }
.cb-os-nav .it.locked.on .nm { color: var(--on-primary); }
.cb-os-nav .cnt { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; font-size: 12px; }
.cb-os-nav .cnt b { font-weight: 600; color: var(--ink); }
.cb-os-nav i.late, .cb-os-navleg i.late { font-style: normal; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; background: var(--warn-soft); color: var(--warn); }
.cb-os-nav .lock { color: var(--ink-3); display: inline-flex; }
.cb-os-navleg { display: flex; align-items: center; gap: 6px; padding: var(--space-2) 10px 0; font-size: 11px; color: var(--ink-3); }
.cb-os-sw { position: relative; display: inline-block; max-width: 100%; }
.cb-os-swb { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; text-align: left; max-width: 100%; }
.cb-os-swb > span { display: flex; flex-direction: column; min-width: 0; }
.cb-os-swb small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-os-swb b { font-weight: 600; font-size: 13px; line-height: 18px; }
.cb-os-swl { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 280px; max-width: calc(100vw - 32px); max-height: 360px; overflow-y: auto; padding: 6px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-pop); }
.cb-os-swl:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-os-swl li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 8px; align-items: center; padding: 8px 10px; min-height: 36px; border-radius: 10px; cursor: pointer; }
.cb-os-swl li small { grid-column: 2; font-size: 11px; line-height: 15px; color: var(--ink-3); }
.cb-os-swl li.act { background: var(--inset); }
.cb-os-swl li[aria-selected="true"] { font-weight: 600; }
.cb-os-swl li.locked > span { color: var(--ink-2); }

/* ══ 10. OsShell ══ */
.cb-os-shell { container-type: inline-size; position: relative; display: grid; grid-template-columns: 248px minmax(0, 1fr); background: var(--shell); border-radius: var(--radius-inset); min-height: 760px; overflow: hidden; }
.cb-os-side { grid-column: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-3); border-right: 1px solid var(--border); background: var(--shell); min-width: 0; }
.cb-os-brand { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.cb-os-brand b { font-size: 15px; font-weight: 600; }
.cb-os-brand small { font-size: 11px; color: var(--ink-3); flex: 1; min-width: 0; }
.cb-os-brand .cb-mark { width: 28px; height: 28px; }
.cb-os-main { grid-column: 2; display: flex; flex-direction: column; min-width: 0; }
.cb-os-top { display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); }
.cb-os-top .grow { flex: 1; }
.cb-os-burger { display: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; place-items: center; }
.cb-os-burger:hover { background: var(--inset); }
.cb-os-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-3); }
.cb-os-crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--ink-3); }
.cb-os-crumbs li[aria-current="page"] { color: var(--ink); font-weight: 600; }
.cb-os-q { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card); color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.cb-os-me { display: inline-flex; align-items: center; gap: 8px; padding-left: var(--space-2); }
.cb-os-me > span:last-child { display: flex; flex-direction: column; line-height: 15px; }
.cb-os-me b { font-size: 13px; font-weight: 600; }
.cb-os-me small { font-size: 11px; color: var(--ink-3); }
.cb-os-work { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cb-os-work > div > h2, .cb-os-locked > h2 { font-size: 20px; line-height: 26px; font-weight: 600; }
.cb-os-locked, .cb-os-stack-v, .cb-os-myv, .cb-os-listv { display: flex; flex-direction: column; gap: var(--space-4); }
.cb-os-work .cb-os-space, .cb-os-work .cb-os-fr { background: var(--card); box-shadow: var(--shadow-ring); border-radius: var(--radius-card); }
.cb-os-scrim { position: absolute; inset: 0; z-index: 29; background: color-mix(in oklab, var(--ink) 30%, transparent); }
@container (max-width: 900px) {
  .cb-os-side { position: absolute; z-index: 30; top: 0; bottom: 0; left: 0; width: min(300px, 86%); overflow-y: auto; transform: translateX(-104%); visibility: hidden; transition: transform .15s, visibility 0s .15s; box-shadow: var(--shadow-pop); }
  .cb-os-shell.nav-open .cb-os-side { transform: none; visibility: visible; transition: transform .15s; }
  .cb-os-main { grid-column: 1 / -1; }
  .cb-os-burger { display: inline-grid; }
  .cb-os-q span, .cb-os-q kbd, .cb-os-me > span:last-child { display: none; }
  .cb-os-work { padding: var(--space-3); }
  .cb-os-top { padding: var(--space-2) var(--space-3); }
}

/* ══ 11. RoleMatrix ══ */
.cb-os-rm { background: var(--os-bg); border-radius: var(--radius-inset); padding: var(--space-4); }
.cb-os-tbl.rm { min-width: 860px; font-size: 12px; line-height: 17px; }
.cb-os-tbl.rm tbody td { color: var(--ink-2); }
.cb-os-tbl.rm tbody tr.on th, .cb-os-tbl.rm tbody tr.on td { background: var(--os-plate); color: var(--ink); }
.cb-os-rmb { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; margin: -4px -8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cb-os-rmb:hover { background: var(--os-plate); }
.cb-os-why h4 { font-size: 13px; font-weight: 600; margin-bottom: var(--space-2); }
.cb-os-rm > .cb-os-why { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: 12px; background: var(--os-plate); align-items: flex-start; }
.cb-os-whyl { counter-reset: w; display: flex; flex-direction: column; gap: 6px; }
.cb-os-whyl li { counter-increment: w; display: grid; grid-template-columns: 22px minmax(160px, 260px) minmax(0, 1fr); gap: 2px 10px; font-size: 13px; }
.cb-os-whyl li::before { content: counter(w); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-os-whyl li span { color: var(--ink-2); }
@media (max-width: 700px) { .cb-os-whyl li { grid-template-columns: 22px minmax(0, 1fr); } .cb-os-whyl li span { grid-column: 2; } }

/* витрина примеров */
.cb-os-ex { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cb-os-ex > .cb-seg { overflow-x: auto; max-width: 100%; flex-wrap: nowrap; scrollbar-width: none; }
.cb-os-ex.row { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.cb-os-ex.tall { min-height: 400px; }
@media (prefers-reduced-motion: reduce) { .cb-os-side, .cb-os-tree [role="treeitem"], .cb-os-lists .row, .cb-os-nav .it { transition: none; } }

/* ── src/styles/w-crm.css ── */
/* ── CRM: записи и связи (src/charts/w-crm.js) · классы cb-wc-*.
   Кегли в плитке: 15 заголовок · 13 текст · 12 подписи (страница: 20 заголовок). Слои: плитка без своей подложки
   (в галерее и на странице её даёт card), внутри — плашки inset; страница и рабочее место — shell с ячейками card. ── */
.cb-wc { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; color: var(--ink); font-size: 13px; line-height: 18px; }
.cb-wc.tile { container-type: inline-size; }
:where(.cb-wc) p, :where(.cb-wc-page) p, :where(.cb-wc-ws) p { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-wc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-wc-h .t { display: grid; gap: 2px; min-width: 0; }
.cb-wc-h .t small { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-wc-h .t > b { font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-wc-h .t > span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-wc-h .a { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-wc-src { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-wc-stack { display: grid; gap: var(--space-3); min-width: 0; }
.cb-wc-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-5); align-items: start; }
.cb-wc-hint { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-wc-none { font-size: 12px; line-height: 16px; color: var(--ink-3); padding: var(--space-2) 0; }
.cb-wc-fact { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--border); }
.cb-wc-kind { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 11px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); white-space: nowrap; }
.cb-wc-warn { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-wc-warn .cb-i { color: var(--warn); flex: none; }
.cb-wc-err { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--bad); }

/* знаки: система, компания, запись; клиент без точки присутствия */
.cb-wc-sys, .cb-wc-co, .cb-wc-rm { display: inline-grid; place-items: center; flex: none; background: var(--inset); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border); }
.cb-wc-sys.s20, .cb-wc-co.s20, .cb-wc-rm.s20 { width: 20px; height: 20px; border-radius: 6px; }
.cb-wc-sys.s24, .cb-wc-co.s24, .cb-wc-rm.s24 { width: 24px; height: 24px; border-radius: 7px; }
.cb-wc-sys.s28, .cb-wc-co.s28, .cb-wc-rm.s28 { width: 28px; height: 28px; border-radius: 8px; }
.cb-wc-sys.s32, .cb-wc-co.s32, .cb-wc-rm.s32 { width: 32px; height: 32px; border-radius: 10px; }
.cb-wc-co.s40 { width: 40px; height: 40px; border-radius: 12px; }
.cb-wc-cl { display: inline-flex; flex: none; }
.cb-wc-cl .dot { display: none; }
.cb-wc-author { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cb-wc-author > b { font-weight: 500; font-size: 13px; }
.cb-wc-faces { display: inline-flex; align-items: center; gap: 4px; }
.cb-wc-faces > .more { font-size: 12px; color: var(--ink-2); padding: 0 4px; }
.cb-wc-people { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }

/* меню без Оболочки */
.cb-wc-menu { position: relative; display: inline-flex; }
.cb-wc-menu-p { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 260px; background: var(--card); border-radius: var(--radius-inset); box-shadow: var(--shadow-pop); padding: 6px; display: grid; gap: 2px; }
.cb-wc-mi.off { cursor: not-allowed; color: var(--ink-3); }
.cb-wc-mi.off:hover { background: transparent; }

/* квитанция */
.cb-wc-receipt { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: 8px 8px 8px 12px; border-radius: var(--radius-inset); background: var(--ok-soft); color: var(--ink); font-size: 13px; line-height: 18px; }
.cb-wc-receipt > .cb-i { color: var(--ok); flex: none; }
.cb-wc-receipt > span { flex: 1; min-width: 180px; }

/* фильтры-пилюли */
.cb-wc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-wc-chips button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; font: inherit; font-size: 13px; white-space: nowrap; transition: background-color .15s, color .15s; }
.cb-wc-chips button:hover { background: var(--inset); color: var(--ink); }
.cb-wc-chips button[aria-pressed="true"] { background: var(--inset); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); font-weight: 500; }
.cb-wc-chips button[disabled] { opacity: .62; cursor: not-allowed; }
.cb-wc-chips .n { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 12px; }

/* поля ввода */
.cb-wc-input { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-3); min-width: 0; }
.cb-wc-input:focus-within { box-shadow: inset 0 0 0 1px var(--ink-3), 0 0 0 2px var(--focus); }
.cb-wc-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink); padding: 0; height: 34px; }
.cb-wc-input input::placeholder { color: var(--ink-3); }
.cb-wc-input input:focus-visible { outline: none; }
.cb-wc-input small { font-size: 12px; color: var(--ink-3); }
.cb-wc-input.err { box-shadow: inset 0 0 0 1px var(--bad); }
.cb-wc-input.inline { min-height: 32px; width: 100%; }
.cb-wc-input.search { min-width: min(100%, 220px); }
.cb-wc-area { display: block; }
.cb-wc-area textarea { width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; border: 0; border-radius: 12px; padding: var(--space-2) 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); font: inherit; font-size: 13px; line-height: 20px; color: var(--ink); }
.cb-wc-area textarea::placeholder { color: var(--ink-3); }
.cb-wc-area textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* плашки */
.cb-wc-plate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); font-size: 13px; line-height: 18px; min-width: 0; }
.cb-wc-plate > span:first-child { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 240px; min-width: 0; }
.cb-wc-plate > b { display: inline-flex; align-items: center; gap: 6px; flex-basis: 100%; font-weight: 600; }
.cb-wc-plate > p { flex-basis: 100%; }
.cb-wc-plate > p small { display: block; font-size: 12px; color: var(--ink-3); }
.cb-wc-plate .acts { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-wc-plate .acts small { font-size: 12px; color: var(--ink-3); }
.cb-wc-plate.warn { background: var(--warn-soft); }
.cb-wc-plate.agent { box-shadow: inset 0 0 0 1px var(--border); background: var(--card); }
.cb-wc-plate.agent > .cb-i { color: var(--ink-2); flex: none; }
.cb-wc-plate .mh { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-basis: 100%; }
.cb-wc-plate time { font-size: 12px; color: var(--ink-3); }
.cb-wc-kv { margin: 0; display: grid; gap: 6px; flex-basis: 100%; }
.cb-wc-kv > div { display: grid; grid-template-columns: minmax(110px, 32%) 1fr; gap: var(--space-3); align-items: baseline; }
.cb-wc-kv dt { color: var(--ink-3); font-size: 12px; }
.cb-wc-kv dd { margin: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.cb-wc-kv dd small { font-size: 12px; color: var(--ink-3); }
.cb-wc-kv.big { gap: var(--space-3); }
.cb-wc-kv.big dd { font-size: 14px; font-weight: 500; }
.cb-wc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.cb-wc-foot .who { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-3); min-width: 0; flex-wrap: wrap; }
.cb-wc-foot .acts { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; }

/* ─ RelationField ─ */
.cb-wc-rel { display: grid; gap: var(--space-2); min-width: 0; }
.cb-wc-rel-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.cb-wc-rel-h b { font-size: 13px; font-weight: 600; }
.cb-wc-rel-h .n { font-size: 12px; color: var(--ink-3); }
.cb-wc-rel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-wc-rel-list > li { border-radius: var(--radius-inset); background: var(--inset); min-width: 0; padding: 4px; }
.cb-wc-rel-list .row { display: flex; align-items: center; gap: 4px; padding-right: 4px; }
.cb-wc-relchip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border: 0; background: transparent; border-radius: 12px; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.cb-wc-relchip:hover { background: var(--inset-hover); }
.cb-wc-relchip .l { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cb-wc-relchip .l b { font-size: 13px; font-weight: 500; }
.cb-wc-relchip .l small { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-wc-relchip > .cb-i { color: var(--ink-3); flex: none; }
.cb-wc-rel.compact .cb-wc-relchip { min-height: 36px; padding: 4px 8px; }
.cb-wc-peek { padding: 0 var(--space-3) var(--space-3) 40px; }
.cb-wc-peek dl { margin: 0; display: grid; gap: 4px; }
.cb-wc-peek dl > div { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-2); align-items: center; font-size: 12px; }
.cb-wc-peek dt { color: var(--ink-3); }
:where(.cb-wc-peek) dd { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-wc-pick { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); }
.cb-wc-pick > .cb-btn { justify-self: start; }
.cb-wc-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cb-wc-opts button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.cb-wc-opts button:hover, .cb-wc-opts button:focus-visible { background: var(--card); }
.cb-wc-opts .l { display: grid; min-width: 0; }
.cb-wc-opts .l b { font-weight: 500; font-size: 13px; }
.cb-wc-opts .l small { font-size: 12px; color: var(--ink-3); }
.cb-wc-opts .none { font-size: 12px; color: var(--ink-3); padding: 6px 8px; }
.cb-wc-create { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 10px; border: 0; border-radius: 10px; background: var(--card); color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; text-align: left; box-shadow: inset 0 0 0 1px var(--border); }
.cb-wc-create:hover { background: var(--inset-hover); }
.cb-wc-rel > .cb-chip.add { justify-self: start; }

/* ─ RecordFields ─ */
.cb-wc-fields { gap: var(--space-3); }
.cb-wc-fg { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.cb-wc-fg:first-of-type { border-top: 0; padding-top: 0; }
.cb-wc-fg-h { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 4px; margin: 0 -4px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.cb-wc-fg-h:hover { background: var(--inset); }
.cb-wc-fg-h b { font-size: 13px; font-weight: 600; }
.cb-wc-fg-h span { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.cb-wc-fg-h .cb-i { color: var(--ink-3); }
.cb-wc-dl { margin: 0; display: grid; gap: 2px; }
.cb-wc-dl .fr { display: grid; grid-template-columns: minmax(96px, 36%) 1fr; gap: var(--space-3); align-items: start; min-height: 36px; }
.cb-wc-dl .fr.wide { grid-template-columns: 1fr; gap: 4px; }
.cb-wc-dl dt { font-size: 12px; line-height: 16px; color: var(--ink-3); padding-top: 9px; }
.cb-wc-dl .fr.wide dt { padding-top: 6px; }
.cb-wc-dl dd { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 4px 0; }
.cb-wc-dl dd .note { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-wc-dl.tight .fr { min-height: 32px; }
.cb-wc-fbtn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 2px 8px; margin: 0 -8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.cb-wc-fbtn:hover { background: var(--inset); }
.cb-wc-fbtn .pen { color: var(--ink-3); opacity: 0; transition: opacity .12s; display: inline-flex; }
.cb-wc-fbtn:hover .pen, .cb-wc-fbtn:focus-visible .pen { opacity: 1; }
.cb-wc-fbtn > .cb-i { color: var(--ink-3); }
.cb-wc-fv { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.cb-wc-fv.ro { color: var(--ink); padding: 4px 0; }
.cb-wc-mask { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.cb-wc-mask > .cb-i { color: var(--ink-3); }
.cb-wc-mask small { font-size: 12px; color: var(--ink-3); }

/* ─ RecordTimeline ─ */
.cb-wc-tlw { gap: var(--space-4); }
.cb-wc-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.cb-wc-tl .day { display: grid; gap: var(--space-2); }
.cb-wc-tl .dh { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); }
.cb-wc-tl .gap { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 12px; }
.cb-wc-tl .day > ol { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-wc-tl .ev { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); padding-bottom: var(--space-3); }
.cb-wc-tl .ev::before { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1px; background: var(--border); }
.cb-wc-tl .ev:last-child::before { display: none; }
.cb-wc-tl .ev .ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-wc-tl .ev.stage .ic { background: var(--flame-soft); color: var(--ink); }
.cb-wc-tl .bd { display: grid; gap: 4px; min-width: 0; padding-top: 2px; }
.cb-wc-tl .mh { display: flex; align-items: center; gap: 6px var(--space-2); flex-wrap: wrap; }
.cb-wc-tl .mh .w { font-size: 12px; color: var(--ink-3); }
.cb-wc-tl .mh time { margin-left: auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-wc-tl .bd > p { font-size: 13px; line-height: 19px; }
.cb-wc-tl .diff { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-wc-tl .diff > span { color: var(--ink-2); }
.cb-wc-tl .diff s { color: var(--ink-3); }
.cb-wc-tl .diff i { color: var(--ink-3); font-style: normal; }
.cb-wc-tl .diff .cb-i { color: var(--ink-3); }
.cb-wc-tl .dur { color: var(--ink-3); }
.cb-wc-tl .mt { display: flex; align-items: center; gap: 4px var(--space-3); flex-wrap: wrap; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-wc-tl .mt .via { display: inline-flex; align-items: center; gap: 4px; }
.cb-wc-tl .mt .src { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; }
.cb-wc-tl .mt .src:hover { background: var(--inset-hover); color: var(--ink); }
.cb-wc-tl .ev.agent .bd > p { color: var(--ink-2); }

/* ─ заметки и редактор ─ */
.cb-wc-editor { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-wc-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cb-wc-tools .tb { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; }
.cb-wc-tools .tb:hover { background: var(--card); color: var(--ink); }
.cb-wc-tools .tb.b { font-weight: 700; }
.cb-wc-tools .cb-pop-p { min-width: 240px; }
.cb-wc-files-in { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-wc-att { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 6px 0 10px; border-radius: var(--radius-pill); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; color: var(--ink); }
.cb-wc-att > .cb-i { color: var(--ink-3); }
.cb-wc-att button { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; }
.cb-wc-att button:hover { background: var(--inset); color: var(--ink); }
.cb-wc-targets { display: grid; gap: 6px; }
.cb-wc-targets .cap, .cb-wc-lbl > span:first-child { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2); }
.cb-wc-open { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-inset); background: var(--inset); color: var(--ink-3); cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.cb-wc-open:hover { background: var(--inset-hover); color: var(--ink); }
.cb-wc-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cb-wc-notes > li { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-wc-notes .mh { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cb-wc-notes time { font-size: 12px; color: var(--ink-3); }
.cb-wc-notes .tg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.cb-wc-md { display: grid; gap: 6px; font-size: 13px; line-height: 20px; }
.cb-wc-md ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.cb-wc-md ul.todo { list-style: none; padding-left: 0; }
.cb-wc-md ul.todo li { display: flex; align-items: center; gap: 6px; }
.cb-wc-md ul.todo li.done > span:first-of-type { color: var(--ink-3); text-decoration: line-through; }
.cb-wc-md ul.todo .cb-i { color: var(--ink-3); flex: none; }
.cb-wc-mention { padding: 0 4px; border-radius: 6px; background: var(--flame-soft); color: var(--ink); font-weight: 500; }

/* ─ TaskComposer ─ */
.cb-wc-task { gap: var(--space-4); }
.cb-wc-from { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-wc-from .ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink-2); flex: none; }
.cb-wc-from > div { display: grid; gap: 2px; min-width: 0; }
.cb-wc-from small { font-size: 12px; color: var(--ink-3); }
.cb-wc-from p { font-size: 13px; line-height: 19px; }
.cb-wc-lbl { display: grid; gap: 6px; min-width: 0; }
.cb-wc-lbl > .cb-wc-input { width: 100%; box-sizing: border-box; }
.cb-wc-assign { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-wc-assign button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; font: inherit; font-size: 13px; }
.cb-wc-assign button:hover { background: var(--inset); }
.cb-wc-assign button[aria-checked="true"] { background: var(--inset); box-shadow: inset 0 0 0 1px var(--ink-3); font-weight: 500; }
.cb-wc-task .cb-wc-plate > b { flex-basis: 100%; font-size: 14px; }

/* ─ EmailThread ─ */
.cb-wc-mail-h { display: grid; gap: 2px; }
.cb-wc-mail-h b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-wc-mail-h span { font-size: 12px; color: var(--ink-3); }
.cb-wc-mail-meta { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.cb-wc-mail-meta .recs { display: inline-flex; align-items: center; gap: 4px; }
.cb-wc-msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-wc-msgs > li { border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); min-width: 0; }
.cb-wc-msgs > li.open { background: var(--card); }
.cb-wc-msgs > li.out.open { background: var(--inset); box-shadow: none; }
.cb-wc-msgs .mh { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 52px; padding: 8px var(--space-4); border: 0; background: transparent; border-radius: var(--radius-inset); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.cb-wc-msgs .mh:hover { background: var(--inset); }
.cb-wc-msgs .mh .l { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cb-wc-msgs .mh .l b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.cb-wc-msgs .mh .l small { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-wc-msgs .mh time { font-size: 12px; color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; }
.cb-wc-msgs .bd { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 32px + var(--space-3)); }
.cb-wc-msgs .bd > p { font-size: 13px; line-height: 20px; }
.cb-wc-q { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); cursor: pointer; font: inherit; font-size: 12px; }
.cb-wc-msgs > li.out .cb-wc-q { background: var(--card); }
.cb-wc-msgs blockquote { margin: 0; padding: var(--space-2) var(--space-3); background: var(--inset); border-radius: 8px; display: grid; color: var(--ink-3); font-size: 12px; line-height: 18px; }
.cb-wc-closed { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-wc-closed > .cb-i { color: var(--ink-3); flex: none; margin-top: 2px; }
.cb-wc-closed > div { display: grid; gap: 4px; min-width: 0; }
.cb-wc-closed b { font-size: 13px; font-weight: 600; }
.cb-wc-closed ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.cb-wc-closed small { font-size: 12px; color: var(--ink-3); }

/* ─ CalendarEvents ─ */
.cb-wc-cal { display: grid; gap: var(--space-4); }
.cb-wc-cal .sec { display: grid; gap: var(--space-2); }
.cb-wc-cal .cap, .cb-wc-two .cap { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); }
.cb-wc-cal ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-wc-cal li { display: grid; grid-template-columns: 52px 1fr; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); min-width: 0; }
.cb-wc-cal .dt { display: grid; align-content: start; justify-items: center; gap: 0; padding: 6px 0; border-radius: 12px; background: var(--inset); }
.cb-wc-cal .dt b { font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-wc-cal .dt small { font-size: 11px; line-height: 14px; color: var(--ink-3); text-align: center; }
.cb-wc-cal .bd { display: grid; gap: 6px; min-width: 0; }
.cb-wc-cal .th { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-wc-cal .th b { font-size: 13px; font-weight: 600; }
.cb-wc-cal .mt { display: flex; gap: 4px var(--space-3); flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.cb-wc-cal .mt span { display: inline-flex; align-items: center; gap: 4px; }
.cb-wc-cal .mt .cb-i { color: var(--ink-3); }
.cb-wc-cal .ppl { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cb-wc-cal .ppl small { font-size: 12px; color: var(--ink-3); }
.cb-wc-cal .out { font-size: 13px; line-height: 19px; }
.cb-wc-cal .out > span { color: var(--ink-3); }
.cb-wc-cal .out small { color: var(--ink-3); font-size: 12px; }
.cb-wc-cal li.priv { box-shadow: none; background: var(--inset); }
.cb-wc-cal li.priv .dt { background: var(--card); }
.cb-wc-cal li.priv small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); }
.cb-wc-inline { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-wc-inline .cb-wc-input { flex: 1 1 200px; }

/* ─ страница записи ─ */
.cb-wc-page { container-type: inline-size; display: grid; gap: var(--space-4); min-width: 0; padding: var(--space-4); border-radius: var(--radius-card); background: var(--shell); color: var(--ink); font-size: 13px; line-height: 18px; }
.cb-wc-cell { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-5); min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.cb-wc-page .head { gap: var(--space-3); }
.cb-wc-page .head .top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-wc-page .kick { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-wc-page .kick .ti { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-wc-page .tools { display: inline-flex; align-items: center; gap: 4px; }
.cb-wc-fav[aria-pressed="true"] { color: var(--flame); }
.cb-wc-page .ttl { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.cb-wc-page .grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: var(--space-4); align-items: start; }
.cb-wc-page .side { gap: var(--space-4); }
.cb-wc-page .side .cb-wc { gap: var(--space-3); }
.cb-wc-page > .cb-wc-src { padding: 0 4px; }
.cb-wc-watch { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-3); }
.cb-wc-bar { display: flex; gap: var(--space-2); flex-wrap: wrap; }
@container (max-width: 900px) {
  .cb-wc-page .grid { grid-template-columns: minmax(0, 1fr); }
  .cb-wc-page .side { order: -1; }
}
.cb-wc-page.compact .grid { grid-template-columns: minmax(0, 1fr); }
.cb-wc-page.compact .side { order: 0; }

/* пилюли-поля в шапке */
.cb-wc-pills { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cb-wc-pill { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 48px; padding: 8px 16px; border: 0; border-radius: 16px; background: var(--inset); color: var(--ink); cursor: pointer; font: inherit; text-align: left; position: relative; max-width: 100%; transition: background-color .15s; }
.cb-wc-pill:hover { background: var(--inset-hover); }
.cb-wc-pill.ro { cursor: default; }
.cb-wc-pill.ro:hover { background: var(--inset); }
.cb-wc-pill > small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-wc-pill > .v { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-wc-pill > .v small { font-weight: 400; font-size: 12px; color: var(--ink-3); }
.cb-wc-pill > .v small.ov { color: var(--ink-2); font-weight: 500; }
.cb-wc-pill > .cb-i { position: absolute; right: 10px; top: 8px; color: var(--ink-3); }
.cb-wc-pill:has(> .cb-i) { padding-right: 32px; }
.cb-wc-pill.warn { background: var(--warn-soft); }
.cb-wc-pill.warn > small, .cb-wc-pill.warn > .v small { color: var(--ink-2); }
.cb-wc-pill .cb-wc-author > b { font-weight: 600; }

/* следующий шаг */
.cb-wc-next { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-wc-next .ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink); flex: none; }
.cb-wc-next .l { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.cb-wc-next .l small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-wc-next .l b { font-size: 14px; line-height: 20px; font-weight: 600; }
.cb-wc-next .m { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.cb-wc-next .acts { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
.cb-wc-next.none { background: var(--warn-soft); }
.cb-wc-next.none .ic { color: var(--warn); }
.cb-wc-next.done .ic { color: var(--ok); }

/* файлы */
.cb-wc-filelist { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-wc-filelist li { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.cb-wc-filelist li:first-child { border-top: 0; }
.cb-wc-filelist .fi { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); flex: none; }
.cb-wc-filelist .l { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
.cb-wc-filelist .l b { font-weight: 500; }
.cb-wc-filelist .l small, .cb-wc-filelist time { font-size: 12px; color: var(--ink-3); }
.cb-wc-filelist .r { display: inline-flex; align-items: center; gap: var(--space-3); }

/* компания, контакт */
.cb-wc-idt { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cb-wc-idt > span:last-child { display: grid; gap: 2px; min-width: 0; }
.cb-wc-idt b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-wc-idt small { font-size: 12px; line-height: 16px; color: var(--ink-3); font-weight: 400; }
.cb-wc-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-4) var(--space-5); align-items: start; }
.cb-wc-two .sec { display: grid; gap: var(--space-2); min-width: 0; }
.cb-wc-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-wc-rows > li { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--border); min-width: 0; }
.cb-wc-rows > li:first-child { border-top: 0; }
.cb-wc-rows .l { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cb-wc-rows .l b { font-size: 13px; font-weight: 500; }
.cb-wc-rows .l small { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-wc-rows .r { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
.cb-wc-rows .r small { font-size: 12px; color: var(--ink-3); }
.cb-wc-rows .r.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.cb-wc-rows .ch { display: inline-flex; gap: 4px; color: var(--ink-3); }
.cb-wc-rows > li.closed .l b, .cb-wc-rows > li.closed .r { color: var(--ink-3); font-weight: 500; }
.cb-wc-role { display: grid; gap: 6px; padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); }
.cb-wc-role b { font-size: 13px; font-weight: 600; }
.cb-wc-role small { font-size: 12px; color: var(--ink-3); }
.cb-wc-role .cb-wc-chips button { height: 28px; padding: 0 10px; font-size: 12px; }

/* ─ CrmCommandMenu ─ */
.cb-wc-cmdw { display: grid; gap: var(--space-2); justify-items: start; }
.cb-wc-cmdbtn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-h-sm); padding: 0 6px 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; font: inherit; font-size: 13px; }
.cb-wc-cmdbtn:hover { background: var(--inset); color: var(--ink); }
.cb-wc-cmdbtn .k { display: inline-flex; gap: 2px; }
.cb-wc-last { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.cb-wc-scopes { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px var(--space-4); border-bottom: 1px solid var(--border); flex: none; }
.cb-wc-scopes button { height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; }
.cb-wc-scopes button:hover { background: var(--inset); color: var(--ink); }
.cb-wc-scopes button[aria-pressed="true"] { background: var(--inset); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-wc-cmd .oa { display: inline-flex; flex: none; }

/* ─ DuplicateRules ─ */
.cb-wc-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-wc-rules > li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-wc-rules > li.off .l b { color: var(--ink-2); }
.cb-wc-rules .rh { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 260px; min-width: 0; }
.cb-wc-rules .l { display: grid; gap: 2px; min-width: 0; }
.cb-wc-rules .l b { font-size: 13px; font-weight: 600; }
.cb-wc-rules .l small { font-size: 12px; color: var(--ink-3); }
.cb-wc-rules .rr { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cb-wc-rules .cb-chip { background: var(--card); }
.cb-wc-found { font-size: 12px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-wc-sub { padding-top: var(--space-2); }

/* ─ ImportWizard ─ */
.cb-wc-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2) var(--space-4); flex-wrap: wrap; counter-reset: none; }
.cb-wc-steps li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.cb-wc-steps .mk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.cb-wc-steps li.past { color: var(--ink-2); }
.cb-wc-steps li.cur { color: var(--ink); font-weight: 600; }
.cb-wc-steps li.cur .mk { background: var(--primary); color: var(--on-primary); }
.cb-wc-impb { display: grid; gap: var(--space-3); min-width: 0; }
.cb-wc-drop { display: grid; justify-items: center; gap: 6px; padding: var(--space-6) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); box-shadow: inset 0 0 0 1px var(--border); text-align: center; }
.cb-wc-drop .cb-i { color: var(--ink-2); }
.cb-wc-drop small { font-size: 12px; color: var(--ink-3); }
.cb-wc-vals { display: grid; gap: var(--space-3); }
.cb-wc-vals .cb-wc-rows > li > .cb-i { color: var(--ink-3); flex: none; }

/* ─ PipelineSettings ─ */
.cb-wc-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cb-wc-stages > li { display: grid; grid-template-columns: 32px minmax(160px, 1.6fr) minmax(96px, .6fr) minmax(128px, .8fr) minmax(120px, .9fr) auto; grid-template-areas: "ord nm num nrm wip del" "ord auto auto auto auto del" "cf cf cf cf cf cf"; gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-2); border-radius: var(--radius-inset); background: var(--inset); }
.cb-wc-stages > li.closed { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cb-wc-stages .ord { grid-area: ord; display: grid; gap: 2px; align-content: start; }
.cb-wc-stages .nm { grid-area: nm; display: grid; gap: 4px; min-width: 0; }
.cb-wc-stages .nm small { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-wc-stages .nm .cb-wc-input input { font-weight: 600; }
.cb-wc-stages .num { display: grid; gap: 4px; min-width: 0; }
.cb-wc-stages .num:nth-of-type(1) { grid-area: num; }
.cb-wc-stages .num:nth-of-type(2) { grid-area: nrm; }
.cb-wc-stages .num > small, .cb-wc-stages .wip > small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-wc-stages .num .cb-wc-input { min-height: 32px; }
.cb-wc-stages .num .cb-wc-input input { height: 30px; font-variant-numeric: tabular-nums; }
.cb-wc-stages .au { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-wc-stages .wip { grid-area: wip; display: grid; gap: 4px; font-size: 12px; min-width: 0; }
.cb-wc-stages .wip > span { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 6px; }
.cb-wc-stages .auto { grid-area: auto; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-wc-stages .auto > span { display: inline-flex; align-items: center; gap: 6px; }
.cb-wc-stages .auto small { color: var(--ink-3); font-size: 12px; }
.cb-wc-stages .del { grid-area: del; }
.cb-wc-stages .confirm { grid-area: cf; background: var(--card); }
.cb-wc-stages > li.closed .ord { padding-top: 8px; }
@container (max-width: 720px) {
  .cb-wc-stages > li { grid-template-columns: 32px 1fr 1fr auto; grid-template-areas: "ord nm nm del" "ord num nrm del" "ord wip wip del" "ord auto auto del" "cf cf cf cf"; }
}

/* ─ рабочее место ─ */
.cb-wc-ws { container-type: inline-size; display: grid; gap: var(--space-4); min-width: 0; padding: var(--space-4); border-radius: var(--radius-card); background: var(--shell); color: var(--ink); font-size: 13px; line-height: 18px; }
.cb-wc-ws-h { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: 4px 4px 0; }
.cb-wc-ws-h .t { display: grid; gap: 2px; }
.cb-wc-ws-h .t small { font-size: 12px; color: var(--ink-3); }
.cb-wc-ws-h h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-wc-ws-h .t > span { font-size: 12px; color: var(--ink-3); }
.cb-wc-ws-h .a { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-wc-ws-bar { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; padding: 0 4px; }
.cb-wc-ws-bar .cb-wc-input.search { margin-left: auto; min-width: min(100%, 240px); }
.cb-wc-ws > .cb-wc-src { padding: 0 4px; }
.cb-wc-ws-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.cb-wc-ws.has-rec .cb-wc-ws-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cb-wc-ws .rec > .cb-wc-page { padding: 0; background: transparent; }
.cb-wc-ws .rec > .cb-wc-cell { min-height: 240px; justify-content: center; }
.cb-wc-ws .list { padding: var(--space-3) var(--space-4) var(--space-4); }
@container (max-width: 1000px) {
  .cb-wc-ws.has-rec .cb-wc-ws-grid { grid-template-columns: minmax(0, 1fr); }
  .cb-wc-ws.has-rec .list { display: none; }
}
.cb-wc-tblwrap { overflow-x: auto; min-width: 0; margin: 0 calc(var(--space-4) * -1); padding: 0 var(--space-4); }
.cb-wc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; min-width: 720px; }
.cb-wc-tbl thead th { height: 40px; padding: 0 10px; text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.cb-wc-tbl thead th.r { text-align: right; }
.cb-wc-tbl .srt { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 6px; margin: 0 -6px; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.cb-wc-tbl .srt:hover { background: var(--inset); color: var(--ink); }
.cb-wc-tbl tbody th, .cb-wc-tbl tbody td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; font-weight: 400; }
.cb-wc-tbl tbody tr:hover > * { background: color-mix(in oklab, var(--inset) 60%, transparent); }
.cb-wc-tbl tbody tr.sel > * { background: var(--inset); }
.cb-wc-tbl td.r { text-align: right; }
.cb-wc-tbl .num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cb-wc-tbl .rec { display: grid; gap: 2px; padding: 4px 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; min-width: 180px; }
.cb-wc-tbl .rec b { font-weight: 500; }
.cb-wc-tbl .rec small, .cb-wc-tbl td small { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-wc-tbl .rec:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cb-wc-tbl .age { white-space: nowrap; }
.cb-wc-tbl td small.ov { display: block; color: var(--ink-2); font-weight: 500; }
.cb-wc-tbl .step { display: grid; gap: 2px; min-width: 180px; }
.cb-wc-tbl .step .late { color: var(--bad); font-weight: 500; }
.cb-wc-tbl tfoot th, .cb-wc-tbl tfoot td { padding: 10px; font-size: 12px; color: var(--ink-2); text-align: left; font-weight: 500; }
.cb-wc-tbl tfoot td.r { text-align: right; }
.cb-wc-tbl tfoot .num { color: var(--ink); font-size: 13px; }
.cb-wc-tbl tfoot small { display: block; }
.cb-wc-dig { font-variant-numeric: tabular-nums; }
.cb-wc-dig[role="button"] { cursor: pointer; border-radius: 6px; }
.cb-wc-dig[role="button"]:hover { background: var(--inset); }
.cb-wc-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); }
.cb-wc-board .col { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-wc-board header { display: grid; gap: 2px; padding: 0 2px 4px; }
.cb-wc-board header .nm { display: flex; align-items: center; gap: 6px; }
.cb-wc-board header .nm b { font-size: 13px; font-weight: 600; }
.cb-wc-board header .n { min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-2); font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; }
.cb-wc-board header .sum { font-size: 13px; font-weight: 600; justify-self: start; }
.cb-wc-board header small { font-size: 12px; color: var(--ink-3); }
.cb-wc-board .cards { display: grid; gap: var(--space-2); }
.cb-wc-board .kc { display: grid; gap: 4px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-ring); }
.cb-wc-board .kc.sel { background: var(--inset); }
.cb-wc-board .kc .open { display: grid; gap: 4px; padding: 12px 12px 4px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; border-radius: 14px 14px 0 0; }
.cb-wc-board .kc .open b { font-size: 13px; font-weight: 600; }
.cb-wc-board .kc .open small { font-size: 12px; color: var(--ink-3); }
.cb-wc-board .kc .mm { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--ink-2); }
.cb-wc-board .kc .money { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-wc-board .kc .ov { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); font-weight: 500; }
.cb-wc-board .kc .ov .cb-i { color: var(--warn); }
.cb-wc-board .kc .open .cb-wc-fact { justify-self: start; }
.cb-wc-board .kc .ft { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 8px 8px 12px; }
.cb-wc-board .kc .ft .cb-wc-author > b { font-size: 12px; }
.cb-wc-board .kc .mv { display: inline-flex; }

@media (max-width: 480px) {
  .cb-wc-page, .cb-wc-ws { padding: var(--space-2); border-radius: var(--radius-inset); }
  .cb-wc-cell { padding: var(--space-4); }
  .cb-wc-msgs .bd { padding-left: var(--space-4); }
  .cb-wc-kv > div, .cb-wc-dl .fr { grid-template-columns: 1fr; gap: 2px; }
  .cb-wc-dl dt { padding-top: 4px; }
  .cb-wc-ws-bar .cb-wc-input.search { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-wc-chips button, .cb-wc-pill, .cb-wc-fbtn .pen { transition: none; }
}

/* доводка после приёмки */
.cb-wc-tlw { display: grid; gap: var(--space-4); min-width: 0; }
.cb-wc-fbtn { white-space: nowrap; }
.cb-wc-tbl.narrow { min-width: 560px; }
.cb-wc-tbl td .age { display: block; }
.cb-wc-tbl td small.ov { min-width: 104px; }
.cb-wc-tbl .own { display: inline-flex; }
.cb-wc-page.compact .cb-tabs-panel { max-height: 640px; overflow: auto; overscroll-behavior: contain; }
.cb-wc-fbtn .cb-wc-author { flex: none; min-width: auto; }
/* стопка участников без наложения: инициалы не перекрываются */
.cb-wc-faces .cb-tm-stack .one, .cb-wc-faces .cb-tm-stack .more { margin-left: 4px; }
.cb-wc-faces .cb-tm-stack .one:first-child { margin-left: 0; }
.cb-wc-page .cb-tabs-list > button { flex: none; }
.cb-wc-page .cb-tabs { min-width: 0; }

/* длинное значение поля переносится (overflow-wrap), колонка значения сжимается до ширины карточки */
.cb-wc-dl .fr { grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); }
.cb-wc-dl .fr.wide { grid-template-columns: minmax(0, 1fr); }
.cb-wc-dl dd > * { max-width: 100%; }
.cb-wc-fbtn.txt { white-space: normal; align-items: flex-start; }
.cb-wc-fbtn.txt .pen { padding-top: 2px; }
.cb-wc-fv .tx { min-width: 0; overflow-wrap: break-word; white-space: normal; }
@media (max-width: 480px) { .cb-wc-dl .fr, .cb-wc-dl .fr.wide { grid-template-columns: minmax(0, 1fr); } }

/* ── src/styles/x-truth.css ── */
/* ── Файл правды (CatalystBento · группа x-truth) ─────────────────
   Библиотека, отделы, разделы с происхождением; карточка ответа со сносками, происхождение, «взято · закрыто правами», «Подхватили»;
   поле вопроса; очередь проверки нового знания с автопринятием по источнику.
   Блоки стоят внутри плитки (card); плашки внутри — inset. Раскладка реагирует на ширину контейнера. */
.cb-tr { color: var(--ink); font-size: 13px; line-height: 18px; min-width: 0; container-type: inline-size; }
:where(.cb-tr) p { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-tr) h2, :where(.cb-tr) h3, :where(.cb-tr) h4 { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-tr) ul, :where(.cb-tr) ol { list-style: none; margin: 0; padding: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-tr .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cb-tr button { font: inherit; }
.cb-tr-live { font-size: 12px; color: var(--ink-2); }
.cb-tr-live:empty { display: none; }
.cb-tr-mute { color: var(--ink-3); font-size: 12px; }
.cb-tr-cap { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cb-tr-note { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 17px; color: var(--ink-2); }
.cb-tr-note .cb-i { flex: none; margin-top: 1px; color: var(--ink-3); }
.cb-tr-ex { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-start; }
.cb-tr-ex.col { flex-direction: column; }
.cb-tr-ex.row > * { flex: 1 1 220px; }

/* люди, агенты, источники */
.cb-tr-face { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: color-mix(in oklab, var(--flame) 16%, var(--card)); color: var(--ink); font-size: 11px; font-weight: 600; }
.cb-tr-face.s32 { width: 32px; height: 32px; }
.cb-tr-face.ag { border-radius: 8px; background: var(--card-ink); color: var(--on-card-ink); }
.cb-tr-stack { display: inline-flex; align-items: center; }
.cb-tr-stack > * + * { margin-left: -4px; box-shadow: 0 0 0 2px var(--card); }
.cb-tr-stack .more { height: 24px; min-width: 24px; padding: 0 6px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; background: var(--inset); font-size: 11px; font-weight: 600; color: var(--ink-2); }
.cb-tr-ai { display: inline-grid; place-items: center; height: 16px; padding: 0 5px; border-radius: 5px; font-size: 11px; line-height: 1; font-weight: 700; background: var(--flame-soft); color: color-mix(in oklab, var(--flame-deep) 60%, var(--ink)); }
[data-theme="dark"] .cb-tr-ai { color: var(--flame); }
.cb-tr-agent { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cb-tr-agent .ic { width: 24px; height: 24px; flex: none; border-radius: 7px; display: grid; place-items: center; background: var(--card-ink); color: var(--on-card-ink); }
.cb-tr-agent .tx { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; font-size: 12px; }
.cb-tr-agent .tx b { font-weight: 600; }
.cb-tr-agent .tx small { width: 100%; font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-tr-who { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); min-width: 0; }
.cb-tr-sico { width: 28px; height: 28px; flex: none; border-radius: 8px; display: inline-grid; place-items: center; background: var(--card); color: var(--ink-2); box-shadow: var(--shadow-ring); }
.cb-tr-sico.sm { width: 24px; height: 24px; border-radius: 7px; }

/* шапка блока */
.cb-tr-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-tr-hd .t { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; flex: 1 1 240px; }
.cb-tr-hd .ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-tr-hd h3 { font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-tr-hd .t p { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-tr-hd .x { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* бейдж происхождения */
.cb-tr-origin { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 22px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; line-height: 14px; font-weight: 500; background: var(--inset); color: var(--ink-2); overflow-wrap: break-word; }
.cb-tr-origin .cb-i { flex: none; }
.cb-tr-origin > span { min-width: 0; overflow-wrap: break-word; }   /* длинный текст переносится внутри подложки, а не упирается в край */
.cb-tr-origin.sync { background: var(--ok-soft); color: var(--ink); }
.cb-tr-origin.sync .cb-i { color: var(--ok); }
.cb-tr-origin.broken { background: var(--warn-soft); }
.cb-tr-origin.broken .cb-i { color: var(--warn); }
.cb-tr-origin.manual { box-shadow: inset 0 0 0 1px var(--border); background: var(--card); }

/* ══ 1. TruthLibrary ══ */
.cb-tr-lib { display: flex; flex-direction: column; gap: var(--space-5); }
.cb-tr-libh { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.cb-tr-libh .t { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cb-tr-libh .ttl { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-tr-libh h2 { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.02em; }
.cb-tr-libh .t p { font-size: 14px; line-height: 20px; color: var(--ink-2); max-width: 640px; }
.cb-tr-libh .acts { flex: 0 1 auto; }
.cb-tr-block { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-tr-kpis .cb-kpi .lbl { overflow-wrap: break-word; }
.cb-tr-depts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@container (max-width: 760px) { .cb-tr-depts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cb-tr-libh h2 { font-size: 24px; line-height: 30px; } }
@container (max-width: 440px) { .cb-tr-depts { grid-template-columns: minmax(0, 1fr); } .cb-tr-libh .acts > .cb-btn { flex: 1 1 auto; } }

/* карточка отдела */
.cb-tr-dept { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; min-width: 0; min-height: 76px; padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-inset); background: var(--inset); color: var(--ink); text-align: left; cursor: pointer; transition: background-color .12s; }
.cb-tr-dept:hover { background: var(--inset-hover); }
.cb-tr-dept:active { transform: scale(.98); }
.cb-tr-dept.on { background: var(--inset); }
.cb-tr-dept .ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--card); color: var(--ink-2); }
.cb-tr-dept .tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cb-tr-dept .tx b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-tr-dept .n { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-tr-dept .st.closed { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-tr-dept .cb-status { font-size: 12px; }
.cb-tr-dept.closed { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-tr-dept.closed.on { background: var(--inset); }
.cb-tr-dept.closed .ic { background: var(--inset); }

/* ══ 2. Разделы ══ */
.cb-tr-secs { display: flex; flex-direction: column; gap: var(--space-3); }
.cb-tr-rows { display: flex; flex-direction: column; gap: 6px; }
.cb-tr-row { border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-tr-row .hit { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: var(--space-3); width: 100%; min-width: 0; padding: 10px var(--space-4); border: 0; border-radius: inherit; background: transparent; color: inherit; text-align: left; }
.cb-tr-row button.hit { cursor: pointer; transition: background-color .12s; }
.cb-tr-row button.hit:hover { background: var(--inset-hover); }
.cb-tr-row.on { background: var(--accent-soft); }   /* выбранное — подложкой, без полосы-акцента (D16, У-0225) */
.cb-tr-row .main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cb-tr-row .main b { font-weight: 600; font-size: 14px; line-height: 19px; overflow-wrap: break-word; }
.cb-tr-row .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cb-tr-row .own { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--ink-2); overflow-wrap: break-word; }
.cb-tr-row .st { display: flex; flex-direction: column; gap: 2px; }
.cb-tr-row .ver { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-tr-row .rv { display: flex; align-items: flex-start; gap: 6px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-tr-row .rv > span { min-width: 0; overflow-wrap: break-word; }
.cb-tr-row .rv .cb-i { flex: none; margin-top: 1px; color: var(--ink-3); }
.cb-tr-row .rv.late { color: var(--ink); }
.cb-tr-row .rv.late .cb-i { color: var(--bad); }
.cb-tr-row.closed { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-tr-row.closed .ic { flex: none; margin-top: 2px; color: var(--ink-3); }
@container (max-width: 820px) {
  .cb-tr-row .hit { grid-template-columns: minmax(0, 1fr) auto; }
  .cb-tr-row .main { grid-column: 1 / -1; }
}
@container (max-width: 420px) {
  .cb-tr-row .hit { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: 10px var(--space-3); }
  .cb-tr-row .st { flex-direction: row; align-items: center; gap: 8px; }
}

/* ══ 3. Ответ ══ */
.cb-tr-ans { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-ring); }
.cb-tr-ameta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-tr-ameta .m { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-tr-scope { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--ok-soft); color: var(--ink); font-size: 11px; font-weight: 600; white-space: nowrap; }
.cb-tr-scope .cb-i { color: var(--ok); }
.cb-tr-q { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-inset); background: var(--inset); }
.cb-tr-q > .cb-i { flex: none; color: var(--ink-3); }
.cb-tr-q p { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 500; }
.cb-tr-q .who { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.cb-tr-abody { display: flex; flex-direction: column; gap: var(--space-4); }
.cb-tr-atext { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 24px; }
.cb-tr-atext .cited { text-decoration: underline; text-decoration-color: var(--mono-3); text-underline-offset: 4px; border-radius: 4px; transition: background-color .12s; }
.cb-tr-atext .cited.on { background: var(--flame-soft); text-decoration-color: var(--flame-deep); }
.cb-tr-atext .nw { white-space: nowrap; }
.cb-tr-atext .nocite { box-shadow: inset 0 -2px 0 var(--warn); }
.cb-tr-atext .nocite small { margin-left: 4px; padding: 0 5px; border-radius: 5px; font-size: 11px; font-weight: 600; background: var(--warn-soft); color: var(--ink); }
.cb-tr-fn { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 2px; padding: 0 4px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); font-size: 11px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: .45em; cursor: pointer; transition: background-color .12s; }
.cb-tr-fn:hover, .cb-tr-fn.on { background: var(--primary); color: var(--on-primary); }
.cb-tr-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.cb-tr-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px var(--space-3); border-radius: 12px; background: var(--inset); }
.cb-tr-tile small { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cb-tr-tile .cb-status { white-space: normal; font-weight: 600; }
.cb-tr-tile .cb-status span { color: var(--ink); }
.cb-tr-afoot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.cb-tr-afoot .who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 140px; }
.cb-tr-afoot .who b { font-size: 13px; font-weight: 600; }
.cb-tr-afoot .who small { font-size: 12px; color: var(--ink-3); }
@container (max-width: 560px) {
  .cb-tr-tiles { grid-template-columns: minmax(0, 1fr); }
  .cb-tr-q { flex-wrap: wrap; }
  .cb-tr-q p { flex-basis: calc(100% - 32px); }
  .cb-tr-q .who { margin-left: 24px; }
  .cb-tr-ans { padding: var(--space-3); }
}

/* ══ 4. Происхождение ══ */
.cb-tr-lin { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-tr-lrows { display: flex; flex-direction: column; gap: 2px; }
.cb-tr-lrow { display: grid; grid-template-columns: 22px 24px minmax(0, 1fr) auto; align-items: start; gap: var(--space-2); width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background-color .12s; }
.cb-tr-lrow:hover { background: var(--inset); }
.cb-tr-lrow.on { background: var(--flame-soft); }
.cb-tr-lrow .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--mono-3); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-tr-lrow.on .num { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.cb-tr-lrow .sico { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--card); color: var(--ink-2); box-shadow: var(--shadow-ring); }
.cb-tr-lrow .tx { display: flex; flex-wrap: wrap; gap: 2px 8px; min-width: 0; font-size: 12px; line-height: 18px; }
.cb-tr-lrow .tx b { font-weight: 600; }
.cb-tr-lrow .tx q { color: var(--ink-2); overflow-wrap: break-word; quotes: "«" "»"; }
.cb-tr-lrow .mask { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); }
.cb-tr-lrow .mask .cb-i { flex: none; color: var(--ink-3); }
.cb-tr-lrow .ago { font-size: 11px; line-height: 18px; color: var(--ink-3); white-space: nowrap; }
@container (max-width: 420px) {
  .cb-tr-lrow { grid-template-columns: 22px minmax(0, 1fr); }
  .cb-tr-lrow .sico { display: none; }
  .cb-tr-lrow .ago { grid-column: 2; }
}

/* ══ 5. Взято · закрыто правами ══ */
.cb-tr-reach { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); }
.cb-tr-reach .nums { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.cb-tr-reach .k { display: flex; align-items: baseline; gap: 6px; }
.cb-tr-reach .k b { font-size: 24px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-tr-reach .k span { font-size: 13px; color: var(--ink-2); }
.cb-tr-reach .lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.cb-tr-reach .lists > div { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cb-tr-reach .lists ul { display: flex; flex-direction: column; gap: 6px; }
.cb-tr-reach .lists li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 18px; min-width: 0; overflow-wrap: break-word; }
.cb-tr-reach .lists li b { font-weight: 600; }
.cb-tr-reach .lists li.closed .cb-tr-sico { color: var(--ink-3); }
@container (max-width: 520px) { .cb-tr-reach .lists { grid-template-columns: minmax(0, 1fr); } }

/* ══ 6. Подхватили ══ */
.cb-tr-hand { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-tr-hrows { display: flex; flex-direction: column; gap: 6px; }
.cb-tr-hrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-3); border-radius: 12px; background: var(--inset); }
.cb-tr-hrow .act { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 260px; }
.cb-tr-hrow .act > b { font-weight: 600; font-size: 13px; line-height: 18px; overflow-wrap: break-word; }
.cb-tr-hrow .side { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cb-tr-hrow .ntf { display: inline-flex; align-items: center; gap: 6px; }

/* ══ 7. Вопрос ══ */
.cb-tr-ask { display: flex; flex-direction: column; gap: var(--space-3); }
.cb-tr-ask .ttl { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-tr-ask h3 { font-size: 20px; line-height: 26px; font-weight: 600; }
.cb-tr-askf { display: flex; align-items: center; gap: var(--space-2); min-height: 52px; padding: 6px 6px 6px var(--space-3); border-radius: var(--radius-inset); background: var(--inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-tr-askf:focus-within { box-shadow: inset 0 0 0 2px var(--focus); }
.cb-tr-askf .ic { flex: none; display: grid; place-items: center; color: var(--flame-deep); }
[data-theme="dark"] .cb-tr-askf .ic { color: var(--flame); }
.cb-tr-askf .in { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; }
.cb-tr-askf .in::placeholder { color: var(--ink-3); }
.cb-tr-askf .in:focus { outline: none; }
.cb-tr-askf .cb-btn { flex: none; }
.cb-tr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-tr-chip { min-height: 32px; padding: 6px 12px; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; line-height: 16px; text-align: left; cursor: pointer; transition: background-color .12s; }
.cb-tr-chip:hover { background: var(--inset); }
.cb-tr-chip:active { transform: scale(.98); }
.cb-tr-recent { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-tr-recent ul { display: flex; flex-direction: column; gap: 2px; }
.cb-tr-rq { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: start; gap: var(--space-2); width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background-color .12s; }
.cb-tr-rq:hover { background: var(--inset); }
.cb-tr-rq > .cb-i { margin-top: 1px; color: var(--ink-3); }
.cb-tr-rq .q { font-size: 13px; line-height: 18px; overflow-wrap: break-word; }
.cb-tr-rq .by { font-size: 11px; line-height: 18px; color: var(--ink-3); white-space: nowrap; }
@container (max-width: 460px) {
  .cb-tr-rq { grid-template-columns: 16px minmax(0, 1fr); }
  .cb-tr-rq .by { grid-column: 2; white-space: normal; }
  .cb-tr-askf { flex-wrap: wrap; padding: var(--space-2); }
  .cb-tr-askf .in { flex-basis: calc(100% - 32px); }
  .cb-tr-askf .cb-btn { width: 100%; justify-content: center; }
}

/* ══ 8. Проверка нового знания ══ */
.cb-tr-review { display: flex; flex-direction: column; gap: var(--space-4); }
.cb-tr-count { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--warn-soft); color: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-tr-auto { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); }
.cb-tr-auto ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.cb-tr-auto li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 8px var(--space-3); border-radius: 12px; background: var(--card); }
.cb-tr-auto .tx { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cb-tr-auto .tx b { font-size: 13px; font-weight: 600; }
.cb-tr-auto .tx small { font-size: 11px; line-height: 14px; color: var(--ink-3); overflow-wrap: break-word; }
.cb-tr-sw { position: relative; flex: none; width: 40px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--mono-3); cursor: pointer; transition: background-color .15s; }
.cb-tr-sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-ring); transition: transform .15s; }
.cb-tr-sw.on { background: var(--ok); }
.cb-tr-sw.on i { transform: translateX(16px); }
.cb-tr-rvl { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-tr-rv { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-tr-rv.done { background: var(--inset); box-shadow: none; }
.cb-tr-rv .top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-tr-rv .src { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cb-tr-rv .src b { font-weight: 600; }
.cb-tr-rv .what { display: flex; flex-direction: column; gap: 4px; }
.cb-tr-rv .what .k { font-size: 12px; color: var(--ink-2); }
.cb-tr-rv .pair { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.cb-tr-rv .pair > .cb-i { color: var(--ink-3); flex: none; }
.cb-tr-rv del { color: var(--ink-2); text-decoration-color: var(--bad); }
.cb-tr-rv ins { text-decoration: none; font-weight: 600; padding: 0 4px; border-radius: 4px; background: var(--ok-soft); }
.cb-tr-rv .by { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.cb-tr-rv .dec { font-size: 12px; }
.cb-tr-form { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: 12px; background: var(--inset); }
.cb-tr-form label { display: flex; flex-direction: column; gap: 4px; }
.cb-tr-form label > span { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.cb-tr-in { width: 100%; box-sizing: border-box; min-height: 36px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; line-height: 18px; resize: vertical; }

/* фокус с клавиатуры */
.cb-tr-dept:focus-visible, .cb-tr-row .hit:focus-visible, .cb-tr-lrow:focus-visible, .cb-tr-fn:focus-visible, .cb-tr-chip:focus-visible,
.cb-tr-rq:focus-visible, .cb-tr-sw:focus-visible, .cb-tr-in:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cb-tr-dept, .cb-tr-row button.hit, .cb-tr-lrow, .cb-tr-fn, .cb-tr-chip, .cb-tr-rq, .cb-tr-sw, .cb-tr-sw i, .cb-tr-atext .cited { transition: none; }
  .cb-tr-dept:active, .cb-tr-chip:active { transform: none; }
}

/* ── src/styles/y-connect.css ── */
/* ── Подключение агентов (CatalystBento · группа y-connect) ─────────────────
   Мастер подключения (инструмент → платформа → команды), выпуск ключа, ваши подключения, область доступа,
   квитанции вызовов, активность с отказами, чек-лист «Настройка мозга».
   Корень .cb-cn — прозрачный блок внутри карточки; плашки на inset; раскладка реагирует на ширину контейнера. */
.cb-cn { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; color: var(--ink); font-size: 13px; line-height: 18px; }
.cb-cn.card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-5); }
:where(.cb-cn) p { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-cn) h3, :where(.cb-cn) h4 { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-cn) ul, :where(.cb-cn) ol { list-style: none; margin: 0; padding: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-cn code { font-family: var(--font-mono); font-size: 12px; font-size-adjust: none; }
.cb-cn .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cb-cn [tabindex="-1"]:focus { outline: none; }
.cb-cn-live { font-size: 12px; color: var(--ink-2); }
.cb-cn-live:empty { display: none; }
.cb-cn-hint { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-cn-note { display: flex; align-items: flex-start; gap: 8px; padding: var(--space-2) 12px; border-radius: 12px; background: var(--inset); font-size: 12px; line-height: 17px; color: var(--ink-2); }
.cb-cn-note .cb-i { flex: none; margin-top: 1px; color: var(--ink-3); }
.cb-cn-state { background: var(--inset); border-radius: var(--radius-inset); }

/* шапка блока */
.cb-cn-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-cn-hd .t { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; flex: 1 1 240px; }
.cb-cn-hd .ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-cn-hd h3 { font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-cn-hd .t p { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-cn-hd .x { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* кто: роль или агент */
.cb-cn-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; vertical-align: middle; }
.cb-cn-who > span:last-child { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.cb-cn-who b { font-weight: 600; color: var(--ink); }
.cb-cn-who small { font-size: 11px; color: var(--ink-3); }
.cb-cn-av { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: color-mix(in oklab, var(--flame) 16%, var(--card)); color: var(--ink); font-size: 11px; font-weight: 600; }
.cb-cn-av.ag { border-radius: 7px; background: var(--card-ink); color: var(--on-card-ink); }
.cb-cn-ai { display: inline-grid; place-items: center; height: 16px; padding: 0 5px; border-radius: 5px; font-size: 11px; line-height: 1; font-weight: 700; background: var(--flame-soft); color: color-mix(in oklab, var(--flame-deep) 60%, var(--ink)); }
[data-theme="dark"] .cb-cn-ai { color: var(--flame); }

/* поле кода с копированием */
.cb-cn-code { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cb-cn-code .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.cb-cn-code .lang { font-size: 11px; line-height: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; min-width: 0; overflow-wrap: break-word; }
.cb-cn-code .cp { flex: none; }
.cb-cn-code pre { margin: 0; padding: 12px var(--space-4); border-radius: 12px; background: var(--card-ink); color: var(--on-card-ink); white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; min-width: 0; max-width: 100%; }
.cb-cn-code pre code { font-size: 12px; line-height: 18px; color: inherit; }
.cb-cn-code.secret pre { box-shadow: inset 0 0 0 2px var(--flame); }
.cb-cn-cpmsg { font-size: 11px; line-height: 14px; color: var(--ink-2); min-height: 0; }
.cb-cn-cpmsg:empty { display: none; }

/* статус подключения */
.cb-cn-status { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 28px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--inset); }
.cb-cn-status.ok { background: var(--ok-soft); }
.cb-cn-status.error { background: var(--bad-soft); }
.cb-cn-status.wait .cb-status::before { display: none; }
.cb-cn-status .tx { font-size: 12px; color: var(--ink-2); }
.cb-cn-status .spin { display: inline-grid; color: var(--ink-3); animation: cb-cn-spin 1.4s linear infinite; }
@keyframes cb-cn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cb-cn-status .spin { animation: none; } }

/* ══ 1. ConnectWizard ══ */
.cb-cn-target { display: flex; flex-direction: column; gap: 6px; }
.cb-cn-target .cb-seg { align-self: flex-start; max-width: 100%; }
.cb-cn-wsteps { display: flex; flex-direction: column; gap: var(--space-5); counter-reset: none; }
.cb-cn-wstep { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.cb-cn-wstep > .n, .cb-cn-steps > li > .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.cb-cn-wstep > .b { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-cn-wstep h4 { font-size: 15px; line-height: 28px; font-weight: 600; }
.cb-cn-wstep .sub { margin-top: -8px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
@container (max-width: 480px) { .cb-cn-wstep { grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-2); } .cb-cn-wstep > .b > :not(h4):not(.sub) { margin-left: -36px; } }

/* выбор инструмента */
.cb-cn-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); min-width: 0; }
.cb-cn-tool { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 104px; padding: var(--space-4); border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; transition: background-color .15s, box-shadow .15s; outline: none; }
.cb-cn-tool:hover { background: var(--inset); }
.cb-cn-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-cn-tool.on { background: color-mix(in oklab, var(--flame) 14%, var(--card)); }
.cb-cn-tool .ic { width: 36px; height: 36px; margin-bottom: 8px; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink); }
.cb-cn-tool b { font-size: 14px; line-height: 18px; font-weight: 600; }
.cb-cn-tool small { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-cn-tool .ok { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; font-weight: 500; color: var(--ok); }
.cb-cn-tool .mk { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--flame-deep); color: var(--on-flame); }
@container (max-width: 460px) { .cb-cn-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cb-cn-tool { min-height: 96px; padding: 12px; } }

/* выбор платформы */
.cb-cn-plat-w { display: flex; flex-direction: column; gap: 6px; }
.cb-cn-plat { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 16px; background: var(--inset); align-self: flex-start; max-width: 100%; }
.cb-cn-plat .it { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 12px; color: var(--ink-2); font-weight: 500; cursor: pointer; outline: none; transition: background-color .15s, color .15s; }
.cb-cn-plat .it:hover { color: var(--ink); }
.cb-cn-plat .it:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-cn-plat .it.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-ring); }
.cb-cn-plat .det { display: inline-grid; place-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--flame-soft); color: var(--ink); font-size: 11px; font-weight: 600; }

/* шаги подключения */
.cb-cn-steps-w { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-cn-for { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.cb-cn-for b { color: var(--ink); font-weight: 600; }
.cb-cn-steps { display: flex; flex-direction: column; gap: var(--space-3); }
.cb-cn-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-cn-steps > li > .n { width: 24px; height: 24px; font-size: 12px; }
.cb-cn-steps > li > .b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cb-cn-steps h4 { font-size: 14px; line-height: 24px; font-weight: 600; }
.cb-cn-steps p { font-size: 12px; line-height: 17px; color: var(--ink-2); }
@container (max-width: 420px) { .cb-cn-steps > li { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); } .cb-cn-steps > li > .n { display: none; } }

/* экран-пример: мастер + боковая колонка */
.cb-cn-scr { container-type: inline-size; min-width: 0; }
.cb-cn-screen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--space-5); align-items: start; }
.cb-cn-screen > .main, .cb-cn-screen > .side { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.cb-cn-screen > .side > .cb-cn:not(.cb-cn-setc) { padding: var(--space-4); border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); }
@container (max-width: 820px) { .cb-cn-screen { grid-template-columns: minmax(0, 1fr); } }

/* ══ 2. KeyIssue ══ */
.cb-cn-keyform, .cb-cn-reveal { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-cn-reveal h4 { font-size: 14px; line-height: 20px; font-weight: 600; }
.cb-cn-cur { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 12px; border-radius: 12px; background: var(--card); }
.cb-cn-cur .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-cn-cur > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-cn-cur code { font-size: 13px; color: var(--ink); }
.cb-cn-cur small { font-size: 12px; color: var(--ink-3); }
@container (max-width: 380px) { .cb-cn-cur { grid-template-columns: 32px minmax(0, 1fr); } .cb-cn-cur .cb-status { grid-column: 2; } }
.cb-cn-opts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.cb-cn-opts .o { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cb-cn-opts .l { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.cb-cn-sel { height: var(--control-h-sm); padding: 0 32px 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; max-width: 100%; }
.cb-cn-sel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-cn-warn { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); color: var(--ink); font-size: 12px; line-height: 17px; }
.cb-cn-warn .cb-i { flex: none; margin-top: 1px; color: var(--warn); }
.cb-cn-warn b { font-weight: 600; }
.cb-cn-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--space-3); margin: 0; font-size: 12px; }
.cb-cn-kv dt { color: var(--ink-3); }
.cb-cn-kv dd { margin: 0; color: var(--ink); font-weight: 500; }
.cb-cn-chk { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font-size: 13px; color: var(--ink); cursor: pointer; }
.cb-cn-chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.cb-cn-chk input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ══ 3. ConnectionsList ══ */
.cb-cn-clist { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-cn-conn { display: grid; grid-template-columns: 32px minmax(120px, 1.2fr) minmax(0, auto) minmax(120px, 1fr) auto auto; grid-template-areas: "ic who mask last st act" "cf cf cf cf cf cf"; gap: 6px var(--space-3); align-items: center; padding: var(--space-2) 12px; border-radius: 14px; background: var(--inset); min-width: 0; }
.cb-cn-conn.gone { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cb-cn-conn > .ic { grid-area: ic; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--card); color: var(--ink); }
.cb-cn-conn > .who { grid-area: who; display: flex; flex-direction: column; min-width: 0; }
.cb-cn-conn > .who b { font-weight: 600; }
.cb-cn-conn > .who small, .cb-cn-conn > .last small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-cn-conn > .mask { grid-area: mask; color: var(--ink-2); }
.cb-cn-conn > .last { grid-area: last; display: flex; flex-direction: column; font-size: 12px; min-width: 0; }
.cb-cn-conn > .st { grid-area: st; }
.cb-cn-conn > .act { grid-area: act; justify-self: end; }
.cb-cn-conn > .act:empty { display: none; }
.cb-cn-confirm { grid-area: cf; display: flex; flex-direction: column; gap: var(--space-2); padding: 12px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-cn-confirm p { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 17px; }
.cb-cn-confirm .cb-i { flex: none; margin-top: 1px; color: var(--warn); }
@container (max-width: 640px) {
  .cb-cn-conn { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "ic who act" "ic mask mask" "ic last last" "ic st st" "cf cf cf"; }
  .cb-cn-conn > .ic { align-self: start; }
}

/* ══ 4. AccessScopeCard ══ */
.cb-cn-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cb-cn-chips li { display: inline-flex; align-items: center; gap: 8px; padding: var(--space-2) 12px var(--space-2) var(--space-3); border-radius: 12px; background: var(--inset); min-width: 0; }
.cb-cn-chips li .cb-i { flex: none; color: var(--ink-2); }
.cb-cn-chips li > span { display: flex; flex-direction: column; min-width: 0; }
.cb-cn-chips small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-cn-chips b { font-size: 13px; line-height: 17px; font-weight: 500; }
.cb-cn-chips li.log { background: var(--flame-soft); }
.cb-cn-chips li.log .cb-i { color: var(--ink); }
.cb-cn-chips li.log small { color: var(--ink-2); }
.cb-cn-scope-tx { font-size: 13px; line-height: 19px; color: var(--ink-2); }
.cb-cn-ex.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); align-items: start; }

/* ══ 5. CallReceipts ══ */
.cb-cn-filt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.cb-cn-filt .cb-seg { flex-wrap: wrap; }
.cb-cn-tw { min-width: 0; border-radius: var(--radius-inset); background: var(--inset); padding: 4px; }
.cb-cn-tbl { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.cb-cn-tbl thead th { text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-2); padding: 8px 12px; white-space: nowrap; }
.cb-cn-tbl tbody th, .cb-cn-tbl tbody td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--border); vertical-align: top; font-weight: 400; }
.cb-cn-tbl .r { text-align: right; }
.cb-cn-tbl .tl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 500; }
.cb-cn-tbl .tl .cb-i { color: var(--ink-3); }
.cb-cn-tbl small { display: block; font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-cn-tbl .dn { display: flex; flex-direction: column; gap: 2px; }
.cb-cn-tbl .dn small { color: var(--ink-2); }
.cb-cn-tbl .no { color: var(--ink-3); }
.cb-cn-tbl tr.den > * { background: color-mix(in oklab, var(--bad-soft) 60%, transparent); }
.cb-cn-tbl code { color: var(--ink-2); white-space: nowrap; }
.cb-cn-tbl .none { text-align: center; color: var(--ink-2); padding: 20px 12px; }
@container (max-width: 700px) {
  .cb-cn-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .cb-cn-tbl, .cb-cn-tbl tbody { display: block; }
  .cb-cn-tbl tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px var(--space-3); padding: 12px; border-top: 1px solid var(--border); }
  .cb-cn-tbl tbody [data-l="Инструмент"] { grid-column: span 2; }
  .cb-cn-tbl tbody [data-l="Запрос"], .cb-cn-tbl tbody [data-l="Ключ"] { grid-column: 1 / -1; }
  .cb-cn-tbl tbody tr.den [data-l="Отказано"] { grid-column: 1 / -1; grid-row: 4; }
  .cb-cn-tbl tbody .r { text-align: left; }
  .cb-cn-tbl tbody tr:first-child { border-top: 0; }
  .cb-cn-tbl tbody th, .cb-cn-tbl tbody td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
  .cb-cn-tbl tbody tr.den > * { background: none; }
  .cb-cn-tbl tbody tr.den { background: color-mix(in oklab, var(--bad-soft) 60%, transparent); border-radius: 10px; }
  .cb-cn-tbl tbody [data-l]::before { content: attr(data-l); display: block; font-size: 11px; line-height: 14px; color: var(--ink-3); }
  .cb-cn-tbl tbody td.none { grid-column: 1 / -1; text-align: center; }
  .cb-cn-tbl tbody td.none::before { content: none; }
  .cb-cn-tbl code { white-space: normal; overflow-wrap: break-word; }
}

/* ══ 6. TruthActivity ══ */
.cb-cn-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.cb-cn-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 12px var(--space-4); border: 0; border-radius: 16px; background: var(--inset); color: var(--ink); text-align: left; cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.cb-cn-kpi:hover { background: var(--inset-hover); }
.cb-cn-kpi:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-cn-kpi.on { background: var(--inset); }
.cb-cn-kpi.den.on { box-shadow: inset 0 0 0 2px var(--bad); }
.cb-cn-kpi .l { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.cb-cn-kpi.den .l .cb-i { color: var(--bad); }
.cb-cn-kpi > b { font-size: 26px; line-height: 30px; font-weight: 600; letter-spacing: -.01em; }
.cb-cn-kpi .cmp { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 11px; line-height: 14px; color: var(--ink-3); }
@container (max-width: 640px) { .cb-cn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cb-cn-kpi > b { font-size: 22px; line-height: 26px; } }
.cb-cn-feed-w { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-cn-feed-w h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
.cb-cn-feed-w h4 .n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--inset); font-size: 11px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-cn-feed { display: flex; flex-direction: column; }
.cb-cn-feed li { display: grid; grid-template-columns: 44px 28px minmax(0, 1fr); gap: var(--space-2); align-items: start; padding: 10px 0; border-top: 1px solid var(--border); }
.cb-cn-feed li:first-child { border-top: 0; }
.cb-cn-feed .tm { font-size: 12px; line-height: 24px; color: var(--ink-3); }
.cb-cn-feed .k { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-cn-feed li.den .k { background: var(--bad-soft); color: var(--bad); }
.cb-cn-feed .b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cb-cn-feed .b > p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; line-height: 24px; }
.cb-cn-feed .w { color: var(--ink); }
.cb-cn-feed .rule { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-cn-feed .rule .cb-i { flex: none; margin-top: 2px; color: var(--bad); }
.cb-cn-feed .sub { font-size: 12px; line-height: 16px; color: var(--ink-3); }
@container (max-width: 420px) { .cb-cn-feed li { grid-template-columns: 40px minmax(0, 1fr); } .cb-cn-feed .k { display: none; } }

/* ══ 7. SetupChecklist ══ */
.cb-cn-prog { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--inset); overflow: hidden; }
.cb-cn-prog i { display: block; height: 100%; border-radius: inherit; background: var(--flame); transition: width .3s; }
.cb-cn-setup { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-cn-setup li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 12px; border-radius: 12px; background: var(--inset); }
.cb-cn-setup li .ic { display: grid; color: var(--ink-3); }
.cb-cn-setup li.ok .ic { color: var(--ok); }
.cb-cn-setup .b { display: flex; flex-direction: column; min-width: 0; }
.cb-cn-setup .b b { font-weight: 500; }
.cb-cn-setup li.ok .b b { color: var(--ink-2); }
.cb-cn-setup .b small { font-size: 12px; line-height: 16px; color: var(--ink-3); }
/* компактный вид для бокового меню */
.cb-cn-setc { gap: 0; border-radius: 14px; background: var(--inset); }
.cb-cn-setc .tg { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font-weight: 500; cursor: pointer; text-align: left; }
.cb-cn-setc .tg:hover { background: var(--inset-hover); }
.cb-cn-setc .tg:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-cn-setc .tg .l { flex: 1; min-width: 0; }
.cb-cn-setc .tg .cnt { height: 20px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); background: var(--flame-soft); color: var(--ink); font-size: 11px; font-weight: 600; }
.cb-cn-setc .bd { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 8px 8px; }
.cb-cn-setc .cb-cn-setup li { padding: 6px 8px; background: var(--card); grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; }
.cb-cn-setc .cb-cn-setup .b b { font-size: 12px; }
.cb-cn-side { display: flex; flex-direction: column; gap: var(--space-2); max-width: 280px; }

/* примеры */
.cb-cn-ex { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cb-cn-ex > .cb-seg { align-self: flex-start; flex-wrap: wrap; }
.cb-cn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cb-cn-row .cb-seg { flex-wrap: wrap; }

/* ── src/styles/y1-zones.css ── */
/* ── Сетка в коде: зоны экрана Z1–Z8 и ряды (брендбук «Сетка», tokens.json › layout) ─────────────
   Четыре уровня: каркас → зона → ряд → карточка. Числа колонок только из словаря.
   Разметка: .cb-zone[data-zone="z1…z8"] > .cb-zone-a[data-area="head|queue|qbtn|main|aside|context"];
             .cb-row[data-row="12|8-4|4-8|7-5|5-7|6-6|4-4-4"] > ячейки; ячейка — data-role и data-min.
   Компоненты: Zone и Row (f-shell.js), в шаблонах — T.zone и T.row (03_ШАБЛОНЫ/_common/boot.js). */

/* ── Зона ── */
.cb-zone { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); align-items: start; min-width: 0; }
.cb-zone > .cb-zone-a { grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; container-type: inline-size; }
.cb-zone > [data-area="qbtn"] { display: flex; container-type: normal; }
/* z2 обзор с колонкой · z7 полотно времени: главное 9 · колонка 3; колонка во всю высоту и липкая */
.cb-zone:is([data-zone="z2"], [data-zone="z7"]) > [data-area="main"] { grid-column: span 9; }
.cb-zone:is([data-zone="z2"], [data-zone="z7"]) > [data-area="aside"] { grid-column: span 3; position: sticky; top: var(--space-4); }
/* z3 мастер-деталь: список 5 · запись 7 */
.cb-zone[data-zone="z3"] > [data-area="queue"] { grid-column: span 5; }
.cb-zone[data-zone="z3"] > [data-area="main"] { grid-column: span 7; }
/* z4 три панели: очередь 4 · объект 5 · контекст 3 */
.cb-zone[data-zone="z4"] > [data-area="queue"] { grid-column: span 4; }
.cb-zone[data-zone="z4"] > [data-area="main"] { grid-column: span 5; }
.cb-zone[data-zone="z4"] > [data-area="context"] { grid-column: span 3; }
/* z5 фильтры 3 · данные 9 */
.cb-zone[data-zone="z5"] > [data-area="queue"] { grid-column: span 3; position: sticky; top: var(--space-4); }
.cb-zone[data-zone="z5"] > [data-area="main"] { grid-column: span 9; }
/* z6 шаги: путь 4 · шаг 8 */
.cb-zone[data-zone="z6"] > [data-area="queue"] { grid-column: span 4; }
.cb-zone[data-zone="z6"] > [data-area="main"] { grid-column: span 8; }
/* нет боковых областей — главное на всю ширину; z8 — документ одной колонкой */
.cb-zone:not(:has(> [data-area="aside"], > [data-area="context"], > [data-area="queue"])) > [data-area="main"] { grid-column: 1 / -1; }
.cb-zone[data-zone="z8"] > .cb-zone-a { grid-column: 1 / -1; }
.cb-zone-back { display: flex; }

/* ≤ 1180: колонка z2 — лента под поясом мерок; z3 и z7 — друг под другом; z4 — объект 8 · контекст 4; z5 — «Фильтры (N)»; z6 — путь полосой над шагом */
@media (max-width: 1180px) {
  .cb-zone > [data-area="head"] { order: 0; }
  .cb-zone[data-zone="z2"] > [data-area="aside"] { grid-column: 1 / -1; order: 1; position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min-w-list)), 1fr)); }
  .cb-zone[data-zone="z2"] > [data-area="main"] { grid-column: 1 / -1; order: 2; }
  .cb-zone[data-zone="z7"] > :is([data-area="main"], [data-area="aside"]) { grid-column: 1 / -1; position: static; }
  .cb-zone[data-zone="z3"] > :is([data-area="queue"], [data-area="main"]) { grid-column: 1 / -1; }
  .cb-zone[data-zone="z4"] > [data-area="queue"] { grid-column: 1 / -1; }
  .cb-zone[data-zone="z4"] > [data-area="main"] { grid-column: span 8; }
  .cb-zone[data-zone="z4"] > [data-area="context"] { grid-column: span 4; }
  .cb-zone[data-zone="z4"]:not(:has(> [data-area="context"])) > [data-area="main"] { grid-column: 1 / -1; }
  .cb-zone[data-zone="z5"] > :is([data-area="queue"], [data-area="main"]) { grid-column: 1 / -1; position: static; }
  .cb-zone[data-zone="z6"] > [data-area="queue"] { grid-column: 1 / -1; grid-auto-flow: column; grid-auto-columns: minmax(min(100%, 200px), 1fr); grid-template-columns: none; overflow-x: auto; }
  .cb-zone[data-zone="z6"] > [data-area="main"] { grid-column: 1 / -1; }
}

/* ── Ряд: словарь 12 · 8+4 · 4+8 · 7+5 · 5+7 · 6+6 · 4+4+4. Ячейка, не набравшая минимум по содержанию (data-min),
   переносится на свою строку раньше брейкпоинта экрана: ряд — flex с переносом, основа ячейки = её колонки ── */
.cb-row { --row-gap: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--row-gap); align-items: stretch; min-width: 0; }
.cb-row[data-align="start"] { align-items: start; }
.cb-row[data-align="start"] > * > .cb-card { height: auto; }
.cb-row > * { --col: 12; flex: var(--col) 1 calc((100% - 11 * var(--row-gap)) / 12 * var(--col) + (var(--col) - 1) * var(--row-gap)); min-width: min(100%, var(--min, 0px)); container-type: inline-size; }
.cb-row > * > .cb-card { height: 100%; }
.cb-row[data-row="8-4"] > :nth-child(1), .cb-row[data-row="4-8"] > :nth-child(2) { --col: 8; }
.cb-row[data-row="8-4"] > :nth-child(2), .cb-row[data-row="4-8"] > :nth-child(1) { --col: 4; }
.cb-row[data-row="7-5"] > :nth-child(1), .cb-row[data-row="5-7"] > :nth-child(2) { --col: 7; }
.cb-row[data-row="7-5"] > :nth-child(2), .cb-row[data-row="5-7"] > :nth-child(1) { --col: 5; }
.cb-row[data-row="6-6"] > :nth-child(n) { --col: 6; }
.cb-row[data-row="4-4-4"] > :nth-child(n) { --col: 4; }
/* минимум ширины по содержанию: KPI 180 · список 320 · график 480 · таблица 640 */
[data-min="kpi"] { --min: var(--min-w-kpi); }
[data-min="list"] { --min: var(--min-w-list); }
[data-min="chart"] { --min: var(--min-w-chart); }
[data-min="table"] { --min: var(--min-w-table); }
@media (max-width: 1180px) {
  .cb-row:is([data-row="8-4"], [data-row="4-8"], [data-row="7-5"], [data-row="5-7"]) > :nth-child(n) { --col: 12; }
  .cb-row[data-row="4-4-4"] > :nth-child(-n+2) { --col: 6; }
  .cb-row[data-row="4-4-4"] > :nth-child(3) { --col: 12; }
}
@media (max-width: 860px) {
  .cb-row > :nth-child(n) { --col: 12; }
}

/* ── Карточка знает свою ширину (контейнерный запрос), а не ширину экрана ── */
@container (max-width: 479px) {
  .cb-card-h { flex-wrap: wrap; }
  .cb-card-h .act { flex-wrap: wrap; }
}

/* ── ≤ 860: одна колонка по ролям kpi → attention → figure → evidence → exit.
   z1, z2, z6, z7 раскладываются в одну ленту (области и ряды прозрачны), z3–z5 держат свою логику «очередь → объект». ── */
@media (max-width: 860px) {
  .cb-zone { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .cb-zone > .cb-zone-a { width: 100%; position: static; }
  /* ячейки раскрытых рядов становятся пунктами ленты: ширина — вся лента, высота — по содержанию */
  .cb-zone:is([data-zone="z1"], [data-zone="z2"], [data-zone="z6"], [data-zone="z7"]) > .cb-zone-a > .cb-row > * { flex: 0 0 auto; width: 100%; }
  .cb-zone:is([data-zone="z1"], [data-zone="z2"], [data-zone="z6"], [data-zone="z7"]) > .cb-zone-a:not([data-area="queue"]),
  .cb-zone:is([data-zone="z1"], [data-zone="z2"], [data-zone="z6"], [data-zone="z7"]) > .cb-zone-a:not([data-area="queue"]) > .cb-row { display: contents; }
  .cb-zone [data-area="head"] > :not([data-role]) { order: 0; }
  :is(.cb-zone, .cb-zone-a, .cb-row, .cb-bento) > :not([data-role]) { order: 3; }
  :is(.cb-zone, .cb-zone-a, .cb-row, .cb-bento) > [data-role="kpi"] { order: 1; }
  :is(.cb-zone, .cb-zone-a, .cb-row, .cb-bento) > [data-role="attention"] { order: 2; }
  :is(.cb-zone, .cb-zone-a, .cb-row, .cb-bento) > [data-role="figure"] { order: 3; }
  :is(.cb-zone, .cb-zone-a, .cb-row, .cb-bento) > [data-role="evidence"] { order: 4; }
  :is(.cb-zone, .cb-zone-a, .cb-row, .cb-bento) > [data-role="exit"] { order: 5; }
  .cb-zone > [data-area="head"], .cb-zone > [data-area="qbtn"] { order: 0; }
}
/* пресет «телефон» на широком экране ведёт себя как узкий: роли по порядку */
html[data-preset="phone"] .cb-row > :nth-child(n) { --col: 12; }
html[data-preset="phone"] .cb-zone { display: flex; flex-direction: column; align-items: stretch; }
html[data-preset="phone"] .cb-zone > .cb-zone-a { width: 100%; position: static; }

/* ── src/styles/z1-agent.css ── */
/* ── Окно агента (CatalystBento · группа «Окно агента», src/charts/z1-agent.js) ─────────────
   Один стержень, носители: плавающая кнопка → боковая панель → весь экран с историей; помощник в поле.
   Корень .cb-zdock — контейнер «zdock»: раскладка следует ширине окна (fixed) или рамки (inline, галерея и острова).
   Отступ над нижней навигацией телефона — --bottom-nav-h (по умолчанию 64px). Движение — токены --motion-*, при reduced-motion выключено. */

.cb-zdock { position: fixed; inset: 0; z-index: 900; pointer-events: none; container: zdock / inline-size; font-family: var(--font-sans); color: var(--ink); }
.cb-zdock.inline { position: absolute; z-index: 2; }
.cb-zdock > * { pointer-events: auto; }
.cb-zlive { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* плавающая кнопка */
.cb-zdock .cb-zfab { position: absolute; right: var(--space-5); bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: var(--space-2);
  height: 48px; padding: 0 var(--space-5) 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary);
  font: 600 14px/20px var(--font-sans); box-shadow: var(--shadow-pop); cursor: pointer;
  transition: background-color var(--motion-subtle-in) var(--motion-ease), transform var(--motion-subtle-in) var(--motion-ease); }
.cb-zdock .cb-zfab:hover { background: color-mix(in oklab, var(--primary) 86%, var(--canvas)); }
.cb-zdock .cb-zfab:active { transform: scale(.98); }
.cb-zdock .cb-zfab:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.cb-zdock .cb-zfab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 2px var(--primary); }
.cb-zdock.open .cb-zfab { display: none; }

.cb-zscrim { position: absolute; inset: 0; background: color-mix(in oklab, var(--ink) 18%, transparent); animation: cb-zfade var(--motion-standard-in) var(--motion-ease); }
.cb-zdock.m-full .cb-zscrim { display: none; }

/* панель */
.cb-zpanel { position: absolute; top: var(--space-3); right: var(--space-3); bottom: var(--space-3); width: clamp(400px, 32cqw, 440px); max-width: calc(100% - 2 * var(--space-3));
  display: flex; flex-direction: column; min-height: 0; background: var(--card); color: var(--ink); border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
  overflow: hidden; outline: none; font-size: 14px; line-height: 20px; animation: cb-zin var(--motion-standard-in) var(--motion-ease); }
.cb-zpanel.full { inset: 0; width: auto; max-width: none; border-radius: 0; animation-name: cb-zfade; }
.cb-zdock.inline .cb-zpanel.full { border-radius: var(--radius-card); }
@keyframes cb-zin { from { transform: translateX(16px); opacity: 0; } }
@keyframes cb-zfade { from { opacity: 0; } }

.cb-zhead { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); flex: none; }
.cb-zhead .who { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1; flex-wrap: wrap; }
.cb-zhead .tools { display: flex; gap: 2px; flex: none; }
.cb-zdock .cb-ibtn.sm { width: 32px; height: 32px; color: var(--ink-2); }
.cb-zdock .cb-ibtn.sm:hover { background: var(--inset); }
.cb-zlist-tg { display: none; }

.cb-zbody { flex: 1; min-height: 0; display: flex; position: relative; }
.cb-zmain { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.cb-zpanel.full .cb-zconv.side { width: 280px; flex: none; border-right: 1px solid var(--border); padding: var(--space-4); overflow: auto; }
.cb-zpanel.full :is(.cb-zlist, .cb-zfirst, .cb-zcomp, .cb-zfoot, .cb-zsetup > *) { width: 100%; max-width: 760px; margin-inline: auto; }

.cb-zsetup { flex: none; display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.cb-zctx { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-2); min-width: 0; overflow-wrap: break-word; }
.cb-zctx .cb-i { flex: none; margin-top: 2px; color: var(--ink-3); }
.cb-zctx .k { color: var(--ink-3); }
.cb-zctx b { color: var(--ink); font-weight: 500; }

/* выбор агента */
.cb-zpick { display: grid; gap: var(--space-2); min-width: 0; }
.cb-zpick .row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cb-zpick.none { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-chip); background: var(--inset); color: var(--ink-2); font-size: 13px; line-height: 18px; }
.cb-zsel { display: grid; gap: 2px; flex: 1 1 140px; min-width: 0; }
.cb-zsel .l { font-size: 11px; line-height: 15px; font-weight: 500; color: var(--ink-3); }
.cb-zpick.compact .cb-zsel .l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cb-zsel .w { position: relative; display: flex; align-items: center; }
.cb-zsel .w .cb-i { position: absolute; right: 10px; pointer-events: none; color: var(--ink-3); }
.cb-zsel-in { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: var(--control-h-sm); padding: 0 28px 0 12px; border: 0; border-radius: var(--radius-pill);
  background: var(--inset); color: var(--ink); font: 500 13px/18px var(--font-sans); cursor: pointer; transition: background-color var(--motion-subtle-in) var(--motion-ease); }
.cb-zsel-in:hover { background: var(--inset-hover); }
.cb-zsel-in:disabled { opacity: .55; cursor: not-allowed; }
.cb-zrights { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-zrights .cb-i { flex: none; margin-top: 2px; color: var(--ink-3); }

/* беседа */
.cb-zmsgs { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4); overscroll-behavior: contain; }
.cb-zlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.cb-zlist > li { display: grid; gap: 6px; min-width: 0; }
.cb-zlist > li.me { justify-items: end; }
.cb-zlist > li.me > .bub { max-width: 88%; padding: var(--space-2) var(--space-3); border-radius: 16px 16px 4px 16px; background: var(--primary); color: var(--on-primary); white-space: pre-wrap; overflow-wrap: break-word; }
.cb-zlist > li.me .files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cb-zlist > li.me .files li { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--inset); font-size: 12px; color: var(--ink-2); }
.cb-zlist > li.me .voice { width: min(100%, 360px); }
.cb-zlist > li.ag { justify-items: stretch; }
.cb-zlist .mh { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.cb-zlist .mh .at { font-size: 11px; line-height: 15px; color: var(--ink-3); }
.cb-zlist .ag > .bub { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: 4px 16px 16px 16px; background: var(--inset); min-width: 0; }
.cb-zlist .ag > .bub .cb-acite { background: var(--card); }
.cb-zlist .cb-acite .no { background: var(--ink); color: var(--card); }   /* номер сноски: в окне агента нет --ag-bg, берём card — контраст с ink в обеих темах */
.cb-zlist .ag > .bub.nosrc { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cb-zlist .ag > .bub .ns { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--warn); }
.cb-zlist .ag > .bub .src { display: grid; gap: 4px; }
.cb-zlist .ag > .bub .k { font-size: 11px; line-height: 15px; font-weight: 500; color: var(--ink-3); }
.cb-zlist .ag > .bub.think { gap: 8px; }
.cb-zlist .ag > .bub.think .cb-skel { display: block; height: 12px; border-radius: 6px; }
.cb-zlist .ag > .bub .l1, .cb-zia-draft .l1 { width: 86%; }
.cb-zlist .ag > .bub .l2, .cb-zia-draft .l2 { width: 64%; }
.cb-zlist .ag > .bub .l3 { width: 40%; }
.cb-zlist .ag > .bub.err { background: var(--bad-soft); }
.cb-zlist .ag > .bub.denied { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cb-zlist .ag > .bub.denied .lk { display: inline-flex; align-items: center; gap: 6px; }
.cb-zlist .ag > .bub p { margin: 0; }
.cb-zlist .ag .acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cb-ztext { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; }
.cb-zref { font-size: 11px; line-height: 0; font-weight: 600; color: var(--ink-3); margin-left: 1px; transition: color var(--motion-subtle-in) var(--motion-ease); }
.cb-zref.on { color: var(--ink); }
.cb-zcaret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background: var(--ink-3); animation: cb-zblink 1s steps(2, start) infinite; }
@keyframes cb-zblink { to { visibility: hidden; } }
.cb-znote { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-zwarn { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 6px; font-size: 12px; line-height: 16px; color: var(--warn); font-weight: 500; }
.cb-zwarn .cb-i { flex: none; margin-top: 0; }
.cb-zappr { min-width: 0; }

/* пустая беседа */
.cb-zfirst { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); }
.cb-zfirst > b { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-zfirst > p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 18px; }
.cb-zfirst .sugg { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.cb-zfirst .cb-zsug { display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; padding: 10px 14px; border: 0; border-radius: var(--radius-chip); background: var(--inset); color: var(--ink);
  font: 500 13px/18px var(--font-sans); text-align: left; cursor: pointer; transition: background-color var(--motion-subtle-in) var(--motion-ease); }
.cb-zfirst .cb-zsug:hover { background: var(--inset-hover); }
.cb-zfirst .cb-zsug .cb-i { flex: none; margin-top: 3px; color: var(--ink-3); }

/* поле ввода окна */
.cb-zcomp { flex: none; display: grid; gap: var(--space-2); margin: 0 var(--space-4); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-zcomp:focus-within { box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-zpanel.full .cb-zcomp { margin-inline: auto; }
.cb-zcomp-in { width: 100%; min-height: 44px; max-height: 160px; resize: none; border: 0; outline: 0; padding: 6px 0 0; background: transparent; color: var(--ink); font: 400 14px/20px var(--font-sans); }
.cb-zcomp-in::placeholder { color: var(--ink-3); }
.cb-zcomp-in:focus-visible { outline: none; }   /* фокус показывает рамка поля .cb-zcomp:focus-within */
.cb-zcomp .bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cb-zcomp .bar .hint { margin-left: var(--space-2); font-size: 11px; line-height: 15px; color: var(--ink-3); }
.cb-zpanel.side .cb-zcomp .bar .hint { display: none; }
.cb-zcomp .bar > .cb-btn { margin-left: auto; }
.cb-zpick.compact .row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.cb-zpick.compact .row:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr); }
.cb-zpick.compact .cb-zsel-in { padding: 0 24px 0 10px; font-size: 12px; }
.cb-zcomp .bar .recw { font-size: 12px; font-weight: 500; color: var(--bad); }
.cb-zcomp .cb-ibtn.rec { background: var(--bad-soft); color: var(--bad); }
.cb-zcomp .att { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cb-zcomp .att li { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 28px; padding: 0 2px 0 10px; border-radius: var(--radius-pill); background: var(--inset); font-size: 12px; color: var(--ink-2); }
.cb-zcomp .att .n { overflow-wrap: break-word; }
.cb-zcomp .att .cb-ibtn.sm { width: 24px; height: 24px; }
.cb-zfoot { flex: none; margin: 0; padding: var(--space-2) var(--space-4) var(--space-3); font-size: 11px; line-height: 15px; color: var(--ink-3); text-align: center; }

/* история бесед */
.cb-zconv { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-zconv .hd { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cb-zconv .hd b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-zconv .cb-search { background: var(--inset); box-shadow: none; height: var(--control-h-sm); }
.cb-zconv .grp { display: grid; gap: var(--space-1); }
.cb-zconv .grp + .grp { margin-top: var(--space-4); }
.cb-zconv .gh { padding: 0 var(--space-2); font-size: 11px; line-height: 15px; font-weight: 500; color: var(--ink-3); }
.cb-zconv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
/* строка беседы: знак агента · заголовок и мета · справа только то, что есть. Выбранная — плашка inset на всю строку, без полос и обводок */
.cb-zconv .cb-zconv-it { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-inset); background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  font: inherit; transition: background-color var(--motion-subtle-in) var(--motion-ease); }
.cb-zconv .cb-zconv-it:hover { background: var(--inset-hover); }
.cb-zconv .cb-zconv-it:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }   /* кольцо внутрь: список прокручивается и режет внешнее */
.cb-zconv .cb-zconv-it.on { background: var(--inset); }
.cb-zconv .cb-zconv-it .av { display: grid; place-items: center; margin-top: 1px; }
.cb-zconv .cb-zconv-it .tx { display: grid; gap: 1px; min-width: 0; }
.cb-zconv .cb-zconv-it .t { font-size: 13px; line-height: 18px; font-weight: 500; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cb-zconv .cb-zconv-it .m { font-size: 11px; line-height: 15px; color: var(--ink-3); }
.cb-zconv .cb-zconv-it .ex { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cb-zconv .cb-zconv-it .dr { font-size: 11px; line-height: 15px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cb-zempty { margin: 0; padding: var(--space-3); border-radius: var(--radius-chip); background: var(--inset); font-size: 12px; line-height: 16px; color: var(--ink-2); }

/* помощник в поле */
.cb-zia { display: grid; gap: 6px; min-width: 0; container: zia / inline-size; }
.cb-zia-l { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2); }
.cb-zia .wrap { position: relative; }
.cb-zia-in { display: block; width: 100%; min-height: var(--control-h); padding: 10px 44px 10px 14px; border: 0; border-radius: var(--radius-chip); background: var(--inset); color: var(--ink);
  font: 400 14px/20px var(--font-sans); resize: vertical; box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow var(--motion-subtle-in) var(--motion-ease); }
/* многострочное поле растёт по тексту: черновик не обрезается по высоте; rows — запасной путь для браузеров без field-sizing */
textarea.cb-zia-in { field-sizing: content; max-height: 320px; overflow-y: auto; }
.cb-zia-in:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-zia-in::placeholder { color: var(--ink-3); }
.cb-zia-in.cell { min-height: 32px; padding: 6px 34px 6px 10px; border-radius: 8px; font-size: 13px; line-height: 18px; background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.cb-zia .cb-zia-tb { position: absolute; top: 6px; right: 6px; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-pill); background: transparent;
  color: var(--ink-3); cursor: pointer; transition: background-color var(--motion-subtle-in) var(--motion-ease), color var(--motion-subtle-in) var(--motion-ease); }
.cb-zia .cb-zia-tb:hover, .cb-zia .cb-zia-tb.on { background: var(--card); color: var(--flame-deep); }
.cb-zia.cell .cb-zia-tb { top: 4px; right: 4px; width: 24px; height: 24px; }
.cb-zia-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; display: grid; gap: 2px; min-width: 220px; padding: 6px; border-radius: var(--radius-chip); background: var(--card);
  box-shadow: var(--shadow-pop); animation: cb-zfade var(--motion-standard-in) var(--motion-ease); }
.cb-zia-menu .cb-zia-mi { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink);
  font: 500 13px/18px var(--font-sans); text-align: left; cursor: pointer; }
.cb-zia-menu .cb-zia-mi:hover, .cb-zia-menu .cb-zia-mi:focus-visible { background: var(--inset); outline: none; }
.cb-zia-menu .cb-zia-mi .cb-i { color: var(--ink-3); }
.cb-zia-draft { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-chip); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-zia-draft .dh { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-zia-draft .dh .k, .cb-zia-draft .cmp .k { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 15px; font-weight: 500; color: var(--ink-3); }
.cb-zia-draft .cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.cb-zia-draft .cmp > div { display: grid; gap: 2px; align-content: start; padding: 8px 10px; border-radius: 8px; background: var(--inset); font-size: 13px; line-height: 18px; overflow-wrap: break-word; }
.cb-zia-draft .was s { color: var(--ink-3); }
.cb-zia-draft .was .na { color: var(--ink-3); }
.cb-zia-draft .will { background: var(--inset); }
.cb-zia-draft .will b { font-weight: 500; }
.cb-zia-draft .src { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-zia-draft .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cb-zia-draft .nt { font-size: 11px; line-height: 15px; color: var(--ink-3); }
.cb-zia-draft .sk { display: grid; gap: 6px; justify-items: start; }
.cb-zia-draft .sk .cb-skel { display: block; height: 12px; border-radius: 6px; }
.cb-zia-draft .er p { margin: 0 0 var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cb-zia-draft.error { background: var(--bad-soft); box-shadow: none; }
@container zia (max-width: 420px) { .cb-zia-draft .cmp { grid-template-columns: minmax(0, 1fr); } }

/* примеры галереи */
.cb-zex { position: relative; height: 680px; border-radius: var(--radius-card); overflow: hidden; background: var(--canvas); box-shadow: var(--shadow-ring); }
.cb-zex-page { position: absolute; inset: 0; display: grid; grid-template-rows: 48px 120px 1fr; gap: var(--space-4); padding: var(--space-5); }
.cb-zex-page .cb-skel { display: block; border-radius: var(--radius-inset); animation: none; }
.cb-zex-page .b1 { width: 40%; }
.cb-zex-page .b3 { width: 100%; }
.cb-zex-page .b4 { display: none; }
.cb-zex-bar { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 3; }
.cb-zex-narrow { max-width: 320px; padding: var(--space-4); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-ring); }
.cb-zex-col { display: grid; gap: var(--space-4); max-width: 560px; }
.cb-zex-cell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-chip); background: var(--card); box-shadow: var(--shadow-ring); }
.cb-zex-cell .k { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cb-zex-cell .cb-zia { grid-column: 2; }

/* узкие окна */
@container zdock (max-width: 860px) {
  .cb-zdock .cb-zfab { right: var(--space-4); bottom: calc(var(--bottom-nav-h, 64px) + var(--space-4) + env(safe-area-inset-bottom, 0px)); }
  .cb-zpanel.full .cb-zconv.side { display: none; }
  .cb-zpanel.full.list-open .cb-zconv.side { display: flex; position: absolute; inset: 0 auto 0 0; z-index: 2; width: min(320px, 88%); background: var(--card); box-shadow: var(--shadow-pop); }
  .cb-zlist-tg { display: inline-grid; }
}
@container zdock (max-width: 600px) {
  .cb-zpanel.side { inset: 0; width: auto; max-width: none; border-radius: 0; }
  .cb-zdock.inline .cb-zpanel.side { border-radius: var(--radius-card); }
  .cb-zcomp .bar .hint { display: none; }
  .cb-zcomp .bar .cb-btn { margin-left: auto; }
}
@container zdock (max-width: 480px) {
  .cb-zdock .cb-zfab { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .cb-zdock .cb-zfab .l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cb-zdock .cb-zfab .dot { position: absolute; top: 12px; right: 12px; }
  .cb-zmsgs { padding: var(--space-3); }
  .cb-zcomp { margin: 0 var(--space-3); }
  .cb-zsetup { padding: var(--space-3); }
  .cb-zpick.compact .row, .cb-zpick.compact .row:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cb-zpick.compact .row:has(> :nth-child(3)) > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .cb-zex-cell { grid-template-columns: minmax(0, 1fr); } .cb-zex-cell .cb-zia { grid-column: 1; } }

@media (prefers-reduced-motion: reduce) {
  .cb-zdock .cb-zfab, .cb-zpanel, .cb-zscrim, .cb-zia-menu, .cb-zfirst .cb-zsug, .cb-zconv .cb-zconv-it, .cb-zsel-in, .cb-zia-in, .cb-zia .cb-zia-tb, .cb-zref { animation: none; transition: none; }
  .cb-zdock .cb-zfab:active { transform: none; }
  .cb-zcaret { animation: none; }
  .cb-zdock .cb-skel, .cb-zia .cb-skel { animation: none; }
}

/* перенесено из прода (c0-agent.css, 9045286 и 2aed64f, 30.09) при сборке единой версии 28.10 */
/* Телефон с нижней навигацией (60-shell.css, html.cb-has-bnav): кнопка агента встаёт в полосу навигации справа,
   а не плавает над карточками. Навигация отдаёт ей место справа; окно открыто — место возвращается. Встроенный док (.inline) не трогаем. */
@media (max-width: 860px) {
  html.cb-has-bnav .cb-zdock.fixed:not(.open) { z-index: 901; }
  html.cb-has-bnav .cb-zdock.fixed .cb-zfab { right: var(--space-2); bottom: calc((var(--cb-bnav-h, 64px) - 44px) / 2 + env(safe-area-inset-bottom, 0px));
    width: 44px; height: 44px; padding: 0; justify-content: center; box-shadow: none; }
  html.cb-has-bnav .cb-zdock.fixed .cb-zfab .l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.cb-has-bnav .cb-zdock.fixed .cb-zfab .dot { position: absolute; top: 7px; right: 7px; }
  html.cb-has-bnav:has(.cb-zdock.fixed:not(.open) .cb-zfab) .cb-bnav:not(.inline) { padding-right: calc(var(--space-2) + 48px); }
  html.cb-has-bnav:has(.cb-zdock.fixed:not(.open) .cb-zfab) .cb-bnav:not(.inline) .bi { padding-inline: 0; min-width: 0; max-width: 100%; box-sizing: border-box; }   /* на 360 ячейка ~56 px: кнопка раздела не шире своей li (К-0930-215) */
  html.cb-has-bnav:has(.cb-zdock.fixed:not(.open) .cb-zfab) .cb-bnav:not(.inline) .bi .l { overflow-wrap: normal; letter-spacing: -.01em; }   /* подписи без разрыва посреди слова; длинное слово переносится по мягкому переносу из boot.js (Под-ключить) */
}

/* ── src/styles/z2-feedback.css ── */
/* ── Обратная связь и состояния (CatalystBento · группа z2-feedback) ─────────
   Тосты и стек, строка сохранения, полоса «нет связи» с очередью, фоновые задачи, конфликт правки, карта каналов.
   Цвет только токенами; статус всегда словом и иконкой. Движение — motion-standard (вход), выход короче; reduced-motion выключает. */

.cb-fb-live { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-fb-live:empty { display: none; }
.cb-fb-hint { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-fb-lnk { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; border: 0; background: transparent; padding: 2px 4px; border-radius: 6px; color: var(--ink); font: inherit; font-weight: 500; font-size: 12px; line-height: 16px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.cb-fb-lnk:hover { text-decoration-color: currentColor; }
.cb-fb-in { width: 100%; min-width: 0; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--inset); color: var(--ink); font: inherit; font-size: 14px; line-height: 20px; resize: vertical; box-shadow: inset 0 0 0 1px var(--border); }
.cb-fb-in:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* статус словом: иконка + слово, цвет только у иконки и точки смысла */
.cb-fb-st { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--ink-2); min-width: 0; }
.cb-fb-st .ic { display: inline-grid; place-items: center; flex: none; color: var(--ink-3); }
.cb-fb-st.ok .ic { color: var(--ok); }
.cb-fb-st.bad .ic { color: var(--bad); }
.cb-fb-st.bad { color: var(--ink); }
.cb-fb-st.warn .ic { color: var(--warn); }

/* вращение загрузки: только при разрешённом движении */
@keyframes cb-fb-spin { to { transform: rotate(360deg); } }
.cb-fb-save .ic.spin, .cb-fb-off .ic.spin, .cb-fb-st .ic.spin, .cb-fb-jobs .ic.spin { animation: cb-fb-spin 1.2s linear infinite; }

/* ══ Тосты ══ */
.cb.cb-fb-host { position: fixed; z-index: 1100; right: var(--space-5); bottom: var(--space-5); width: min(400px, calc(100vw - 2 * var(--space-4))); pointer-events: none; }
.cb.cb-fb-host.start { right: auto; left: var(--space-5); }
.cb.cb-fb-host.top { bottom: auto; top: var(--space-5); }
.cb-fb-host section { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-fb-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cb-fb-more { margin: 0; align-self: flex-end; pointer-events: auto; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 11px; line-height: 16px; box-shadow: var(--shadow-ring); }
.cb-fb-toast { position: relative; overflow: hidden; pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic bd x" ". acts acts"; align-items: start; gap: 4px var(--space-3);
  padding: 12px 8px 12px 14px; border-radius: var(--radius-inset); background: var(--card); color: var(--ink); box-shadow: var(--shadow-pop);
  animation: cb-fb-in var(--motion-standard-in) var(--motion-ease); }
.cb-fb-toast:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-fb-toast > .ic { grid-area: ic; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: -1px; color: var(--ink-2); }
.cb-fb-toast.ok > .ic { color: var(--ok); }
.cb-fb-toast.bad > .ic { color: var(--bad); }
.cb-fb-toast.warn > .ic { color: var(--warn); }
/* тост ошибки и предупреждения — тон иконкой (.ic) и словом, без полосы (D17, У-0248) */
.cb-fb-toast .bd { grid-area: bd; min-width: 0; padding-top: 2px; }
.cb-fb-toast .bd p { margin: 0; overflow-wrap: break-word; }
.cb-fb-toast .t { font-size: 14px; line-height: 20px; font-weight: 600; }
.cb-fb-toast .x { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cb-fb-toast .acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cb-fb-toast .cb-fb-x { grid-area: x; color: var(--ink-3); }
.cb-fb-toast .cb-fb-x:hover { color: var(--ink); }
.cb-fb-undo .sec { margin-left: 2px; color: var(--ink-3); font-weight: 500; }
.cb-fb-left { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--inset); }
.cb-fb-left::after { content: ""; position: absolute; inset: 0; background: var(--ink-3); transform-origin: left center; transform: scaleX(var(--fb-left, 1)); transition: transform 200ms linear; }
.cb-fb-toast.undo .cb-fb-left::after { background: var(--flame); }
@keyframes cb-fb-in { from { opacity: 0; transform: translateY(8px); } }
.cb-fb-host.top .cb-fb-toast { animation-name: cb-fb-in-top; }
@keyframes cb-fb-in-top { from { opacity: 0; transform: translateY(-8px); } }

/* ══ Строка сохранения ══ */
.cb-fb-save { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-height: 24px; font-size: 12px; line-height: 16px; color: var(--ink-2); min-width: 0; }
.cb-fb-save .ic { display: inline-grid; place-items: center; flex: none; color: var(--ink-3); }
.cb-fb-save.ok .ic { color: var(--ok); }
.cb-fb-save.bad .ic { color: var(--bad); }
.cb-fb-save.bad .w { color: var(--ink); }
.cb-fb-save.warn .ic { color: var(--warn); }
.cb-fb-save .w { min-width: 0; }
.cb-fb-save.compact .w { white-space: nowrap; }

/* ══ Нет связи ══ */
.cb.cb-fb-off { display: flex; flex-direction: column; gap: var(--space-2); padding: 8px 8px 8px 14px; border-radius: var(--radius-inset); background: var(--inset); color: var(--ink); animation: cb-fb-fade var(--motion-standard-in) var(--motion-ease); }
.cb.cb-fb-off.off { background: var(--warn-soft); }
.cb.cb-fb-off.err { background: var(--bad-soft); }
.cb.cb-fb-off.sticky { position: sticky; top: 0; z-index: 20; }
.cb-fb-off .row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--space-3); min-width: 0; }
.cb-fb-off .row > .ic { display: inline-grid; place-items: center; flex: none; color: var(--ink-2); }
.cb-fb-off.off .row > .ic { color: var(--warn); }
.cb-fb-off.err .row > .ic { color: var(--bad); }
.cb-fb-off.back .row > .ic { color: var(--ok); }
.cb-fb-off .row p { flex: 1 1 260px; margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); min-width: 0; }
.cb-fb-off .row p b { color: var(--ink); font-weight: 600; }
.cb-fb-off .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cb-fb-q { list-style: none; margin: 0; padding: 4px; border-radius: 12px; background: var(--card); display: flex; flex-direction: column; }
.cb-fb-q li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--space-3); padding: 8px 12px; min-height: 44px; }
.cb-fb-q li + li { border-top: 1px solid var(--border); }
.cb-fb-q .l { flex: 1 1 180px; display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 18px; }
.cb-fb-q .l small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-fb-q li.clr { justify-content: flex-end; min-height: 36px; }
@keyframes cb-fb-fade { from { opacity: 0; } }

/* ══ Фоновые задачи ══ */
.cb.cb-fb-jobs { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; max-width: 480px; }
.cb-fb-jbtn { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; max-width: 100%; min-height: var(--control-h-sm); padding: 4px 12px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); cursor: pointer; text-align: left;
  transition: background-color var(--motion-subtle-in) var(--motion-ease); }
.cb-fb-jbtn:hover { background: var(--inset-hover); }
.cb-fb-jbtn .ic { display: inline-grid; place-items: center; flex: none; color: var(--ink-2); }
.cb-fb-jbtn .w { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; min-width: 0; font-size: 13px; line-height: 18px; }
.cb-fb-jbtn .w b { font-weight: 600; }
.cb-fb-jbtn .w small { font-size: 12px; color: var(--ink-3); }
.cb-fb-jpanel { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-ring); animation: cb-fb-fade var(--motion-standard-in) var(--motion-ease); }
.cb-fb-jlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cb-fb-job { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--inset); min-width: 0; }
.cb-fb-job .top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px var(--space-2); min-width: 0; }
.cb-fb-job .top .t { font-size: 13px; line-height: 18px; font-weight: 600; min-width: 0; overflow-wrap: break-word; }
.cb-fb-job .pr { display: flex; flex-direction: column; gap: 4px; }
.cb-fb-job .pr small, .cb-fb-job .res { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-fb-job .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cb-fb-job .acts:empty { display: none; }
.cb-fb-job .conf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink); }
.cb-fb-empty { margin: 0; padding: 8px 12px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cb-fb-jpanel .ft { display: flex; justify-content: flex-end; }

/* ══ Конфликт правки ══ */
.cb.cb-fb-conf { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-ring); min-width: 0; }   /* без полосы (D17, У-0248) */
.cb-fb-conf header { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.cb-fb-conf header .ic { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); }
.cb-fb-conf h3 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-fb-conf header p { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-fb-conf .cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.cb-fb-conf .col { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: 12px; background: var(--inset); min-width: 0; }
.cb-fb-conf .col.mine { background: var(--card); box-shadow: var(--shadow-ring); }
.cb-fb-conf dt { font-size: 12px; line-height: 16px; color: var(--ink-2); overflow-wrap: break-word; }
.cb-fb-conf dd { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-fb-conf dd .v { font-size: 15px; line-height: 20px; font-weight: 600; overflow-wrap: break-word; }
.cb-fb-conf .col.base dd .v { font-weight: 400; color: var(--ink-2); }
.cb-fb-conf dd small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-fb-conf .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cb-fb-conf .merge { display: flex; flex-direction: column; gap: 6px; }
.cb-fb-conf .merge label { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb.cb-fb-conf.done { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 8px 12px; box-shadow: var(--shadow-ring); }
.cb-fb-conf .rs { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); min-width: 0; flex: 1 1 260px; }
.cb-fb-conf .rs:focus { outline: none; }
.cb-fb-conf .rs:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-fb-conf .rs b { color: var(--ink); font-weight: 600; }
.cb-fb-conf .rs .ic { display: inline-grid; place-items: center; flex: none; margin-top: 1px; color: var(--ok); }
@container (max-width: 520px) { .cb-fb-conf .cmp { grid-template-columns: minmax(0, 1fr); } }

/* ══ Карта каналов ══ */
.cb-fb-guide ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-2); }
.cb-fb-guide li { display: flex; align-items: flex-start; gap: var(--space-2); padding: 8px 12px; border-radius: 12px; background: var(--inset); min-width: 0; }
.cb-fb-guide li > .ic { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--card); color: var(--ink-2); }
.cb-fb-guide .w { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cb-fb-guide p { margin: 0; font-size: 12px; line-height: 17px; color: var(--ink-2); overflow-wrap: break-word; }
.cb-fb-guide .k { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.cb-fb-guide .k b { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.cb-fb-guide .k code { font-family: var(--font-mono); font-size: 11px; font-size-adjust: none; color: var(--ink-3); }
.cb-fb-guide .hw { color: var(--ink-3); }

/* ══ Примеры галереи ══ */
.cb-fb-ex { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-fb-exrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cb-fb-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--inset); font-size: 13px; }
.cb-fb-field { display: flex; flex-direction: column; gap: 6px; }
.cb-fb-field .hd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px var(--space-2); }
.cb-fb-field label { font-size: 13px; line-height: 18px; font-weight: 600; }
.cb-fb-check { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; font-size: 12px; color: var(--ink-2); }
.cb-fb-states { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 12px; border-radius: 12px; background: var(--inset); }

/* ══ Телефон: стек снизу во всю ширину, над нижней навигацией ══ */
@media (max-width: 640px) {
  .cb.cb-fb-host, .cb.cb-fb-host.start { left: var(--space-4); right: var(--space-4); width: auto; bottom: calc(var(--bottom-nav-h, 64px) + var(--space-3) + env(safe-area-inset-bottom, 0px)); }
  .cb.cb-fb-host.top { top: var(--space-4); bottom: auto; }
  .cb-fb-toast .acts .cb-btn { min-height: 44px; }
  .cb-fb-toast .cb-fb-x { min-width: 44px; min-height: 44px; }
  .cb-fb-jbtn { min-height: 44px; }
  .cb-fb-lnk { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-fb-toast, .cb.cb-fb-off, .cb-fb-jpanel { animation: none; }
  .cb-fb-save .ic.spin, .cb-fb-off .ic.spin, .cb-fb-st .ic.spin, .cb-fb-jobs .ic.spin { animation: none; }
  .cb-fb-left::after, .cb-fb-jbtn { transition: none; }
}
@media print { .cb.cb-fb-host { display: none; } }

/* ── src/styles/z3-setup.css ── */
/* ── Настройки и первый запуск (CatalystBento · группа z3-setup, пакет WP-D) ─────────────────
   ScreenProfileEditor, VariationLog, FirstRunWizard, CoachTour, BillingScreen, SourceConnect, HotkeysHelp.
   Корень .cb-su — контейнер: раскладка реагирует на ширину блока, а не окна. Цвет только токенами. */
.cb-su { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; color: var(--ink); font-size: 13px; line-height: 18px; }
.cb-su.card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-5); }
:where(.cb-su) p { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-su) h3, :where(.cb-su) h4 { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-su) ul, :where(.cb-su) ol { list-style: none; margin: 0; padding: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-su fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.cb-su [tabindex="-1"]:focus { outline: none; }
.cb-su-live { font-size: 12px; color: var(--ink-2); }
.cb-su-live:empty { display: none; }
.cb-su-hint { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-su-hint .cb-i { vertical-align: -2px; }
.cb-su-state { background: var(--inset); border-radius: var(--radius-inset); }
.cb-su-err, .cb-su-why { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 16px; }
.cb-su-err { color: var(--ink); }
.cb-su-err .cb-i { flex: none; margin-top: 2px; color: var(--bad); }
.cb-su-why { color: var(--ink-2); }
.cb-su-why .cb-i { flex: none; margin-top: 2px; color: var(--ink-3); }
.cb-su-err b, .cb-su-why b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-su-in { height: var(--control-h-sm); min-width: 0; width: 100%; padding: 0 10px; border: 0; border-radius: 10px; background: var(--inset); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); font: inherit; font-variant-numeric: tabular-nums; }
.cb-su-in::placeholder { color: var(--ink-3); }
.cb-su-in[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--bad); background: var(--bad-soft); }
.cb-su-in:disabled { opacity: .62; cursor: not-allowed; }
.cb-su-in:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* шапка блока */
.cb-su-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-su-hd .t { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; flex: 1 1 240px; }
.cb-su-hd .ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-su-hd h3 { font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-su-hd .t p { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-su-hd .x { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* схема зоны: мини-сетка 12 колонок */
.cb-su-zs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 7px; grid-auto-flow: row dense; gap: 2px; width: 100%; }
.cb-su-zs i { grid-column: span 12; border-radius: 3px; background: var(--mono-2); }
.cb-su-zs .t-kpi, .cb-su-zs .t-tool { background: var(--mono-3); }
.cb-su-zs .t-fig, .cb-su-zs .t-time, .cb-su-zs .t-rec, .cb-su-zs .t-data, .cb-su-zs .t-step, .cb-su-zs .t-doc { background: color-mix(in oklab, var(--flame) 38%, var(--card)); }
.cb-su-zs .t-att { background: var(--ink-3); }
.cb-su-zs.big { grid-auto-rows: 26px; gap: 4px; }
.cb-su-zs.big i { display: grid; place-items: center; font-style: normal; font-size: 11px; line-height: 14px; color: var(--ink); overflow: hidden; }
.cb-su-zs.big .t-att { color: var(--card); }
.cb-su-zs .c3 { grid-column: span 3; } .cb-su-zs .c4 { grid-column: span 4; } .cb-su-zs .c5 { grid-column: span 5; } .cb-su-zs .c7 { grid-column: span 7; }
.cb-su-zs .c8 { grid-column: span 8; } .cb-su-zs .c9 { grid-column: span 9; } .cb-su-zs .c12 { grid-column: span 12; }
.cb-su-zs .r2 { grid-row: span 2; } .cb-su-zs .r3 { grid-row: span 3; }

/* ══ 1. ScreenProfileEditor ══ */
.cb-su-spe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.cb-su-spe .cfg { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-su-spe .pv { min-width: 0; }
.cb-su-spe > .cb-su-live, .cb-su-spe > .cb-su-foot { grid-column: 1 / -1; }
@container (min-width: 900px) {
  .cb-su-spe { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cb-su-spe .pv { position: sticky; top: var(--space-4); }
}
.cb-su-tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--inset); overflow-x: auto; scrollbar-width: none; }
.cb-su-tabs::-webkit-scrollbar { display: none; }
@container (max-width: 560px) { .cb-su-tabs { flex-wrap: wrap; border-radius: 18px; } .cb-su-tabs button { flex: 1 1 auto; justify-content: center; } }
.cb-su-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; }
.cb-su-tabs button:hover { color: var(--ink); }
.cb-su-tabs button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-ring); }
.cb-su-tabs .bad { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad-soft); color: var(--ink); font-size: 11px; font-weight: 600; }
.cb-su-tabp { min-width: 0; }
.cb-su-pane { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cb-su-fs { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cb-su-fs h4, .cb-su-plans h4, .cb-su-inv h4, .cb-su-hk h4 { font-size: 13px; line-height: 18px; font-weight: 600; }

/* пилюли-радио */
.cb-su-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-su-pills .pill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); cursor: pointer; font-weight: 500; }
.cb-su-pills .pill small { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.cb-su-pills .pill:hover { background: var(--inset-hover); }
.cb-su-pills .pill.on { background: var(--primary); color: var(--on-primary); }
.cb-su-pills .pill.on small { color: color-mix(in oklab, var(--on-primary) 72%, var(--primary)); }
.cb-su-pills .pill:focus-visible, .cb-su-zone:focus-visible, .cb-su-den:focus-visible, .cb-su-pack:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* карточки зон */
.cb-su-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.cb-su-zone { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--inset); cursor: pointer; min-width: 0; }
.cb-su-zone:hover { background: var(--inset-hover); }
.cb-su-zone .top { display: flex; align-items: baseline; gap: 6px; padding-right: 22px; }
.cb-su-zone .top b { font-variant-numeric: tabular-nums; font-weight: 700; }
.cb-su-zone .top span { font-weight: 500; }
.cb-su-zone small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-su-zone.on { background: var(--card); box-shadow: var(--shadow-ring); }
.cb-su-zone .mk, .cb-su-pack .mk { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--flame-deep); color: var(--on-flame); }
.cb-su-zone.off { cursor: not-allowed; background: color-mix(in oklab, var(--inset) 60%, var(--card)); }
.cb-su-zone.off .top, .cb-su-zone.off .cb-su-zs { opacity: .62; }   /* подпись-причина не приглушается: неактивный вариант читается с причиной (G3, «Вариации») */

/* блоки */
.cb-su-blocks { display: flex; flex-direction: column; gap: 4px; }
.cb-su-block { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 6px 8px; border-radius: 12px; background: var(--inset); }
.cb-su-block > .cb-su-why, .cb-su-block > .cb-su-err { grid-column: 3 / -1; }
.cb-su-block.is-off .tx b { color: var(--ink-2); font-weight: 500; }
.cb-su-block.drop { box-shadow: inset 0 2px 0 var(--flame); }
.cb-su-block .grip { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: grab; }
.cb-su-block .grip:hover { background: var(--card); color: var(--ink); }
.cb-su-block .tx { display: flex; flex-direction: column; min-width: 0; cursor: pointer; }
.cb-su-block .tx b { font-weight: 600; overflow-wrap: break-word; }
.cb-su-block .tx small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-su-block .mv { display: inline-flex; gap: 2px; }
.cb-su .cb-ibtn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.cb-su .cb-btn[aria-disabled="true"] { opacity: .62; cursor: not-allowed; transform: none; }
.cb-su .cb-check[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* мерки: чекбоксы пояса */
.cb-su-checks { display: flex; flex-direction: column; gap: 4px; }
.cb-su-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 12px; background: var(--inset); }
.cb-su-checks li > .cb-su-why { grid-column: 2; }
.cb-su-checks label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.cb-su-checks label small { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.cb-su-checks .n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--card); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-su-checks li.is-off label { color: var(--ink-2); font-weight: 400; }

/* пороги */
.cb-su-ths { display: flex; flex-direction: column; gap: 6px; }
.cb-su-ths > li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: end; gap: 6px 8px; padding: 10px 12px; border-radius: 12px; background: var(--inset); }
.cb-su-ths > li.is-off { background: color-mix(in oklab, var(--inset) 55%, var(--card)); }
.cb-su-ths .nm { display: flex; flex-direction: column; align-self: center; min-width: 0; }
.cb-su-ths .nm b { font-weight: 600; }
.cb-su-ths .nm small { font-size: 11px; color: var(--ink-3); }
.cb-su-ths .f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cb-su-ths .f > span { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-su-ths .errs { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; }
.cb-su-ths .errs:empty { display: none; }
.cb-su-ths .cb-ibtn { align-self: end; }
@container (max-width: 560px) {
  .cb-su-ths > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cb-su-ths .nm { grid-column: 1 / -1; }
  .cb-su-ths .f.v { grid-column: 1 / -1; }
}

/* важность */
.cb-su-wgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@container (min-width: 560px) { .cb-su-wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cb-su-w { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--inset); }
.cb-su-w legend { float: left; width: 100%; padding: 0; font-weight: 600; margin-bottom: 2px; }
.cb-su-w .row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: center; gap: 4px 8px; }
.cb-su-w .row > .cb-su-err { grid-column: 1 / -1; }
.cb-su-w label { display: flex; flex-direction: column; min-width: 0; }
.cb-su-w label small { font-size: 11px; color: var(--ink-3); }
.cb-su-w .cb-su-in { background: var(--card); text-align: right; }
.cb-su-meta { font-size: 12px; color: var(--ink-2); }

/* плотность и двухвариантный выбор */
.cb-su-dens { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); }
.cb-su-den { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; background: var(--inset); cursor: pointer; }
.cb-su-den:hover { background: var(--inset-hover); }
.cb-su-den b { font-weight: 600; }
.cb-su-den small { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-su-den .lines { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 8px; background: var(--card); }
.cb-su-den .lines i { height: 6px; border-radius: 3px; background: var(--mono-2); }
.cb-su-den.d-work .lines { gap: 3px; }
.cb-su-den.on { background: var(--card); box-shadow: var(--shadow-ring); }
.cb-su-den.off { cursor: not-allowed; }
.cb-su-den.off > b, .cb-su-den.off .lines { opacity: .62; }
.cb-su-den > .cb-i { color: var(--ink-2); }

/* превью раскладки */
.cb-su-pvd { border-radius: var(--radius-inset); background: var(--inset); }
.cb-su-pvd > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; cursor: pointer; font-weight: 600; list-style: none; }
.cb-su-pvd > summary::-webkit-details-marker { display: none; }
.cb-su-pvd[open] > summary .cb-i { transform: rotate(180deg); }
.cb-su-prev { margin: 0; padding: 0 14px 14px; display: flex; flex-direction: column; gap: var(--space-3); }
.cb-su-prev figcaption { display: flex; flex-direction: column; gap: 2px; }
.cb-su-prev figcaption span { font-size: 11px; color: var(--ink-3); }
.cb-su-prev-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.cb-su-prev-grid.side-4 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cb-su-prev-grid.side-3 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
@container (max-width: 560px) { .cb-su-prev-grid.side-4, .cb-su-prev-grid.side-3 { grid-template-columns: minmax(0, 1fr); } }
.cb-su-prev-grid .main, .cb-su-prev-grid .side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cb-su-row { display: flex; flex-direction: column; gap: 3px; }
.cb-su-row .sp { font-size: 11px; line-height: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-su-row .cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.cb-su-row .cells.belt { display: flex; }
.cb-su-row .cells.belt > .cb-su-cell { flex: 1 1 0; }
.cb-su-cell { grid-column: span 12; display: flex; flex-direction: column; gap: 1px; min-width: 0; min-height: 44px; padding: var(--space-1) 8px; border-radius: 8px; background: var(--card); box-shadow: var(--shadow-ring); }
.cb-su-cell b { font-size: 11px; line-height: 14px; font-weight: 600; overflow-wrap: break-word; }
.cb-su-cell small { font-size: 11px; line-height: 13px; color: var(--ink-3); }
.cb-su-cell.k-figure { min-height: 72px; background: var(--flame-soft); box-shadow: none; }
.cb-su-cell.k-attention { background: var(--inset); box-shadow: none; }
.cb-su-cell.s4 { grid-column: span 4; } .cb-su-cell.s5 { grid-column: span 5; } .cb-su-cell.s6 { grid-column: span 6; }
.cb-su-cell.s7 { grid-column: span 7; } .cb-su-cell.s8 { grid-column: span 8; }
.cb-su-prev-panes { display: flex; flex-direction: column; gap: var(--space-3); }
.cb-su-prev-list { display: flex; flex-direction: column; gap: 3px; counter-reset: none; }
.cb-su-prev-list li { display: flex; align-items: baseline; gap: 8px; }
.cb-su-prev-list .n { width: 18px; flex: none; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.cb-su-prev-list small { margin-left: auto; font-size: 11px; color: var(--ink-3); }

/* подвал редактора */
.cb-su-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.cb-su-foot .sum { flex: 1 1 280px; min-width: 0; }
.cb-su-foot .sum .ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.cb-su-foot .sum .ok .cb-i { color: var(--ok); }
.cb-su-foot .errs { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--bad-soft); font-size: 12px; line-height: 16px; }
.cb-su-foot .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cb-su-foot .why { flex-basis: 100%; text-align: right; }
.cb-su.in-drawer .cb-su-foot { position: sticky; bottom: calc(-1 * var(--space-6)); margin-bottom: calc(-1 * var(--space-6)); padding-bottom: var(--space-4); background: var(--card); z-index: 1; }
.cb-drawer.cb-su-drawer { width: min(760px, 100vw); }

/* ══ 2. VariationLog ══ */
.cb-su-log { display: flex; flex-direction: column; }
.cb-su-log > li { display: grid; grid-template-columns: 124px minmax(0, 150px) minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.cb-su-log > li:first-child { border-top: 0; }
.cb-su-log .when { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-su-log .who { display: flex; flex-direction: column; min-width: 0; }
.cb-su-log .who b { font-weight: 600; }
.cb-su-log .who small { font-size: 11px; color: var(--ink-3); }
.cb-su-log .what { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 500; min-width: 0; overflow-wrap: break-word; }
.cb-su-log .diff { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; font-variant-numeric: tabular-nums; }
.cb-su-log .diff s { color: var(--ink-3); overflow-wrap: break-word; }
.cb-su-log .diff b { font-weight: 600; overflow-wrap: break-word; }
.cb-su-log .diff .cb-i { color: var(--ink-3); flex: none; }
.cb-su-log .act { justify-self: end; }
.cb-su-log .cfm, .cb-su-plans .cfm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 12px; background: var(--inset); }
.cb-su-log li.is-rb .what { color: var(--ink-2); }
.cb-su-log li.rb .diff { opacity: .75; }
@container (max-width: 760px) {
  .cb-su-log > li { grid-template-columns: minmax(0, 1fr) auto; }
  .cb-su-log .when { grid-column: 1; }
  .cb-su-log .who { grid-column: 1; flex-direction: row; gap: 6px; align-items: baseline; flex-wrap: wrap; }
  .cb-su-log .what, .cb-su-log .diff { grid-column: 1 / -1; }
  .cb-su-log .act { grid-column: 2; grid-row: 1 / span 2; }
}

/* ══ 3. FirstRunWizard ══ */
.cb-su-wz { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@container (min-width: 760px) { .cb-su-wz { grid-template-columns: minmax(200px, 4fr) minmax(0, 8fr); } }
.cb-su-path { display: flex; flex-direction: column; gap: 2px; position: relative; }
.cb-su-path li button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-3); font: inherit; text-align: left; cursor: pointer; }
.cb-su-path li button:disabled { cursor: default; }
.cb-su-path li.cur button { background: var(--inset); color: var(--ink); font-weight: 600; }
.cb-su-path li.done button { color: var(--ink); }
.cb-su-path li.done button:hover:not(:disabled) { background: var(--inset); }
.cb-su-path .k { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--ink-3); }
.cb-su-path li.cur .k { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.cb-su-path li.done .k { background: var(--ok-soft); color: var(--ink); box-shadow: none; }
@container (max-width: 759px) {
  .cb-su-path { flex-direction: row; gap: 4px; }
  .cb-su-path li { flex: 1 1 0; min-width: 0; }
  .cb-su-path li button { justify-content: center; padding: 4px; }
  .cb-su-path li button > span:not(.k) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cb-su-nav { position: sticky; bottom: 0; background: var(--card); padding: var(--space-3) 0; }
}
@container (min-width: 760px) { .cb-su-stepn { display: none; } }
.cb-su-step { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-su-stepn { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-su-steph { font-size: 17px; line-height: 22px; font-weight: 600; }
.cb-su-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); z-index: 1; }
.cb-su-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: var(--space-2); }
.cb-su-pack { position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); border-radius: 16px; background: var(--inset); cursor: pointer; min-width: 0; }
.cb-su-pack:hover { background: var(--inset-hover); }
.cb-su-pack .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--card); color: var(--ink-2); }
.cb-su-pack b { font-weight: 600; padding-right: 20px; }
.cb-su-pack small { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-su-pack .meta { margin-top: auto; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-su-pack.on { background: var(--card); box-shadow: var(--shadow-ring); }
.cb-su-deps { display: flex; flex-direction: column; gap: 6px; }
.cb-su-deps > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 12px; background: var(--inset); }
.cb-su-deps > li label { cursor: pointer; }
.cb-su-deps .roles { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; }
.cb-su-deps .roles small { font-size: 11px; color: var(--ink-3); }
.cb-su-deps li.is-off label b { color: var(--ink-2); font-weight: 500; }
.cb-su .chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border); font: inherit; font-size: 12px; cursor: pointer; }
.cb-su .chip.on { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.cb-su .chip:disabled { opacity: .5; cursor: not-allowed; }
.cb-su-srcs { display: flex; flex-direction: column; gap: 6px; }
.cb-su-srcs > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 12px; background: var(--inset); }
.cb-su-srcs .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--card); color: var(--ink-2); }
.cb-su-srcs .tx { display: flex; flex-direction: column; min-width: 0; }
.cb-su-srcs .tx b { font-weight: 600; }
.cb-su-srcs .tx small { font-size: 11px; color: var(--ink-3); }
.cb-su-srcs .rec { font-size: 11px; color: var(--ink-2); }
@container (max-width: 520px) { .cb-su-srcs > li { grid-template-columns: auto minmax(0, 1fr); } .cb-su-srcs .cb-seg { grid-column: 1 / -1; } }
.cb-su-sum { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); gap: 8px 16px; margin: 0; padding: 14px; border-radius: 14px; background: var(--inset); }
.cb-su-sum dt { color: var(--ink-2); }
.cb-su-sum dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; font-weight: 500; }
.cb-su-sum dd .cb-tag { background: var(--card); }
@container (max-width: 480px) { .cb-su-sum { grid-template-columns: minmax(0, 1fr); } .cb-su-sum dd { margin-bottom: 6px; } }
.cb-su-done { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: 16px; background: var(--ok-soft); }
.cb-su-done > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cb-su-done h4 { font-size: 17px; line-height: 22px; }
.cb-su-done .ic { color: var(--ok); }

/* ══ 4. CoachTour ══ */
.cb-su-tour { position: fixed; z-index: 1001; width: min(320px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-pop), var(--shadow-ring); font-size: 13px; line-height: 18px; animation: cb-su-in var(--motion-standard-in, .15s) var(--motion-ease, ease-out); }
.cb-su-tour::before { content: ""; position: absolute; left: calc(var(--ax, 50%) - 6px); width: 12px; height: 12px; background: var(--card); transform: rotate(45deg); }
.cb-su-tour.below::before { top: -6px; box-shadow: -1px -1px 0 color-mix(in oklab, var(--ink) 8%, transparent); }
.cb-su-tour.above::before { bottom: -6px; box-shadow: 1px 1px 0 color-mix(in oklab, var(--ink) 8%, transparent); }
.cb-su-tour.mid::before { display: none; }
.cb-su-tour .hd { display: flex; align-items: center; justify-content: space-between; margin: -4px -6px -2px 0; }
.cb-su-tour .n { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-su-tour > b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-su-tour p { margin: 0; color: var(--ink-2); }
.cb-su-tour p small { color: var(--ink-3); }
.cb-su-tour .prog { display: flex; gap: 4px; }
.cb-su-tour .prog i { flex: 1 1 0; height: 3px; border-radius: 2px; background: var(--mono-2); }
.cb-su-tour .prog i.on { background: var(--flame); }
.cb-su-tour .ft { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.cb-su-tour .ft .ghost { margin-right: auto; }
.cb-su-spot { outline: none !important; box-shadow: 0 0 0 6px var(--flame-soft) !important; border-radius: 12px; transition: outline-color var(--motion-subtle-in, .12s); }
@keyframes cb-su-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cb-su-tour { animation: none; } .cb-su-spot { transition: none; } }

/* ══ 5. BillingScreen ══ */
.cb-su-bill-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@container (min-width: 900px) { .cb-su-bill-top { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.cb-su-plan { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-su-plan .nm { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.cb-su-plan .nm small { flex-basis: 100%; font-size: 12px; color: var(--ink-3); }
.cb-su-plan .nm b { font-size: 20px; line-height: 26px; font-weight: 600; }
.cb-su-plan .pr, .cb-su-plans .pr { display: flex; align-items: baseline; gap: 6px; }
.cb-su-plan .pr b { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; }
.cb-su-plan .pr span, .cb-su-plans .pr span { font-size: 13px; color: var(--ink-3); }
.cb-su-plan .cb-vf { background: var(--card); }
.cb-su-pay { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-su-pay .card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-su-pay .card > .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--card-ink); color: var(--on-card-ink); }
.cb-su-pay .card > div { display: flex; flex-direction: column; flex: 1 1 140px; min-width: 0; }
.cb-su-pay .card small { font-size: 11px; color: var(--ink-3); }
.cb-su-pay .card b { font-size: 15px; font-weight: 600; }
.cb-su-pay .card span { font-size: 12px; color: var(--ink-2); }
.cb-su-plans, .cb-su-inv { display: flex; flex-direction: column; gap: var(--space-3); }
.cb-su-plans > ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@container (min-width: 700px) { .cb-su-plans > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-su-plans > ul > li { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-su-plans > ul > li.on { background: var(--card); box-shadow: var(--shadow-ring); }
.cb-su-plans .nm { display: flex; align-items: center; gap: 8px; }
.cb-su-plans .nm b { font-size: 15px; font-weight: 600; }
.cb-su-plans .pr b { font-size: 20px; line-height: 26px; font-weight: 600; }
.cb-su-plans .ft { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cb-su-plans .ft li { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-2); }
.cb-su-plans .ft .cb-i { margin-top: 3px; color: var(--ink-3); flex: none; }
.cb-su-plans .cfm p { flex-basis: 100%; font-size: 12px; line-height: 16px; }
.cb-su-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cb-su-tbl th { text-align: left; font-weight: 500; font-size: 12px; color: var(--ink-2); background: var(--inset); padding: 8px 12px; }
.cb-su-tbl th:first-child { border-radius: 10px 0 0 10px; } .cb-su-tbl th:last-child { border-radius: 0 10px 10px 0; }
.cb-su-tbl td { padding: 0 12px; height: var(--row-h-overview); border-bottom: 1px solid var(--border); vertical-align: middle; }
.cb-su-tbl .r { text-align: right; }
.cb-su-tbl .a { text-align: right; width: 1%; white-space: nowrap; }
.cb-su-tbl code { font-family: var(--font-mono); font-size: 12px; }
@container (max-width: 640px) {
  .cb-su-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cb-su-tbl, .cb-su-tbl tbody, .cb-su-tbl tr, .cb-su-tbl td { display: block; }
  .cb-su-tbl tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .cb-su-tbl td { height: auto; padding: 2px 0; border: 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .cb-su-tbl td[data-l]::before { content: attr(data-l); color: var(--ink-3); text-align: left; }
  .cb-su-tbl td.a { width: auto; justify-content: flex-end; }
}

/* ══ 6. SourceConnect ══ */
.cb-su-srcw { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@container (min-width: 900px) { .cb-su-srcw.has { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.cb-su-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 184px), 1fr)); grid-auto-rows: 1fr; gap: var(--space-2); }
@container (min-width: 900px) { .cb-su-srcw.has .cb-su-cat { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } }
.cb-su-cat > li { display: flex; min-width: 0; }
/* плитка источника: иконка + имя и вид в первой строке, статус — своей строкой во всю ширину и с переносом: длинный статус не вылезает, плитки одной высоты */
.cb-su-src { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; align-content: start; gap: var(--space-3) 10px; width: 100%; min-width: 0; padding: var(--space-3) var(--space-4); border: 0; border-radius: 14px; background: var(--inset); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cb-su-src:hover { background: var(--inset-hover); }
.cb-su-src:hover .tx small { color: var(--ink-2); }   /* на подложке наведения ink-3 падает ниже 4,5:1 */
.cb-su-src.on, .cb-su-src.on:hover { background: var(--accent-soft); }   /* выбранное — подложкой, не кольцом (D16) */
.cb-su-src.on .tx small { color: var(--ink-2); }
.cb-su-src .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--card); color: var(--ink-2); }
.cb-su-src .tx { display: flex; flex-direction: column; min-width: 0; }
.cb-su-src .tx b { font-weight: 600; line-height: 18px; overflow-wrap: break-word; }
.cb-su-src .tx small { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-su-src .cb-status { grid-column: 1 / -1; align-self: end; justify-self: start; white-space: normal; font-size: 12px; line-height: 16px; }
.cb-su-srcw .pick { padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-su-det { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); min-width: 0; }
.cb-su-det > .hd { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }
.cb-su-det > .hd .ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-su-det > .hd > div { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.cb-su-det > .hd h4 { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-su-det > .hd small { font-size: 12px; color: var(--ink-3); }
.cb-su-det .st { display: inline-flex; align-items: center; gap: 6px; }
.cb-su-det .spin { display: inline-grid; color: var(--ink-3); animation: cb-su-spin 1.4s linear infinite; }
@keyframes cb-su-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cb-su-det .spin { animation: none; } }
.cb-su-steps { display: flex; flex-direction: column; gap: var(--space-3); }
.cb-su-steps > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.cb-su-steps > li > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cb-su-steps .k { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--inset); font-size: 12px; font-weight: 600; }
.cb-su-steps b { font-weight: 600; }
.cb-su-steps small { font-size: 12px; color: var(--ink-3); }
.cb-su-steps .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cb-su-steps .gets { display: flex; flex-direction: column; gap: 3px; }
.cb-su-steps .gets li { display: flex; align-items: center; gap: 6px; }
.cb-su-steps .gets .cb-i { color: var(--ink-3); flex: none; }
.cb-su-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cb-su-msg > p { padding: var(--space-2) 12px; border-radius: 12px; background: var(--inset); color: var(--ink); font-size: 12px; line-height: 17px; }
.cb-su-msg .cb-su-hint:empty { display: none; }
.cb-su-secret { display: flex; align-items: center; gap: 6px; max-width: 460px; }
.cb-su-secret .cb-su-in { font-family: var(--font-mono); font-size: 12px; }

/* ══ 7. HotkeysHelp ══ */
.cb-su-hk { display: flex; flex-direction: column; gap: var(--space-4); }
.cb-su-hk .g { display: flex; flex-direction: column; gap: 6px; }
.cb-su-hk dl { margin: 0; display: flex; flex-direction: column; }
.cb-su-hk .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; border-bottom: 1px solid var(--border); }
.cb-su-hk .row:last-child { border-bottom: 0; }
.cb-su-hk dt { color: var(--ink); cursor: default; }   /* справка, не действие: признаков клика нет */
.cb-su-hk dd { margin: 0; display: inline-flex; align-items: center; gap: 4px; flex: none; }
.cb-su-hk .plus { font-size: 11px; color: var(--ink-3); }
.cb-su-hk kbd { background: var(--inset); box-shadow: none; }

/* примеры галереи */
.cb-su-ex { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cb-su-exbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cb-su-mock { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); }
@container (min-width: 520px) { .cb-su-mock { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .cb-su-mock .k { grid-column: 1 / -1; } }
.cb-su-mock > div { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-ring); }
.cb-su-mock .k { flex-direction: row; align-items: center; flex-wrap: wrap; }
.cb-su-mock .k .cb-num { font-size: 20px; font-weight: 600; }
.cb-su-mock .a span { font-size: 12px; color: var(--ink-2); }
.cb-su-mock > button { justify-self: start; }
.cb-su-brand { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

/* ── src/styles/z4-time.css ── */
/* ── Время (CatalystBento · группа z4-time) ─────────────────────────────
   Неделя по часам, люди × время, запись по слотам, лист ожидания, редактор встречи, диапазон дат, напоминания.
   Зона Z7 «Полотно времени» (БРЕНДБУК «Сетка»). Корень .cb-tme — карточка или прозрачный блок (bare); раскладка по ширине контейнера.
   Позиции событий приходят из CSSOM в процентах (top/height/left/width) — здесь только вид. Цвет только токенами. */
.cb-tme { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; color: var(--ink); font-size: 13px; line-height: 18px; }
.cb-tme.card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-5); }
:where(.cb-tme) p { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-tme) h3, :where(.cb-tme) h4 { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-tme) ol, :where(.cb-tme) ul { list-style: none; margin: 0; padding: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-tme [tabindex="-1"]:focus { outline: none; }
.cb-tme .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cb-tme-live { font-size: 12px; color: var(--ink-2); }
.cb-tme-live:empty { display: none; }
.cb-tme-hint { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-tme-empty { padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); color: var(--ink-2); text-align: center; }
.cb-tme-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--inset); font-size: 12px; line-height: 17px; color: var(--ink-2); }
.cb-tme-note > .cb-i { flex: none; margin-top: 1px; color: var(--ink-3); }
.cb-tme-note .acts { margin-top: 8px; }
.cb-tme-state { background: var(--inset); border-radius: var(--radius-inset); }
.cb-tme-ex { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-tme-ex > .cb-seg { align-self: flex-start; }
.cb-tme .e, .cb-tme-f small.e { color: var(--bad); font-size: 12px; line-height: 16px; }

/* шапка блока */
.cb-tme-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-tme-hd .t { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; flex: 1 1 240px; }
.cb-tme-hd .ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-tme-hd h3 { font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-tme-hd .t p { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-tme-hd .x { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* строка инструментов и пояс */
.cb-tme-bar { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.cb-tme-bar .nav { display: flex; align-items: center; gap: 4px; }
.cb-tme-bar .cb-seg { max-width: 100%; }
.cb-tme-tz { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-2); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; margin-left: auto; }
.cb-tme-tz .cb-i { color: var(--ink-3); flex: none; }
.cb-tme-hd .x .cb-tme-tz { margin-left: 0; }

/* статус словом и иконкой */
.cb-tme-st { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.cb-tme-st .cb-i { flex: none; color: var(--ink-3); }
.cb-tme-st.ok .cb-i { color: var(--ok); }
.cb-tme-st.warn .cb-i { color: var(--warn); }
.cb-tme-st.bad .cb-i { color: var(--bad); }

/* ══ 1. WeekHoursGrid ══ */
.cb-tme-scroll { position: relative; max-height: 620px; overflow: auto; border-radius: var(--radius-inset); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); overscroll-behavior: contain; }
.cb-tme-wk { --tm-hour: 52px; min-width: 560px; }
.cb-tme-wk.one { --tm-hour: 60px; min-width: 0; }
/* сетка — только у рядов недели внутри .cb-tme-wk (У-0237: до переименования группы «Время» в cb-tme эта сетка ложилась на ряд аватаров «Команды» .cb-tm-row) */
.cb-tme-wk > .cb-tme-row { display: grid; grid-template-columns: 56px repeat(var(--days, 7), minmax(0, 1fr)); }
.cb-tme-row.head { position: sticky; top: 0; z-index: 6; background: var(--card); box-shadow: 0 1px 0 var(--border); }
.cb-tme-row .gut { position: relative; font-size: 11px; line-height: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; padding: 2px 8px 0 0; }
.cb-tme-row .dh { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 8px 6px; min-width: 0; background: linear-gradient(var(--border), var(--border)) left top / 1px 100% no-repeat; }
.cb-tme-row .dh .dw { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-tme-row .dh b { font-size: 14px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-tme-row .dh .n { font-size: 11px; line-height: 14px; color: var(--ink-3); white-space: nowrap; }
.cb-tme-row .dh .td, .cb-tme-mo .td { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 5px; background: var(--flame-soft); color: var(--ink); font-size: 11px; font-weight: 600; }
.cb-tme-row .dh.today { box-shadow: inset 0 -2px 0 var(--ink); }
.cb-tme-row .dh.rest .dw, .cb-tme-row .dh.rest b { color: var(--ink-3); }
.cb-tme-row .cell { position: relative; height: var(--tm-hour); min-width: 0; outline: none;
  background: linear-gradient(var(--border), var(--border)) left top / 1px 100% no-repeat, linear-gradient(var(--border), var(--border)) left bottom / 100% 1px no-repeat, linear-gradient(color-mix(in oklab, var(--border) 45%, transparent), color-mix(in oklab, var(--border) 45%, transparent)) left 50% / 100% 1px no-repeat; }
.cb-tme-row .cell.off { background-color: color-mix(in oklab, var(--inset) 70%, var(--card)); }
.cb-tme-row .cell.today { background-color: color-mix(in oklab, var(--flame) 4%, var(--card)); }
.cb-tme-row .cell.off.today { background-color: color-mix(in oklab, var(--flame) 4%, var(--inset)); }
.cb-tme-row .cell.add { cursor: cell; }
.cb-tme-row .cell.add:hover { background-color: var(--inset); }
.cb-tme-row .cell:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.cb-tme-row .gut .now-l { position: absolute; right: 4px; transform: translateY(-50%); z-index: 5; padding: 0 4px; border-radius: 4px; background: var(--flame-deep); color: var(--on-flame); font-size: 11px; line-height: 16px; font-weight: 600; }

/* событие: вид; позиция из CSSOM */
.cb-tme-ev { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 1px; min-height: 0; margin: 1px 0 0; padding: var(--space-1) var(--space-2) var(--space-1) 8px; border: 0; border-radius: 8px;
  background: var(--inset); color: var(--ink); font: inherit; font-size: 12px; line-height: 15px; text-align: left; overflow: hidden; cursor: pointer;
  transition: background-color var(--motion-subtle-in) var(--motion-ease), box-shadow var(--motion-subtle-in) var(--motion-ease); touch-action: manipulation; }
.cb-tme-ev:hover { background: var(--inset-hover); }
.cb-tme-ev:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; z-index: 4; }
.cb-tme-ev .tm { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-tme-ev .tm .cb-i { color: var(--ink-3); flex: none; }
.cb-tme-ev .tm .cb-tme-st { margin: 0 0 0 auto; flex: none; }   /* статус иконкой в строке времени, когда на него нет целой строки (У-0250) */
.cb-tme-ev .tm > span:not(.cb-tme-st) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* узкая колонка дня на телефоне: «09:30–10:…», а не срез о край встречи (У-0239) */
.cb-tme-ev .nm { font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; }
.cb-tme-ev .who { font-size: 11px; line-height: 14px; color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.cb-tme-ev > .tm, .cb-tme-ev > .nm { flex: none; }
.cb-tme-ev > .who { flex: 0 1 auto; min-height: 0; }
.cb-tme-ev .cb-tme-st { margin-top: auto; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.cb-tme-ev.short { flex-direction: row; align-items: center; gap: 6px; padding-top: 1px; padding-bottom: 1px; }
.cb-tme-ev.short .nm { -webkit-line-clamp: 1; flex: 1 1 auto; min-width: 0; }
.cb-tme-ev.short .cb-tme-st { margin: 0; }
/* тон статуса — мягкой заливкой и иконкой статуса, без полосы у края (D17, У-0248) */
.cb-tme-ev.s-confirmed { background: var(--ok-soft); }
.cb-tme-ev.s-noshow { background: var(--warn-soft); }
.cb-tme-ev.s-tentative { background: var(--card); outline: 1px dashed var(--ink-3); outline-offset: -1px; }
.cb-tme-ev.s-done { background: color-mix(in oklab, var(--inset) 60%, var(--card)); }
.cb-tme-ev.s-done .nm { color: var(--ink-2); }
.cb-tme-ev.s-canceled { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-tme-ev.s-canceled .nm { color: var(--ink-3); text-decoration: line-through; }
.cb-tme-ev.s-private { background: repeating-linear-gradient(135deg, var(--hatch-ghost) 0 4px, var(--inset) 4px 9px); color: var(--ink-2); }
.cb-tme-ev.mv { cursor: grab; }
.cb-tme-ev.on { background: var(--card); box-shadow: var(--shadow-ring); z-index: 3; }
.cb-tme-ev.drag { cursor: grabbing; z-index: 5; box-shadow: var(--shadow-pop); background: var(--card); }
.cb-tme-brk { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(135deg, var(--hatch-ghost) 0 3px, transparent 3px 8px); }
.cb-tme-brk span { position: absolute; left: 6px; top: 4px; padding: 0 6px; border-radius: 5px; background: var(--card); color: var(--ink-2); font-size: 11px; line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cb-tme-now { position: absolute; left: 0; right: 0; height: 0; z-index: 4; border-top: 2px solid var(--flame); pointer-events: none; }
.cb-tme-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--flame); }

/* месяц */
.cb-tme-mo { border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; background: var(--card); }
.cb-tme-mo .hdr, .cb-tme-mo .wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cb-tme-mo .hdr > div { padding: 8px; font-size: 11px; color: var(--ink-3); }
.cb-tme-mo .md { min-height: 96px; min-width: 0; background: linear-gradient(var(--border), var(--border)) left top / 100% 1px no-repeat, linear-gradient(var(--border), var(--border)) left top / 1px 100% no-repeat; }
.cb-tme-mo .md.out { background-color: color-mix(in oklab, var(--inset) 60%, var(--card)); }
.cb-tme-mo .md.today { background-color: color-mix(in oklab, var(--flame) 6%, var(--card)); }
.cb-tme-mo .mb { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; height: 100%; min-height: 96px; padding: 6px 8px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cb-tme-mo .mb:hover { background: var(--inset); }
.cb-tme-mo .mb:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cb-tme-mo .dn { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-tme-mo .md.out .dn { color: var(--ink-3); }
.cb-tme-mo .li { font-size: 11px; line-height: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.cb-tme-mo .li b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-tme-mo .more { font-size: 11px; line-height: 14px; color: var(--ink-3); }

/* повестка дня (телефон) */
.cb-tme-ag { display: flex; flex-direction: column; gap: var(--space-3); }
.cb-tme-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cb-tme-strip .dd { display: flex; flex-direction: column; align-items: center; gap: 0; min-height: 56px; padding: 6px 0; border: 0; border-radius: 12px; background: var(--inset); color: var(--ink); font: inherit; cursor: pointer; }
.cb-tme-strip .dd .dw { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-tme-strip .dd b { font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-tme-strip .dd .n { font-size: 11px; line-height: 14px; color: var(--ink-2); }
.cb-tme-strip .dd.today { background: color-mix(in oklab, var(--flame) 10%, var(--inset)); }
.cb-tme-strip .dd.on { background: var(--primary); color: var(--on-primary); }
.cb-tme-strip .dd.on .dw, .cb-tme-strip .dd.on .n { color: inherit; }
.cb-tme-strip .dd:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-tme-list { display: flex; flex-direction: column; gap: 6px; }
.cb-tme-list > li { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border-radius: 12px; }
.cb-tme-list > li .tm { font-size: 12px; line-height: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.cb-tme-list > li .tm b { font-size: 14px; line-height: 18px; color: var(--ink); font-weight: 600; }
.cb-tme-list > li.brk { background: repeating-linear-gradient(135deg, var(--hatch-ghost) 0 3px, transparent 3px 8px); color: var(--ink-2); }
.cb-tme-list > li.free { box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-2); }
.cb-tme-list > li.free .fx { font-size: 12px; }
.cb-tme-list > li.ev { display: block; padding: 0; }
.cb-tme-list > li.ev .row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; width: 100%; padding: var(--space-3); border: 0; border-radius: 12px; background: var(--inset); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cb-tme-list > li.ev .row:hover { background: var(--inset-hover); }
.cb-tme-list > li.ev .row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cb-tme-list > li.ev.s-confirmed .row { background: var(--ok-soft); }
.cb-tme-list > li.ev.s-noshow .row { background: var(--warn-soft); }
.cb-tme-list > li.ev.s-tentative .row { background: var(--card); outline: 1px dashed var(--ink-3); outline-offset: -1px; }
.cb-tme-list > li.ev.s-canceled .row { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-tme-list > li.ev.s-canceled .bd > b { color: var(--ink-3); text-decoration: line-through; }
.cb-tme-list > li.ev.s-private .row { background: repeating-linear-gradient(135deg, var(--hatch-ghost) 0 4px, var(--inset) 4px 9px); }
.cb-tme-list .bd { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-tme-list .bd > b { font-weight: 600; overflow-wrap: break-word; }
.cb-tme-list .mt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-tme-list .ty { display: inline-flex; align-items: center; gap: 4px; }

/* легенда */
.cb-tme-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 11px; line-height: 14px; color: var(--ink-2); }
.cb-tme-leg > span { display: inline-flex; align-items: center; gap: 5px; }
.cb-tme-leg .cb-i { color: var(--ink-3); }
.cb-tme-leg .sw::before { content: ""; width: 14px; height: 10px; border-radius: 3px; flex: none; background: var(--inset); }
.cb-tme-leg .sw.conf::before { background: var(--ok-soft); }
.cb-tme-leg .sw.nosh::before { background: var(--warn-soft); }   /* легенда в новом виде: заливка тона, без полосы (У-0248) */
.cb-tme-leg .sw.tent::before { background: var(--card); outline: 1px dashed var(--ink-3); outline-offset: -1px; }
.cb-tme-leg .sw.priv::before, .cb-tme-leg .sw.off::before { background: repeating-linear-gradient(135deg, var(--hatch-ghost) 0 2px, var(--inset) 2px 5px); }
.cb-tme-leg .sw.brk::before { background: repeating-linear-gradient(135deg, var(--hatch-ghost) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--border); }
.cb-tme-leg .sw.cxl::before { height: 4px; border-radius: var(--radius-pill); background: repeating-linear-gradient(135deg, var(--ink-3) 0 2px, transparent 2px 4px); }
.cb-tme-leg .sw.free::before { background: transparent; outline: 1px dashed var(--ink-3); outline-offset: -1px; }
.cb-tme-leg .hint { color: var(--ink-3); margin-left: auto; }
.cb-tme-ft { display: flex; }

/* ══ 2. ResourceCalendar ══ */
.cb-tme-rs { border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); background: var(--card); overflow: hidden; }
.cb-tme-rs .rrow { display: grid; grid-template-columns: 200px minmax(0, 1fr) 132px; min-height: 52px; box-shadow: inset 0 -1px 0 var(--border); }
.cb-tme-rs .rrow:last-child { box-shadow: none; }
.cb-tme-rs .rrow.head { min-height: 32px; background: var(--inset); }
.cb-tme-rs .rrow.head > div { font-size: 11px; line-height: 14px; color: var(--ink-2); display: flex; align-items: center; }
.cb-tme-rs .nm { display: flex; align-items: center; gap: 8px; padding: 6px 12px; min-width: 0; }
.cb-tme-rs .nm > div { display: flex; flex-direction: column; min-width: 0; }
.cb-tme-rs .nm b { font-weight: 600; overflow-wrap: break-word; }
.cb-tme-rs .nm span { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-tme-rs .tl { position: relative; min-width: 0; }
.cb-tme-rs .head .tl { overflow: visible; }
.cb-tme-rs .tk { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-tme-rs .tk:first-of-type { transform: translate(0, -50%); padding-left: 2px; }
.cb-tme-rs .tk.last { transform: translate(-100%, -50%); padding-right: 2px; }
.cb-tme-rs .ldh { padding: 0 12px; }
.cb-tme-rs .gl { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in oklab, var(--border) 60%, transparent); }
.cb-tme-rs .off { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--hatch-ghost) 0 3px, transparent 3px 8px); }
.cb-tme-rs .off span { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); padding: 0 6px; border-radius: 5px; background: var(--card); color: var(--ink-2); font-size: 11px; line-height: 16px; }
.cb-tme-rs .brk { position: absolute; top: 4px; bottom: 4px; border-radius: 6px; background: repeating-linear-gradient(135deg, var(--hatch-ghost) 0 2px, var(--card) 2px 5px); box-shadow: inset 0 0 0 1px var(--border); }
.cb-tme-rs .free, .cb-tme-rs .bz { position: absolute; top: 6px; bottom: 6px; display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 0; padding: 0 6px; border: 0; border-radius: 8px; font: inherit; font-size: 11px; line-height: 14px; overflow: hidden; white-space: nowrap; cursor: pointer; }
.cb-tme-rs .free { background: transparent; color: var(--ink-2); outline: 1px dashed var(--ink-3); outline-offset: -1px; margin-left: 1px; }
.cb-tme-rs .free span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* «свободно 2 ч 30 мин» в окне 70 px — многоточие, не срез (У-0239) */
.cb-tme-rs .free:hover:not(:disabled) { background: var(--inset); color: var(--ink); }
.cb-tme-rs .free:disabled { cursor: default; }
.cb-tme-rs .bz { background: var(--inset); color: var(--ink); margin-left: 1px; }
.cb-tme-rs .bz:hover { background: var(--inset-hover); }
.cb-tme-rs .bz .tm { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-tme-rs .bz .nm2 { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* не влезло — многоточие, а не срез буквы о край брони (У-0239) */
.cb-tme-rs .bz.s-confirmed { background: var(--ok-soft); }
.cb-tme-rs .bz.s-noshow { background: var(--warn-soft); }
.cb-tme-rs .bz.s-done { background: color-mix(in oklab, var(--inset) 60%, var(--card)); }
.cb-tme-rs .bz.s-canceled { top: auto; bottom: 1px; padding: 0; overflow: visible; border-radius: var(--radius-pill); box-shadow: none; background: repeating-linear-gradient(135deg, var(--ink-3) 0 2px, transparent 2px 4px); }   /* отменённая — метка под свободным окном, не плашка поверх него (У-0249) */
.cb-tme-rs .bz.s-canceled::after { content: ""; position: absolute; inset: -4px 0 -1px; }   /* зона нажатия шире штриха, не заходит в свободное окно */
.cb-tme-rs .bz.s-canceled:hover { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 4px); }
.cb-tme-rs .bz.s-private { background: repeating-linear-gradient(135deg, var(--hatch-ghost) 0 4px, var(--inset) 4px 9px); }
.cb-tme-rs .free:focus-visible, .cb-tme-rs .bz:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; z-index: 2; }
.cb-tme-rs .now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--flame); z-index: 3; pointer-events: none; }
.cb-tme-rs .ldc { display: flex; align-items: center; padding: 0 12px; }
.cb-tme .ld { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-tme-av { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: color-mix(in oklab, var(--flame) 14%, var(--card)); color: var(--ink); font-size: 11px; font-weight: 600; }
.cb-tme-av.sq { border-radius: 7px; background: var(--inset); color: var(--ink-2); }
.cb-tme-rcards { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-tme-rcards .rc { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-inset); background: var(--inset); }
.cb-tme-rcards .rh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.cb-tme-rcards .rh .nm { display: flex; flex-direction: column; min-width: 0; }
.cb-tme-rcards .rh .nm b { font-weight: 600; }
.cb-tme-rcards .rh .nm span { font-size: 11px; color: var(--ink-3); }
.cb-tme-rcards .rh .ld { min-width: 112px; text-align: right; }
.cb-tme-rcards .sh { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-tme-rcards .fw { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-tme-rcards .bl { display: flex; flex-direction: column; gap: 4px; }
.cb-tme-rcards .bl button { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cb-tme-rcards .bl b { font-variant-numeric: tabular-nums; }

/* чипы и поля (общие) */
.cb-tme .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-tme .chip { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); font: inherit; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.cb-tme .chip:hover:not(:disabled) { background: var(--inset); }
.cb-tme .chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.cb-tme .chip:disabled { color: var(--ink-3); cursor: default; }
.cb-tme .chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-tme-in { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; color-scheme: inherit; }
.cb-tme-in.sm { width: auto; height: 30px; padding: 0 8px; }
textarea.cb-tme-in { height: auto; min-height: 56px; padding: 8px 10px; resize: vertical; line-height: 18px; }
.cb-tme-in:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cb-tme-in[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--bad); }
.cb-tme-in:disabled { color: var(--ink-3); background: var(--inset); }
.cb-tme-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cb-tme-f > label, .cb-tme .lb { font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 500; }
.cb-tme-f .req { color: var(--ink-3); font-weight: 400; }
.cb-tme-f > small { font-size: 12px; line-height: 16px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-tme-fs { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.cb-tme-fs > legend { padding: 0; margin-bottom: var(--space-2); font-size: 14px; line-height: 18px; font-weight: 600; }
.cb-tme-fs > .cb-seg { align-self: flex-start; }
.cb-tme .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.cb-tme-foot { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: var(--space-3); box-shadow: 0 -1px 0 var(--border); }
.cb-tme-foot .acts { justify-content: flex-end; }
.cb-tme-foot > .e { align-self: stretch; }

/* ══ 3. SlotBooking ══ */
.cb-tme-steps { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.cb-tme-steps li { flex: 1 1 0; min-width: 0; }
.cb-tme-steps button { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 36px; padding: 4px 8px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-3); font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.cb-tme-steps button:disabled { cursor: default; }
.cb-tme-steps button:hover:not(:disabled) { background: var(--inset); color: var(--ink); }
.cb-tme-steps .n { width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--inset); color: var(--ink-2); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-tme-steps .done button { color: var(--ink-2); }
.cb-tme-steps .done .n { background: var(--ok-soft); color: var(--ok); }
.cb-tme-steps .cur button { color: var(--ink); background: var(--inset); }
.cb-tme-steps .cur .n { background: var(--primary); color: var(--on-primary); }
.cb-tme-book { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.cb-tme.wide .cb-tme-book { grid-template-columns: minmax(0, 1fr) 280px; }
.cb-tme-book .main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-tme-book .sh { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-tme-book .sh h4 { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-tme-book .side { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-tme-book .side .st { font-size: 13px; font-weight: 600; }
.cb-tme-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.cb-tme-opts .opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 60px; padding: 12px var(--space-4); border: 0; border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); font: inherit; text-align: left; cursor: pointer; }
.cb-tme-opts .opt:hover { background: var(--inset); }
.cb-tme-opts .opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-tme-opts .opt.on { box-shadow: none; background: var(--inset); }
.cb-tme-opts .opt .bd { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-tme-opts .opt .bd b { font-size: 14px; line-height: 18px; font-weight: 600; }
.cb-tme-opts .opt .bd small { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-tme-opts .opt .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cb-tme-opts .opt .mt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.cb-tme-opts .opt .mt b { font-size: 14px; color: var(--ink); font-weight: 600; }
.cb-tme-cal { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-tme-cal .mh { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cb-tme-cal .mh b { font-size: 14px; font-weight: 600; }
.cb-tme-mgrid .hdr, .cb-tme-mgrid .wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cb-tme-mgrid .wk + .wk { margin-top: 4px; }
.cb-tme-mgrid .hdr > div { padding: 4px 0; font-size: 11px; line-height: 14px; color: var(--ink-3); text-align: center; }
.cb-tme-mgrid .c { min-width: 0; }
.cb-tme-mgrid .d { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; min-height: 48px; padding: 4px 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink-3); font: inherit; cursor: default; }
.cb-tme-mgrid .d .num { font-size: 14px; line-height: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cb-tme-mgrid .d .dot { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; line-height: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cb-tme-mgrid .d .dot i { width: 5px; height: 5px; border-radius: 50%; background: var(--flame-deep); }
.cb-tme-mgrid .d .dot.none { font-weight: 400; color: var(--ink-3); }
.cb-tme-mgrid .d.has { background: var(--inset); color: var(--ink); cursor: pointer; }
.cb-tme-mgrid .d.has:hover { background: var(--inset-hover); }
.cb-tme-mgrid .d.today { box-shadow: inset 0 0 0 1px var(--ink); }
.cb-tme-mgrid .d.on { background: var(--primary); color: var(--on-primary); }
.cb-tme-mgrid .d.on .dot { color: inherit; }
.cb-tme-mgrid .d.on .dot i { background: currentColor; }
.cb-tme-mgrid .d:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-tme-slots { display: flex; flex-direction: column; gap: var(--space-3); }
.cb-tme-slots .dayh { display: flex; flex-direction: column; gap: 2px; }
.cb-tme-slots .dayh span { font-size: 12px; color: var(--ink-2); }
.cb-tme-slots .pt { display: flex; flex-direction: column; gap: 8px; }
.cb-tme-slots .ph { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cb-tme-slots .ph b { font-size: 13px; font-weight: 600; }
.cb-tme-slots .ph span { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-tme-slots .sl { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.cb-tme-slots .slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 44px; padding: 4px; border: 0; border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); font: inherit; cursor: pointer; }
.cb-tme-slots .slot b { font-size: 14px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-tme-slots .slot small { font-size: 11px; line-height: 14px; color: var(--ink-2); max-width: 100%; overflow-wrap: break-word; text-align: center; }
.cb-tme-slots .slot:hover { background: var(--inset); }
.cb-tme-slots .slot.on { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.cb-tme-slots .slot.on small { color: inherit; }
.cb-tme-slots .slot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-tme-slots .none { font-size: 12px; color: var(--ink-3); padding: 8px 0; }
.cb-tme-sum { display: flex; flex-direction: column; margin: 0; }
.cb-tme-sum .r { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; padding: 8px 0; box-shadow: inset 0 -1px 0 var(--border); }
.cb-tme-sum .r:last-child { box-shadow: none; }
.cb-tme-sum dt { font-size: 12px; line-height: 18px; color: var(--ink-2); }
.cb-tme-sum dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.cb-tme-sum .no { color: var(--ink-3); font-weight: 400; }
.cb-tme-sum .ed { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cb-tme-sum .ed:hover { color: var(--ink); }
.cb-tme-confirm, .cb-tme-done { display: flex; flex-direction: column; gap: var(--space-3); }
.cb-tme-done { padding: var(--space-3) var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
@container (min-width: 560px) { .cb-tme-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) {
  .cb-tme-steps li:not(.cur) button > span:last-child { display: none; }
  .cb-tme-steps li:not(.cur) { flex: 0 0 auto; }
  .cb-tme-steps li.cur { flex: 1 1 auto; }
  .cb-tme-sum .r { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ══ 4. Waitlist ══ */
.cb-tme-freed { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-tme-freed .fh { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-tme-freed .fh > b { font-size: 13px; font-weight: 600; }
.cb-tme-freed .slot { display: flex; align-items: flex-start; gap: 10px; }
.cb-tme-freed .slot .ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--card); color: var(--ink-2); }
.cb-tme-freed .slot > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-tme-freed .slot b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-tme-freed .slot span { font-size: 12px; color: var(--ink-2); }
.cb-tme-freed .cand { display: flex; flex-direction: column; gap: 6px; }
.cb-tme-freed .cand li, .cb-tme-wl li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) 12px; border-radius: 12px; background: var(--card); }
.cb-tme-freed .cand .bd, .cb-tme-wl .bd { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.cb-tme-freed .cand .bd b, .cb-tme-wl .bd b { font-weight: 600; }
.cb-tme-freed .cand .bd span, .cb-tme-wl .bd span { font-size: 12px; color: var(--ink-2); }
.cb-tme-freed .cand .bd small, .cb-tme-wl .bd small { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-tme-freed .offer { display: flex; flex-direction: column; gap: var(--space-2); padding: 12px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-tme-freed .offer .oh { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-tme-freed .offer .msg { padding: 10px 12px; border-radius: 10px; background: var(--inset); font-size: 13px; line-height: 19px; }
.cb-tme-wl { display: flex; flex-direction: column; gap: 6px; }
.cb-tme-wl li { background: var(--inset); }
.cb-tme-wl li.s-booked .bd b, .cb-tme-wl li.s-declined .bd b, .cb-tme-wl li.s-expired .bd b { color: var(--ink-2); }

/* ══ 5. MeetingEditor ══ */
.cb-tme.ed { gap: var(--space-5); }
.cb-tme-people { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-tme-people .pc { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 4px 4px 6px; border-radius: var(--radius-pill); background: var(--inset); }
.cb-tme-people .pc > span:nth-child(2) { display: inline-flex; flex-direction: column; font-size: 12px; line-height: 14px; font-weight: 500; }
.cb-tme-people .pc small { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.cb-tme-people .rm { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.cb-tme-people .rm:hover { background: var(--inset-hover); color: var(--ink); }
.cb-tme-people .rm:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cb-tme-diff { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.cb-tme-diff > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--inset); min-width: 0; font-variant-numeric: tabular-nums; }
.cb-tme-diff small { font-size: 11px; color: var(--ink-3); }
.cb-tme-diff b { font-weight: 600; }
.cb-tme-diff span { font-size: 12px; color: var(--ink-2); }
.cb-tme-diff .was b { color: var(--ink-2); }
.cb-tme-diff .now { background: var(--card); box-shadow: var(--shadow-ring); }
.cb-tme-diff .now.cancel { background: var(--bad-soft); box-shadow: none; }
.cb-tme-diff .ar { color: var(--ink-3); display: inline-grid; }
.cb-tme-warn { display: flex; align-items: flex-start; gap: 8px; padding: var(--space-2) 12px; border-radius: 12px; background: var(--warn-soft); font-size: 12px; line-height: 17px; }
.cb-tme-warn > .cb-i { flex: none; margin-top: 1px; color: var(--warn); }
.cb-tme-warn ul { margin-top: 4px; font-variant-numeric: tabular-nums; }
.cb-tme .radios { display: flex; flex-direction: column; gap: 2px; }
.cb-tme .rd { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px; border-radius: 10px; cursor: pointer; }
.cb-tme .rd:hover { background: var(--inset); }
.cb-tme .rd.on { background: var(--inset); font-weight: 500; }
.cb-tme .rd input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
@container (max-width: 520px) { .cb-tme-diff { grid-template-columns: minmax(0, 1fr); } .cb-tme-diff .ar { transform: rotate(90deg); justify-self: center; } .cb-tme-foot { align-items: stretch; } .cb-tme-foot .acts { flex-direction: column-reverse; align-items: stretch; } }

/* ══ 6. DateRangePicker ══ */
.cb-tme-rph { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.cb-tme-rph .fl { display: flex; gap: 6px; flex: 1 1 280px; min-width: 0; }
.cb-tme-rph .fb { display: flex; flex-direction: column; align-items: flex-start; gap: 0; flex: 1 1 0; min-width: 0; padding: 6px 12px 8px; border: 0; border-radius: 12px; background: var(--inset); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cb-tme-rph .fb small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-tme-rph .fb b { font-size: 14px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-tme-rph .fb.on { background: var(--card); box-shadow: var(--shadow-ring); }
.cb-tme-rph .fb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-tme-rph .len { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 12px; border-radius: var(--radius-pill); background: var(--flame-soft); color: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-tme-rph .len.muted { background: var(--inset); color: var(--ink-2); font-weight: 500; }
.cb-tme-rnav { display: flex; justify-content: space-between; margin-bottom: calc(var(--space-2) * -1 - 32px); position: relative; z-index: 1; pointer-events: none; }
.cb-tme-rnav > * { pointer-events: auto; }
.cb-tme-rms { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.cb-tme-rms.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-tme-rm { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cb-tme-rm .mt { display: flex; align-items: center; justify-content: center; min-height: 32px; font-size: 14px; font-weight: 600; }
.cb-tme-mgrid.rg .hdr, .cb-tme-mgrid.rg .wk { gap: 0; }
.cb-tme-mgrid.rg .wk + .wk { margin-top: 2px; }
.cb-tme-mgrid.rg .c { display: flex; justify-content: center; }
.cb-tme-mgrid.rg .c.in { background: var(--flame-soft); }
.cb-tme-mgrid.rg .c.from.band { background: linear-gradient(to right, transparent 50%, var(--flame-soft) 50%); }
.cb-tme-mgrid.rg .c.to.band { background: linear-gradient(to left, transparent 50%, var(--flame-soft) 50%); }
.cb-tme-mgrid.rg .d { width: 40px; height: 40px; min-height: 40px; max-width: 100%; padding: 0; border-radius: 50%; color: var(--ink); cursor: pointer; }
.cb-tme-mgrid.rg .d:hover:not(:disabled) { background: var(--inset); }
.cb-tme-mgrid.rg .c.in .d:hover { background: color-mix(in oklab, var(--flame) 26%, var(--card)); }
.cb-tme-mgrid.rg .d.end { background: var(--primary); color: var(--on-primary); }
.cb-tme-mgrid.rg .d:disabled { color: var(--ink-3); cursor: default; text-decoration: line-through; }
.cb-tme-rpf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }

/* ══ 7. ReminderSettings ══ */
.cb-tme-rems { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-tme-rems > li { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-inset); background: var(--inset); }
.cb-tme-rems .rh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-tme-rems .rh .chips { flex: 1 1 auto; }
.cb-tme-rems .vars { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cb-tme-rems .vars small { font-size: 11px; color: var(--ink-3); margin-right: 2px; }
.cb-tme-rems .var { min-height: 26px; padding: 0 8px; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border); font-family: var(--font-mono); font-size: 11px; font-size-adjust: none; cursor: pointer; }
.cb-tme-rems .var:hover { color: var(--ink); background: var(--inset-hover); }
.cb-tme-rems .var:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cb-tme-rems .pv { display: flex; flex-direction: column; gap: 4px; padding: var(--space-2) 12px; border-radius: 10px; background: var(--card); }
.cb-tme-rems .pv > small { font-size: 11px; color: var(--ink-3); }
.cb-tme-rems .pv p { font-size: 13px; line-height: 19px; overflow-wrap: break-word; }
.cb-tme-rems .pv .mt { font-variant-numeric: tabular-nums; }
.cb-tme .qh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-tme-sw { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px 0 4px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.cb-tme-sw i { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--mono-3); transition: background-color var(--motion-subtle-in) var(--motion-ease); }
.cb-tme-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-ring); transition: transform var(--motion-subtle-in) var(--motion-ease); }
.cb-tme-sw.on i { background: var(--primary); }
.cb-tme-sw.on i::after { transform: translateX(14px); }
.cb-tme-sw:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-tme-fs.rem > .cb-btn { align-self: flex-start; }

@media (prefers-reduced-motion: reduce) { .cb-tme-ev, .cb-tme-sw i, .cb-tme-sw i::after { transition: none; } }
@media print { .cb-tme-scroll { max-height: none; overflow: visible; } .cb-tme-bar .nav, .cb-tme-leg .hint { display: none; } }
/* «Все N» под свёрнутой повесткой (WeekHoursGrid agendaMax) */
.cb-tme-more { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* ── src/styles/z5-money.css ── */
/* ── Деньги и документы (CatalystBento · группа z5-money) ─────────────────
   DocView (документ клиенту, пресет печати), DocStatusFlow, SignFlow + SignaturePad, ReceivablesAging,
   PaymentCalendar, PosReceipt, Membership, InvoiceComposer.
   Корень .cb-mn — прозрачный блок; .card — плитка bento. Раскладка реагирует на ширину контейнера (container queries).
   Цвет только токенами; ширины полос — через переменную --w из CSSOM. */
.cb-mn, .cb-mn-docwrap { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; color: var(--ink); font-size: 13px; line-height: 18px; }
:is(.cb-mn, .cb-mn-docwrap).card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-5); }
:where(.cb-mn) p, :where(.cb-mn-docwrap) p { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-mn :is(h3, h4), .cb-mn-docwrap :is(h3, h4) { margin: 0; }
.cb-mn :is(ul, ol), .cb-mn-docwrap :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.cb-mn) dl, :where(.cb-mn-docwrap) dl, :where(.cb-mn) dd, :where(.cb-mn-docwrap) dd { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-mn code, .cb-mn-docwrap code { font-family: var(--font-mono); font-size: .92em; font-size-adjust: none; letter-spacing: 0; }
.cb-mn .acts, .cb-mn-docwrap .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cb-mn [tabindex="-1"]:focus { outline: none; }
.cb-mn-live { font-size: 12px; color: var(--ink-2); }
.cb-mn-live:empty { display: none; }
.cb-mn-hint { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-mn-hint .cb-i { vertical-align: -2px; }
.cb-mn-src { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-mn-state { background: var(--inset); border-radius: var(--radius-inset); }
.cb-mn small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-mn b { font-weight: 600; }
.cb-mn-err { font-size: 12px; line-height: 16px; color: var(--bad); }
.cb-mn-err:empty { display: none; }
.cb-mn-link { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.cb-mn-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.cb-mn .tabular, .cb-mn .r, .cb-mn-docwrap .r { font-variant-numeric: tabular-nums; }

/* шапка блока */
.cb-mn-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-mn-hd .t { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; flex: 1 1 240px; }
.cb-mn-hd .ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-mn-hd h3 { font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-mn-hd .t p { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-mn-hd .x { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* статус документа: слово + иконка, подложка -soft */
.cb-mn-st { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); font-size: 12px; line-height: 1; font-weight: 500; white-space: nowrap; }
.cb-mn-st .cb-i { color: var(--ink-2); }
.cb-mn-st.ok { background: var(--ok-soft); } .cb-mn-st.ok .cb-i { color: var(--ok); }
.cb-mn-st.warn { background: var(--warn-soft); } .cb-mn-st.warn .cb-i { color: var(--warn); }
.cb-mn-st.bad { background: var(--bad-soft); } .cb-mn-st.bad .cb-i { color: var(--bad); }
.cb-mn-st .x { color: var(--ink-2); font-weight: 400; }
.cb-mn-st .x::before { content: "·"; margin-right: 5px; }

/* предупреждение: расхождение, неполный итог */
.cb-mn-warn { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); font-size: 12px; line-height: 17px; color: var(--ink); }
.cb-mn-warn .cb-i { flex: none; margin-top: 1px; color: var(--warn); }
.cb-mn-warn.bad { background: var(--bad-soft); } .cb-mn-warn.bad .cb-i { color: var(--bad); }

/* ══ 1. DocView ══ */
.cb-mn-docbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-mn-docbar > :last-child:is(.cb-tag) { margin-left: auto; }
.cb-mn-doc { background: var(--card); color: var(--ink); border-radius: var(--radius-inset); box-shadow: 0 0 0 1px var(--border); padding: clamp(16px, 4cqw, 40px); padding: round(clamp(16px, 4cqw, 40px), 4px); display: flex; flex-direction: column; gap: var(--space-5); font-size: 13px; line-height: 19px; min-width: 0; }
.cb-mn-doc.compact { padding: clamp(14px, 3cqw, 24px); gap: var(--space-4); font-size: 12px; line-height: 17px; }
.cb-mn-dochead { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.cb-mn-dochead .ttl { min-width: 0; flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; }
.cb-mn-dochead h3 { font-size: 20px; line-height: 26px; font-weight: 600; text-wrap: balance; }
.cb-mn-doc.compact .cb-mn-dochead h3 { font-size: 16px; line-height: 22px; }
.cb-mn-dochead .ttl p { color: var(--ink-2); font-size: 12px; line-height: 16px; }
.cb-mn-dochead .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cb-mn-dochead .due { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.cb-mn-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.cb-mn-party { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px var(--space-4); border-radius: 12px; background: var(--inset); }
.cb-mn-party .lbl, .cb-mn-signp .lbl { font-size: 11px; line-height: 14px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.cb-mn-party > b { font-size: 14px; line-height: 19px; font-weight: 600; }
.cb-mn-party dl { display: grid; gap: 2px; margin-top: 2px; }
.cb-mn-party dl > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; font-size: 12px; line-height: 17px; }
.cb-mn-party dt { color: var(--ink-3); }
.cb-mn-party dd { color: var(--ink); overflow-wrap: break-word; }
.cb-mn-party dd.mono { font-family: var(--font-mono); font-size: 11.5px; font-size-adjust: none; font-variant-numeric: tabular-nums; }
.cb-mn-party .cb-mn-hint .cb-i { vertical-align: -1px; }
.cb-mn-offer { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--inset); color: var(--ink-2); font-size: 12px; line-height: 17px; }
.cb-mn-offer .cb-i { flex: none; margin-top: 1px; color: var(--ink-3); }
.cb-mn-terms { display: flex; flex-direction: column; gap: var(--space-3); }
.cb-mn-terms b { font-size: 13px; }
.cb-mn-terms p { color: var(--ink-2); margin-top: 2px; max-width: 40em; }
.cb-mn-items { min-width: 0; }
.cb-mn-items table, .cb-mn-tbl table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cb-mn-items th, .cb-mn-tbl th { text-align: left; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--ink-2); background: var(--inset); padding: 8px 10px; }
.cb-mn-items th:first-child, .cb-mn-tbl th:first-child { border-radius: 10px 0 0 10px; }
.cb-mn-items th:last-child, .cb-mn-tbl th:last-child { border-radius: 0 10px 10px 0; }
.cb-mn-items td, .cb-mn-tbl td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cb-mn-items :is(th, td).r, .cb-mn-tbl :is(th, td).r { text-align: right; white-space: nowrap; }
.cb-mn-items :is(th, td).n { width: 28px; color: var(--ink-3); }
.cb-mn-items td.nm { min-width: 0; overflow-wrap: break-word; }
.cb-mn-items td small, .cb-mn-tbl td small { display: block; margin-top: 2px; font-size: 11px; line-height: 14px; color: var(--ink-3); white-space: normal; }
.cb-mn-items td small.bad, .cb-mn-posit small.bad { color: var(--bad); }
.cb-mn-items tr.diff td { background: var(--bad-soft); }
.cb-mn-items td.sum { font-weight: 600; }
.cb-mn-items td.empty { text-align: center; color: var(--ink-3); padding: 20px 10px; }
.cb-mn-totals { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.cb-mn-totals dl { display: grid; gap: 4px; min-width: min(100%, 320px); font-variant-numeric: tabular-nums; }
.cb-mn-totals dl > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.cb-mn-totals dt { color: var(--ink-2); }
.cb-mn-totals dd { text-align: right; white-space: nowrap; }
.cb-mn-totals dd small { display: block; font-size: 11px; color: var(--ink-3); white-space: normal; }
.cb-mn-totals .grand { padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--border); }
.cb-mn-totals .grand :is(dt, dd) { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.cb-mn-totals .cb-mn-warn { align-self: stretch; }
.cb-mn-words { align-self: stretch; font-size: 12px; line-height: 17px; color: var(--ink); }
.cb-mn-words span { display: block; font-size: 11px; color: var(--ink-3); }
.cb-mn-note { font-size: 12px; line-height: 17px; color: var(--ink-2); }
.cb-mn-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.cb-mn-signp { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-right: 76px; }
.cb-mn-signp .role { font-size: 12px; color: var(--ink-2); }
.cb-mn-signp .lines { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-3); margin-top: 18px; }
.cb-mn-signp .ln { display: flex; flex-direction: column; gap: 2px; }
.cb-mn-signp .ln i { display: block; height: 1px; background: var(--ink-3); }
.cb-mn-signp .ln small { font-size: 11px; color: var(--ink-3); }
.cb-mn-signp .seal { position: absolute; right: 0; top: 14px; width: 64px; height: 64px; border-radius: 50%; border: 1px dashed var(--ink-3); display: grid; place-items: center; font-size: 11px; color: var(--ink-3); }
.cb-mn-signp .signed { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--ok-soft); }
.cb-mn-signp .signed .cb-i { flex: none; color: var(--ok); margin-top: 1px; }
.cb-mn-signp .signed b { display: block; font-size: 12px; line-height: 16px; font-weight: 600; }
.cb-mn-signp .signed small { display: block; font-size: 11px; line-height: 14px; color: var(--ink-2); }
@container (max-width: 620px) {
  .cb-mn-parties, .cb-mn-signs { grid-template-columns: minmax(0, 1fr); }
  .cb-mn-dochead .meta { align-items: flex-start; }
  .cb-mn-dochead h3 { font-size: 17px; line-height: 23px; }
  /* позиции карточками: подпись колонки из data-l */
  .cb-mn-items thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cb-mn-items :is(table, tbody, tr, td) { display: block; }
  .cb-mn-items tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .cb-mn-items td { padding: 0; border: 0; }
  .cb-mn-items td.n { display: none; }
  .cb-mn-items td.nm { grid-column: 1 / -1; font-weight: 500; margin-bottom: 4px; }
  .cb-mn-items td:not(.nm):not(.empty)::before { content: attr(data-l); display: block; font-size: 11px; line-height: 14px; color: var(--ink-3); }
  .cb-mn-items td.r { text-align: left; white-space: normal; }
  .cb-mn-items tr.diff { background: var(--bad-soft); padding-inline: 10px; border-radius: 10px; }
  .cb-mn-items tr.diff td { background: none; }
  .cb-mn-totals { align-items: stretch; }
  .cb-mn-signp .lines { grid-template-columns: minmax(0, 1fr); }
}
/* пресет печати: лист светлый (data-theme="light" на листе), без теней, кнопок и скруглений; A4 по ширине */
.cb-mn-doc.print { box-shadow: 0 0 0 1px var(--border); border-radius: 0; max-width: 210mm; margin-inline: auto; width: 100%; padding: 16mm 14mm; font-size: 12px; line-height: 17px; }
.cb-mn-doc.print .cb-mn-party, .cb-mn-doc.print .cb-mn-offer { background: none; box-shadow: inset 0 0 0 1px var(--border); }
.cb-mn-doc.print .cb-mn-items th { background: none; border-bottom: 1px solid var(--ink); border-radius: 0; color: var(--ink); }
.cb-mn-doc.print .cb-mn-st { background: none; box-shadow: inset 0 0 0 1px var(--border); }
html[data-preset="print"] .cb-mn-docbar, html[data-preset="print"] .cb-mn-pvbtn { display: none; }
@media print {
  .cb-mn-docbar, .cb-mn .acts, .cb-mn-exrow, .cb-mn-ex > .cb-seg { display: none !important; }
  .cb-mn-docwrap.card { box-shadow: none; padding: 0; }
  .cb-mn-doc { box-shadow: none; border-radius: 0; padding: 0; max-width: none; }
  .cb-mn-party, .cb-mn-offer { background: none; box-shadow: inset 0 0 0 1px var(--border); }
  .cb-mn-items th { background: none; border-bottom: 1px solid var(--ink); }
  .cb-mn-items tr, .cb-mn-signs, .cb-mn-totals { break-inside: avoid-page; }
}

/* ══ 2. DocStatusFlow ══ */
.cb-mn-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; counter-reset: s; }
.cb-mn-steps li { position: relative; display: flex; flex-direction: column; gap: 8px; padding-right: 8px; min-width: 0; }
.cb-mn-steps li::after { content: ""; position: absolute; top: 13px; left: 30px; right: 4px; height: 2px; border-radius: 2px; background: var(--border); }
.cb-mn-steps li:last-child::after { display: none; }
.cb-mn-steps li.done::after { background: var(--ink-3); }
.cb-mn-steps .mk { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--inset); color: var(--ink-3); }
.cb-mn-steps li.done .mk { background: var(--card-ink); color: var(--on-card-ink); }
.cb-mn-steps li.cur .mk { background: var(--flame); color: var(--on-flame); }
.cb-mn-steps li.skip .mk { background: none; color: var(--ink-3); }
.cb-mn-steps .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-mn-steps .tx b { font-size: 12px; line-height: 16px; font-weight: 600; }
.cb-mn-steps li.todo .tx b, .cb-mn-steps li.skip .tx b { color: var(--ink-2); font-weight: 500; }
.cb-mn-steps .tx small { font-size: 11px; line-height: 14px; color: var(--ink-3); overflow-wrap: break-word; }
.cb-mn-steps .tx small.na { font-style: normal; }
.cb-mn-steps .tx small.nt { color: var(--ink-2); }
.cb-mn-next { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cb-mn-next small { font-size: 12px; color: var(--ink-3); }
@container (max-width: 720px) {
  .cb-mn-steps { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
  .cb-mn-steps li { flex-direction: row; align-items: flex-start; gap: 12px; padding: 0 0 14px; }
  .cb-mn-steps li::after { top: 30px; bottom: 2px; left: 13px; right: auto; width: 2px; height: auto; }
  .cb-mn-steps .tx { padding-top: 5px; }
}
.cb-mn-flow.compact .cb-mn-steps li { padding-bottom: 8px; }

/* ══ 3. SignFlow + SignaturePad ══ */
.cb-mn-sgsteps { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-mn-sgsteps li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border-radius: var(--radius-pill); background: var(--inset); font-size: 12px; color: var(--ink-2); }
.cb-mn-sgsteps .mk { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.cb-mn-sgsteps li.done .mk { background: var(--card-ink); color: var(--on-card-ink); }
.cb-mn-sgsteps li.cur { background: var(--card-ink); color: var(--on-card-ink); }
.cb-mn-sgsteps li.cur .mk { background: var(--flame-deep); color: var(--on-flame); }   /* мелкий текст только на flame-deep (≥ 4,5:1) */
.cb-mn-sgh { font-size: 18px; line-height: 24px; font-weight: 600; }
.cb-mn-sgbody { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cb-mn-sgsum { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px var(--space-4); border-radius: 14px; background: var(--inset); }
.cb-mn-sgsum .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--card); color: var(--ink-2); }
.cb-mn-sgsum b { display: block; font-size: 14px; line-height: 19px; }
.cb-mn-sgsum .sum { text-align: right; font-variant-numeric: tabular-nums; }
.cb-mn-sgsum .sum b { font-size: 16px; }
@container (max-width: 420px) { .cb-mn-sgsum { grid-template-columns: auto minmax(0, 1fr); } .cb-mn-sgsum .sum { grid-column: 1 / -1; text-align: left; } }
.cb-mn-disc { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink); padding: 6px 0; }
.cb-mn-disc:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.cb-mn-agree { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--inset); cursor: pointer; font-size: 13px; line-height: 19px; }
.cb-mn-agree .cb-check { flex: none; margin-top: 2px; }
.cb-mn-legal { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 17px; color: var(--ink-2); padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border); }
.cb-mn-legal .cb-i { flex: none; margin-top: 1px; color: var(--ink-3); }
.cb-mn-legal b { color: var(--ink); }
.cb-mn-sms { display: flex; flex-direction: column; gap: var(--space-3); }
.cb-mn-code { display: flex; flex-direction: column; gap: 6px; }
.cb-mn-code label { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.cb-mn-code .row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.cb-mn-inp { box-sizing: border-box; height: var(--control-h); padding: 0 12px; border-radius: 12px; border: 0; background: var(--inset); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink); font: 500 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; min-width: 0; }
.cb-mn-inp:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cb-mn-inp.code { width: 9em; letter-spacing: .4em; font-family: var(--font-mono); font-size: 18px; font-size-adjust: none; text-align: center; }
.cb-mn-inp.bad { box-shadow: inset 0 0 0 1px var(--bad); background: var(--bad-soft); }
.cb-mn-inp:disabled { opacity: .5; }
.cb-mn-pad { display: flex; flex-direction: column; gap: 8px; }
.cb-mn-pad .area { position: relative; height: 180px; border-radius: 14px; background: var(--inset); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.cb-mn-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; color: var(--ink); }
.cb-mn-pad .ph { position: absolute; left: 16px; bottom: 44px; font-size: 13px; color: var(--ink-3); pointer-events: none; }
.cb-mn-pad .base { position: absolute; left: 16px; right: 16px; bottom: 36px; height: 1px; background: var(--ink-3); opacity: .5; pointer-events: none; }
.cb-mn-receipt { display: flex; flex-direction: column; gap: var(--space-3); padding: 16px; border-radius: 14px; background: var(--inset); }
.cb-mn-receipt .top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cb-mn-receipt dl { display: grid; gap: 6px; }
.cb-mn-receipt dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.cb-mn-receipt dt { color: var(--ink-3); font-size: 12px; }
.cb-mn-receipt dd { overflow-wrap: break-word; }
@container (max-width: 480px) { .cb-mn-receipt dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.cb-mn-fp { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-mn-hint .cb-mn-fp { display: inline; }
.cb-mn-hint .cb-mn-fp small { display: none; }
.cb-mn-fp code { font-size: 12px; line-height: 17px; word-spacing: .2em; overflow-wrap: break-word; color: var(--ink); }
.cb-mn-fp.wait { color: var(--ink-3); }
.cb-mn-sigimg { width: 100%; max-width: 320px; height: auto; max-height: 120px; border-radius: 10px; background: var(--card); }
.cb-mn-sigimg path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ══ 4. ReceivablesAging ══ */
.cb-mn-agetiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.cb-mn-agetile { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px var(--space-4); border-radius: 14px; background: var(--inset); cursor: pointer; min-width: 0; transition: background-color var(--motion-subtle-in) var(--motion-ease); }
.cb-mn-agetile:hover { background: var(--inset-hover); }
.cb-mn-agetile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-mn-agetile:active { transform: scale(.98); }
.cb-mn-agetile.on { background: var(--card); box-shadow: var(--shadow-ring); }
.cb-mn-agetile.on .lbl { color: var(--ink); font-weight: 600; }
.cb-mn-agetile .lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.cb-mn-agetile .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--c, var(--mono-3)); }
.cb-mn-agetile .sw.hatch { background: repeating-linear-gradient(-45deg, var(--flame) 0 2px, var(--flame-hatch) 2px 4px); }
.cb-mn-agetile b { font-size: 18px; line-height: 24px; font-variant-numeric: tabular-nums; }
.cb-mn-agetile small.pc { color: var(--ink-2); }
.cb-mn-agetile .chev { position: absolute; top: 12px; right: 12px; color: var(--ink-3); }
.cb-mn-agelist[hidden] { display: none; }
.cb-mn-tbl { min-width: 0; }
.cb-mn-tbl caption { text-align: left; font-size: 12px; font-weight: 600; padding: 0 0 8px; }
.cb-mn-tbl td { font-variant-numeric: tabular-nums; }
.cb-mn-tbl td.nm { font-weight: 500; overflow-wrap: break-word; }
.cb-mn-tbl td.nx > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cb-mn-tbl .od { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--bad-soft); font-size: 12px; font-weight: 500; }
.cb-mn-tbl .noshag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); }
.cb-mn-tbl .noshag .cb-i { color: var(--warn); }
@container (max-width: 680px) {
  .cb-mn-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cb-mn-tbl :is(table, tbody, tr, td) { display: block; }
  .cb-mn-tbl caption { display: block; }
  .cb-mn-tbl tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px; margin-bottom: 8px; border-radius: 12px; background: var(--inset); }
  .cb-mn-tbl td { padding: 0; border: 0; }
  .cb-mn-tbl td.nm, .cb-mn-tbl td.nx { grid-column: 1 / -1; }
  .cb-mn-tbl td:not(.nm)::before { content: attr(data-l); display: block; font-size: 11px; line-height: 14px; color: var(--ink-3); }
  .cb-mn-tbl td.r { text-align: left; white-space: normal; }
}

/* ══ 5. PaymentCalendar ══ */
.cb-mn-ctl { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cb-mn-calsum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.cb-mn-calsum > div { display: flex; flex-direction: column; gap: 2px; padding: 12px var(--space-4); border-radius: 14px; background: var(--inset); min-width: 0; }
.cb-mn-calsum > div > span { font-size: 12px; color: var(--ink-2); }
.cb-mn-calsum > div > b { font-size: 20px; line-height: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-mn-calsum > div.gap { background: var(--bad-soft); }
@container (max-width: 720px) { .cb-mn-calsum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 420px) { .cb-mn-calsum > div > b { font-size: 17px; line-height: 22px; overflow-wrap: break-word; } .cb-mn-calsum > div { padding: var(--space-2) 12px; } }   /* суммы «+2 886 000 ₽» не упираются в край плашки на телефоне */
.cb-mn-gap, .cb-mn-low { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; white-space: nowrap; }
.cb-mn-gap { background: var(--bad-soft); color: var(--ink); } .cb-mn-gap .cb-i { color: var(--bad); }
.cb-mn-low { background: var(--warn-soft); color: var(--ink); font-weight: 500; } .cb-mn-low .cb-i { color: var(--warn); }
.cb-mn-calhd, .cb-mn-callist .line { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) 20px; gap: 12px; align-items: center; }
.cb-mn-calhd { padding: 8px 12px; border-radius: 10px; background: var(--inset); font-size: 11px; font-weight: 500; color: var(--ink-2); }
.cb-mn-calhd .r { text-align: right; }
.cb-mn-callist { display: flex; flex-direction: column; }
.cb-mn-callist .row { border-bottom: 1px solid var(--border); }
.cb-mn-callist .line { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) 20px; gap: 12px; align-items: center; width: 100%; min-height: 48px; padding: 6px 12px; cursor: pointer; font-variant-numeric: tabular-nums; }
.cb-mn-callist .line:disabled { cursor: default; }
.cb-mn-callist .line:not(:disabled):hover { background: var(--inset); }
.cb-mn-callist .line:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 10px; }
.cb-mn-callist .row.now .line { background: var(--inset); }
.cb-mn-callist .d { display: flex; flex-direction: column; min-width: 0; }
.cb-mn-callist .d b { font-weight: 500; }
.cb-mn-callist .d small.tag { color: var(--ink); font-weight: 600; }
.cb-mn-callist .r { text-align: right; }
.cb-mn-callist .end { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-weight: 600; }
.cb-mn-callist .ch { color: var(--ink-3); display: grid; place-items: center; }
.cb-mn-callist .ops { display: flex; flex-direction: column; gap: 6px; padding: 4px 12px 12px 12px; }
.cb-mn-callist .ops li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--inset); }
.cb-mn-callist .ops .dir { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--card); }
.cb-mn-callist .ops .dir.in .cb-i { color: var(--ok); }
.cb-mn-callist .ops .dir.out .cb-i { color: var(--ink-2); }
.cb-mn-callist .ops .nm { display: flex; flex-direction: column; min-width: 0; overflow-wrap: break-word; }
.cb-mn-callist .ops b { font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (max-width: 620px) {
  .cb-mn-calhd { display: none; }
  .cb-mn-callist .line { grid-template-columns: repeat(2, minmax(0, 1fr)) 20px; gap: 4px 12px; padding: 10px 12px; }
  .cb-mn-callist .line .d { grid-column: 1 / 3; grid-row: 1; }
  .cb-mn-callist .line .ch { grid-column: 3; grid-row: 1; }
  .cb-mn-callist .line .r { text-align: left; }
  .cb-mn-callist .line .r::before { content: attr(data-l); display: block; font-size: 11px; line-height: 14px; color: var(--ink-3); font-weight: 400; }
  .cb-mn-callist .line .end { grid-column: 1 / 3; align-items: flex-start; }
  .cb-mn-callist .line .r:empty { display: none; }
  .cb-mn-callist .line .r.none::before { content: none; }
}

/* ══ 6a. PosReceipt ══ */
.cb-mn-pos { max-width: 480px; }
.cb-mn-poshd { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; }
.cb-mn-poshd h3 { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-mn-poshd small { display: block; margin-top: 2px; }
.cb-mn-poshd .x { display: flex; align-items: center; gap: var(--space-2); }
.cb-mn-paper { display: flex; flex-direction: column; gap: var(--space-3); padding: 16px; border-radius: 14px; background: var(--inset); }
.cb-mn-posit { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; border-bottom: 1px dashed var(--ink-3); }
.cb-mn-posit li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
.cb-mn-posit .nm { display: flex; flex-direction: column; min-width: 0; }
.cb-mn-posit b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-mn-posit small.bad { grid-column: 1 / -1; }
.cb-mn-postot { display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.cb-mn-postot > div { display: flex; justify-content: space-between; gap: 12px; }
.cb-mn-postot dt { color: var(--ink-2); }
.cb-mn-postot .grand { padding: 6px 0; margin: 2px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cb-mn-postot .grand :is(dt, dd) { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink); }
.cb-mn-postot .pm { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.cb-mn-fisc { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-mn-send { display: flex; flex-direction: column; gap: var(--space-2); padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border); }

/* ══ 6b. Membership ══ */
.cb-mn-mem { max-width: 520px; }
.cb-mn-memnum { display: flex; flex-direction: column; gap: 8px; }
.cb-mn-memnum p { font-size: 15px; line-height: 20px; color: var(--ink-2); }
.cb-mn-memnum p b { font-size: 28px; line-height: 32px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-mn-memdl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.cb-mn-memdl > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--inset); min-width: 0; }
.cb-mn-memdl dt { font-size: 11px; color: var(--ink-3); }
.cb-mn-memdl dd { font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
@container (max-width: 440px) { .cb-mn-memdl { grid-template-columns: minmax(0, 1fr); } }
.cb-mn-freeze { display: flex; flex-direction: column; gap: var(--space-2); padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border); }
.cb-mn-visits summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 500; list-style: none; padding: 4px 0; }
.cb-mn-visits summary::-webkit-details-marker { display: none; }
.cb-mn-visits summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.cb-mn-visits[open] summary .cb-i { transform: rotate(180deg); }
.cb-mn-visits ul { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.cb-mn-visits li { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid var(--border); }

/* ══ 7. InvoiceComposer ══ */
.cb-mn-compgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-5); align-items: start; }
.cb-mn-compgrid > .l { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.cb-mn-compgrid > .r { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cb-mn-pvlbl { font-size: 11px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.cb-mn-pvbtn { display: none; }
@container (max-width: 900px) {
  .cb-mn-compgrid { grid-template-columns: minmax(0, 1fr); }
  .cb-mn-compgrid > .r { display: none; position: static; }
  .cb-mn-compgrid.pv > .r { display: flex; }
  .cb-mn-pvbtn { display: inline-flex; }
}
.cb-mn-form { display: flex; flex-direction: column; gap: var(--space-4); }
.cb-mn-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cb-mn-form legend { display: flex; align-items: center; gap: 8px; padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.cb-mn-form legend .no { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--card-ink); color: var(--on-card-ink); font-size: 11px; font-weight: 600; }
.cb-mn-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-2); }
.cb-mn-radio { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: var(--space-2) 12px; border-radius: 12px; background: var(--inset); cursor: pointer; min-width: 0; }
.cb-mn-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cb-mn-radio:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-mn-radio.on { background: var(--card); box-shadow: var(--shadow-ring); }
.cb-mn-radio .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--card); color: var(--ink-2); }
.cb-mn-radio.on .ic { background: var(--inset); }
.cb-mn-radio .tx { display: flex; flex-direction: column; min-width: 0; }
.cb-mn-radio .tx small { overflow-wrap: break-word; }
.cb-mn-radio .ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--flame-deep); color: var(--on-flame); }
.cb-mn-pick { display: flex; flex-direction: column; gap: 6px; }
.cb-mn-pick li { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(96px, auto); gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--inset); }
.cb-mn-pick li.off { opacity: .6; }
.cb-mn-pick .nm { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-width: 0; }
.cb-mn-pick .nm .cb-check { flex: none; margin-top: 2px; }
.cb-mn-pick .nm > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: break-word; }
.cb-mn-pick .qty .cb-mn-inp { width: 100%; height: 36px; text-align: right; background: var(--card); }
.cb-mn-pick .amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (max-width: 460px) { .cb-mn-pick li { grid-template-columns: minmax(0, 1fr) 80px; } .cb-mn-pick .amt { grid-column: 1 / -1; text-align: left; } }
.cb-mn-compfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 16px; border-radius: 14px; background: var(--inset); }
.cb-mn-compfoot .sum { display: flex; flex-direction: column; }
.cb-mn-compfoot .sum span { font-size: 12px; color: var(--ink-2); }
.cb-mn-compfoot .sum b { font-size: 22px; line-height: 28px; font-variant-numeric: tabular-nums; }
.cb-mn-compfoot .why { flex-basis: 100%; }

/* примеры галереи */
.cb-mn-ex { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-mn-ex.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: stretch; }   /* R4: карточки ряда одной высоты */
.cb-mn-exrow { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
@media (prefers-reduced-motion: reduce) { .cb-mn-agetile { transition: none; } .cb-mn-agetile:active { transform: none; } }

/* ── src/styles/z6-domains.css ── */
/* ── Доменные компоненты (CatalystBento · группа z6-domains, волна 4 · WP-G) ─────────────────
   Поддержка · магазин · выезд · ОКК по любому источнику · портфель · портал клиента.
   Корень .cb-dx — прозрачный блок с контейнерным запросом: раскладка решается шириной карточки, а не экрана.
   Цвет только токенами; статусы словом и иконкой (.cb-dx-st); на телефоне цели касания 44 px (.cb-dx-phone). */
.cb-dx { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; color: var(--ink); font-size: 13px; line-height: 18px; }
.cb-dx.card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-5); }
:where(.cb-dx) p { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-dx) h2, :where(.cb-dx) h3, :where(.cb-dx) h4, :where(.cb-dx) h5 { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-dx) ul, :where(.cb-dx) ol { list-style: none; margin: 0; padding: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-dx code { font-family: var(--font-mono); font-size: 12px; font-size-adjust: none; color: var(--ink-2); }
.cb-dx small { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-dx .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cb-dx textarea { width: 100%; box-sizing: border-box; min-height: 64px; padding: var(--space-2) 12px; border: 0; border-radius: 12px; background: var(--inset); color: var(--ink); font: inherit; font-size: 14px; line-height: 20px; resize: vertical; box-shadow: inset 0 0 0 1px var(--border); }
.cb-dx textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-dx-live { font-size: 12px; color: var(--ink-2); }
.cb-dx-live:empty { display: none; }
.cb-dx-hint { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-dx-foot { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-dx-no { display: inline-flex; align-items: baseline; color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.cb-dx-no code { color: inherit; }
.cb-dx-nodata { color: var(--ink-3); border-bottom: 1px dashed var(--ink-3); }
.cb-dx-state { background: var(--inset); border-radius: var(--radius-inset); }
.cb-dx-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--inset); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cb-dx-note .cb-i { flex: none; margin-top: 1px; color: var(--ink-3); }
.cb-dx-x { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-3); cursor: pointer; }
.cb-dx-x:hover { background: var(--inset-hover); color: var(--ink); }
.cb-dx-ai { display: inline-grid; place-items: center; height: 16px; padding: 0 5px; margin-left: 4px; border-radius: 5px; font-size: 11px; line-height: 1; font-weight: 700; background: var(--flame-soft); color: var(--ink); }
.cb-dx-pill { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-left: 6px; border-radius: var(--radius-pill); background: var(--flame-soft); color: var(--ink); font-size: 11px; font-weight: 600; vertical-align: 1px; }

/* статус: иконка + слово + тон (цвет не единственный канал) */
.cb-dx-st { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; background: var(--inset); color: var(--ink-2); }
.cb-dx-st .cb-i { flex: none; }
@container (max-width: 480px) { .cb-dx-st { white-space: normal; max-width: 100%; } }
.cb-dx-st.ok { background: var(--ok-soft); color: color-mix(in oklab, var(--ok) 70%, var(--ink)); }
.cb-dx-st.bad { background: var(--bad-soft); color: color-mix(in oklab, var(--bad) 70%, var(--ink)); }
.cb-dx-st.warn { background: var(--warn-soft); color: color-mix(in oklab, var(--warn) 55%, var(--ink)); }
[data-theme="dark"] .cb-dx-st.ok { color: var(--ok); }
[data-theme="dark"] .cb-dx-st.bad { color: var(--bad); }
[data-theme="dark"] .cb-dx-st.warn { color: var(--warn); }

/* шапка блока */
.cb-dx-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-dx-hd .t { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; flex: 1 1 240px; }
.cb-dx-hd .ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-dx-hd h2 { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.cb-dx-hd h3 { font-size: 15px; line-height: 20px; font-weight: 600; text-wrap: balance; }
.cb-dx-hd .t p { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-dx-hd .x { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* раздел внутри блока */
.cb-dx-sec { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-dx-sec .sh { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cb-dx-sec h4 { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.cb-dx-sec h4 .cb-i { color: var(--ink-3); }
.cb-dx-sec h4 .n, .cb-dx .grp .n, .cb-dx-op .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-2); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* пары «подпись — значение» */
.cb-dx-dl { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.cb-dx-dl > div { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; min-width: 0; }
.cb-dx-dl dt { color: var(--ink-3); font-size: 12px; flex: none; }
.cb-dx-dl dd { margin: 0; text-align: right; color: var(--ink); min-width: 0; overflow-wrap: break-word; }

/* строка инструментов, массовые действия, предпросмотр, квитанция */
.cb-dx-tb { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.cb-dx-tb .cb-search { flex: 1 1 220px; min-width: 0; }
.cb-dx-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 8px 12px; border-radius: 14px; background: var(--card-ink); color: var(--on-card-ink); }
.cb-dx-bulk b { margin-right: var(--space-2); font-weight: 600; }
.cb-dx-bulk .cb-btn.secondary { background: color-mix(in oklab, var(--on-card-ink) 14%, transparent); color: var(--on-card-ink); }
.cb-dx-bulk .cb-btn.ghost { color: var(--on-card-ink); }
.cb-dx-preview { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-dx-preview .bt { color: var(--ink-2); font-size: 12px; }
.cb-dx-rcpt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 6px 6px 12px; border-radius: 14px; background: var(--ok-soft); color: var(--ink); }
.cb-dx-rcpt > span { flex: 1 1 160px; }
.cb-dx-rcpt > .cb-i { color: var(--ok); }

/* ══ 1. TicketQueue ══ */
.cb-dx-tq { display: flex; flex-direction: column; gap: var(--space-3); }
.cb-dx-tq .grp { display: flex; flex-direction: column; gap: 4px; }
.cb-dx-tq .gh { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 32px; font-size: 12px; color: var(--ink-2); }
.cb-dx-tq .gh b { font-weight: 600; color: var(--ink); }
.cb-dx-tq-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(150px, auto) minmax(150px, 190px); gap: 4px 12px; align-items: center; padding: 8px 12px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-dx-tq-row.sel { background: var(--inset); box-shadow: none; }
.cb-dx-tq-row.cur { background: var(--inset); box-shadow: none; }
.cb-dx-tq-row.cur .l1 b { font-weight: 600; }
.cb-dx-tq-row.done .l1 b { color: var(--ink-2); }
.cb-dx-tq-row .ck { display: grid; place-items: center; min-height: 32px; }
.cb-dx-tq-row .open { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; border-radius: 8px; }
.cb-dx-tq-row .open:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cb-dx-tq-row .l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cb-dx-tq-row .l1 b { font-size: 14px; line-height: 20px; font-weight: 600; min-width: 0; overflow-wrap: break-word; }
.cb-dx-tq-row .l2 { color: var(--ink-2); font-size: 12px; line-height: 16px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cb-dx-tq-row .l3 { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ink-3); font-size: 12px; line-height: 16px; }
.cb-dx-tq-row .ch { display: inline-flex; align-items: center; gap: 4px; }
.cb-dx-tq-row .sla, .cb-dx-tq-row .who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cb-dx-tq-row .as { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); }
.cb-dx-tq-row .as.none { color: var(--ink-3); border-bottom: 1px dashed var(--ink-3); }
@container (max-width: 720px) {
  .cb-dx-tq-row { grid-template-columns: 32px minmax(0, 1fr); }
  .cb-dx-tq-row .sla, .cb-dx-tq-row .who { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* ══ 2. TicketCard · OrderCard: шапка записи, сроки, тело ══ */
.cb-dx-tk-hd { display: flex; flex-direction: column; gap: 8px; }
.cb-dx-tk-hd .t { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cb-dx-tk-hd h3 { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; min-width: 0; overflow-wrap: break-word; }
.cb-dx-tk-hd .m { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-dx-tk-hd .d { font-size: 12px; color: var(--ink-3); }
.cb-dx-tk-hd .a { display: flex; gap: var(--space-2); flex-wrap: wrap; }
@container (min-width: 721px) {
  .cb-dx-tk-hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t a" "m a"; column-gap: var(--space-4); }
  .cb-dx-tk-hd .t { grid-area: t; } .cb-dx-tk-hd .m { grid-area: m; } .cb-dx-tk-hd .a { grid-area: a; align-self: start; }
}
.cb-dx-timers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.cb-dx-timers .tm { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px var(--space-4); border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-dx-timers .tm.over { background: var(--bad-soft); }
.cb-dx-timers .l { font-size: 12px; color: var(--ink-2); }
.cb-dx-timers b { font-size: 14px; font-weight: 600; }
@container (max-width: 720px) { .cb-dx-timers { grid-template-columns: minmax(0, 1fr); } }
.cb-dx-tk-body, .cb-dx-oc-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-4); align-items: start; }
.cb-dx-tk-body .main, .cb-dx-tk-body .side, .cb-dx-oc-body .side { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
@container (max-width: 860px) { .cb-dx-tk-body, .cb-dx-oc-body { grid-template-columns: minmax(0, 1fr); } }
.cb-dx-slot { display: flex; align-items: flex-start; gap: 10px; padding: var(--space-4); border-radius: 12px; border: 1px dashed var(--ink-3); color: var(--ink-2); background: var(--card); }
.cb-dx-slot .cb-i { flex: none; color: var(--ink-3); margin-top: 1px; }
.cb-dx-msgs { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; }
.cb-dx-msgs li { padding: 10px 12px; border-radius: 12px; background: var(--card); }
.cb-dx-msgs li.internal { background: var(--warn-soft); }
.cb-dx-msgs li.system { background: transparent; color: var(--ink-3); font-size: 12px; }
.cb-dx-msgs .mh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.cb-dx-msgs .mh b { color: var(--ink); }
.cb-dx-rel { display: flex; flex-direction: column; gap: 4px; }
.cb-dx-rel button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 10px; background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cb-dx-rel button:hover { background: var(--inset-hover); }
.cb-dx-rel .ic, .cb-dx-rows .ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--inset); color: var(--ink-2); }
.cb-dx-rel .tx, .cb-dx-rows .tx { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cb-dx-rel .sum { font-weight: 600; white-space: nowrap; }
.cb-dx-rel > li > button > .cb-i { color: var(--ink-3); }

/* ══ 3. OrderPipeline ══ */
.cb-dx-op { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.cb-dx-op .col { flex: 1 0 220px; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-2); padding: 12px; border-radius: var(--radius-inset); background: var(--inset); min-width: 220px; }
.cb-dx-op .col.ret { background: color-mix(in oklab, var(--inset) 60%, var(--card)); box-shadow: inset 0 0 0 1px var(--border); }
.cb-dx-op header { display: flex; flex-direction: column; gap: 2px; }
.cb-dx-op header .t { display: flex; align-items: center; gap: 6px; }
.cb-dx-op header .t b { font-weight: 600; }
.cb-dx-op header .t .cb-i { color: var(--ink-3); }
.cb-dx-op header .sum { font-size: 15px; font-weight: 600; }
.cb-dx-op header .nm { color: var(--ink-3); }
.cb-dx-op ul { display: flex; flex-direction: column; gap: 6px; }
.cb-dx-op .card { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-ring); }
.cb-dx-op .card.late { background: var(--warn-soft); }
.cb-dx-op .open { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.cb-dx-op .open:hover { background: var(--inset); }
.cb-dx-op .open:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cb-dx-op .l1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cb-dx-op .l1 b { font-weight: 600; }
.cb-dx-op .l2 { font-size: 12px; color: var(--ink-2); }
.cb-dx-op .l3 { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.cb-dx-op .age { font-size: 12px; color: var(--ink-3); }
.cb-dx-op .nx { align-self: flex-start; font-size: 12px; }
.cb-dx-op .emp { padding: 8px; text-align: center; }

/* ══ 4. OrderCard · таблицы ══ */
.cb-dx-steps { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cb-dx-steps li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-3); font-size: 12px; }
.cb-dx-steps .dot { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--card); color: var(--ink-3); }
.cb-dx-steps li.done { color: var(--ink-2); }
.cb-dx-steps li.done .dot { background: var(--ok-soft); color: var(--ok); }
.cb-dx-steps li.cur { background: var(--card-ink); color: var(--on-card-ink); font-weight: 600; }
.cb-dx-steps li.cur .dot { background: var(--flame); color: var(--on-flame); }
.cb-dx-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cb-dx-tbl th, .cb-dx-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-weight: 400; }
.cb-dx-tbl thead th { font-size: 12px; color: var(--ink-2); font-weight: 500; background: var(--inset); white-space: nowrap; }
.cb-dx-tbl .r { text-align: right; white-space: nowrap; }
.cb-dx-tbl tbody th b, .cb-dx-tbl td b { display: block; font-weight: 500; color: var(--ink); }
.cb-dx-tbl code { display: block; margin-top: 2px; }
.cb-dx-tbl tfoot th { color: var(--ink-2); text-align: right; }
.cb-dx-tbl tfoot tr.tot th, .cb-dx-tbl tfoot tr.tot td { font-weight: 600; color: var(--ink); border-bottom: 0; }
.cb-dx .items .cb-dx-tbl thead th { background: var(--card); }
/* телефон: таблица позиций заказа помещается в плашку без вылета (R1 · 390) — поля ячеек уже, заголовки переносятся */
@container (max-width: 420px) { .cb-dx .items .cb-dx-tbl :is(th, td) { padding-inline: 6px; } .cb-dx .items .cb-dx-tbl thead th { white-space: normal; } }
.cb-dx-hist { display: flex; flex-direction: column; gap: 6px; }
.cb-dx-hist li { display: grid; grid-template-columns: 110px 140px minmax(0, 1fr); gap: 4px 10px; font-size: 12px; }
.cb-dx-hist .at { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-dx-hist .who { color: var(--ink-2); font-weight: 500; }
.cb-dx-hist li.system .who { color: var(--ink-3); font-weight: 400; }
@container (max-width: 560px) { .cb-dx-hist li { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.cb-dx-scroll { overflow-x: auto; border-radius: var(--radius-inset); box-shadow: inset 0 0 0 1px var(--border); }
.cb-dx-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ══ 5. StockLevel ══ */
/* таблица остатков помещается в 7–8 колонок: шапки переносятся, минимум — min-w-table 640; при 760 статус «ниже минимума» уезжал за край прокрутки */
.cb-dx-sl { min-width: 640px; }
.cb-dx-tbl.cb-dx-sl thead th { white-space: normal; vertical-align: bottom; }
.cb-dx-sl tbody th { min-width: 168px; }
.cb-dx-sl td small { display: block; margin-top: 4px; }
.cb-dx-sl .sl-bar { margin-top: 6px; }
.cb-dx-sl tr.out tbody th b, .cb-dx-sl tr.out th b { color: var(--ink); }

/* ══ 6. ReturnFlow ══ */
.cb-dx-ritems { display: flex; flex-direction: column; gap: 4px; }
.cb-dx-ritems li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--inset); }
.cb-dx-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); counter-reset: none; }
.cb-dx-flow > li { display: flex; flex-direction: column; gap: 10px; padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-dx-flow > li.cur { background: var(--card); box-shadow: var(--shadow-ring); }
.cb-dx-flow > li.todo { opacity: .8; }
.cb-dx-flow .sh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-dx-flow .sh b { font-weight: 600; font-size: 14px; flex: 1 1 auto; }
.cb-dx-flow .num { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--card); color: var(--ink-2); font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
.cb-dx-flow li.done .num { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.cb-dx-flow .bd { display: flex; flex-direction: column; gap: 6px; }
.cb-dx-flow .bd > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cb-dx-flow .bd b { font-weight: 600; }
.cb-dx-flow .amt { font-size: 20px; line-height: 26px; }
@container (max-width: 720px) { .cb-dx-flow { grid-template-columns: minmax(0, 1fr); } }

/* ══ Телефон первичен: RouteDay · VisitChecklist · VisitReport ══ */
.cb-dx-phone { max-width: 560px; }
/* высота, а не min-height: базовое мобильное правило 24 px сильнее по специфичности */
.cb-dx-phone .cb-btn, .cb-dx-phone .cb-btn.sm { height: 44px; min-height: 44px; }
.cb-dx-phone .cb-dx-x { width: 44px; height: 44px; }
.cb-dx-frame { box-sizing: border-box; width: 100%; max-width: 390px; margin: 0 auto; padding: var(--space-4); border-radius: 28px; background: var(--card); box-shadow: var(--shadow-ring); }
.cb-dx-next { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius-inset); background: var(--card-ink); color: var(--on-card-ink); }
.cb-dx-next .k { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in oklab, var(--on-card-ink) 70%, transparent); }
.cb-dx-next .tm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-dx-next .tm b { font-size: 20px; line-height: 26px; font-weight: 600; }
.cb-dx-next h4 { font-size: 17px; line-height: 22px; font-weight: 600; }
.cb-dx-next .ad, .cb-dx-next .nt { display: flex; gap: 6px; align-items: flex-start; }
.cb-dx-next .ad .cb-i, .cb-dx-next .nt .cb-i { flex: none; margin-top: 1px; }
.cb-dx-next .kd, .cb-dx-next .nt { font-size: 12px; color: color-mix(in oklab, var(--on-card-ink) 75%, transparent); }
.cb-dx-next .acts { margin-top: 6px; }
.cb-dx-next .acts .cb-btn { flex: 1 1 140px; }
.cb-dx-next .cb-btn.secondary { background: color-mix(in oklab, var(--on-card-ink) 14%, transparent); color: var(--on-card-ink); }
.cb-dx-next .cb-btn.primary { background: var(--flame-deep); color: var(--on-flame); }
.cb-dx-next .cb-dx-st { background: color-mix(in oklab, var(--on-card-ink) 14%, transparent); color: var(--on-card-ink); }
.cb-dx-route { display: flex; flex-direction: column; }
.cb-dx-route li { position: relative; }
.cb-dx-route li + li::before { content: ""; position: absolute; left: 67px; top: -8px; height: 16px; width: 1px; background: var(--border); }
.cb-dx-route button { display: grid; grid-template-columns: 44px 24px minmax(0, 1fr) 16px; gap: 10px; align-items: center; width: 100%; min-height: 56px; padding: 8px var(--space-2); border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cb-dx-route button:hover { background: var(--inset); }
.cb-dx-route button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cb-dx-route li.nx button { background: var(--inset); }
.cb-dx-route .tm { font-weight: 600; font-size: 14px; }
.cb-dx-route .dot { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--inset); color: var(--ink-3); }
.cb-dx-route li.done .dot { background: var(--ok-soft); color: var(--ok); }
.cb-dx-route li.failed .dot { background: var(--bad-soft); color: var(--bad); }
.cb-dx-route li.done .tx b { color: var(--ink-2); font-weight: 500; }
.cb-dx-route .tx { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.cb-dx-route .tx b { font-weight: 600; font-size: 14px; }
.cb-dx-route > li > button > .cb-i { color: var(--ink-3); }

.cb-dx-prog { display: flex; flex-direction: column; gap: 6px; }
.cb-dx-prog .l { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.cb-dx-prog .l b { color: var(--ink); font-size: 13px; }
.cb-dx-vc-list { display: flex; flex-direction: column; gap: var(--space-4); }
.cb-dx-vc-list .grp { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-dx-vc-list h4 { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.cb-dx-vc-list ol { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-dx-vc-list .it { display: flex; flex-direction: column; gap: 10px; padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); scroll-margin: 80px; }
.cb-dx-vc-list .it.miss { background: var(--warn-soft); }
.cb-dx-vc-list .q { display: flex; flex-direction: column; gap: 4px; }
.cb-dx-vc-list .q p { font-size: 15px; line-height: 21px; font-weight: 500; }
.cb-dx-vc-list .tags { display: flex; gap: 4px; flex-wrap: wrap; }
.cb-dx-vc-list .tools { display: flex; gap: 4px; flex-wrap: wrap; }
.cb-dx-vc-list .why { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: color-mix(in oklab, var(--warn) 55%, var(--ink)); }
[data-theme="dark"] .cb-dx-vc-list .why { color: var(--warn); }
.cb-dx-ans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--card); }
.cb-dx-ans button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: inherit; font-weight: 500; cursor: pointer; }
.cb-dx-ans button:hover { background: var(--inset); color: var(--ink); }
.cb-dx-ans button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cb-dx-ans button.on { background: var(--card-ink); color: var(--on-card-ink); }
.cb-dx-ans button.no.on { background: var(--bad-soft); color: var(--ink); box-shadow: none; font-weight: 600; }
.cb-dx-ans button.yes.on { background: var(--ok-soft); color: var(--ink); box-shadow: none; font-weight: 600; }
.cb-dx-file { position: relative; cursor: pointer; }
.cb-dx-file:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-dx .ph { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-dx .ph li { position: relative; display: flex; flex-direction: column; gap: 2px; width: 96px; }
.cb-dx .ph img, .cb-dx .ph .noimg { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--card); display: grid; place-items: center; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border); }
.cb-dx .ph .nm { font-size: 11px; line-height: 14px; color: var(--ink-3); overflow-wrap: break-word; }
.cb-dx .ph .cb-dx-x { width: 96px; height: 44px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-dx .ph li.on { font-weight: 600; }
.cb-dx .ph:has(li.on) li:not(.on) :is(img, .noimg) { opacity: .45; }
.cb-dx-sign .cb-dx-slot { min-height: 96px; }
.cb-dx-dock { position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 0 4px; background: linear-gradient(to bottom, transparent, var(--card) 24%); }
.cb-dx:not(.card) .cb-dx-dock { background: linear-gradient(to bottom, transparent, var(--shell) 24%); }
.cb-dx-frame .cb-dx-dock { background: linear-gradient(to bottom, transparent, var(--card) 24%); }
.cb-dx-dock small { text-align: center; }

.cb-dx-obj { display: flex; flex-direction: column; gap: 8px; padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-dx-obj > b { font-size: 16px; font-weight: 600; }
.cb-dx-secs { display: flex; flex-direction: column; }
.cb-dx-secs li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cb-dx-secs li:last-child { border-bottom: 0; }
.cb-dx-secs .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-dx-send { display: flex; flex-direction: column; gap: 10px; padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-dx-send.bad { background: var(--bad-soft); }
.cb-dx-send .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cb-dx-send .top b { font-size: 15px; font-weight: 600; }
.cb-dx-send .msg { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.cb-dx-send .msg .cb-i { flex: none; margin-top: 1px; color: var(--bad); }
.cb-dx-send .msg.okm .cb-i { color: var(--ok); }
.cb-dx-parts { display: flex; flex-direction: column; gap: 2px; }
.cb-dx-parts li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; padding: 4px 0; }
.cb-dx-parts .ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--card); color: var(--ink-2); flex: none; }
.cb-dx-parts .tx { flex: 1 1 120px; min-width: 0; }
.cb-dx-parts li.sending .cb-dx-st .cb-i { animation: cb-dx-spin 1.4s linear infinite; }
@keyframes cb-dx-spin { to { transform: rotate(360deg); } }

/* ══ 10. EvidencePanel ══ */
.cb-dx-ev-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-4); align-items: start; }
@container (max-width: 820px) { .cb-dx-ev-body { grid-template-columns: minmax(0, 1fr); } }
.cb-dx-ev .marks { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cb-dx-ev .marks .sum { font-size: 12px; color: var(--ink-3); }
.cb-dx-ev .marks .sum b { color: var(--ink); font-size: 14px; }
.cb-dx-ev .marks ol { display: flex; flex-direction: column; gap: 4px; }
.cb-dx-ev .marks button { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; width: 100%; padding: var(--space-2) 12px; border: 0; border-radius: 12px; background: var(--inset); color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.cb-dx-ev .marks button:hover { background: var(--inset-hover); }
.cb-dx-ev .marks button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cb-dx-ev .marks button:disabled { cursor: default; background: transparent; }
.cb-dx-ev .marks li.on button { background: var(--card); box-shadow: var(--shadow-ring); }
.cb-dx-ev .marks .n { color: var(--ink-3); font-weight: 600; }
.cb-dx-ev .marks .tx { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.cb-dx-ev .marks .tx > b { font-weight: 600; }
.cb-dx-ev .frag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 12px; color: var(--ink-2); }
.cb-dx-ev .frag .cb-i { color: var(--ink-3); align-self: center; }
.cb-dx-ev .frag .loc { font-variant-numeric: tabular-nums; font-weight: 500; }
.cb-dx-ev .frag q { color: var(--ink-2); font-style: normal; }
.cb-dx-ev .frag.none { color: var(--ink-3); }
.cb-dx-ev .src { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; max-height: 560px; overflow: auto; padding: 2px; }
.cb-dx-hl { background: var(--flame-soft); color: var(--ink); border-radius: 3px; padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cb-dx-hl.on { background: var(--flame); color: var(--on-flame); }
.cb-dx-chat { display: flex; flex-direction: column; gap: 8px; }
.cb-dx-chat li { max-width: 88%; padding: var(--space-2) 12px; border-radius: 14px; background: var(--inset); scroll-margin: 40px; }
.cb-dx-chat li.staff { align-self: flex-end; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cb-dx-chat li.on { background: var(--card); box-shadow: var(--shadow-ring); }
.cb-dx-chat li.staff.on { background: var(--inset); box-shadow: none; }
.cb-dx-chat .mh, .cb-dx-vis .mh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.cb-dx-chat .mh b, .cb-dx-vis .mh b { color: var(--ink); font-weight: 600; }
.cb-dx-vis { display: flex; flex-direction: column; gap: 8px; }
.cb-dx-vis > li { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--inset); scroll-margin: 40px; }
.cb-dx-vis > li.on { background: var(--card); box-shadow: var(--shadow-ring); }
.cb-dx-vis .n { color: var(--ink-3); font-weight: 600; }
.cb-dx-doc { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-dx-doc .dt { font-size: 15px; font-weight: 600; }
.cb-dx-doc section { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 10px; scroll-margin: 40px; }
.cb-dx-doc section.on { background: var(--inset); }
.cb-dx-doc h5 { font-size: 13px; font-weight: 600; }
.cb-dx-doc p { font-size: 14px; line-height: 21px; }
.cb-dx-lines { display: flex; flex-direction: column; gap: 6px; }
.cb-dx-lines li { display: grid; grid-template-columns: 44px 90px minmax(0, 1fr); gap: 8px; padding: 6px 8px; border-radius: 10px; }
.cb-dx-lines li.on { background: var(--inset); }
.cb-dx-lines .ts { color: var(--ink-3); }
.cb-dx-ev-call { display: flex; flex-direction: column; gap: var(--space-3); }

/* ══ 11. PortfolioBoard ══ */
.cb-dx-pf { display: flex; flex-direction: column; gap: var(--space-2); }
.cb-dx-pf .pr { display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(200px, 1.4fr) minmax(150px, 1fr) minmax(140px, 1fr) auto; grid-template-areas: "nm rd rk nx bl" "bls bls bls bls bls"; gap: 8px 16px; align-items: start; padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-dx-pf .nm { grid-area: nm; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cb-dx-pf .nm b { font-size: 14px; font-weight: 600; }
.cb-dx-pf .nm small { display: inline-flex; align-items: center; gap: 4px; }
.cb-dx-pf .rd { grid-area: rd; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cb-dx-pf .rd .lb { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.cb-dx-pf .rk { grid-area: rk; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cb-dx-pf .nx { grid-area: nx; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.cb-dx-pf .nx .l { color: var(--ink-3); }
.cb-dx-pf .nx b { font-weight: 600; }
.cb-dx-pf .bl { grid-area: bl; }
.cb-dx-pf .bl .none { font-size: 12px; color: var(--ink-3); }
.cb-dx-pf .bls { grid-area: bls; display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.cb-dx-pf .bls li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 10px; border-radius: 10px; background: var(--card); font-size: 12px; }
.cb-dx-pf .bls b { font-weight: 500; }
.cb-dx-pf .bls span { color: var(--ink-3); }
@container (max-width: 900px) {
  .cb-dx-pf .pr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "nm nm" "rd rd" "rk nx" "bl bl" "bls bls"; }
}
@container (max-width: 480px) {
  .cb-dx-pf .pr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nm" "rd" "rk" "nx" "bl" "bls"; }
}

/* ══ 12. CapacityGrid ══ */
.cb-dx-selw { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.cb-dx-sel { height: var(--control-h-sm); padding: 0 32px 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.cb-dx-sel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-dx-cg { min-width: 720px; }
.cb-dx-cg thead th:first-child, .cb-dx-cg tbody th, .cb-dx-cg tfoot th { position: sticky; left: 0; z-index: 1; background: var(--card); min-width: 150px; }
.cb-dx-cg thead th:first-child { background: var(--inset); }
.cb-dx-cg tbody th small { display: block; }
.cb-dx-cg td { padding: 4px; min-width: 130px; }
.cb-dx-cg td button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: 64px; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cb-dx-cg td button:hover:not(:disabled) { background: var(--inset); }
.cb-dx-cg td button:disabled { cursor: default; }
.cb-dx-cg td button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cb-dx-cg td.open button { background: var(--inset); }
.cb-dx-cg .v { font-weight: 600; font-size: 14px; }
.cb-dx-cg .v .of { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.cb-dx-cg tr.det td { padding: 8px 12px 12px; background: var(--inset); }
.cb-dx-cg tr.det ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cb-dx-cg tr.det li { display: inline-flex; gap: 8px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--card); font-size: 12px; }
.cb-dx-cg tr.det li.on { background: var(--inset); font-weight: 600; }
.cb-dx-cg tfoot td { font-weight: 600; white-space: nowrap; }
.cb-dx-cg tfoot small { display: block; font-weight: 400; }

/* ══ 13. ClientPortalHome (Z2: главное 8 · колонка 4; на узком колонка сразу после статуса) ══ */
.cb-dx-cp-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "st do" "dc do" "qa do"; gap: var(--space-4); align-items: start; }
.cb-dx-cp-grid > .st { grid-area: st; min-width: 0; }
.cb-dx-cp-grid > .do { grid-area: do; display: flex; flex-direction: column; gap: var(--space-3); position: sticky; top: var(--space-4); min-width: 0; }
.cb-dx-cp-grid > .dc { grid-area: dc; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.cb-dx-cp-grid > .qa { grid-area: qa; min-width: 0; }
@container (max-width: 1000px) { .cb-dx-cp-grid > .dc { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 860px) {
  .cb-dx-cp-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "st" "do" "dc" "qa"; }
  .cb-dx-cp-grid > .do { position: static; }
}
.cb-dx-cp-status { display: flex; flex-direction: column; gap: 10px; padding: var(--space-5); border-radius: var(--radius-inset); background: var(--inset); }
.cb-dx-cp-status .top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cb-dx-cp-status .top .l { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.cb-dx-cp-status h4 { font-size: 20px; line-height: 26px; font-weight: 600; }
.cb-dx-cp-status h4 span { font-weight: 400; color: var(--ink-2); }
.cb-dx-cp-status .pc { color: var(--ink-2); }
.cb-dx-cp-status .pc b { font-size: 30px; line-height: 36px; color: var(--ink); font-weight: 600; margin-right: 4px; }
.cb-dx-cp-status .nx { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.cb-dx-todo { display: flex; flex-direction: column; gap: 6px; }
.cb-dx-todo li { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: var(--space-2) 12px; border-radius: 12px; background: var(--card); }
.cb-dx-todo .tx { display: flex; flex-direction: column; gap: 2px; }
.cb-dx-todo .tx b { font-weight: 600; }
.cb-dx-todo .cb-btn { min-height: 44px; }
.cb-dx-meet { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cb-dx-meet > b { font-size: 17px; line-height: 22px; font-weight: 600; }
.cb-dx-meet small { display: inline-flex; align-items: center; gap: 4px; }
.cb-dx-rows { display: flex; flex-direction: column; gap: 4px; }
.cb-dx-rows li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; padding: var(--space-1) 8px; border-radius: 10px; background: var(--card); }
.cb-dx-rows .ic { background: var(--inset); }
.cb-dx-rows .sum { font-weight: 600; white-space: nowrap; }
.cb-dx-qa { display: flex; flex-direction: column; gap: 6px; }
.cb-dx-qa li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--space-2) 12px; border-radius: 12px; background: var(--card); }
.cb-dx-qa .q { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cb-dx-qa .q b { font-weight: 600; }
.cb-dx-qa .a { color: var(--ink-2); padding-left: 10px; border-left: 1px solid var(--border); }
.cb-dx-ask { display: flex; flex-direction: column; gap: 6px; }
.cb-dx-ask .acts { justify-content: space-between; }
.cb-dx-ask textarea { background: var(--card); }

/* ══ Примеры галереи ══ */
.cb-dx-ex { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-dx-ex > .cb-seg { flex-wrap: wrap; align-self: flex-start; border-radius: 18px; }
.cb-dx-z4 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1180px) { .cb-dx-z4 { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .cb-dx-parts li.sending .cb-dx-st .cb-i { animation: none; }
}
@media print {
  .cb-dx-dock, .cb-dx-bulk, .cb-dx-tb { display: none; }
}

/* ── src/styles/z7-brand.css ── */
/* ── Бренд (CatalystBento · группа z7-brand, карточка К-0927-077) ─────────────────
   BrandStep: источник бренда → плитки цветов с контрастом → превью на острове с data-brand в двух темах.
   Корень .cb-bnd — контейнер: раскладка реагирует на ширину блока, а не окна. Цвет только токенами:
   цвета бренда приходят переменными острова (--flame, --flame-ink, --flame-soft, --on-flame…), литералов нет. */
.cb-bnd { container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; color: var(--ink); font-size: 13px; line-height: 18px; }
.cb-bnd.card { background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-ring); padding: var(--space-5); }
:where(.cb-bnd) p, :where(.cb-bnd) h3, :where(.cb-bnd) h4 { margin: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
:where(.cb-bnd) ul { list-style: none; margin: 0; padding: 0; }   /* сброс под :where — не перебивает отступы классов компонентов (У-0242) */
.cb-bnd-live { font-size: 12px; color: var(--ink-2); }
.cb-bnd-live:empty { display: none; }
.cb-bnd-hint { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cb-bnd-cap { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); }
.cb-bnd-cap .cb-i { color: var(--ink-3); }

/* шапка */
.cb-bnd-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cb-bnd-hd .t { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; flex: 1 1 260px; }
.cb-bnd-hd .ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--inset); color: var(--ink-2); }
.cb-bnd-hd h3 { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-bnd-hd .t p { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* источник: сегмент переносится на узком, а не обрезается */
.cb-bnd > .cb-seg { flex-wrap: wrap; height: auto; }
.cb-bnd-tile .sw .cb-i { color: var(--ink-3); }

/* ввод источника */
.cb-bnd-in { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.cb-bnd-in .fld { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; height: var(--control-h); padding: 0 14px; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border); }
.cb-bnd-in .fld:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-bnd-in .fld input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; outline: none; }
.cb-bnd-in .fld input::placeholder { color: var(--ink-3); }
.cb-bnd-in .nm { flex: 1 1 200px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); overflow-wrap: break-word; }
.cb-bnd-in.none { align-items: flex-start; }
.cb-bnd-in.none p { flex: 1 1 320px; color: var(--ink-2); }
.cb-bnd-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cb-bnd-file:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-bnd-in label.cb-btn { cursor: pointer; }
.cb-bnd-err { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink); }
.cb-bnd-err .cb-i { flex: none; margin-top: 1px; color: var(--bad); }
.cb-bnd-state { background: var(--inset); border-radius: var(--radius-inset); }
.cb-bnd-ok { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-2); font-size: 12px; line-height: 16px; }
.cb-bnd-ok .cb-i { flex: none; color: var(--ok); }

/* результат: сведения слева, превью справа на широком */
.cb-bnd-res { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@container (min-width: 980px) { .cb-bnd-res { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.cb-bnd-info { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.cb-bnd-src { display: flex; flex-direction: column; gap: 2px; }
.cb-bnd-src b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-bnd-src small { font-size: 12px; line-height: 16px; color: var(--ink-3); overflow-wrap: break-word; }

/* плитки цветов */
.cb-bnd-theme { display: flex; flex-direction: column; gap: 6px; }
.cb-bnd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@container (max-width: 420px) { .cb-bnd-tiles { grid-template-columns: minmax(0, 1fr); } }
.cb-bnd-tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-bnd-tile .sw { grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; font-weight: 600; background: var(--card); box-shadow: var(--shadow-ring); }
.cb-bnd-tile .t { display: flex; flex-direction: column; min-width: 0; }
.cb-bnd-tile .t b { font-weight: 600; }
.cb-bnd-tile .t small, .cb-bnd-tile .r small { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-bnd-tile .r { display: flex; flex-direction: column; min-width: 0; }
.cb-bnd-tile .r b { font-variant-numeric: tabular-nums; font-weight: 600; }

/* шрифт и скругление */
.cb-bnd-facts { display: flex; flex-direction: column; gap: 4px; padding: var(--space-2) 12px; border-radius: var(--radius-inset); background: var(--inset); }
.cb-bnd-facts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cb-bnd-facts li > span { min-width: 88px; color: var(--ink-3); font-size: 12px; }
.cb-bnd-facts li b { font-weight: 600; }
.cb-bnd-facts li small { flex-basis: 100%; padding-left: 96px; font-size: 11px; line-height: 14px; color: var(--ink-2); }
@container (max-width: 420px) { .cb-bnd-facts li small { padding-left: 0; } }

/* проверка */
.cb-bnd-find { display: flex; flex-direction: column; gap: 6px; }
.cb-bnd-find h4 { font-size: 13px; line-height: 18px; font-weight: 600; }
.cb-bnd-list { display: flex; flex-direction: column; gap: 4px; }
.cb-bnd-list li { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-bnd-list li .cb-i { flex: none; margin-top: 1px; color: var(--ink-3); }
.cb-bnd-list li.err { color: var(--ink); }
.cb-bnd-list li.err .cb-i { color: var(--bad); }
.cb-bnd-list li.warn .cb-i { color: var(--warn); }
.cb-bnd-fixed summary { cursor: pointer; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-bnd-fixed summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.cb-bnd-fixed .cb-bnd-list { margin-top: 6px; }

/* свой акцент */
.cb-bnd-tune { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 10px 12px; border-radius: var(--radius-inset); background: var(--inset); }
.cb-bnd-tune label { font-weight: 600; }
.cb-bnd-tune input[type="color"] { width: 44px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.cb-bnd-tune input.hx { width: 180px; height: var(--control-h-sm); padding: 0 10px; border: 0; border-radius: 10px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); font: inherit; font-variant-numeric: tabular-nums; }
.cb-bnd-tune input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-bnd-tune .cb-bnd-hint { flex-basis: 100%; }
.cb-bnd-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* превью: острова в двух темах */
.cb-bnd-pv { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
@container (min-width: 640px) and (max-width: 979px) { .cb-bnd-pv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cb-bnd-isl { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-card); background: var(--shell); color: var(--ink); min-width: 0; }
.cb-bnd-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); min-width: 0; }
@container (max-width: 460px) { .cb-bnd-minis { grid-template-columns: minmax(0, 1fr); } }
@container (min-width: 640px) and (max-width: 979px) { .cb-bnd-minis { grid-template-columns: minmax(0, 1fr); } }
.cb-bnd-mini { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-inset); background: var(--card); box-shadow: var(--shadow-ring); min-width: 0; }
.cb-bnd-mini.wide { grid-column: 1 / -1; padding: 0; background: transparent; box-shadow: none; }
.cb-bnd-mini .cb-kpi { min-width: 0; }
.cb-bnd-act { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cb-bnd-link { color: var(--flame-ink, var(--flame-deep)); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cb-bnd-rows { display: flex; flex-direction: column; gap: 2px; }
.cb-bnd-rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 8px 10px; border-radius: 10px; min-width: 0; }
.cb-bnd-rows li.on { background: var(--flame-soft); }
.cb-bnd-rows li.on small { color: var(--ink-2); }   /* на подложке акцента ink-3 не держит 4,5:1 */
.cb-bnd-rows li.on .cb-status > span { color: var(--ink); }   /* статус на подложке акцента: точка своим цветом, слово — чернилами */
.cb-bnd-rows .tx { display: flex; flex-direction: column; min-width: 0; }
.cb-bnd-rows .tx b { font-weight: 600; font-size: 13px; overflow-wrap: break-word; }
.cb-bnd-rows .tx small { font-size: 11px; line-height: 14px; color: var(--ink-3); }

/* принято */
.cb-bnd-done { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-inset); background: var(--inset); }
.cb-bnd-done .ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.cb-bnd-done > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cb-bnd-done h4 { font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-bnd-done p { color: var(--ink-2); }

.cb-bnd-ex { display: flex; flex-direction: column; gap: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .cb-bnd * { transition: none !important; } }

/* ── src/styles/z8-forms.css ── */
/* z8-forms · системные поля. Префикс cb-fm-. */
.cb-fm-field, .cb-fm-code { display: grid; gap: var(--space-2); max-width: 400px; min-width: 0; }
.cb-fm-field.area { max-width: 520px; }
.cb-fm-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); color: var(--ink-2); font-size: 13px; line-height: 18px; font-weight: 500; }
.cb-fm-label-t { display: inline-flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.cb-fm-opt { color: var(--ink-3); font-weight: 400; }
.cb-fm-box { min-height: var(--control-h); display: flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-chip); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink); overflow: hidden; }
.cb-fm-box:focus-within { box-shadow: inset 0 0 0 1px var(--border); }
.cb-fm-field.bad .cb-fm-box, .cb-fm-code.bad .cb-fm-cell { box-shadow: inset 0 0 0 1px var(--bad); }
.cb-fm-field.disabled .cb-fm-box { background: var(--inset); color: var(--ink-3); }
.cb-fm-box input, .cb-fm-box textarea, .cb-fm-box select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; line-height: 20px; }
.cb-fm-box input, .cb-fm-box select { height: calc(var(--control-h) - 2px); padding: 0 var(--space-4); }
.cb-fm-box textarea { min-height: 112px; resize: vertical; padding: var(--space-3) var(--space-4); }
.cb-fm-box input::placeholder, .cb-fm-box textarea::placeholder { color: var(--ink-3); }
.cb-fm-affix { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-h); height: var(--control-h); color: var(--ink-3); font-weight: 600; }
.cb-fm-affix + input { padding-left: 0; }
.cb-fm-eye { width: var(--control-h); height: var(--control-h); display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; }
.cb-fm-eye:hover { color: var(--ink); background: var(--inset); }
.cb-fm-under { min-height: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.cb-fm-hint, .cb-fm-err { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.cb-fm-err { display: inline-flex; align-items: flex-start; gap: var(--space-1); color: var(--bad); }
.cb-fm-count { margin-left: auto; color: var(--ink-3); font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-fm-read { min-height: var(--control-h); display: flex; align-items: center; color: var(--ink); font-weight: 500; }
.cb-fm-field.ro .cb-fm-under { min-height: 0; }
.cb-fm-field.select .cb-fm-box { position: relative; }
.cb-fm-field.select select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--control-h) + var(--space-2)); cursor: pointer; }
.cb-fm-select-ic { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }

.cb-fm-cells { display: flex; gap: var(--space-2); flex-wrap: nowrap; }
.cb-fm-cell { width: 48px; height: 56px; border: 0; border-radius: var(--radius-chip); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink); text-align: center; font: 600 24px/1 var(--font-sans); font-variant-numeric: tabular-nums; font-size-adjust: .546; outline: 0; }
.cb-fm-cell:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-fm-code-row { margin: 0; display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; color: var(--ink-3); font-size: 13px; line-height: 18px; }
.cb-fm-code-row b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-fm-link { border: 0; padding: 0; background: transparent; color: var(--ink-2); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cb-fm-link:hover { color: var(--ink); }

.cb-fm-auth { width: min(100%, 440px); display: grid; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-ring); }
.cb-fm-auth-brand { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-2); font-weight: 600; }
.cb-fm-auth-brand img { height: 40px; width: auto; display: block; }   /* логотип бренда — как есть, без подложки */
.cb-fm-auth-mark { width: 40px; height: 40px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--flame); color: var(--on-flame); font-weight: 700; font-size: 17px; }
.cb-fm-auth h1 { margin: 0; font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: 0; }
.cb-fm-form { display: grid; gap: var(--space-4); }
.cb-fm-form .cb-btn { justify-self: start; min-width: 156px; }
.cb-fm-sent { margin: 0; color: var(--ink-3); }
.cb-fm-sent b { color: var(--ink); font-weight: 500; overflow-wrap: break-word; }
.cb-fm-server { margin: 0; display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-chip); background: var(--bad-soft); color: var(--bad); font-size: 13px; line-height: 18px; }
.cb-fm-demo { display: grid; gap: var(--space-4); padding: var(--space-4); }
.cb-fm-auth-demo { display: grid; place-items: center; min-height: calc(100dvh - 2 * var(--space-2)); padding: var(--space-4); background: var(--shell); border-radius: var(--radius-card); }

@media (max-width: 520px) {
  .cb-fm-auth { padding: var(--space-5); }
  .cb-fm-cells { gap: var(--space-1); }
  .cb-fm-cell { width: 42px; height: 52px; }
}

/* логотип бренда в двух вариантах: светлый фон — logo, тёмный — logoDark (иначе тёмный знак пропадает на тёмном фоне) */
.cb-fm-auth-brand .l-dark { display: none; }
:root[data-theme="dark"] .cb-fm-auth-brand .l-light { display: none; }
:root[data-theme="dark"] .cb-fm-auth-brand .l-dark { display: block; }

/* ── src/styles/z9-base.css ── */
/* ПРАВКИ_2026-10-15 · раскладка примеров базовых форм */
.cb-bs-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cb-bs-col { display: grid; gap: var(--space-4); }
.cb-bs-ic { display: inline-grid; justify-items: center; gap: 4px; min-width: 64px; color: var(--ink-2); }
.cb-bs-ic small { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
.cb-bs-page { min-width: 1200px; }
.cb-bs-cover { position: relative; display: flex; align-items: center; min-height: 240px; padding: var(--space-6); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-ring); overflow: hidden; }
.cb-bs-cover > div { display: grid; gap: var(--space-2); max-width: 60%; }
.cb-bs-cover small { font-size: 12px; color: var(--ink-3); }
.cb-bs-cover b { font-size: 28px; line-height: 32px; font-weight: 600; }
.cb-bs-cover span { font-size: 13px; color: var(--ink-2); }
.cb-bs-cover i { position: absolute; right: -40px; top: -40px; width: 280px; height: 280px; border-radius: 50%; background: var(--flame-soft); }
.cb-bs-chk { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--ink); cursor: pointer; }

/* ── ПРАВКИ_2026-10-15 (Grok Bot) · таблицы шире карточки: первая колонка закреплена, остальное прокручивается (R26) ── */
:is(.cb-mk-tbl, .cb-mk-terms, .cb-kc-tbl, .cb-kc-rm table, .cb-os-tbl, .cb-wc-tbl, .cb-atbl table, .cb-tm-load table, .cb-ppl-tbl, .cb-filtbl, .cb-crm-tbl, .cb-access table, .cb-tbl) :is(tbody th:first-child, tbody td:first-child, thead th:first-child) { position: sticky; left: 0; z-index: 1; background: var(--card); }
:is(.cb-mk-tbl, .cb-kc-tbl, .cb-os-tbl, .cb-wc-tbl, .cb-ppl-tbl, .cb-filtbl) thead th { white-space: normal; overflow-wrap: normal; word-break: keep-all; }

/* ── короткие подписи-ярлыки не переносятся (R28) ── */
.cb-filkv dt, .cb-pj-stats .st > span, .cb-kc-rm th, .cb-pj-tbl th.r { white-space: nowrap; }

/* ── смысл токеном, не серым (R29) ── */
.cb-kc-gate.ok.ok { background: var(--positive-soft); }
.cb-sp-count.over.over { color: var(--danger); }
.cb-su-foot .sum .ok.ok svg, .cb-cm-objcard .ok.ok { color: var(--positive); }

/* ── src/styles/za-catalog.css ── */
/* ── za-catalog · витрина товаров ─────────────────────────────── */
.cb-ct { color: var(--ink); }
.cb-ct h1,
.cb-ct h2,
.cb-ct h3,
.cb-ct h4 { margin: 0; letter-spacing: 0; }
.cb-ct p { margin: 0; }
.cb-ct button { font: inherit; }
.cb-ct-catalog,
.cb-ct-page,
.cb-ct-compare { container-type: inline-size; width: 100%; box-sizing: border-box; flex: 1 1 auto; min-width: 0; max-width: 1440px; margin-inline: auto; /* inline-size-контейнер в flex-родителе без ширины сжимается до 0 и включает мобильную раскладку на широком экране */ padding: var(--space-5); border-radius: var(--radius-card); background: var(--canvas); }
.cb-ct-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.cb-ct-titlebar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; }
.cb-ct-titlebar h1 { font-size: 20px; line-height: 28px; font-weight: 700; }
.cb-ct-toolbar p,
.cb-ct-sub,
.cb-ct-line,
.cb-ct-kicker,
.cb-ct-card small,
.cb-ct-pricebox small,
.cb-ct-page-price small,
.cb-ct-fgrp small,
.cb-ct-facts small { color: var(--ink-3); font-size: 13px; }
.cb-ct-tools { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: var(--space-2); min-width: 0; }
.cb-ct-tools .cb-search { width: 320px; min-width: 0; }
.cb-ct-sort { width: 220px; max-width: 100%; gap: 0; }
/* компактная сортировка: подпись остаётся для чтеца, строки под полем нет */
.cb-ct-sort .cb-fm-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.cb-ct-sort .cb-fm-under { display: none; }
.cb-ct-count { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.cb-ct-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.cb-ct-results { min-width: 0; }
.cb-ct-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }

.cb-ct-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-ring); }
.cb-ct-open { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; color: transparent; cursor: pointer; }
.cb-ct-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-card); }
.cb-ct-photo,
.cb-ct-mainph { aspect-ratio: 4 / 3; background: var(--inset); overflow: hidden; }
.cb-ct-photo img,
.cb-ct-mainph img,
.cb-ct-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb-ct-ph-empty { position: relative; width: 100%; height: 100%; display: grid; place-items: center; color: var(--ink-3); background: var(--inset); }
.cb-ct-ph-tag { position: absolute; left: var(--space-2); bottom: var(--space-2); display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.cb-ct-card-b { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-4); }
.cb-ct-card-h { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: var(--space-2); align-items: start; }
.cb-ct-card-t { display: grid; gap: 2px; min-width: 0; }
.cb-ct-card h3 { font-size: 15px; line-height: 20px; font-weight: 600; overflow-wrap: break-word; }
.cb-ct-compare-btn { position: relative; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--radius-chip); background: var(--inset); color: var(--ink-2); cursor: pointer; }
.cb-ct-compare-btn.on { background: var(--accent-soft); color: var(--accent-ink); }
.cb-ct-compare-btn:focus-visible,
.cb-ct-gallery:focus-visible,
.cb-ct-thumbs button:focus-visible,
.cb-ct-gnav button:focus-visible,
.cb-ct-chip:focus-visible,
.cb-ct-reset:focus-visible,
.cb-ct-fgrp-h:focus-visible,
.cb-ct-more:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-ct-card-f { margin-top: auto; padding-top: var(--space-2); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); }
.cb-ct-pricebox { min-width: 0; display: grid; gap: 2px; }
.cb-ct-price,
.cb-ct-page-price { font-variant-numeric: tabular-nums; font-weight: 700; }
.cb-ct-price { font-size: 20px; line-height: 26px; white-space: nowrap; }
.cb-ct-price.none { font-size: 15px; font-weight: 600; color: var(--ink-2); }

.cb-ct-filters { position: sticky; top: var(--space-3); min-width: 0; max-height: calc(100vh - var(--space-6)); overflow: hidden; }
.cb-ct-fhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.cb-ct-fhead h3 { font-size: 15px; }
.cb-ct-filter-mobile { display: none; width: 100%; justify-content: center; margin-bottom: var(--space-3); }
.cb-ct-filter-side,
.cb-ct-fbody { display: grid; gap: var(--space-3); }
.cb-ct-filter-side { max-height: calc(100vh - var(--space-6)); overflow: auto; padding: var(--space-3); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-ring); }
.cb-ct-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cb-ct-chip,
.cb-ct-reset { min-height: 28px; border: 0; border-radius: var(--radius-chip); padding: 0 var(--space-2); background: var(--inset); color: var(--ink-2); cursor: pointer; }
.cb-ct-chip { display: inline-flex; align-items: center; gap: 6px; }
.cb-ct-reset { background: transparent; color: var(--ink-3); }
.cb-ct-fgrp { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.cb-ct-fgrp.closed { gap: 0; }
.cb-ct-fgrp-h { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); border: 0; border-radius: var(--radius-chip); background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.cb-ct-fgrp-h:hover { background: var(--inset); }
.cb-ct-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); align-items: start; }
.cb-ct-range .cb-fm-field { min-width: 0; max-width: none; gap: 4px; }
.cb-ct-range .cb-fm-label { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cb-ct-range .cb-fm-under { display: none; }
.cb-ct-range .cb-fm-box { gap: 0; }
.cb-ct-range .cb-fm-box input { padding: 0 var(--space-1) 0 var(--space-3); font-variant-numeric: tabular-nums; text-overflow: clip; }
.cb-ct-range .cb-fm-affix { min-width: 0; padding-right: var(--space-3); font-weight: 500; font-size: 13px; white-space: nowrap; }
.cb-ct-more { min-height: 30px; justify-self: start; border: 0; border-radius: var(--radius-chip); padding: 0 var(--space-2); background: var(--inset); color: var(--ink-2); cursor: pointer; }
.cb-ct-check { min-height: 30px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); color: var(--ink-2); }
.cb-ct-check.off { color: var(--ink-3); }
.cb-ct-check small { font-variant-numeric: tabular-nums; }

.cb-ct-gallery { display: grid; gap: var(--space-2); min-width: 0; align-content: start; touch-action: pan-y; }
.cb-ct-mainph { position: relative; aspect-ratio: 4 / 3; max-height: 480px; width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-ring); }
.cb-ct-mainph > img { object-fit: contain; }
.cb-ct-gnav { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: var(--space-3); pointer-events: none; }
.cb-ct-gnav button,
.cb-ct-gfull,
.cb-ct-cnav button { pointer-events: auto; display: grid; place-items: center; border: 0; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--card) 90%, transparent); color: var(--ink); cursor: pointer; }
.cb-ct-gnav button { width: 40px; height: 40px; }
.cb-ct-gcount { position: absolute; left: var(--space-3); bottom: var(--space-3); height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--card) 90%, transparent); color: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-ct-gfull { position: absolute; right: var(--space-3); top: var(--space-3); width: 36px; height: 36px; }
.cb-ct-gnav button:focus-visible,
.cb-ct-gfull:focus-visible,
.cb-ct-cnav button:focus-visible,
.cb-ct-lb-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* миниатюры: выбранная ярче, остальные приглушены — без обводки (D16) */
.cb-ct-thumbs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cb-ct-thumbs::-webkit-scrollbar { display: none; }
.cb-ct-thumbs button { flex: 0 0 88px; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius-chip); padding: 0; overflow: hidden; background: var(--inset); opacity: .5; cursor: pointer; transition: opacity .15s; }
.cb-ct-thumbs button:hover { opacity: .8; }
.cb-ct-thumbs button.on { opacity: 1; }
.cb-ct-thumbs img { object-fit: contain; }
/* листание в карточке сетки */
.cb-ct-card { touch-action: pan-y; }
.cb-ct-photo { position: relative; }
.cb-ct-photo > img { object-fit: contain; user-select: none; -webkit-user-drag: none; }
.cb-ct-cnav { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: var(--space-2); pointer-events: none; opacity: 0; transition: opacity .15s; }
.cb-ct-cnav button { width: 32px; height: 32px; }
.cb-ct-card:hover .cb-ct-cnav,
.cb-ct-card:focus-within .cb-ct-cnav { opacity: 1; }
.cb-ct-dots { position: absolute; left: 50%; bottom: var(--space-2); z-index: 2; transform: translateX(-50%); display: flex; gap: 5px; padding: 4px 6px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--card) 80%, transparent); pointer-events: none; }
.cb-ct-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); opacity: .45; }
.cb-ct-dots i.on { background: var(--ink); opacity: 1; }
@media (hover: none) { .cb-ct-cnav { display: none; } }
/* фото на весь экран */
.cb-ct-lb { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-4); background: var(--canvas); color: var(--ink); touch-action: pan-y; outline: 0; }
.cb-ct-lb-top { display: flex; align-items: center; justify-content: space-between; }
.cb-ct-lb .cb-ct-gcount { position: static; }
.cb-ct-lb-x { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); cursor: pointer; }
.cb-ct-lb-ph { position: relative; min-height: 0; display: grid; place-items: center; border-radius: var(--radius-card); background: var(--inset); overflow: hidden; }
.cb-ct-lb-ph img { max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; }
.cb-ct-lb-cap { text-align: center; color: var(--ink-3); font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .cb-ct-mainph > img,
  .cb-ct-lb-ph img { animation: cb-ct-fade .18s ease-out; }
}
@keyframes cb-ct-fade { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cb-ct-cnav,
  .cb-ct-thumbs button { transition: none; }
}

.cb-ct-page { display: grid; gap: var(--space-5); }
.cb-ct-page-top { display: grid; grid-template-columns: minmax(0, 640px) minmax(320px, 1fr); gap: var(--space-5); align-items: stretch; }
.cb-ct-buy,
.cb-ct-specs,
.cb-ct-desc { border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-ring); padding: var(--space-4); }
.cb-ct-buy { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.cb-ct-name { display: grid; gap: 4px; }
.cb-ct-buy h1 { font-size: 40px; line-height: 44px; font-weight: 700; overflow-wrap: break-word; }
.cb-ct-page-price { display: grid; gap: 4px; }
.cb-ct-page-price p { font-size: 30px; line-height: 36px; white-space: nowrap; }
.cb-ct-page-price small { font-weight: 400; }
.cb-ct-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.cb-ct-keys > div { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-chip); background: var(--inset); }
.cb-ct-keys dt { color: var(--ink-3); font-size: 13px; }
.cb-ct-keys dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-ct-buy .cb-ct-acts { margin-top: auto; }
.cb-ct-mbar { display: none; }
.cb-ct-meta,
.cb-ct-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.cb-ct-meta span:not(.cb-status) { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.cb-ct-request { display: grid; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-card); background: var(--inset); }
.cb-ct-sent { color: var(--ink-2); }
.cb-ct-specs { display: grid; gap: var(--space-4); padding: var(--space-5); }
.cb-ct-sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, calc((100% - var(--space-6)) / 2))), 1fr)); /* не больше двух колонок; без предка-контейнера @container не срабатывает — колонки сами схлопываются в одну уже 280px */ gap: var(--space-5) var(--space-6); align-items: start; }
.cb-ct-specs h2,
.cb-ct-desc h2 { font-size: 20px; }
.cb-ct-sgrp { display: grid; gap: var(--space-2); }
.cb-ct-sgrp h3 { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.cb-ct-sgrp dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin: 0; }
.cb-ct-sgrp dt,
.cb-ct-sgrp dd { min-width: 0; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.cb-ct-sgrp dt { color: var(--ink-3); padding-right: var(--space-3); overflow-wrap: break-word; }
.cb-ct-sgrp dd { color: var(--ink); overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.cb-ct-sgrp dd small { color: var(--ink-3); font-size: 13px; }
.cb-ct-desc { display: grid; gap: var(--space-2); padding: var(--space-5); }
.cb-ct-desc p { max-width: 680px; color: var(--ink-2); line-height: 1.55; }

.cb-ct-compare { display: grid; gap: var(--space-3); }
.cb-ct-cmp-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cb-ct-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; }
.cb-ct-legend i { width: 14px; height: 14px; border-radius: 4px; background: var(--accent-soft); }
.cb-ct-switch { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-2); }
.cb-ct-cmp-scroll { overflow-x: auto; border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-ring); }
.cb-ct-cmp { min-width: 680px; width: 100%; border-collapse: collapse; }
.cb-ct-cmp th,
.cb-ct-cmp td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.cb-ct-cmp thead th { color: var(--ink-2); font-size: 13px; }
.cb-ct-cmp th:first-child { position: sticky; left: 0; z-index: 1; width: 190px; background: var(--card); color: var(--ink-3); font-weight: 500; }
.cb-ct-cmp thead th { vertical-align: bottom; padding-bottom: var(--space-3); }
.cb-ct-cmp-ph { width: 100%; max-width: 240px; aspect-ratio: 4 / 3; margin-bottom: var(--space-2); border-radius: var(--radius-chip); overflow: hidden; background: var(--inset); }
.cb-ct-cmp-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb-ct-cmp thead span { display: block; color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-ct-cmp thead b { display: block; margin-top: 2px; color: var(--ink); font-size: 20px; line-height: 26px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-ct-cmp thead small { display: block; color: var(--ink-3); font-weight: 500; }
.cb-ct-cmp td { font-variant-numeric: tabular-nums; }
.cb-ct-cmp tr.diff td,
.cb-ct-cmp tr.diff th:first-child { background: var(--accent-soft); }
.cb-ct-live { margin-top: var(--space-2); color: var(--ink-3); }
.cb-ct-ex,
.cb-ct-ex-card { display: grid; gap: var(--space-3); }
.cb-ct-ex-card { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } /* пример вне контейнера: auto-fit вместо @container, иначе 2×220 распирает страницу на 390 */

@container (max-width: 1180px) {
  .cb-ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cb-ct-page-top { grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); }
}
@container (max-width: 920px) {
  .cb-ct-toolbar { align-items: stretch; flex-direction: column; gap: var(--space-3); }
  .cb-ct-tools { justify-content: flex-start; }
  .cb-ct-tools .cb-search { flex: 1; width: auto; }
  .cb-ct-layout { grid-template-columns: 1fr; }
  .cb-ct-filters { position: static; max-height: none; overflow: visible; }
  .cb-ct-filter-mobile { display: inline-flex; }
  .cb-ct-filter-side,
  .cb-ct-fhead { display: none; }
  .cb-ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-ct-page-top { grid-template-columns: 1fr; }
  .cb-ct-sgrid { grid-template-columns: 1fr; }
}
@container (max-width: 560px) {
  .cb-ct-catalog,
  .cb-ct-page,
  .cb-ct-compare { padding: var(--space-3); }
  .cb-ct-tools { flex-wrap: wrap; }
  .cb-ct-tools .cb-search,
  .cb-ct-tools .cb-fm-field { width: 100%; flex: 1 1 100%; }
  .cb-ct-sort { max-width: none; }
  .cb-ct-grid,
  .cb-ct-ex-card { grid-template-columns: 1fr; }
  .cb-ct-cmp-h { align-items: flex-start; flex-direction: column; }
  .cb-ct-cmp { min-width: 0; }
  .cb-ct-cmp th,
  .cb-ct-cmp td { padding: 10px 8px; font-size: 13px; }
  .cb-ct-cmp th:first-child { width: 96px; min-width: 96px; }
  .cb-ct-cmp thead th:not(:first-child),
  .cb-ct-cmp td { min-width: 140px; }
  .cb-ct-cmp thead b { font-size: 15px; line-height: 20px; }
  .cb-ct-cmp .cb-ct-legend { font-size: 11px; }
  .cb-ct-buy { padding: var(--space-4); }
  .cb-ct-buy h1 { font-size: 30px; line-height: 36px; }
  .cb-ct-buy .cb-ct-acts { display: none; }
  .cb-ct-specs,
  .cb-ct-desc { padding: var(--space-4); }
  .cb-ct-sgrp dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* телефон: действия страницы товара закреплены внизу экрана */
  .cb-ct-mbar { position: sticky; bottom: 0; z-index: 3; display: grid; gap: var(--space-2); margin: 0 calc(-1 * var(--space-3)) calc(-1 * var(--space-3)); padding: var(--space-3); background: var(--card); box-shadow: var(--shadow-ring); }
  .cb-ct-mbar-p { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .cb-ct-mbar-p b { font-size: 20px; line-height: 26px; font-variant-numeric: tabular-nums; }
  .cb-ct-mbar-a { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-2); } /* на телефоне две кнопки не влезают в ряд — встают друг под друга */
  .cb-ct-mbar-a .cb-btn { justify-content: center; }
}

/* ── src/styles/zb-social.css ── */
/* ── zb-social · превью поста соцсети (БРЕНДБУК §«Превью поста соцсети») ── */
.cb-sp { display: grid; gap: var(--space-4); min-width: 0; max-width: 560px; width: 100%; color: var(--ink); }
.cb-sp p { margin: 0; }
.cb-sp-h { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cb-sp-ch { display: inline-grid; place-items: center; flex: none; width: var(--icon-btn); height: var(--icon-btn); border-radius: var(--radius-pill); background: var(--inset); color: var(--ink); }
.cb-sp-who { display: grid; min-width: 0; flex: 1; }
.cb-sp-who b { font-size: 15px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-sp-who small { font-size: 13px; line-height: 18px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Текст поста: абзацы, переносы, теги Telegram */
.cb-sp-text { display: grid; gap: var(--space-3); font-size: 15px; line-height: 22px; overflow-wrap: break-word; min-width: 0; }
.cb-sp-html { display: block; }
.cb-sp-html a,
.cb-sp-text a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.cb-sp-html blockquote { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-chip); background: var(--card); color: var(--ink-2); }
.cb-sp-html code,
.cb-sp-html pre { font-family: var(--font-mono); font-size: 13px; background: var(--inset); border-radius: var(--radius-chip); }
.cb-sp-html code { padding: 0 var(--space-1); }
.cb-sp-html pre { margin: var(--space-2) 0; padding: var(--space-3); white-space: pre-wrap; overflow-wrap: break-word; }
.cb-sp-html pre code { padding: 0; background: none; }
.cb-sp-muted { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-3); font-size: 13px; }

/* Счётчик «N из лимита» */
.cb-sp-count { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cb-sp-count.over { color: var(--ink-2); }

/* Telegram: пузырь сообщения и кнопки рядами */
.cb-sp-tg { display: grid; gap: var(--space-2); min-width: 0; }
.cb-sp-bubble { display: grid; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }
.cb-sp-img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: var(--radius-chip); background: var(--card); }
.cb-sp-kb { display: grid; gap: var(--space-2); }
.cb-sp-kbrow { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: var(--space-2); }
.cb-sp-kbrow[data-n="2"] { --n: 2; }
.cb-sp-kbrow[data-n="3"] { --n: 3; }
.cb-sp-key { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: 0; min-height: var(--control-h); padding: var(--space-2) var(--space-3); box-sizing: border-box;
  border-radius: var(--radius-inset); background: var(--inset); color: var(--ink); font-size: 14px; line-height: 18px; font-weight: 500; text-decoration: none; }
.cb-sp-key span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-sp-key .cb-i { flex: none; color: var(--ink-3); }
.cb-sp-key:hover { background: var(--inset-hover); }
.cb-sp-key:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 480px) { .cb-sp-kbrow[data-n="3"] { --n: 1; } }

/* Карусель Instagram / Threads */
.cb-sp-slides { display: grid; gap: var(--space-3); min-width: 0; }
.cb-sp-car { display: grid; gap: var(--space-2); min-width: 0; border-radius: var(--radius-inset); touch-action: pan-y; }
.cb-sp-car:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-sp-frame { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-inset); overflow: hidden; background: var(--inset); }
.cb-sp-frame img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.cb-sp-slidetext { display: grid; align-content: center; gap: var(--space-3); height: 100%; padding: var(--space-6); box-sizing: border-box; }
.cb-sp-slidetext b { font-size: 22px; line-height: 28px; font-weight: 700; }
.cb-sp-nav { position: absolute; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: var(--icon-btn); height: var(--icon-btn);
  border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); box-shadow: var(--shadow-ring); cursor: pointer; }
.cb-sp-nav.prev { left: var(--space-3); }
.cb-sp-nav.next { right: var(--space-3); }
.cb-sp-nav:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-sp-pos { position: absolute; left: var(--space-3); bottom: var(--space-3); padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.cb-sp-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-1); }
.cb-sp-dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-grid; place-items: center; }
.cb-sp-dot::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--border); }
.cb-sp-dot.on::before { background: var(--ink); }
.cb-sp-dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-radius: var(--radius-pill); }
.cb-sp-slidecap { display: grid; gap: var(--space-1); font-size: 14px; line-height: 20px; }
.cb-sp-slidecap .cb-sp-text { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.cb-sp-caption { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); min-width: 0; }

/* X: пост или тред */
.cb-sp-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cb-sp-post { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-inset); background: var(--inset); }
.cb-sp-post > div { display: grid; gap: var(--space-2); min-width: 0; grid-column: 2; }
.cb-sp-post:only-child > div { grid-column: 1 / -1; }
.cb-sp-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }

.cb-sp-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── src/styles/zc-list.css ── */
/* ── zc-list · список записей (БРЕНДБУК §«Список записей») ── */
.cb-rl { min-width: 0; }
.cb-rl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.cb-rl-it { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control-h);
  padding: var(--space-2) var(--space-3); box-sizing: border-box; border: 0; border-radius: var(--radius-inset); background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.cb-rl-it:hover { background: var(--inset-hover); }
.cb-rl-it.on { background: var(--inset); }
.cb-rl-it:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.cb-rl-it .ic { display: inline-grid; place-items: center; color: var(--ink-3); }
.cb-rl-it .tx { display: grid; gap: 2px; min-width: 0; }
.cb-rl-it .t { font-size: 14px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-rl-it .m { font-size: 12px; line-height: 16px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-rl-it .st { display: inline-flex; }

/* ── src/styles/zd-process.css ── */
/* ── zd-process · карта процесса (БРЕНДБУК §«Карта процесса») ── */
.cb-vf:has(.cb-pm) { container-type: inline-size; }
.cb-pm { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.cb-pm .cv { background: var(--inset); border-radius: var(--radius-inset); overflow: auto; min-width: 0; overscroll-behavior-x: contain; }
.cb-pm .pl { position: relative; }
.cb-pm .pl > svg { position: absolute; inset: 0; overflow: visible; }
.cb-pm-e { fill: none; stroke: var(--mono-3); stroke-width: 1.25; }
.cb-pm-e.alt { stroke-dasharray: 4 4; }
.cb-pm-e.hot { stroke: var(--ink-2); stroke-width: 1.75; }
.cb-pm-ar { fill: var(--ink-3); }
.cb-pm-tag { position: absolute; transform: translate(-50%, -50%); padding: 1px 8px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-3);
  font-size: 11px; line-height: 16px; white-space: nowrap; pointer-events: none; }
.cb-pm-tag.hot { color: var(--ink); font-weight: 600; }
.cb-pm-n { position: absolute; box-sizing: border-box; display: grid; grid-template-rows: auto 1fr auto; gap: 2px; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-inset); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.cb-pm-n:hover { background: var(--inset-hover); }
.cb-pm-n.on { background: var(--mono-2); }
.cb-pm-n:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-pm-n .ey { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 14px; color: var(--ink-3); min-width: 0; }
.cb-pm-n .ey .st { margin-left: auto; display: inline-flex; }
.cb-pm-n .lb { font-size: 13px; line-height: 17px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb-pm-n .wh { font-size: 11px; line-height: 14px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-pm .pn { background: var(--inset); border-radius: var(--radius-inset); padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.cb-pm .pn .ey { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.cb-pm .pn h4 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-pm .pn dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2) var(--space-5); font-size: 13px; line-height: 18px; }
.cb-pm .pn dl > div { display: grid; gap: 2px; align-content: start; min-width: 0; }
.cb-pm .pn dt { font-size: 11px; color: var(--ink-3); }
.cb-pm .pn dd + dt { margin-top: 6px; }
.cb-pm .pn dd { margin: 0; }
.cb-pm .rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cb-pm .rel li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.cb-pm .rel button { border: 0; background: none; padding: 2px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mono-3);
  cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.cb-pm .rel button:hover { text-decoration-color: var(--ink); }
.cb-pm .rel button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-pm .rel small { color: var(--ink-3); font-size: 11px; }
.cb-pm-leg { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding-top: var(--space-2); font-size: 12px; color: var(--ink-2); }
.cb-pm-leg span { display: inline-flex; align-items: center; gap: 4px; }
.cb-pm-leg .alt i { display: inline-block; width: 18px; border-top: 1.5px dashed var(--mono-3); }
.cb-pm .ls { display: none; list-style: none; margin: 0; padding: 0; gap: var(--space-2); }
.cb-pm-n.li { position: static; width: 100%; grid-template-rows: none; gap: 4px; background: var(--inset); }
.cb-pm-n.li.on { background: var(--mono-2); }
.cb-pm-n.li .nx { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.cb-pm .ls .dt { padding: var(--space-2) var(--space-3) 0; font-size: 13px; line-height: 18px; color: var(--ink); }
.cb-pm .ls .dt p { margin: 0 0 var(--space-1); }
@container (max-width: 560px) { .cb-pm .cv, .cb-pm .pn { display: none; } .cb-pm .ls { display: grid; } }
@media (prefers-reduced-motion: no-preference) { .cb-pm-n { transition: background-color .12s ease; } }

/* ── Бренды (01_КАНОН/бренды/*.json): data-brand на html или на острове .cb. Без атрибута — нейтральное ядро. ── */
/* бренд «Нейтральное ядро (без бренда)» · 01_КАНОН/бренды/neutral.json · v1 · СГЕНЕРИРОВАНО build.py */
:is([data-brand="neutral"], [data-brand="neutral"] .cb, [data-brand="neutral"] [data-theme="light"]) {
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --accent-2: var(--flame-deep);
  --marker: var(--bad);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --seq-1: color-mix(in oklab, var(--mono-5) var(--brand-mix-1), var(--card));
  --seq-2: color-mix(in oklab, var(--mono-5) var(--brand-mix-2), var(--card));
  --seq-3: color-mix(in oklab, var(--mono-5) var(--brand-mix-3), var(--card));
  --seq-4: color-mix(in oklab, var(--mono-5) var(--brand-mix-4), var(--card));
  --seq-5: color-mix(in oklab, var(--mono-5) var(--brand-mix-5), var(--ink));
  --seq-6: color-mix(in oklab, var(--mono-5) var(--brand-mix-6), var(--ink));
  --on-seq-4: #ffffff;
  --on-seq-5: #ffffff;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-shell: 32px;
  --radius-card: 24px;
  --radius-inset: 16px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  color-scheme: light;
}
:is([data-brand="neutral"][data-theme="dark"], [data-theme="dark"] [data-brand="neutral"], [data-brand="neutral"] [data-theme="dark"], [data-brand="neutral"][data-theme="dark"] .cb, [data-theme="dark"] [data-brand="neutral"] .cb, [data-brand="neutral"] [data-theme="dark"] .cb) {
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --accent-2: var(--flame-deep);
  --marker: var(--bad);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --seq-1: color-mix(in oklab, var(--mono-5) var(--brand-mix-1), var(--card));
  --seq-2: color-mix(in oklab, var(--mono-5) var(--brand-mix-2), var(--card));
  --seq-3: color-mix(in oklab, var(--mono-5) var(--brand-mix-3), var(--card));
  --seq-4: color-mix(in oklab, var(--mono-5) var(--brand-mix-4), var(--card));
  --seq-5: color-mix(in oklab, var(--mono-5) var(--brand-mix-5), var(--ink));
  --seq-6: color-mix(in oklab, var(--mono-5) var(--brand-mix-6), var(--ink));
  --on-seq-4: #0a0a0a;
  --on-seq-5: #0a0a0a;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-shell: 32px;
  --radius-card: 24px;
  --radius-inset: 16px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  color-scheme: dark;
}
:is([data-brand="neutral"][data-theme="light"], .cb[data-brand="neutral"][data-theme="light"], [data-brand="neutral"] .cb[data-theme="light"]) {
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --accent-2: var(--flame-deep);
  --marker: var(--bad);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --seq-1: color-mix(in oklab, var(--mono-5) var(--brand-mix-1), var(--card));
  --seq-2: color-mix(in oklab, var(--mono-5) var(--brand-mix-2), var(--card));
  --seq-3: color-mix(in oklab, var(--mono-5) var(--brand-mix-3), var(--card));
  --seq-4: color-mix(in oklab, var(--mono-5) var(--brand-mix-4), var(--card));
  --seq-5: color-mix(in oklab, var(--mono-5) var(--brand-mix-5), var(--ink));
  --seq-6: color-mix(in oklab, var(--mono-5) var(--brand-mix-6), var(--ink));
  --on-seq-4: #ffffff;
  --on-seq-5: #ffffff;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-shell: 32px;
  --radius-card: 24px;
  --radius-inset: 16px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  color-scheme: light;
}

/* бренд «Classic · flame + Onest (архив до 27.09.2026)» · 01_КАНОН/бренды/classic.json · v1 · СГЕНЕРИРОВАНО build.py */
:is([data-brand="classic"], [data-brand="classic"] .cb, [data-brand="classic"] [data-theme="light"]) {
  --card: #ffffff;
  --inset: #f4f4f2;
  --inset-hover: #ececea;
  --border: #e4e4e1;
  --ink: #141413;
  --ink-2: #56564f;
  --ink-3: #6b6b66;
  --primary: #141413;
  --on-primary: #ffffff;
  --card-ink: #1c1c1a;
  --on-card-ink: #f2f1ed;
  --hatch-ghost: #e4e4e1;
  --ok: #16733a;
  --ok-soft: #e3f3e8;
  --bad: #c62828;
  --bad-soft: #fdeaea;
  --warn: #9a5800;
  --warn-soft: #fff3d9;
  --mono-1: #e4e4e1;
  --mono-2: #cfcfcb;
  --mono-3: #a9a9a3;
  --mono-4: #7c7c76;
  --mono-5: #4a4a45;
  --cold: #2f5f9e;
  --cold-1: #dbe6f4;
  --cold-2: #9dbbe2;
  --cold-3: #4a78b8;
  --on-fill: #ffffff;
  --sand: #b98a4e;
  --flame: #f0561d;
  --flame-deep: #cf440e;
  --flame-ink: #b33a0b;
  --on-flame: #ffffff;
  --data-2: var(--ink);
  --flame-soft: #fde8de;
  --flame-hatch: #ffd9c7;
  --area-top: #f0561d40;
  --canvas: #e9e9e7;
  --shell: #f4f4f2;
  --focus: #141413;
  --marker: #c62828;
  --accent-2: #cf440e;
  --action: #f0561d;
  --on-action: #0a0a0a;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --seq-1: #fde8de;
  --seq-2: #fbc9b1;
  --seq-3: #f8a37f;
  --seq-4: #f47a4b;
  --seq-5: #dd5118;
  --seq-6: #a93a0e;
  --on-seq-4: #141413;
  --on-seq-5: #141413;
  --font-sans: Onest, "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Onest, "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: Onest, "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-shell: 32px;
  --radius-card: 24px;
  --radius-inset: 16px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  color-scheme: light;
}
:is([data-brand="classic"][data-theme="dark"], [data-theme="dark"] [data-brand="classic"], [data-brand="classic"] [data-theme="dark"], [data-brand="classic"][data-theme="dark"] .cb, [data-theme="dark"] [data-brand="classic"] .cb, [data-brand="classic"] [data-theme="dark"] .cb) {
  --card: #1a1a19;
  --inset: #232322;
  --inset-hover: #2b2b29;
  --border: #2e2e2c;
  --ink: #f2f1ed;
  --ink-2: #b8b7b0;
  --ink-3: #8e8d87;
  --primary: #f2f1ed;
  --on-primary: #141413;
  --card-ink: #2a2a28;
  --on-card-ink: #f2f1ed;
  --hatch-ghost: #2e2e2c;
  --ok: #4ade80;
  --ok-soft: #15301f;
  --bad: #f87171;
  --bad-soft: #3a1717;
  --warn: #fbbf24;
  --warn-soft: #33280c;
  --mono-1: #2e2e2c;
  --mono-2: #403f3c;
  --mono-3: #5e5d59;
  --mono-4: #8a8984;
  --mono-5: #bdbcb6;
  --cold: #7aa7e8;
  --cold-1: #1b2a41;
  --cold-2: #2d4b78;
  --cold-3: #5d8fd6;
  --on-fill: #141413;
  --sand: #d9ad72;
  --flame: #f26430;
  --flame-deep: #c93f0c;
  --flame-ink: #f26430;
  --on-flame: #ffffff;
  --data-2: var(--ink);
  --flame-soft: #3a1a0c;
  --flame-hatch: #5a2410;
  --area-top: #f2643052;
  --canvas: #0b0b0a;
  --shell: #121211;
  --focus: #f2f1ed;
  --marker: #f87171;
  --accent-2: #c93f0c;
  --action: #f26430;
  --on-action: #0a0a0a;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --seq-1: #3a1a0c;
  --seq-2: #5c2710;
  --seq-3: #8a3813;
  --seq-4: #c14c18;
  --seq-5: #f26430;
  --seq-6: #ffa37c;
  --on-seq-4: #ffffff;
  --on-seq-5: #141413;
  --font-sans: Onest, "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Onest, "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: Onest, "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-shell: 32px;
  --radius-card: 24px;
  --radius-inset: 16px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  color-scheme: dark;
}
:is([data-brand="classic"][data-theme="light"], .cb[data-brand="classic"][data-theme="light"], [data-brand="classic"] .cb[data-theme="light"]) {
  --card: #ffffff;
  --inset: #f4f4f2;
  --inset-hover: #ececea;
  --border: #e4e4e1;
  --ink: #141413;
  --ink-2: #56564f;
  --ink-3: #6b6b66;
  --primary: #141413;
  --on-primary: #ffffff;
  --card-ink: #1c1c1a;
  --on-card-ink: #f2f1ed;
  --hatch-ghost: #e4e4e1;
  --ok: #16733a;
  --ok-soft: #e3f3e8;
  --bad: #c62828;
  --bad-soft: #fdeaea;
  --warn: #9a5800;
  --warn-soft: #fff3d9;
  --mono-1: #e4e4e1;
  --mono-2: #cfcfcb;
  --mono-3: #a9a9a3;
  --mono-4: #7c7c76;
  --mono-5: #4a4a45;
  --cold: #2f5f9e;
  --cold-1: #dbe6f4;
  --cold-2: #9dbbe2;
  --cold-3: #4a78b8;
  --on-fill: #ffffff;
  --sand: #b98a4e;
  --flame: #f0561d;
  --flame-deep: #cf440e;
  --flame-ink: #b33a0b;
  --on-flame: #ffffff;
  --data-2: var(--ink);
  --flame-soft: #fde8de;
  --flame-hatch: #ffd9c7;
  --area-top: #f0561d40;
  --canvas: #e9e9e7;
  --shell: #f4f4f2;
  --focus: #141413;
  --marker: #c62828;
  --accent-2: #cf440e;
  --action: #f0561d;
  --on-action: #0a0a0a;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --seq-1: #fde8de;
  --seq-2: #fbc9b1;
  --seq-3: #f8a37f;
  --seq-4: #f47a4b;
  --seq-5: #dd5118;
  --seq-6: #a93a0e;
  --on-seq-4: #141413;
  --on-seq-5: #141413;
  --font-sans: Onest, "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Onest, "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: Onest, "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-shell: 32px;
  --radius-card: 24px;
  --radius-inset: 16px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  color-scheme: light;
}

/* бренд «Денис Леушин · denispleada.ru» · 01_КАНОН/бренды/denis.json · v1 · СГЕНЕРИРОВАНО build.py */
:is([data-brand="denis"], [data-brand="denis"] .cb, [data-brand="denis"] [data-theme="light"]) {
  --flame: oklch(56% .245 266);
  --flame-deep: oklch(52% .24 266);
  --flame-ink: oklch(48% .23 266);
  --on-flame: oklch(100% 0 0);
  --data-2: var(--ink);
  --cold: var(--mono-4);
  --cold-1: var(--mono-1);
  --cold-2: var(--mono-2);
  --cold-3: var(--mono-4);
  --flame-soft: oklch(95.5% .03 266);
  --canvas: oklch(100% 0 0);
  --shell: oklch(98.5% 0 0);
  --focus: oklch(56% .245 266);
  --marker: oklch(62% .235 25);
  --accent-2: oklch(61% .19 245);
  --action: #EB5B2A;
  --on-action: #0a0a0a;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --grad-hero: linear-gradient(in oklch 135deg, var(--flame), var(--accent-2));
  --grad-action: linear-gradient(in oklch 135deg, oklch(52% .24 266), oklch(52% .2 250));
  --grad-surface: radial-gradient(90% 70% at 0% 100%, color-mix(in oklch, var(--accent-2) 12%, var(--card)) 0%, transparent 55%), radial-gradient(80% 70% at 100% 0%, var(--flame-soft) 0%, transparent 55%), var(--card);
  --grad-accent: linear-gradient(in oklch 135deg, oklch(52% .24 266), oklch(52% .2 250));
  --on-seq-4: #0a0a0a;
  --on-seq-5: #ffffff;
  --font-sans: Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: Caveat, "Caveat Variable", cursive;
  --radius-shell: 24px;
  --radius-card: 20px;
  --radius-inset: 12px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  color-scheme: light;
}
:is([data-brand="denis"][data-theme="dark"], [data-theme="dark"] [data-brand="denis"], [data-brand="denis"] [data-theme="dark"], [data-brand="denis"][data-theme="dark"] .cb, [data-theme="dark"] [data-brand="denis"] .cb, [data-brand="denis"] [data-theme="dark"] .cb) {
  --flame: oklch(58% .22 266);
  --flame-deep: oklch(52% .24 266);
  --flame-ink: oklch(76% .15 266);
  --on-flame: oklch(100% 0 0);
  --data-2: var(--ink);
  --cold: var(--mono-4);
  --cold-1: var(--mono-1);
  --cold-2: var(--mono-2);
  --cold-3: var(--mono-4);
  --flame-soft: oklch(26% .08 266);
  --canvas: oklch(14.5% 0 0);
  --focus: oklch(58% .22 266);
  --marker: oklch(68% .21 25);
  --accent-2: oklch(58% .17 245);
  --action: #EB5B2A;
  --on-action: #0a0a0a;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --grad-hero: linear-gradient(in oklch 135deg, var(--flame), var(--accent-2));
  --grad-action: linear-gradient(in oklch 135deg, oklch(52% .24 266), oklch(52% .2 250));
  --grad-surface: radial-gradient(90% 70% at 0% 100%, color-mix(in oklch, var(--accent-2) 12%, var(--card)) 0%, transparent 55%), radial-gradient(80% 70% at 100% 0%, var(--flame-soft) 0%, transparent 55%), var(--card);
  --grad-accent: linear-gradient(in oklch 135deg, oklch(52% .24 266), oklch(52% .2 250));
  --on-seq-4: #ffffff;
  --on-seq-5: #ffffff;
  --font-sans: Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: Caveat, "Caveat Variable", cursive;
  --radius-shell: 24px;
  --radius-card: 20px;
  --radius-inset: 12px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  --shell: #101010;
  color-scheme: dark;
}
:is([data-brand="denis"][data-theme="light"], .cb[data-brand="denis"][data-theme="light"], [data-brand="denis"] .cb[data-theme="light"]) {
  --flame: oklch(56% .245 266);
  --flame-deep: oklch(52% .24 266);
  --flame-ink: oklch(48% .23 266);
  --on-flame: oklch(100% 0 0);
  --data-2: var(--ink);
  --cold: var(--mono-4);
  --cold-1: var(--mono-1);
  --cold-2: var(--mono-2);
  --cold-3: var(--mono-4);
  --flame-soft: oklch(95.5% .03 266);
  --canvas: oklch(100% 0 0);
  --shell: oklch(98.5% 0 0);
  --focus: oklch(56% .245 266);
  --marker: oklch(62% .235 25);
  --accent-2: oklch(61% .19 245);
  --action: #EB5B2A;
  --on-action: #0a0a0a;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --grad-hero: linear-gradient(in oklch 135deg, var(--flame), var(--accent-2));
  --grad-action: linear-gradient(in oklch 135deg, oklch(52% .24 266), oklch(52% .2 250));
  --grad-surface: radial-gradient(90% 70% at 0% 100%, color-mix(in oklch, var(--accent-2) 12%, var(--card)) 0%, transparent 55%), radial-gradient(80% 70% at 100% 0%, var(--flame-soft) 0%, transparent 55%), var(--card);
  --grad-accent: linear-gradient(in oklch 135deg, oklch(52% .24 266), oklch(52% .2 250));
  --on-seq-4: #0a0a0a;
  --on-seq-5: #ffffff;
  --font-sans: Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: Caveat, "Caveat Variable", cursive;
  --radius-shell: 24px;
  --radius-card: 20px;
  --radius-inset: 12px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  color-scheme: light;
}

/* бренд «Пример · банк (синий, строгий)» · 01_КАНОН/бренды/example-bank.json · v1 · СГЕНЕРИРОВАНО build.py */
:is([data-brand="example-bank"], [data-brand="example-bank"] .cb, [data-brand="example-bank"] [data-theme="light"]) {
  --flame: oklch(45% .15 255);
  --flame-deep: oklch(40% .14 255);
  --flame-ink: oklch(40% .14 255);
  --on-flame: #ffffff;
  --data-2: var(--ink);
  --cold: var(--mono-4);
  --cold-1: var(--mono-1);
  --cold-2: var(--mono-2);
  --cold-3: var(--mono-4);
  --flame-soft: oklch(96% .02 255);
  --action: oklch(45% .15 255);
  --on-action: #ffffff;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --accent-2: var(--flame-deep);
  --marker: var(--bad);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --on-seq-4: #0a0a0a;
  --on-seq-5: #ffffff;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-shell: 12px;
  --radius-card: 10px;
  --radius-inset: 6px;
  --radius-chip: 6px;
  --radius-check: 4px;
  --radius-pill: 8px;
  color-scheme: light;
}
:is([data-brand="example-bank"][data-theme="dark"], [data-theme="dark"] [data-brand="example-bank"], [data-brand="example-bank"] [data-theme="dark"], [data-brand="example-bank"][data-theme="dark"] .cb, [data-theme="dark"] [data-brand="example-bank"] .cb, [data-brand="example-bank"] [data-theme="dark"] .cb) {
  --flame: oklch(72% .13 255);
  --flame-deep: oklch(80% .1 255);
  --flame-ink: oklch(80% .1 255);
  --on-flame: #0a0a0a;
  --data-2: var(--ink);
  --cold: var(--mono-4);
  --cold-1: var(--mono-1);
  --cold-2: var(--mono-2);
  --cold-3: var(--mono-4);
  --flame-soft: oklch(28% .05 255);
  --action: oklch(72% .13 255);
  --on-action: #0a0a0a;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --accent-2: var(--flame-deep);
  --marker: var(--bad);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --on-seq-4: #0a0a0a;
  --on-seq-5: #0a0a0a;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-shell: 12px;
  --radius-card: 10px;
  --radius-inset: 6px;
  --radius-chip: 6px;
  --radius-check: 4px;
  --radius-pill: 8px;
  color-scheme: dark;
}
:is([data-brand="example-bank"][data-theme="light"], .cb[data-brand="example-bank"][data-theme="light"], [data-brand="example-bank"] .cb[data-theme="light"]) {
  --flame: oklch(45% .15 255);
  --flame-deep: oklch(40% .14 255);
  --flame-ink: oklch(40% .14 255);
  --on-flame: #ffffff;
  --data-2: var(--ink);
  --cold: var(--mono-4);
  --cold-1: var(--mono-1);
  --cold-2: var(--mono-2);
  --cold-3: var(--mono-4);
  --flame-soft: oklch(96% .02 255);
  --action: oklch(45% .15 255);
  --on-action: #ffffff;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --accent-2: var(--flame-deep);
  --marker: var(--bad);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --on-seq-4: #0a0a0a;
  --on-seq-5: #ffffff;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-shell: 12px;
  --radius-card: 10px;
  --radius-inset: 6px;
  --radius-chip: 6px;
  --radius-check: 4px;
  --radius-pill: 8px;
  color-scheme: light;
}

/* бренд «Пример · девелопер (зелёный, мягкий, Onest)» · 01_КАНОН/бренды/example-fresh.json · v1 · СГЕНЕРИРОВАНО build.py */
:is([data-brand="example-fresh"], [data-brand="example-fresh"] .cb, [data-brand="example-fresh"] [data-theme="light"]) {
  --flame: oklch(52% .13 155);
  --flame-deep: oklch(45% .12 155);
  --flame-ink: oklch(45% .12 155);
  --on-flame: #ffffff;
  --data-2: var(--ink);
  --flame-soft: oklch(96% .03 155);
  --action: oklch(52% .13 155);
  --on-action: #ffffff;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --accent-2: var(--flame-deep);
  --marker: var(--bad);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --on-seq-4: #0a0a0a;
  --on-seq-5: #ffffff;
  --font-sans: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-shell: 32px;
  --radius-card: 24px;
  --radius-inset: 16px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  color-scheme: light;
}
:is([data-brand="example-fresh"][data-theme="dark"], [data-theme="dark"] [data-brand="example-fresh"], [data-brand="example-fresh"] [data-theme="dark"], [data-brand="example-fresh"][data-theme="dark"] .cb, [data-theme="dark"] [data-brand="example-fresh"] .cb, [data-brand="example-fresh"] [data-theme="dark"] .cb) {
  --flame: oklch(74% .13 155);
  --flame-deep: oklch(82% .1 155);
  --flame-ink: oklch(82% .1 155);
  --on-flame: #0a0a0a;
  --data-2: var(--ink);
  --flame-soft: oklch(28% .05 155);
  --action: oklch(74% .13 155);
  --on-action: #0a0a0a;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --accent-2: var(--flame-deep);
  --marker: var(--bad);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --on-seq-4: #0a0a0a;
  --on-seq-5: #0a0a0a;
  --font-sans: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-shell: 32px;
  --radius-card: 24px;
  --radius-inset: 16px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  color-scheme: dark;
}
:is([data-brand="example-fresh"][data-theme="light"], .cb[data-brand="example-fresh"][data-theme="light"], [data-brand="example-fresh"] .cb[data-theme="light"]) {
  --flame: oklch(52% .13 155);
  --flame-deep: oklch(45% .12 155);
  --flame-ink: oklch(45% .12 155);
  --on-flame: #ffffff;
  --data-2: var(--ink);
  --flame-soft: oklch(96% .03 155);
  --action: oklch(52% .13 155);
  --on-action: #ffffff;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --accent-2: var(--flame-deep);
  --marker: var(--bad);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --on-seq-4: #0a0a0a;
  --on-seq-5: #ffffff;
  --font-sans: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-shell: 32px;
  --radius-card: 24px;
  --radius-inset: 16px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  color-scheme: light;
}

/* бренд «Салон «Северный» (демо-клиент)» · 01_КАНОН/бренды/salon-demo.json · v1 · СГЕНЕРИРОВАНО build.py */
:is([data-brand="salon-demo"], [data-brand="salon-demo"] .cb, [data-brand="salon-demo"] [data-theme="light"]) {
  --flame: oklch(50% .16 330);
  --flame-deep: oklch(45% .15 330);
  --flame-ink: oklch(45% .15 330);
  --on-flame: #ffffff;
  --data-2: var(--ink);
  --flame-soft: oklch(96% .025 330);
  --action: oklch(50% .16 330);
  --on-action: #ffffff;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --accent-2: var(--flame-deep);
  --marker: var(--bad);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --on-seq-4: #0a0a0a;
  --on-seq-5: #ffffff;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-shell: 32px;
  --radius-card: 24px;
  --radius-inset: 16px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  color-scheme: light;
}
:is([data-brand="salon-demo"][data-theme="dark"], [data-theme="dark"] [data-brand="salon-demo"], [data-brand="salon-demo"] [data-theme="dark"], [data-brand="salon-demo"][data-theme="dark"] .cb, [data-theme="dark"] [data-brand="salon-demo"] .cb, [data-brand="salon-demo"] [data-theme="dark"] .cb) {
  --flame: oklch(72% .14 330);
  --flame-deep: oklch(80% .11 330);
  --flame-ink: oklch(80% .11 330);
  --on-flame: #0a0a0a;
  --data-2: var(--ink);
  --flame-soft: oklch(28% .06 330);
  --action: oklch(72% .14 330);
  --on-action: #0a0a0a;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --accent-2: var(--flame-deep);
  --marker: var(--bad);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --on-seq-4: #0a0a0a;
  --on-seq-5: #0a0a0a;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-shell: 32px;
  --radius-card: 24px;
  --radius-inset: 16px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  color-scheme: dark;
}
:is([data-brand="salon-demo"][data-theme="light"], .cb[data-brand="salon-demo"][data-theme="light"], [data-brand="salon-demo"] .cb[data-theme="light"]) {
  --flame: oklch(50% .16 330);
  --flame-deep: oklch(45% .15 330);
  --flame-ink: oklch(45% .15 330);
  --on-flame: #ffffff;
  --data-2: var(--ink);
  --flame-soft: oklch(96% .025 330);
  --action: oklch(50% .16 330);
  --on-action: #ffffff;
  --accent: var(--flame);
  --accent-ink: var(--flame-ink);
  --accent-soft: var(--flame-soft);
  --on-accent: var(--on-flame);
  --accent-2: var(--flame-deep);
  --marker: var(--bad);
  --grad-hero: linear-gradient(var(--flame), var(--flame));
  --grad-action: linear-gradient(var(--primary), var(--primary));
  --grad-surface: linear-gradient(var(--card), var(--card));
  --grad-accent: initial;
  --on-seq-4: #0a0a0a;
  --on-seq-5: #ffffff;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-shell: 32px;
  --radius-card: 24px;
  --radius-inset: 16px;
  --radius-chip: 10px;
  --radius-check: 6px;
  --radius-pill: 999px;
  color-scheme: light;
}