/* Corix UI — компоненты на чистом CSS (классы cx-*). Нужен css/cx-tokens.css.
   Работает в Next.js, серверных шаблонах и внутри iframe Битрикс24. Состояния:
   :hover · :active · :focus-visible · [disabled]/.is-disabled · .is-loading · .is-error/[aria-invalid="true"]. */

/* ---------- База ---------- */
body.cx { margin: 0; }
.cx { font-family: var(--cx-font-ui); font-size: 13.5px; line-height: 1.6; color: var(--cx-text); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.cx *, .cx *::before, .cx *::after { box-sizing: border-box; }
.cx-app { background: var(--cx-bg); min-height: 100vh; }
.cx :where(h1,h2,h3,h4,p) { margin: 0; }
.cx :where(button, input, select, textarea) { font: inherit; color: inherit; }
.cx ::selection { background: rgba(221,246,74,.55); color: var(--cx-on-accent); }
.cx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cx-muted { color: var(--cx-text-2); }
.cx-meta { color: var(--cx-text-meta); font-size: 12.5px; }
.cx-num { font-variant-numeric: tabular-nums; }
.cx-label { font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--cx-surface); box-shadow: var(--cx-ring); font: 600 11px/1 var(--cx-font-ui); color: var(--cx-text-meta); }
.cx-divider { height: 1px; background: var(--cx-line); border: 0; margin: 0; }
.cx :focus { outline: none; }
.cx :focus-visible { box-shadow: var(--cx-focus); }

/* ---------- Ссылка ---------- */
.cx-link { color: var(--cx-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--cx-border); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: text-decoration-color var(--cx-dur-hover) var(--cx-ease); border-radius: 4px; cursor: pointer; }
.cx-link:hover { text-decoration-color: var(--cx-accent-deep); }
button.cx-link, button.cx-back { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; text-align: inherit; }
.cx-link--quiet { color: var(--cx-text-meta); text-decoration: none; }
.cx-link--quiet:hover { color: var(--cx-text); }
.cx-link[aria-disabled="true"] { color: var(--cx-text-4); pointer-events: none; text-decoration: none; }

/* ---------- Кнопки ---------- */
.cx-btn { --_h: var(--cx-h-lg); --_px: 20px; --_bg: var(--cx-fill-strong); --_fg: var(--cx-on-strong); --_ring: none;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--_h); padding: 0 var(--_px);
  border: 0; border-radius: var(--cx-r-pill); background: var(--_bg); color: var(--_fg); box-shadow: var(--_ring);
  font: 600 13px/1 var(--cx-font-ui); white-space: nowrap; cursor: pointer; user-select: none; text-decoration: none; max-width: 100%; min-width: 0;
  transition: background var(--cx-dur-button) var(--cx-ease), filter var(--cx-dur-button) var(--cx-ease), transform var(--cx-dur-press) var(--cx-ease), box-shadow var(--cx-dur-button) var(--cx-ease), color var(--cx-dur-button) var(--cx-ease); }
.cx-btn svg { width: 16px; height: 16px; flex: none; }
.cx-btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* длинная подпись: <span class="cx-btn__label">…</span> */
.cx-btn:hover { background: var(--cx-fill-strong-hover); }
.cx-btn:active { transform: translateY(1px); }
.cx-btn:focus-visible { box-shadow: var(--_ring), var(--cx-focus); }
.cx-btn--lime { --_bg: var(--cx-accent); --_fg: var(--cx-on-accent); }
.cx-btn--lime:hover { background: var(--cx-accent-hover); }
.cx-btn--secondary { --_bg: var(--cx-surface); --_fg: var(--cx-text); --_ring: var(--cx-ring); }
.cx-btn--secondary:hover { background: var(--cx-surface-hover); }
.cx-btn--soft { --_bg: var(--cx-surface-soft); --_fg: var(--cx-text); }
.cx-btn--soft:hover { background: var(--cx-surface-pressed); }
.cx-btn--ghost { --_bg: transparent; --_fg: var(--cx-text-2); --_px: 14px; }
.cx-btn--ghost:hover { background: var(--cx-surface-soft); color: var(--cx-text); }
.cx-btn--danger { --_bg: var(--cx-fill-danger); --_fg: #fff; }
.cx-btn--danger:hover { background: var(--cx-fill-danger); filter: brightness(1.08); }
.cx-btn--sm { --_h: var(--cx-h-md); --_px: 16px; font-size: 12.5px; }
.cx-btn--xs { --_h: var(--cx-h-xs); --_px: 12px; font-size: 11.5px; gap: 6px; }
.cx-btn--xs svg { width: 14px; height: 14px; }
.cx-btn--icon { --_px: 0; width: var(--_h); }
.cx-btn--block { width: 100%; }
.cx-btn:disabled, .cx-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.cx-btn:disabled:hover, .cx-btn.is-disabled:hover { background: var(--_bg); color: var(--_fg); }
.cx-btn.is-loading { color: transparent !important; pointer-events: none; }
.cx-btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--_fg); border-right-color: transparent; opacity: .9; animation: cx-spin var(--cx-dur-spin) var(--cx-ease-loop) infinite; }
.cx-btn-group { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Бейдж, чип, тег ---------- */
.cx-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--cx-r-pill); background: var(--cx-accent); color: var(--cx-on-accent); font: 700 10.5px/1 var(--cx-font-ui); font-variant-numeric: tabular-nums; }
.cx-badge--strong { background: var(--cx-fill-strong); color: var(--cx-on-strong); }
.cx-badge--critical { background: var(--cx-fill-danger); color: #fff; }
.cx-badge--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }

.cx-chip { --_bg: var(--cx-surface-soft); --_fg: var(--cx-text-2); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--cx-r-pill); background: var(--_bg); color: var(--_fg); font: 600 11px/1 var(--cx-font-ui); white-space: nowrap; }
.cx-chip::before { content: none; }
.cx-chip--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--_dot, currentColor); }
.cx-chip--accent { --_bg: var(--cx-accent); --_fg: var(--cx-on-accent); }
.cx-chip--strong { --_bg: var(--cx-fill-strong); --_fg: var(--cx-on-strong); }
.cx-chip--critical { --_bg: var(--cx-critical-bg); --_fg: var(--cx-critical-text); }
.cx-chip--warn { --_bg: var(--cx-warn-bg); --_fg: var(--cx-warn-text); }
.cx-chip--success { --_bg: var(--cx-success-bg); --_fg: var(--cx-success-text); }
.cx-chip--info { --_bg: var(--cx-info-bg); --_fg: var(--cx-info); }
.cx-chip--lg { height: 28px; padding: 0 12px; font-size: 12px; }
/* span.cx-chip.cx-chip--progress[style=--value:NN%] > i + текст — идёт работа: чип заливается слева направо, текст переносится, не режется */
.cx-chip--progress { --_fg: var(--cx-text); position: relative; isolation: isolate; overflow: hidden; height: auto; min-height: 28px; padding: 5px 12px 7px; white-space: normal; line-height: 1.3; font-size: 12px; font-variant-numeric: tabular-nums; }
.cx-chip--progress > i { position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--value, 0%); background: color-mix(in srgb, var(--cx-accent) 35%, var(--_bg)); box-shadow: inset 0 -3px 0 var(--cx-accent-deep); transition: width var(--cx-dur-enter) var(--cx-ease); }
.cx-chip--progress > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cx-surface) 45%, transparent), transparent); animation: cx-chip-run 1.6s var(--cx-ease) infinite; }
@keyframes cx-chip-run { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .cx-chip--progress > i::after { animation: none; } }

.cx-tag { --_c: var(--cx-tag-8); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 8px; border-radius: var(--cx-r-tag); background: color-mix(in srgb, var(--_c) 14%, transparent); color: var(--cx-text); font: 600 11.5px/1 var(--cx-font-ui); white-space: nowrap; }
.cx-tag::before { content: ""; width: 8px; height: 8px; border-radius: var(--cx-r-xs); background: var(--_c); flex: none; }
.cx-tag--1 { --_c: var(--cx-tag-1); } .cx-tag--2 { --_c: var(--cx-tag-2); } .cx-tag--3 { --_c: var(--cx-tag-3); } .cx-tag--4 { --_c: var(--cx-tag-4); }
.cx-tag--5 { --_c: var(--cx-tag-5); } .cx-tag--6 { --_c: var(--cx-tag-6); } .cx-tag--7 { --_c: var(--cx-tag-7); } .cx-tag--8 { --_c: var(--cx-tag-8); }
.cx-tag button { all: unset; cursor: pointer; margin-left: 2px; color: var(--cx-text-3); font-size: 13px; line-height: 1; border-radius: 4px; }
.cx-tag button:hover { color: var(--cx-text); }

/* ---------- Аватар ---------- */
.cx-avatar { --_s: 32px; display: inline-flex; align-items: center; justify-content: center; width: var(--_s); height: var(--_s); border-radius: 50%; flex: none; overflow: hidden;
  background: var(--cx-fill-strong); color: var(--cx-on-strong); font: 700 calc(var(--_s) * .36)/1 var(--cx-font-ui); letter-spacing: .02em; text-transform: uppercase; }
.cx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cx-avatar--soft { background: var(--cx-surface-soft); color: var(--cx-text-2); }
.cx-avatar--accent { background: var(--cx-accent); color: var(--cx-on-accent); }
.cx-avatar--ink { background: var(--cx-surface-inverse); color: var(--cx-accent); } /* 1.8.1: свой аватар — тёмный круг с лаймовыми инициалами */
.cx-avatar--xs { --_s: 22px; } .cx-avatar--sm { --_s: 28px; } .cx-avatar--lg { --_s: 40px; } .cx-avatar--xl { --_s: 56px; }
.cx-avatar-group { display: inline-flex; align-items: center; }
.cx-avatar-group > * { box-shadow: 0 0 0 2px var(--cx-surface); }
.cx-avatar-group > * + * { margin-left: -6px; }

/* ---------- Карточка ---------- */
.cx-card { background: var(--cx-surface); border-radius: var(--cx-r-card); padding: var(--cx-card-pad-y) var(--cx-card-pad-x); }
.cx-card--tight { padding: 18px 20px; }
.cx-card--flush { padding: 0; overflow: hidden; } /* 1.8.2: ряды внутри задают свои отступы (очередь) */
.cx-card--inverse { background: var(--cx-surface-inverse); color: var(--cx-text-inverse); }
.cx-card__head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cx-card__title { font-size: 15.5px; line-height: 1.4; font-weight: 600; }
.cx-card__head .cx-card__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; max-width: 100%; }
.cx-inset { background: var(--cx-surface-soft); border-radius: var(--cx-r-md); padding: 14px 16px; }

/* ---------- Формы ---------- */
.cx-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cx-field__label { font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-field__hint { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); }
.cx-field__error { font-size: 11.5px; line-height: 1.5; font-weight: 600; color: var(--cx-critical-text); display: flex; gap: 6px; align-items: center; }
.cx-field__error::before { content: "!"; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--cx-critical); color: #fff; font-size: 10px; font-weight: 800; flex: none; }

.cx-input, .cx-textarea, .cx-select select { width: 100%; height: var(--cx-h-input); padding: 0 14px; border: 0; border-radius: var(--cx-r-input); background: var(--cx-surface); color: var(--cx-text);
  box-shadow: var(--cx-ring); font: 400 13.5px/1.4 var(--cx-font-ui); transition: box-shadow var(--cx-dur-hover) var(--cx-ease), background var(--cx-dur-hover) var(--cx-ease); appearance: none; -webkit-appearance: none; }
.cx-textarea { height: auto; min-height: 92px; padding: 11px 14px; line-height: 1.55; resize: vertical; display: block; }
.cx-input::placeholder, .cx-textarea::placeholder { color: var(--cx-text-3); }
.cx-input:hover, .cx-textarea:hover, .cx-select select:hover { box-shadow: inset 0 0 0 1px var(--cx-text-4); }
.cx-input:focus, .cx-textarea:focus, .cx-select select:focus, .cx-input:focus-visible, .cx-textarea:focus-visible, .cx-select select:focus-visible { box-shadow: var(--cx-focus); outline: none; }
.cx-input:disabled, .cx-textarea:disabled, .cx-select select:disabled { background: var(--cx-surface-soft); color: var(--cx-text-4); box-shadow: none; cursor: not-allowed; }
.cx-input:read-only:not(:disabled) { background: var(--cx-surface-soft); box-shadow: none; }
.cx-input.is-error, .cx-input[aria-invalid="true"], .cx-textarea.is-error, .cx-textarea[aria-invalid="true"], .cx-select.is-error select { box-shadow: inset 0 0 0 1px var(--cx-critical); }
.cx-input.is-error:focus, .cx-input[aria-invalid="true"]:focus, .cx-textarea.is-error:focus, .cx-textarea[aria-invalid="true"]:focus { box-shadow: var(--cx-focus-error); }
.cx-input--sm { height: var(--cx-h-sm); font-size: 12.5px; border-radius: 10px; }
.cx-input--soft { background: var(--cx-surface-soft); box-shadow: none; }

.cx-input-wrap { position: relative; display: flex; align-items: center; }
.cx-input-wrap > svg, .cx-input-wrap > .cx-input-wrap__icon { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--cx-text-3); pointer-events: none; }
.cx-input-wrap > svg ~ .cx-input, .cx-input-wrap > .cx-input-wrap__icon ~ .cx-input { padding-left: 38px; }
.cx-input-wrap > .cx-input-wrap__end { position: absolute; right: 10px; display: flex; gap: 6px; align-items: center; }
.cx-input-wrap.is-loading::after { content: ""; position: absolute; right: 13px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--cx-border); border-top-color: var(--cx-text); animation: cx-spin var(--cx-dur-spin) var(--cx-ease-loop) infinite; }

.cx-select { position: relative; display: block; }
.cx-select select { padding-right: 38px; cursor: pointer; font-weight: 600; font-size: 13px; }
.cx-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.7px solid var(--cx-text-2); border-bottom: 1.7px solid var(--cx-text-2); transform: rotate(45deg); pointer-events: none; transition: transform var(--cx-dur-rotate) var(--cx-ease); }
.cx-select:focus-within::after { transform: translateY(3px) rotate(225deg); }

/* чекбокс и радио: <label class="cx-check"><input type="checkbox"> Текст</label> */
.cx-check, .cx-radio { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--cx-text); cursor: pointer; user-select: none; }
.cx-check input, .cx-radio input { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 18px; height: 18px; display: grid; place-items: center; cursor: pointer;
  background: var(--cx-surface); box-shadow: inset 0 0 0 1.5px var(--cx-text-4); transition: background var(--cx-dur-sidebar) var(--cx-ease), box-shadow var(--cx-dur-sidebar) var(--cx-ease); }
.cx-check input { border-radius: var(--cx-r-check); }
.cx-radio input { border-radius: 50%; }
.cx-check input::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--cx-on-strong); border-bottom: 2px solid var(--cx-on-strong); transform: translateY(-1px) rotate(-45deg) scale(.4); opacity: 0; transition: transform var(--cx-dur-sidebar) var(--cx-ease), opacity var(--cx-dur-sidebar) var(--cx-ease); }
.cx-check input:indeterminate::after { width: 8px; height: 0; border-left: 0; transform: none; opacity: 1; }
.cx-radio input::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cx-surface); transform: scale(0); transition: transform var(--cx-dur-sidebar) var(--cx-ease); }
.cx-check input:hover, .cx-radio input:hover { box-shadow: inset 0 0 0 1.5px var(--cx-text-2); }
.cx-check input:checked, .cx-check input:indeterminate { background: var(--cx-fill-strong); box-shadow: none; }
.cx-check input:checked::after { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); }
.cx-radio input:checked { background: var(--cx-fill-strong); box-shadow: none; }
.cx-radio input:checked::after { transform: scale(1); }
.cx-check input:focus-visible, .cx-radio input:focus-visible { box-shadow: var(--cx-focus); }
.cx-check:has(input:disabled), .cx-radio:has(input:disabled) { color: var(--cx-text-4); cursor: not-allowed; }
.cx-check input:disabled, .cx-radio input:disabled { opacity: .5; cursor: not-allowed; }
.cx-check.is-error input { box-shadow: inset 0 0 0 1.5px var(--cx-critical); }

/* переключатель: <label class="cx-switch"><input type="checkbox" role="switch"> Текст</label> */
.cx-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.cx-switch input { appearance: none; -webkit-appearance: none; margin: 0; flex: none; position: relative; width: 36px; height: 22px; border-radius: var(--cx-r-pill); background: var(--cx-border); cursor: pointer; transition: background var(--cx-dur-sidebar) var(--cx-ease); }
.cx-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(23,24,28,.25); transition: transform var(--cx-dur-sidebar) var(--cx-ease), background var(--cx-dur-sidebar) var(--cx-ease); }
.cx-switch input:checked { background: var(--cx-fill-strong); }
.cx-switch input:checked::after { transform: translateX(14px); background: var(--cx-accent); }
.cx-switch input:hover:not(:checked) { background: var(--cx-text-4); }
.cx-switch input:focus-visible { box-shadow: var(--cx-focus); }
.cx-switch:has(input:disabled) { color: var(--cx-text-4); cursor: not-allowed; }
.cx-switch input:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Индикаторы ---------- */
.cx-spinner { --_s: 18px; display: inline-block; width: var(--_s); height: var(--_s); border-radius: 50%; border: 2px solid var(--cx-border); border-top-color: var(--cx-text); animation: cx-spin var(--cx-dur-spin) var(--cx-ease-loop) infinite; flex: none; }
.cx-spinner--sm { --_s: 14px; } .cx-spinner--lg { --_s: 24px; border-width: 2.5px; }
.cx-spinner--inverse { border-color: rgba(255,255,255,.2); border-top-color: #fff; }
.cx-skeleton { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--cx-skeleton) 0%, var(--cx-skeleton-hi) 50%, var(--cx-skeleton) 100%); background-size: 200% 100%; animation: cx-shimmer var(--cx-dur-shimmer) var(--cx-ease-loop) infinite; }
.cx-progress { display: block; height: 6px; border-radius: var(--cx-r-pill); background: var(--cx-surface-soft); overflow: hidden; }
.cx-inset .cx-progress, .cx-card--soft .cx-progress, .cx-progress--track { background: var(--cx-track); }
.cx-progress > i { display: block; height: 100%; width: var(--value, 0%); background: var(--cx-fill-strong); border-radius: inherit; transition: width var(--cx-dur-enter) var(--cx-ease); }
.cx-progress--accent > i { background: var(--cx-accent-deep); }
.cx-progress--critical > i { background: var(--cx-critical); }
.cx-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--cx-text-2); }
.cx-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--_c, var(--cx-text-4)); flex: none; }
.cx-status--online { --_c: var(--cx-success); } .cx-status--busy { --_c: var(--cx-warn); } .cx-status--error { --_c: var(--cx-critical); } .cx-status--live { --_c: var(--cx-critical); }
.cx-status--live::before { animation: cx-pulse 1.6s var(--cx-ease) infinite; }
.cx-status--accent { --_c: var(--cx-accent-deep); }

@keyframes cx-spin { to { transform: rotate(360deg); } }
@keyframes cx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes cx-pulse { 50% { opacity: .45; } }
@keyframes cx-fade-up { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes cx-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cx *, .cx *::before, .cx *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }

@media (max-width: 900px) {
  .cx-card { border-radius: 18px; --cx-card-pad-y: 20px; --cx-card-pad-x: 18px; } /* 1.9.1: отступы переменными — по ним вылезают на край .cx-table-wrap и .cx-rows--form */
}

/* =====================================================================
   Бренд-блок «ИМЯ | corix» и шапка CorixShell
   ===================================================================== */
/* <a class="cx-brand"><span class="cx-brand__name">Секретарь</span><i class="cx-brand__bar"></i>
      <svg class="cx-brand__logo"><use href="/corix-ui/assets/logos/corix-sprite.svg#corix-logo"/></svg></a>
   Модификаторы: --compact (знак вместо логотипа) · --mark (только знак) · --inverse (на тёмном) · --lg */
.cx-brand { --_s: 13.5px; --_slot: 108px; display: inline-flex; align-items: center; gap: calc(var(--_s) * .8); color: var(--cx-text); text-decoration: none; flex: none; white-space: nowrap; border-radius: 10px; }
.cx-brand__name { display: inline-block; min-width: var(--_slot); font: 600 var(--_s)/1 var(--cx-font-display); letter-spacing: .05em; text-transform: uppercase; }
.cx-brand__bar { width: 1px; height: calc(var(--_s) * 1.4); background: var(--cx-border); flex: none; }
.cx-brand__logo { height: calc(var(--_s) * 1.6); width: calc(var(--_s) * 1.6 * 1005 / 323); flex: none; }
.cx-brand__mark { height: calc(var(--_s) * 1.6); width: calc(var(--_s) * 1.6 * 312.27 / 323); flex: none; }
.cx-brand--compact .cx-brand__logo { display: none; }
.cx-brand:not(.cx-brand--compact):not(.cx-brand--mark) .cx-brand__mark { display: none; }
.cx-brand--mark .cx-brand__name, .cx-brand--mark .cx-brand__bar, .cx-brand--mark .cx-brand__logo { display: none; }
.cx-brand--free .cx-brand__name { min-width: 0; }
.cx-brand--solo .cx-brand__name, .cx-brand--solo .cx-brand__bar { display: none; }
.cx-brand--lg { --_s: 22px; --_slot: 0; }
.cx-brand--inverse { color: #fff; --cx-brand-mark: var(--cx-accent); }
.cx-brand--inverse .cx-brand__bar { background: rgba(255,255,255,.18); }
.cx-brand--accent-mark { --cx-brand-mark: var(--cx-accent-deep); }
[data-theme="dark"] .cx-brand:not(.cx-brand--plain), .cx-brand--on-dark { --cx-brand-mark: var(--cx-accent); }
/* вариант «цвет продукта»: точка-идентификатор у имени (см. правила) */
.cx-brand__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cx-product, var(--cx-accent-deep)); flex: none; margin-right: calc(var(--_s) * -.3); }

/* ---------- Всплывающие слои на <details> (без JS; css/cx.js закрывает по клику мимо и Esc) ---------- */
.cx-pop { position: relative; display: inline-block; }
.cx-pop > summary { list-style: none; cursor: pointer; }
.cx-pop:not([open]) > .cx-pop__panel { display: none; }
.cx-pop > summary::-webkit-details-marker { display: none; }
.cx-pop__panel { position: absolute; top: calc(100% + var(--pop-gap, 8px)); right: 0; z-index: var(--cx-z-dropdown); min-width: 240px; padding: 6px; border-radius: 18px; background: var(--cx-surface); box-shadow: var(--cx-shadow-menu); transform-origin: top right; }
.cx-pop[open] > .cx-pop__panel { animation: cx-pop-in var(--cx-dur-in) var(--cx-ease); }
.cx-pop--left > .cx-pop__panel { right: auto; left: 0; transform-origin: top left; }
.cx-pop--up > .cx-pop__panel { top: auto; bottom: calc(100% + var(--pop-gap, 8px)); }
.cx-pop__panel--lg { box-shadow: var(--cx-shadow-drop); border-radius: 22px; padding: 10px; }
.cx-menu__item { white-space: nowrap; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--cx-text); font: 600 13px/1.3 var(--cx-font-ui); text-align: left; text-decoration: none; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-menu__item svg { width: 16px; height: 16px; color: var(--cx-text-2); flex: none; }
.cx-menu__item:hover { background: var(--cx-surface-hover); }
.cx-menu__item:focus-visible { box-shadow: var(--cx-focus); }
.cx-menu__item[aria-current="true"], .cx-menu__item.is-active { background: var(--cx-surface-soft); }
.cx-menu__item--danger, .cx-menu__item--danger svg { color: var(--cx-critical-text); }
.cx-menu__item[aria-disabled="true"] { color: var(--cx-text-4); pointer-events: none; }
.cx-menu__hint { margin-left: auto; padding-left: 12px; white-space: nowrap; font-weight: 400; font-size: 11.5px; color: var(--cx-text-meta); }
.cx-menu__sep { height: 1px; margin: 6px 8px; background: var(--cx-line); }
.cx-menu__head { padding: 8px 12px 6px; }

/* ---------- Шапка ---------- */
.cx-shell { position: sticky; top: 0; z-index: var(--cx-z-header); display: flex; align-items: center; gap: 18px; height: var(--cx-h-header); padding: 0 12px 0 26px; border-radius: var(--cx-r-header); background: var(--cx-surface); }
.cx-shell__nav { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cx-shell__nav::-webkit-scrollbar { display: none; }
.cx-shell__tab { position: relative; display: inline-flex; align-items: center; gap: 8px; height: var(--cx-h-lg); padding: 0 16px; border-radius: var(--cx-r-pill); color: var(--cx-text-2); font: 600 13px/1 var(--cx-font-ui); text-decoration: none; white-space: nowrap; transition: background var(--cx-dur-hover) var(--cx-ease), color var(--cx-dur-hover) var(--cx-ease); }
.cx-shell__tab svg { width: 17px; height: 17px; flex: none; }
.cx-shell__tab:hover { background: var(--cx-surface-soft); color: var(--cx-text); }
.cx-shell__tab[aria-current="page"] { background: var(--cx-fill-strong); color: var(--cx-on-strong); }
.cx-shell__tab .cx-badge { margin-left: 2px; }
.cx-shell__end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.cx-shell__search { position: relative; display: flex; align-items: center; width: var(--cx-shell-search-w); }
.cx-shell__search--wide { --cx-shell-search-w: var(--cx-w-xl); }
@media (max-width: 1360px) { .cx-shell__search:not(.cx-shell__search--wide) { width: 170px; } .cx-shell__search--wide { width: var(--cx-w-lg); } .cx-shell__tab { padding: 0 13px; } }
.cx-shell__search svg { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--cx-text-3); pointer-events: none; }
.cx-shell__search input { width: 100%; height: var(--cx-h-lg); padding: 0 52px 0 40px; border: 0; border-radius: var(--cx-r-pill); background: var(--cx-surface-soft); color: var(--cx-text); font: 600 13px var(--cx-font-ui); transition: box-shadow var(--cx-dur-hover) var(--cx-ease), background var(--cx-dur-hover) var(--cx-ease); }
.cx-shell__search input::placeholder { color: var(--cx-text-3); }
.cx-shell__search input:focus { outline: none; background: var(--cx-surface); box-shadow: var(--cx-focus); }
.cx-shell__search .cx-kbd { position: absolute; right: 10px; }
.cx-shell__icon { position: relative; display: inline-grid; place-items: center; width: var(--cx-h-lg); height: var(--cx-h-lg); border: 0; border-radius: 50%; background: var(--cx-surface-soft); color: var(--cx-text); cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-shell__icon svg { width: 18px; height: 18px; }
.cx-shell__icon:hover, .cx-pop[open] > .cx-shell__icon { background: var(--cx-surface-pressed); }
.cx-shell__icon:focus-visible { box-shadow: var(--cx-focus); }
.cx-shell__icon .cx-badge { position: absolute; top: -2px; right: -3px; box-shadow: 0 0 0 2px var(--cx-surface); }
.cx-shell__icon .cx-badge--dot { top: 8px; right: 9px; }
.cx-shell__me { display: inline-flex; border-radius: 50%; }
.cx-shell__me:focus-visible { box-shadow: var(--cx-focus); }
.cx-shell .cx-avatar { --_s: var(--cx-h-lg); }
.cx-shell__burger { display: none; }

/* ---------- Переключатель продуктов (сетка) ---------- */
.cx-switcher { width: var(--cx-pop-w-md); }
.cx-switcher__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.cx-switcher__item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px; border-radius: 16px; color: var(--cx-text); text-decoration: none; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-switcher__item:hover { background: var(--cx-surface-hover); }
.cx-switcher__item:focus-visible { box-shadow: var(--cx-focus); }
.cx-switcher__item[aria-current="true"] { background: var(--cx-surface-accent); }
.cx-switcher__tile { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--cx-surface-inverse); color: var(--cx-text-inverse); font: 600 13px/1 var(--cx-font-display); flex: none; --cx-brand-mark: var(--cx-accent); }
.cx-switcher__tile svg { width: 18px; height: 18px; color: var(--cx-accent); }
.cx-switcher__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-switcher__name { font: 600 11.5px/1.2 var(--cx-font-display); letter-spacing: .05em; text-transform: uppercase; }
.cx-switcher__sub { font-size: 11.5px; color: var(--cx-text-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-switcher__item.is-locked .cx-switcher__tile { background: var(--cx-surface-soft); color: var(--cx-text-3); }
.cx-switcher__item.is-locked .cx-switcher__tile svg { color: var(--cx-text-4); }
.cx-switcher__item.is-locked .cx-switcher__name { color: var(--cx-text-2); }
.cx-switcher__lock { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--cx-text-meta); white-space: nowrap; }
.cx-switcher__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 10px 10px 4px; border-top: 1px solid var(--cx-line); font-size: 12px; }
.cx-switcher__foot a { color: var(--cx-text); font-weight: 600; text-decoration: none; }
.cx-switcher__foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Компактная шапка: iframe Битрикс24 ---------- */
.cx-shell--compact { height: var(--cx-h-header-compact); border-radius: 0; padding: 0 10px 0 16px; gap: 14px; box-shadow: inset 0 -1px 0 var(--cx-line); }
.cx-shell--compact .cx-brand { --_s: 11.5px; --_slot: 0; }
.cx-shell--compact .cx-shell__tab { height: var(--cx-h-sm); padding: 0 12px; font-size: 12.5px; }
.cx-shell--compact .cx-shell__tab svg { width: 15px; height: 15px; }
.cx-shell--compact .cx-shell__icon { width: var(--cx-h-sm); height: var(--cx-h-sm); }
.cx-shell--compact .cx-shell__icon svg { width: 16px; height: 16px; }
.cx-shell--compact .cx-shell__search { width: 200px; }
.cx-shell--compact .cx-shell__search input { height: var(--cx-h-sm); font-size: 12.5px; }
.cx-shell--compact .cx-avatar { --_s: var(--cx-h-sm); }
.cx-frame { background: var(--cx-bg); min-height: 100vh; } /* корень страницы внутри iframe: без внешних отступов */
.cx-frame > .cx-frame__body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- Адаптив шапки ---------- */
@media (max-width: 1180px) {
  .cx-shell { gap: 12px; padding-left: 20px; }
  .cx-shell__tab { padding: 0 12px; }
  .cx-shell__tab .cx-shell__label { display: none; }
  .cx-shell__tab:has(svg) { width: var(--cx-h-lg); padding: 0; justify-content: center; }
  .cx-shell__tab:has(svg) .cx-badge { position: absolute; top: -2px; right: -4px; }
  .cx-shell__search { width: 180px; }
  .cx-shell--compact .cx-shell__tab:has(svg) { width: auto; padding: 0 12px; }
  .cx-shell--compact .cx-shell__tab .cx-shell__label { display: inline; }
  .cx-shell--compact .cx-shell__tab:has(svg) .cx-badge { position: static; }
}
@media (max-width: 900px) {
  .cx-shell { height: 56px; border-radius: 0 0 22px 22px; padding: 0 8px 0 16px; gap: 8px; }
  .cx-shell__icon, .cx-shell .cx-avatar { width: 38px; height: 38px; --_s: 38px; }
  .cx-shell__end { gap: 4px; }
  .cx-shell .cx-brand { --_slot: 0; }
  .cx-shell .cx-brand:not(.cx-brand--mark) .cx-brand__logo { display: none; }
  .cx-shell .cx-brand:not(.cx-brand--mark) .cx-brand__mark { display: block; }
  .cx-shell__search { display: none; }
  .cx-shell__end { gap: 6px; }
  .cx-shell__nav { display: none; }
  .cx-shell__burger { display: inline-block; }
  .cx-shell__burger .cx-pop__panel { position: fixed; top: 64px; left: 8px; right: 8px; min-width: 0; }
  .cx-shell__burger .cx-shell__label { display: inline; }
  .cx-switcher { width: min(var(--cx-pop-w-md), calc(100vw - 16px)); }
  .cx-shell .cx-pop__panel.cx-switcher { position: fixed; top: 64px; right: 8px; left: 8px; width: auto; }
  .cx-shell--compact { height: var(--cx-h-header-compact); border-radius: 0; }
}

/* ---------- Иконка ---------- */
.cx-icon { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.cx-icon--sm { width: 16px; height: 16px; } .cx-icon--lg { width: 22px; height: 22px; } .cx-icon--xs { width: 12px; height: 12px; } /* 1.8.3: --xs в ссылке */

/* =====================================================================
   Структура
   ===================================================================== */
/* ---------- KPI-карточка ---------- */
.cx-kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cx-kpi__value { display: flex; align-items: baseline; gap: 10px; font-size: 21px; line-height: 1.3; font-weight: 500; font-variant-numeric: tabular-nums; }
.cx-kpi__value small { font-size: 13px; color: var(--cx-text-2); font-weight: 400; }
.cx-delta { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: var(--cx-r-pill); font: 700 11px/1 var(--cx-font-ui); font-variant-numeric: tabular-nums; background: var(--cx-success-bg); color: var(--cx-success-text); }
.cx-delta::before, .cx-delta--up::before { content: "↑"; }
.cx-delta--down { background: var(--cx-critical-bg); color: var(--cx-critical-text); }
.cx-delta--down::before { content: "↓"; }
.cx-delta--neg { background: var(--cx-critical-bg); color: var(--cx-critical-text); } /* рост плохой метрики */
.cx-delta--pos { background: var(--cx-success-bg); color: var(--cx-success-text); }
.cx-delta--flat { background: var(--cx-surface-soft); color: var(--cx-text-2); }
.cx-delta--flat::before { content: "→"; }
.cx-kpi__spark { height: 32px; margin-top: 4px; }
.cx-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--cx-gap); }

/* ---------- Таблица ---------- */
.cx-table-wrap { overflow-x: auto; margin: 0 calc(var(--cx-card-pad-x) * -1); padding: 0 var(--cx-card-pad-x); }
.cx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.cx-table th { position: sticky; top: 0; z-index: var(--cx-z-sticky); background: var(--cx-surface); text-align: left; white-space: nowrap; height: 36px; padding: 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); border-bottom: 1px solid var(--cx-line); }
.cx-table td { height: 48px; padding: 0 12px; border-bottom: 1px solid var(--cx-line); vertical-align: middle; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-table th:first-child, .cx-table td:first-child { padding-left: 4px; }
.cx-table tr:last-child td { border-bottom: 0; }
.cx-table tbody tr:hover td { background: var(--cx-surface-hover); }
.cx-table tbody tr:has(input[type="checkbox"]:not([role="switch"]):checked) td, .cx-table tbody tr[aria-selected="true"] td { background: var(--cx-surface-accent); }
.cx-table .is-num { text-align: right; white-space: nowrap; }
.cx-table .is-nowrap { white-space: nowrap; }
.cx-table .is-check { width: 34px; padding-right: 0; }
.cx-table .is-actions { width: 1%; white-space: nowrap; text-align: right; }
.cx-table .is-actions > * { opacity: 0; transition: opacity var(--cx-dur-hover) var(--cx-ease); }
.cx-table tr:hover .is-actions > *, .cx-table tr:focus-within .is-actions > * { opacity: 1; }
.cx-table__title { font-weight: 600; }
.cx-table__sub { font-size: 11.5px; color: var(--cx-text-meta); }
.cx-sort { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border-radius: 6px; }
.cx-sort::after { content: ""; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: .3; transition: transform var(--cx-dur-rotate) var(--cx-ease), opacity var(--cx-dur-hover); }
.cx-sort:hover { color: var(--cx-text); }
.cx-sort:hover::after { opacity: .6; }
.cx-sort:focus-visible { box-shadow: var(--cx-focus); }
th[aria-sort="ascending"] .cx-sort, th[aria-sort="descending"] .cx-sort { color: var(--cx-text); }
th[aria-sort="descending"] .cx-sort::after { opacity: 1; }
th[aria-sort="ascending"] .cx-sort::after { opacity: 1; transform: rotate(180deg); }
.cx-table-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cx-table-bar__sel { display: none; align-items: center; gap: 8px; padding: 0 6px 0 14px; height: var(--cx-h-md); border-radius: var(--cx-r-pill); background: var(--cx-fill-strong); color: var(--cx-on-strong); font-size: 12.5px; font-weight: 600; }
.cx-table-bar__sel.is-on { display: inline-flex; }
.cx-table-bar__sel .cx-btn { --_bg: rgba(127,127,127,.18); --_fg: var(--cx-on-strong); }
.cx-table-empty td { height: auto; padding: 40px 12px; text-align: center; }

/* ---------- Пагинация ---------- */
.cx-pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 14px; }
.cx-pager__info { margin-right: auto; font-size: 12px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-pager__btn { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: var(--cx-r-pill); background: none; color: var(--cx-text-2); font: 600 12.5px/1 var(--cx-font-ui); font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: none; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-pager__btn:hover { background: var(--cx-surface-soft); color: var(--cx-text); }
.cx-pager__btn[aria-current="page"] { background: var(--cx-fill-strong); color: var(--cx-on-strong); }
.cx-pager__btn:disabled { opacity: .4; cursor: default; background: none; }
.cx-pager__btn:focus-visible { box-shadow: var(--cx-focus); }

/* ---------- Список строк ---------- */
.cx-list { display: flex; flex-direction: column; }
.cx-row { position: relative; display: flex; align-items: center; gap: 13px; padding: var(--cx-row-pad) 12px; margin: 0 -12px; border-radius: 14px; color: inherit; text-decoration: none; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-row + .cx-row::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: var(--cx-line); transition: opacity var(--cx-dur-hover); }
.cx-row:hover, a.cx-row:focus-visible { background: var(--cx-surface-hover); }
.cx-row:hover::before, .cx-row:hover + .cx-row::before { opacity: 0; }
a.cx-row:focus-visible { box-shadow: var(--cx-focus); }
.cx-row__tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--cx-surface-soft); color: var(--cx-text-2); flex: none; }
.cx-row__tile svg { width: 18px; height: 18px; }
.cx-row__body { flex: 1; min-width: 0; }
.cx-row__title { display: block; font-size: 13px; font-weight: 600; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-row__meta { display: block; font-size: 11.5px; color: var(--cx-text-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-row__end { display: flex; align-items: center; gap: 8px; flex: none; }
.cx-row__actions { display: flex; gap: 4px; opacity: 0; transition: opacity var(--cx-dur-hover) var(--cx-ease); }
.cx-row:hover .cx-row__actions, .cx-row:focus-within .cx-row__actions { opacity: 1; }
@media (hover: none) { .cx-row__actions, .cx-table .is-actions > * { opacity: 1; } }

/* ---------- Табы ---------- */
.cx-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.cx-tabs::-webkit-scrollbar { display: none; }
.cx-tab { display: inline-flex; align-items: center; gap: 7px; height: var(--cx-h-sm); padding: 0 14px; border: 0; border-radius: var(--cx-r-pill); background: none; color: var(--cx-text-2); font: 600 12.5px/1 var(--cx-font-ui); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--cx-dur-hover) var(--cx-ease), color var(--cx-dur-hover) var(--cx-ease); }
.cx-tab:hover { background: var(--cx-surface-soft); color: var(--cx-text); }
.cx-tab[aria-selected="true"], .cx-tab[aria-current="page"] { background: var(--cx-fill-strong); color: var(--cx-on-strong); }
.cx-tab:focus-visible { box-shadow: var(--cx-focus); }
.cx-tab .cx-tab__count { font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; }
.cx-tab:disabled { opacity: .45; cursor: not-allowed; background: none; }
/* подчёркнутые табы внутри карточки */
.cx-tabs--line { gap: 22px; border-bottom: 1px solid var(--cx-line); }
.cx-tabs--line .cx-tab { height: 38px; padding: 0; border-radius: 0; background: none; box-shadow: inset 0 -2px 0 transparent; }
.cx-tabs--line .cx-tab:hover { background: none; }
.cx-tabs--line .cx-tab[aria-selected="true"] { background: none; color: var(--cx-text); box-shadow: inset 0 -2px 0 var(--cx-text); }

/* ---------- Сегмент-контрол ---------- */
.cx-segmented { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 3px; gap: 2px; border-radius: var(--cx-r-pill); background: var(--cx-surface-soft); vertical-align: middle; }
.cx-segmented::-webkit-scrollbar { display: none; }
.cx-segmented > * { flex: none; }
.cx-segmented button, .cx-segmented label, .cx-segmented a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border: 0; border-radius: var(--cx-r-pill); background: none; color: var(--cx-text-2); font: 600 12.5px/1 var(--cx-font-ui); cursor: pointer; white-space: nowrap; transition: background var(--cx-dur-sidebar) var(--cx-ease), color var(--cx-dur-sidebar) var(--cx-ease), box-shadow var(--cx-dur-sidebar); }
.cx-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.cx-segmented button:hover, .cx-segmented label:hover, .cx-segmented a:hover { color: var(--cx-text); }
.cx-segmented [aria-pressed="true"], .cx-segmented label:has(input:checked) { background: var(--cx-surface); color: var(--cx-text); box-shadow: 0 1px 2px rgba(23,24,28,.08), var(--cx-ring-soft); }
.cx-segmented button:focus-visible, .cx-segmented label:has(input:focus-visible) { box-shadow: var(--cx-focus); }

/* ---------- Сайдбар раздела ---------- */
.cx-side { display: flex; flex-direction: column; gap: 2px; width: var(--cx-side-w); padding: 14px 10px; border-radius: var(--cx-r-modal); background: var(--cx-surface); flex: none; }
.cx-side__group { padding: 14px 12px 6px; }
.cx-side__item { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 12px; border-radius: var(--cx-r-lg); color: var(--cx-text-2); font: 600 13px/1 var(--cx-font-ui); text-decoration: none; transition: background var(--cx-dur-hover) var(--cx-ease), color var(--cx-dur-hover); white-space: nowrap; }
.cx-side__item svg { width: 18px; height: 18px; flex: none; }
.cx-side__item:hover { background: var(--cx-surface-soft); color: var(--cx-text); }
.cx-side__item[aria-current="page"] { background: var(--cx-surface-soft); color: var(--cx-text); box-shadow: inset 3px 0 0 var(--cx-accent-deep); }
.cx-side__item .cx-badge { margin-left: auto; }
.cx-side__item:focus-visible { box-shadow: var(--cx-focus); }
.cx-side--rail { width: var(--cx-side-rail); align-items: center; }
.cx-side--rail .cx-side__item { width: 44px; padding: 0; justify-content: center; }
.cx-side--rail .cx-side__label, .cx-side--rail .cx-side__group { display: none; }

/* ---------- Хлебные крошки ---------- */
.cx-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--cx-text-meta); }
.cx-crumbs a { color: var(--cx-text-meta); text-decoration: none; border-radius: 4px; font-weight: 600; }
.cx-crumbs a:hover { color: var(--cx-text); }
.cx-crumbs > * + *::before { content: "/"; margin-right: 6px; color: var(--cx-text-ghost); }
.cx-crumbs [aria-current="page"] { color: var(--cx-text); font-weight: 600; }
.cx-back { display: inline-flex; align-items: center; gap: 6px; color: var(--cx-text-2); font: 600 12.5px var(--cx-font-ui); text-decoration: none; }
.cx-back::before { content: "←"; }
.cx-back:hover { color: var(--cx-text); }

/* =====================================================================
   Формы: combobox, дата, загрузка
   ===================================================================== */
.cx-combo { position: relative; }
.cx-combo__panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: var(--cx-z-dropdown); max-height: 280px; overflow: auto; padding: 6px; border-radius: 16px; background: var(--cx-surface); box-shadow: var(--cx-shadow-drop); animation: cx-pop-in var(--cx-dur-in) var(--cx-ease); }
.cx-combo__panel[hidden] { display: none; }
.cx-combo__search { position: sticky; top: -6px; margin: -6px -6px 6px; padding: 8px; background: var(--cx-surface); border-bottom: 1px solid var(--cx-line); }
.cx-option { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-option:hover, .cx-option.is-active { background: var(--cx-surface-hover); }
.cx-option[aria-selected="true"] { background: var(--cx-surface-accent); }
.cx-option[aria-selected="true"]::after { content: ""; margin-left: auto; width: 9px; height: 5px; border-left: 2px solid var(--cx-text); border-bottom: 2px solid var(--cx-text); transform: translateY(-2px) rotate(-45deg); }
.cx-option[aria-disabled="true"] { color: var(--cx-text-4); pointer-events: none; }
.cx-option mark { background: none; color: inherit; box-shadow: inset 0 -6px 0 rgba(221,246,74,.65); }
.cx-option__meta { font-weight: 400; font-size: 11.5px; color: var(--cx-text-meta); }
.cx-combo__empty { padding: 14px 12px; font-size: 12.5px; color: var(--cx-text-meta); text-align: center; }
.cx-combo__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: var(--cx-h-input); padding: 6px 38px 6px 8px; border-radius: var(--cx-r-input); background: var(--cx-surface); box-shadow: var(--cx-ring); cursor: text; }
.cx-combo__chips:focus-within { box-shadow: var(--cx-focus); }
.cx-combo__chips input { flex: 1; min-width: 80px; border: 0; background: none; height: 24px; font: 400 13.5px var(--cx-font-ui); color: var(--cx-text); outline: none; }

/* календарь */
.cx-cal { width: 280px; padding: 14px; border-radius: 20px; background: var(--cx-surface); box-shadow: var(--cx-shadow-drop); }
.cx-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.cx-cal__head button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--cx-text-2); cursor: pointer; font-size: 14px; }
.cx-cal__head button:hover { background: var(--cx-surface-soft); color: var(--cx-text); }
.cx-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; text-align: center; font-variant-numeric: tabular-nums; }
.cx-cal__dow { font-size: 10.5px; font-weight: 600; color: var(--cx-text-label); text-transform: uppercase; height: 26px; display: grid; place-items: center; }
.cx-cal__day { position: relative; height: 34px; border: 0; background: none; color: var(--cx-text); font: 600 12.5px var(--cx-font-ui); cursor: pointer; z-index: 0; }
.cx-cal__day::before { content: ""; position: absolute; top: 50%; left: 50%; width: min(32px, calc(100% - 2px)); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1; transition: background var(--cx-dur-hover) var(--cx-ease); } /* 1.10.4: круг, а не овал, в узкой ячейке (.cx-cal--fluid в колонке календаря) */
.cx-cal__day:hover::before { background: var(--cx-surface-soft); }
.cx-cal__day.is-out { color: var(--cx-text-4); }
.cx-cal__day.is-today::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--cx-accent-deep); }
.cx-cal__day.is-range { background: var(--cx-surface-accent); }
.cx-cal__day.is-start, .cx-cal__day.is-end, .cx-cal__day[aria-selected="true"] { color: var(--cx-on-strong); }
.cx-cal__day.is-start::before, .cx-cal__day.is-end::before, .cx-cal__day[aria-selected="true"]::before { background: var(--cx-fill-strong); }
.cx-cal__day.is-start { background: linear-gradient(90deg, transparent 50%, var(--cx-surface-accent) 50%); }
.cx-cal__day.is-end { background: linear-gradient(90deg, var(--cx-surface-accent) 50%, transparent 50%); }
.cx-cal__day:disabled { color: var(--cx-text-ghost); cursor: not-allowed; }
.cx-cal__day:focus-visible { outline: none; }
.cx-cal__day:focus-visible::before { box-shadow: var(--cx-focus); }
.cx-cal__foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cx-line); }
.cx-date { position: relative; display: inline-flex; align-items: center; gap: 8px; height: var(--cx-h-input); padding: 0 14px; border: 0; border-radius: var(--cx-r-input); background: var(--cx-surface); box-shadow: var(--cx-ring); color: var(--cx-text); font: 600 13px var(--cx-font-ui); font-variant-numeric: tabular-nums; cursor: pointer; }
.cx-date svg { width: 16px; height: 16px; color: var(--cx-text-2); }
.cx-date:hover { box-shadow: inset 0 0 0 1px var(--cx-text-4); }
.cx-date:focus-visible, .cx-pop[open] > .cx-date { box-shadow: var(--cx-focus); }
.cx-input[type="date"], .cx-input[type="datetime-local"], .cx-input[type="time"] { font-variant-numeric: tabular-nums; }
[data-theme="dark"] .cx-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* загрузка файла */
.cx-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 140px; padding: 22px; border-radius: 18px; background: var(--cx-surface-soft); text-align: center; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease), box-shadow var(--cx-dur-hover) var(--cx-ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' rx='18' ry='18' stroke='%238B8F84' stroke-width='1.5' stroke-dasharray='6 6'/%3E%3C/svg%3E"); }
.cx-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cx-drop__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cx-surface); color: var(--cx-text); }
.cx-drop__icon svg { width: 18px; height: 18px; }
.cx-drop__title { font-size: 13px; font-weight: 600; }
.cx-drop__hint { font-size: 11.5px; color: var(--cx-text-meta); }
.cx-drop:hover, .cx-drop.is-over { background-color: var(--cx-surface-accent); }
.cx-drop.is-over { box-shadow: inset 0 0 0 2px var(--cx-accent-deep); background-image: none; }
.cx-drop:focus-within { box-shadow: var(--cx-focus); }
.cx-drop.is-error { background-color: var(--cx-critical-bg); }
.cx-drop.is-disabled { opacity: .5; pointer-events: none; }
.cx-file { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--cx-surface); box-shadow: var(--cx-ring-soft); }
.cx-file__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--cx-surface-soft); font: 700 9.5px/1 var(--cx-font-ui); letter-spacing: .04em; color: var(--cx-text-2); text-transform: uppercase; flex: none; }
.cx-file__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cx-file__name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-file__meta { font-size: 11px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-file .cx-progress { height: 4px; }
.cx-file.is-error .cx-file__icon { background: var(--cx-critical-bg); color: var(--cx-critical-text); }
.cx-file.is-error .cx-file__meta { color: var(--cx-critical-text); font-weight: 600; }
.cx-files { display: flex; flex-direction: column; gap: 8px; }

/* =====================================================================
   Оверлеи: модалка, drawer, поповер, тултип, тост, подтверждение
   ===================================================================== */
/* <dialog class="cx-modal"> — открывать dialog.showModal() */
.cx-modal, .cx-drawer { border: 0; padding: 0; color: var(--cx-text); background: var(--cx-surface); box-shadow: var(--cx-shadow-modal); font-family: var(--cx-font-ui); max-width: calc(100vw - 32px); }
.cx-modal { --w: 480px; width: var(--w); border-radius: var(--cx-r-modal); } /* --w — своя ширина окна (560, 640, 760) */
.cx-modal--lg { width: 720px; }
.cx-modal::backdrop, .cx-drawer::backdrop { background: var(--cx-scrim); }
.cx-modal[open] { animation: cx-modal-in var(--cx-dur-enter) var(--cx-ease-out); }
.cx-modal[open]::backdrop, .cx-drawer[open]::backdrop { animation: cx-fade var(--cx-dur-enter) var(--cx-ease); }
.cx-modal__head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 0; }
.cx-modal__title { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.cx-modal__sub { font-size: 12.5px; color: var(--cx-text-meta); margin-top: 2px; }
.cx-modal__close { margin-left: auto; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--cx-surface-soft); color: var(--cx-text-2); cursor: pointer; display: grid; place-items: center; transition: background var(--cx-dur-hover); }
.cx-modal__close:hover { background: var(--cx-surface-pressed); color: var(--cx-text); }
.cx-modal__close:focus-visible { box-shadow: var(--cx-focus); }
.cx-modal__close::before { content: "✕"; font-size: 12px; }
.cx-modal__body { padding: 16px 24px; font-size: 13px; line-height: 1.6; }
.cx-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 24px 22px; }
.cx-modal--confirm { width: 400px; }
.cx-modal--confirm .cx-modal__body { color: var(--cx-text-2); padding-top: 8px; }
.cx-modal--confirm .cx-modal__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cx-critical-bg); color: var(--cx-critical-text); font-weight: 800; flex: none; }
.cx-drawer { position: fixed; inset: 0 0 0 auto; height: 100vh; max-height: 100vh; --w: 460px; width: var(--w); margin: 0; border-radius: var(--cx-r-modal) 0 0 var(--cx-r-modal); display: none; flex-direction: column; }
.cx-drawer[open] { display: flex; animation: cx-drawer-in var(--cx-dur-enter) var(--cx-ease-out); }
.cx-drawer > .cx-modal__body { flex: 1; overflow: auto; } /* 1.8.5: «>» — правила окна справа не протекают в окна внутри него */
.cx-drawer > .cx-modal__foot { border-top: 1px solid var(--cx-line); padding-top: 14px; }
.cx-drawer--lg { width: 640px; }
@keyframes cx-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cx-drawer-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cx-fade { from { opacity: 0; } }
@media (max-width: 600px) {
  .cx-modal { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--cx-r-modal) var(--cx-r-modal) 0 0; }
  .cx-drawer { width: 100vw; border-radius: 0; }
}

/* поповер: .cx-pop + .cx-pop__panel.cx-popover */
.cx-popover { width: 300px; padding: 16px 18px; border-radius: 18px; }
.cx-popover__title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.cx-popover__text { font-size: 12.5px; color: var(--cx-text-2); line-height: 1.55; }
.cx-popover__foot { display: flex; gap: 8px; margin-top: 12px; }

/* тултип: <span class="cx-tip" data-tip="Текст">…</span> */
.cx-tip { position: relative; display: inline-flex; }
.cx-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: var(--cx-z-tooltip); width: max-content; max-width: 240px; padding: 6px 10px; border-radius: 10px; background: var(--cx-surface-inverse); color: var(--cx-text-inverse); font: 600 11px/1.45 var(--cx-font-ui); text-align: center; white-space: normal; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity var(--cx-dur-tooltip) var(--cx-ease), transform var(--cx-dur-tooltip) var(--cx-ease); }
.cx-tip:hover::after, .cx-tip:focus-visible::after, .cx-tip:has(:focus-visible)::after, .cx-tip.is-open::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 300ms; } /* 1.11.4: тултип по фокусу — только клавиатурному */
.cx-tip.is-open::after { transition-delay: 0s; }
.cx-tip--bottom::after { bottom: auto; top: calc(100% + 8px); }
.cx-tip--end::after { left: auto; right: 0; transform: translateY(4px); }
.cx-tip--end:hover::after, .cx-tip--end:focus-visible::after, .cx-tip--end:has(:focus-visible)::after, .cx-tip--end.is-open::after { transform: none; }
.cx-tip--start::after { left: 0; transform: translateY(4px); }
.cx-tip--start:hover::after, .cx-tip--start:focus-visible::after, .cx-tip--start:has(:focus-visible)::after, .cx-tip--start.is-open::after { transform: none; }

/* тост: <div class="cx-toasts"><div class="cx-toast" role="status"><span class="cx-toast__text">…</span> button.cx-toast__action? button.cx-toast__close</div></div> */
.cx-toasts { position: fixed; bottom: 20px; left: 16px; right: 16px; z-index: var(--cx-z-toast); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.cx-toast { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; max-width: min(480px, calc(100vw - 32px)); padding: 8px 8px 8px 16px; border-radius: var(--cx-r-pill); background: var(--cx-surface-inverse); color: var(--cx-text-inverse); box-shadow: var(--cx-shadow-toast); font-size: 12.5px; font-weight: 600; pointer-events: auto; animation: cx-fade-up var(--cx-dur-enter) var(--cx-ease); }
.cx-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--_c, var(--cx-accent)); flex: none; }
.cx-toast--error { --_c: var(--cx-critical); } .cx-toast--warn { --_c: var(--cx-warn); } .cx-toast--success { --_c: #3cc68c; }
.cx-toast__action { all: unset; cursor: pointer; padding: 0 12px; height: 30px; display: inline-flex; align-items: center; border-radius: var(--cx-r-pill); background: rgba(255,255,255,.1); color: var(--cx-accent); font-weight: 700; }
.cx-toast__action:hover { background: rgba(255,255,255,.16); }
.cx-toast__close { all: unset; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--cx-text-inverse-2); }
.cx-toast__close::before { content: "✕"; font-size: 11px; }
.cx-toast__close:hover { background: rgba(255,255,255,.1); color: #fff; }
/* длинный текст переносится в две-три строки, а не сжимает тост в столбик; над нижним меню телефона */
.cx-toast__text { min-width: 0; flex: 1 1 auto; line-height: 1.35; }
.cx-toast__action, .cx-toast__close { flex: none; }
@media (max-width: 900px) {
  .cx-toast { width: 100%; max-width: 480px; border-radius: var(--cx-r-lg); }
  .cx-app:has(.cx-tabbar) .cx-toasts { bottom: calc(76px + 12px + env(safe-area-inset-bottom)); }
  .cx-app:has(.cx-tabbar--float) .cx-toasts { bottom: calc(76px + var(--cx-space-3) * 2 + env(safe-area-inset-bottom)); }
}

/* баннер */
.cx-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--_bg, var(--cx-info-bg)); color: var(--cx-text); font-size: 12.5px; line-height: 1.55; }
.cx-banner__icon { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--_c, var(--cx-info)); color: var(--_ic, #fff); font: 800 11px/1 var(--cx-font-ui); flex: none; }
.cx-banner__title { font-weight: 700; font-size: 13px; }
.cx-banner__end { margin-left: auto; display: flex; gap: 6px; flex: none; }
.cx-banner--warn { --_bg: var(--cx-warn-bg); --_c: var(--cx-warn); } .cx-banner--critical { --_bg: var(--cx-critical-bg); --_c: var(--cx-critical); }
.cx-banner--success { --_bg: var(--cx-success-bg); --_c: var(--cx-success); } .cx-banner--accent { --_bg: var(--cx-surface-accent); --_c: var(--cx-fill-strong); --_ic: var(--cx-on-strong); }

/* =====================================================================
   Состояния экрана: пусто, ошибка, 404, нет доступа
   ===================================================================== */
.cx-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 24px; text-align: center; }
.cx-state__art { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--cx-surface-soft); color: var(--cx-text-2); margin-bottom: 6px; }
.cx-state__art svg { width: 26px; height: 26px; }
.cx-state__title { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.cx-state__text { max-width: 380px; font-size: 13px; color: var(--cx-text-2); line-height: 1.6; }
.cx-state__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.cx-state--compact { padding: 28px 16px; gap: 6px; }
.cx-state--compact .cx-state__art { width: 44px; height: 44px; border-radius: 14px; }
.cx-state--error .cx-state__art { background: var(--cx-critical-bg); color: var(--cx-critical-text); }
.cx-state--locked .cx-state__art { background: var(--cx-surface-inverse); color: var(--cx-accent); }
/* полноэкранная страница 404 / нет доступа */
.cx-page-state { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 420px; padding: 56px 56px; border-radius: var(--cx-r-card); background: var(--cx-surface-inverse); color: var(--cx-text-inverse); }
.cx-page-state__code { font: 600 96px/1 var(--cx-font-display); letter-spacing: -.02em; color: var(--cx-accent); }
.cx-page-state__title { margin-top: 18px; font-size: 24px; font-weight: 600; line-height: 1.25; }
.cx-page-state__text { margin-top: 8px; max-width: 420px; font-size: 13.5px; color: var(--cx-text-inverse-2); line-height: 1.6; }
.cx-page-state__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.cx-page-state > :not(.cx-page-state__mark) { position: relative; z-index: 1; }
.cx-page-state__title, .cx-page-state__text { max-width: min(420px, 62%); }
.cx-page-state__mark { position: absolute; right: -70px; bottom: -90px; width: 300px; height: 310px; color: var(--cx-surface-inverse-2); pointer-events: none; --cx-brand-mark: currentColor; }
.cx-page-state .cx-btn--secondary { --_bg: transparent; --_fg: #fff; --_ring: inset 0 0 0 1px rgba(255,255,255,.22); }
.cx-page-state .cx-btn--secondary:hover { background: rgba(255,255,255,.08); }
@media (max-width: 600px) { .cx-page-state { padding: 36px 24px 160px; } .cx-page-state__code { font-size: 64px; } .cx-page-state__title, .cx-page-state__text { max-width: none; } .cx-page-state__mark { width: 200px; height: 207px; right: -50px; bottom: -70px; } }

/* =====================================================================
   Данные: графики (SVG/HTML), воронка
   ===================================================================== */
.cx-chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--cx-font-ui); }
.cx-chart .grid { stroke: var(--cx-line); stroke-width: 1; }
.cx-chart .axis { fill: var(--cx-text-meta); font-size: 11px; font-variant-numeric: tabular-nums; }
.cx-chart .line { fill: none; stroke: var(--cx-fill-strong); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cx-chart .line--2 { stroke: var(--cx-accent-deep); stroke-dasharray: 0; }
.cx-chart .line--prev { stroke: var(--cx-text-4); stroke-dasharray: 4 4; stroke-width: 1.5; }
.cx-chart .area { fill: var(--cx-accent); opacity: .22; }
.cx-chart .dot { fill: var(--cx-surface); stroke: var(--cx-fill-strong); stroke-width: 2; }
.cx-chart .bar { fill: var(--cx-chart-bar); transition: fill var(--cx-dur-hover); }
.cx-chart .bar:hover { fill: var(--cx-chart-bar-hover); }
.cx-chart .bar--accent { fill: var(--cx-accent); }
.cx-chart .bar--strong { fill: var(--cx-fill-strong); }
.cx-chart .value { fill: var(--cx-text); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cx-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--cx-text-meta); }
.cx-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--_c); }
.cx-funnel { display: flex; flex-direction: column; gap: 6px; }
.cx-funnel__step { display: grid; grid-template-columns: 140px 1fr 90px; align-items: center; gap: 12px; font-size: 12.5px; }
.cx-funnel__label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-funnel__bar { height: 30px; border-radius: 9px; background: var(--cx-surface-soft); overflow: hidden; }
.cx-funnel__bar i { display: flex; align-items: center; height: 100%; width: var(--v); padding-left: 10px; border-radius: 9px; background: var(--cx-fill-strong); color: var(--cx-on-strong); font-style: normal; font-weight: 700; font-size: 11.5px; font-variant-numeric: tabular-nums; min-width: 34px; }
.cx-funnel__step:first-child .cx-funnel__bar i { background: var(--cx-accent); color: var(--cx-on-accent); }
.cx-funnel__conv { text-align: right; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; font-size: 11.5px; }
@media (max-width: 600px) { .cx-funnel__step { grid-template-columns: 90px 1fr 60px; } }

/* =====================================================================
   Каркасы экранов
   ===================================================================== */
.cx-page { display: flex; flex-direction: column; gap: var(--cx-gap); padding: var(--cx-gap); min-height: 100vh; }
.cx-page__head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 14px 8px 2px; }
.cx-page__title { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.cx-page__sub { font-size: 13px; color: var(--cx-text-2); margin-top: 2px; }
.cx-page__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.cx-layout { display: flex; gap: var(--cx-gap); align-items: flex-start; }
.cx-layout > .cx-side { position: sticky; top: calc(var(--cx-h-header) + var(--cx-gap) * 2); }
.cx-layout__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--cx-gap); }
.cx-cols { display: grid; gap: var(--cx-gap); grid-template-columns: var(--tpl, repeat(var(--cols, 2), minmax(0, 1fr))); } /* 1.9.2: --tpl — свой шаблон колонок */
.cx-cols--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cx-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--cx-split-detail-w); gap: var(--cx-gap); align-items: start; }
.cx-split__detail { position: sticky; top: calc(var(--cx-h-header) + var(--cx-gap) * 2); max-height: calc(100vh - var(--cx-h-header) - var(--cx-gap) * 3); overflow: auto; border-radius: var(--cx-r-card); background: var(--cx-surface); display: flex; flex-direction: column; }
@media (max-width: 1180px) {
  .cx-layout > .cx-side { width: var(--cx-side-rail); align-items: center; }
  .cx-layout > .cx-side .cx-side__item { width: 44px; padding: 0; justify-content: center; }
  .cx-layout > .cx-side .cx-side__label, .cx-layout > .cx-side .cx-side__group, .cx-layout > .cx-side .cx-badge { display: none; }
  .cx-split { grid-template-columns: minmax(0, 1fr) min(var(--cx-split-detail-w), 360px); }
}
@media (max-width: 900px) {
  .cx-page { padding: 0 8px 8px; }
  .cx-page__head { padding: 10px 6px 0; }
  .cx-page__title { font-size: 20px; }
  .cx-layout { flex-direction: column; align-items: stretch; }
  .cx-layout > .cx-side { position: static; width: auto; flex-direction: row; overflow-x: auto; padding: 6px; border-radius: 18px; }
  .cx-layout > .cx-side .cx-side__item { width: auto; padding: 0 12px; }
  .cx-layout > .cx-side .cx-side__label { display: inline; }
  .cx-cols, .cx-cols--2-1, .cx-split { grid-template-columns: minmax(0, 1fr); }
  .cx-split__detail { position: static; max-height: none; }
}

/* ---------- Вход Corix ---------- */
.cx-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cx-gap); min-height: 100vh; padding: var(--cx-gap); }
.cx-auth__brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 44px; border-radius: 28px; background: #17181c; color: #fff; --cx-brand-mark: var(--cx-accent); }
.cx-auth__brand .cx-brand { color: #fff; }
.cx-auth__claim { position: relative; z-index: 1; max-width: 420px; }
.cx-auth__claim b { display: block; font: 600 30px/1.2 var(--cx-font-display); letter-spacing: -.01em; }
.cx-auth__claim span { display: block; margin-top: 12px; color: #b9bbb1; font-size: 13.5px; line-height: 1.6; }
.cx-auth__products { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; max-width: 440px; }
.cx-auth__products span { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255,255,255,.07); font: 600 10.5px/1 var(--cx-font-display); letter-spacing: .05em; text-transform: uppercase; }
.cx-auth__mark { position: absolute; right: -150px; top: -130px; width: 440px; height: 455px; color: var(--cx-accent); pointer-events: none; --cx-brand-mark: currentColor; }
.cx-auth__main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 32px 16px; }
.cx-auth__card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.cx-auth__title { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.cx-auth__sub { font-size: 13px; color: var(--cx-text-2); margin-top: -8px; }
.cx-auth__or { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--cx-text-meta); }
.cx-auth__or::before, .cx-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--cx-line); }
.cx-auth__foot { font-size: 12px; color: var(--cx-text-meta); text-align: center; }
.cx-auth__legal { margin-top: auto; padding-top: 24px; font-size: 11.5px; color: var(--cx-text-meta); text-align: center; }
@media (max-width: 900px) {
  .cx-auth { grid-template-columns: 1fr; padding: 8px; }
  .cx-auth__brand { min-height: 0; padding: 22px 22px; border-radius: 22px; gap: 18px; }
  .cx-auth__claim b { font-size: 20px; } .cx-auth__claim span, .cx-auth__products { display: none; }
  .cx-auth__mark { width: 150px; height: 155px; right: -45px; top: -55px; }
  .cx-auth__claim { max-width: 72%; }
}
@media (max-width: 600px) {
  /* знак уходит вниз-вправо, чтобы не перекрывать бренд-блок «ИМЯ | corix» */
  .cx-auth__brand { padding-right: 22px; padding-bottom: 28px; }
  .cx-auth__mark { top: auto; bottom: -52px; right: -44px; width: 112px; height: 116px; }
  .cx-auth__claim { max-width: calc(100% - 56px); }
  .cx-auth__claim b { font-size: 17px; }
}

/* ---------- Портал corix.pro ---------- */
.cx-hero { position: relative; overflow: hidden; padding: 34px 36px; border-radius: var(--cx-r-card); background: #17181c; color: #fff; --cx-brand-mark: currentColor; }
.cx-hero > :not(.cx-hero__mark) { position: relative; z-index: 1; }
.cx-hero__title { font: 600 26px/1.2 var(--cx-font-display); letter-spacing: -.01em; max-width: 560px; }
.cx-hero__text { margin-top: 10px; max-width: 520px; color: #b9bbb1; font-size: 13.5px; line-height: 1.6; }
.cx-hero__mark { position: absolute; right: -60px; top: -80px; width: 300px; height: 310px; color: var(--cx-accent); pointer-events: none; }
@media (max-width: 900px) { .cx-hero { padding: 24px 22px; } .cx-hero__title { font-size: 20px; max-width: 70%; } .cx-hero__text { max-width: 74%; } .cx-hero__mark { width: 150px; height: 155px; right: -45px; top: -50px; } }
.cx-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--cx-gap); }
.cx-product { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 176px; padding: 22px 22px 18px; border-radius: var(--cx-r-card); background: var(--cx-surface); color: var(--cx-text); text-decoration: none; transition: box-shadow var(--cx-dur-hover) var(--cx-ease), transform var(--cx-dur-hover) var(--cx-ease); }
.cx-product:hover { box-shadow: var(--cx-shadow-menu); transform: translateY(-1px); }
.cx-product:focus-visible { box-shadow: var(--cx-focus); }
.cx-product__top { display: flex; align-items: center; gap: 12px; }
.cx-product__name { font: 600 13.5px/1 var(--cx-font-display); letter-spacing: .05em; text-transform: uppercase; }
.cx-product__text { font-size: 12.5px; color: var(--cx-text-2); line-height: 1.55; }
.cx-product__foot { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--cx-text-meta); }
.cx-product__foot .cx-btn { margin-left: auto; }
.cx-product.is-locked { background: transparent; box-shadow: inset 0 0 0 1px var(--cx-border); }
.cx-product.is-locked .cx-switcher__tile { background: var(--cx-surface-soft); color: var(--cx-text-3); }
.cx-product.is-locked .cx-switcher__tile svg { color: var(--cx-text-3); }

@media (max-width: 900px) { .cx-table-wrap { margin: 0 -18px; padding: 0 18px; } .cx-card--tight .cx-table-wrap { margin: 0 -20px; padding: 0 20px; } }

/* =====================================================================
   v1.1 — дополнения по запросам продуктов (Медицина)
   ===================================================================== */
/* статус и легенда */
.cx-status--info { --_c: var(--cx-info); }
.cx-legend__dot--success { --_c: var(--cx-success); } .cx-legend__dot--warn { --_c: var(--cx-warn); } .cx-legend__dot--critical { --_c: var(--cx-critical); }
.cx-legend__dot--info { --_c: var(--cx-info); } .cx-legend__dot--accent { --_c: var(--cx-accent-deep); } .cx-legend__dot--strong { --_c: var(--cx-fill-strong); }
.cx-legend__dot--muted { --_c: var(--cx-chart-bar); }
.cx-legend__dot--outline { --_c: transparent; box-shadow: inset 0 0 0 1.5px var(--cx-text-3); }

/* список: выбранная строка и тон плитки */
.cx-row[aria-current="true"], .cx-row[aria-current="page"], .cx-row[aria-selected="true"] { background: var(--cx-surface-accent); }
.cx-row[aria-current="true"]::before, .cx-row[aria-current="page"]::before, .cx-row[aria-selected="true"]::before,
.cx-row[aria-current="true"] + .cx-row::before, .cx-row[aria-current="page"] + .cx-row::before, .cx-row[aria-selected="true"] + .cx-row::before { opacity: 0; }
.cx-row__tile--success { background: var(--cx-success-bg); color: var(--cx-success-text); }
.cx-row__tile--warn { background: var(--cx-warn-bg); color: var(--cx-warn-text); }
.cx-row__tile--critical { background: var(--cx-critical-bg); color: var(--cx-critical-text); }
.cx-row__tile--accent { background: var(--cx-accent); color: var(--cx-on-accent); }
.cx-row__tile--strong { background: var(--cx-fill-strong); color: var(--cx-on-strong); }

/* меню: пункт в две строки */
.cx-menu__item--multi { white-space: normal; align-items: flex-start; padding-top: 9px; padding-bottom: 9px; line-height: 1.4; }
.cx-menu__item--multi svg { margin-top: 1px; }
.cx-menu__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cx-menu__sub { display: block; font-weight: 400; font-size: 11.5px; line-height: 1.45; color: var(--cx-text-meta); }

/* сегмент: счётчик */
.cx-segmented__count { font-size: 11px; font-weight: 600; color: var(--cx-text-3); font-variant-numeric: tabular-nums; }
.cx-segmented [aria-pressed="true"] .cx-segmented__count, .cx-segmented label:has(input:checked) .cx-segmented__count { color: var(--cx-text-meta); }

/* ячейка «аватар + имя + подпись» (таблица, список, карточка) */
.cx-person { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; vertical-align: middle; }
.cx-person > .cx-avatar { flex: none; }
.cx-person__body { display: flex; flex-direction: column; min-width: 0; }
.cx-person__name { font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-person__sub { font-size: 11.5px; line-height: 1.45; color: var(--cx-text-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* крупный одноразовый код (Mulish, не Unbounded) */
.cx-code { display: flex; align-items: center; gap: 12px; font: 600 30px/1.1 var(--cx-font-ui); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--cx-text); }
.cx-code--lg { font-size: 40px; }

/* combobox: встроенный список без всплытия */
.cx-combo__panel--static { position: static; max-height: 260px; box-shadow: var(--cx-ring-soft); animation: none; }

/* textarea с автовысотой: field-sizing там, где поддерживается; иначе cx.js по [data-cx-autosize] */
.cx-textarea--auto { resize: none; overflow: hidden; field-sizing: content; min-height: 60px; }

/* строка настройки: заголовок + пояснение + контрол справа */
.cx-setting { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--cx-line); }
.cx-setting:first-child { border-top: 0; padding-top: 0; }
.cx-setting__body { flex: 1; min-width: 0; }
.cx-setting__title { font-size: 13px; font-weight: 600; line-height: 1.45; }
.cx-setting__hint { font-size: 12px; line-height: 1.5; color: var(--cx-text-meta); margin-top: 2px; }
.cx-setting__control { flex: none; display: flex; align-items: center; gap: 8px; }
@media (max-width: 600px) { .cx-setting { flex-wrap: wrap; } .cx-setting__control { width: 100%; } .cx-setting__control:has(.cx-switch) { width: auto; } }

/* выбор карточкой: <label class="cx-choice"><input type="radio" name="…"> <span class="cx-choice__body">…</span></label> */
.cx-choice { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease), box-shadow var(--cx-dur-hover) var(--cx-ease); }
.cx-choice input { appearance: none; -webkit-appearance: none; margin: 2px 0 0; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--cx-surface); box-shadow: inset 0 0 0 1.5px var(--cx-text-4); display: grid; place-items: center; cursor: pointer; transition: background var(--cx-dur-sidebar), box-shadow var(--cx-dur-sidebar); }
.cx-choice input[type="checkbox"] { border-radius: var(--cx-r-check); }
.cx-choice input::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cx-surface); transform: scale(0); transition: transform var(--cx-dur-sidebar) var(--cx-ease); }
.cx-choice input:checked { background: var(--cx-fill-strong); box-shadow: none; }
.cx-choice input:checked::after { transform: scale(1); }
.cx-choice:hover { background: var(--cx-surface-pressed); }
.cx-choice:has(input:checked) { background: var(--cx-surface-accent); box-shadow: inset 0 0 0 1.5px var(--cx-accent-deep); }
.cx-choice:has(input:focus-visible) { box-shadow: var(--cx-focus); }
.cx-choice:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.cx-choice__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cx-choice__title { font-size: 13px; font-weight: 600; line-height: 1.4; }
.cx-choice__text { font-size: 12px; line-height: 1.5; color: var(--cx-text-meta); }
.cx-choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* строка критерия: подпись · полоса · балл */
.cx-crit { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 48px; align-items: center; gap: 12px; padding: 7px 0; font-size: 12.5px; }
.cx-crit__label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-crit__score { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cx-crit .cx-progress > i { background: var(--cx-fill-strong); }
.cx-crit--critical .cx-progress > i { background: var(--cx-critical); }
.cx-crit--critical .cx-crit__score { color: var(--cx-critical-text); }
.cx-crit--accent .cx-progress > i { background: var(--cx-accent-deep); }
@media (max-width: 600px) { .cx-crit { grid-template-columns: minmax(0, 1fr) 48px; row-gap: 6px; } .cx-crit__label { white-space: normal; } .cx-crit .cx-progress { grid-column: 1 / -1; grid-row: 2; } }

/* индикатор уровня сигнала: <span class="cx-meter" style="--value:62%"><i></i></span> */
.cx-meter { position: relative; display: block; width: 100%; min-width: var(--cx-w-xs); height: 6px; border-radius: var(--cx-r-pill); overflow: hidden;
  background: linear-gradient(90deg, var(--cx-track) 0 30%, color-mix(in srgb, var(--cx-success) 22%, var(--cx-track)) 30% 75%, color-mix(in srgb, var(--cx-warn) 28%, var(--cx-track)) 75% 100%); }
.cx-meter > i { position: absolute; inset: 0 auto 0 0; width: var(--value, 0%); border-radius: inherit; background: var(--cx-text-3); transition: width var(--cx-dur-hover) linear; }
.cx-meter[data-zone="ok"] > i { background: var(--cx-success); } .cx-meter[data-zone="loud"] > i { background: var(--cx-warn); } .cx-meter[data-zone="quiet"] > i { background: var(--cx-text-3); }
.cx-meter--lg { height: 10px; }

/* ползунок: <input type="range" class="cx-range"> (мышь и клавиатура — нативно) */
.cx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; --_p: 50%; }
.cx-range::-webkit-slider-runnable-track { height: 6px; border-radius: var(--cx-r-pill); background: linear-gradient(90deg, var(--cx-fill-strong) var(--_p), var(--cx-track) var(--_p)); }
.cx-range::-moz-range-track { height: 6px; border-radius: var(--cx-r-pill); background: var(--cx-track); }
.cx-range::-moz-range-progress { height: 6px; border-radius: var(--cx-r-pill); background: var(--cx-fill-strong); }
.cx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--cx-surface); box-shadow: inset 0 0 0 2px var(--cx-fill-strong), 0 1px 3px rgba(23,24,28,.25); transition: transform var(--cx-dur-hover) var(--cx-ease); }
.cx-range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--cx-surface); box-shadow: inset 0 0 0 2px var(--cx-fill-strong), 0 1px 3px rgba(23,24,28,.25); }
.cx-range:hover::-webkit-slider-thumb { transform: scale(1.1); }
.cx-range:focus-visible { outline: none; box-shadow: none; }
.cx-range:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 2px var(--cx-fill-strong), 0 0 0 4px rgba(221,246,74,.55); }
.cx-range:focus-visible::-moz-range-thumb { box-shadow: inset 0 0 0 2px var(--cx-fill-strong), 0 0 0 4px rgba(221,246,74,.55); }
.cx-range:disabled { opacity: .5; cursor: not-allowed; }
.cx-range-wrap { position: relative; display: block; }
.cx-range-wrap__marks { position: relative; display: block; height: 16px; margin: 2px 9px 0; }
.cx-range-wrap__mark { position: absolute; left: var(--at); top: 0; transform: translateX(-50%); font-size: 10.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-range-wrap__mark::before { content: ""; position: absolute; left: 50%; top: -9px; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: var(--cx-accent-deep); }

/* ───────── 1.2: звонок, сессии, календарь, листы ───────── */

/* плитка видео: .cx-tile > .cx-tile__avatar (или video/img) + .cx-tile__name; заполняет рамку — .cx-tile--fill */
.cx-tile { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 0; border-radius: var(--cx-r-card); background: var(--cx-surface-inverse-3); color: var(--cx-text-inverse); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); font-family: var(--cx-font-ui); }
.cx-tile--fill { position: absolute; inset: 0; }
.cx-tile > video, .cx-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-tile__avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--cx-call-avatar); display: grid; place-items: center; font-size: 24px; font-weight: 600; letter-spacing: .02em; }
.cx-tile__avatar--lg { width: 96px; height: 96px; font-size: 33px; } .cx-tile__avatar--sm { width: 44px; height: 44px; font-size: 15px; }
.cx-tile__name { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--cx-r-pill); background: var(--cx-call-scrim); font-size: 11px; font-weight: 600; }
.cx-tile__name svg { width: 13px; height: 13px; }
.cx-tile--speaking { box-shadow: inset 0 0 0 2px var(--cx-accent); }
.cx-tile--self { position: absolute; right: 12px; bottom: 12px; width: 208px; height: 128px; border-radius: var(--cx-r-md); box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08); }
.cx-tile--self .cx-tile__avatar { width: 44px; height: 44px; font-size: 15px; }

/* идёт запись: <span class="cx-live">идёт запись · 12:40</span>; на тёмном — .cx-live--inverse */
.cx-live { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: var(--cx-r-pill); background: var(--cx-critical-bg); color: var(--cx-critical-text); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cx-live); animation: cx-pulse 1.6s var(--cx-ease) infinite; }
.cx-live--inverse { background: var(--cx-call-scrim); color: var(--cx-text-inverse); }
.cx-live--off::before { animation: none; background: var(--cx-text-4); }

/* статус сессии: <span class="cx-session cx-session--done">проведена</span>; полоска в календаре — .cx-week__event--<статус> */
.cx-session { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--cx-text-2); white-space: nowrap; }
.cx-session::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--_s, var(--cx-session-planned)); flex: none; }
.cx-session--request { --_s: var(--cx-session-request); } .cx-session--unpaid { --_s: var(--cx-session-unpaid); } .cx-session--planned { --_s: var(--cx-session-planned); }
.cx-session--live { --_s: var(--cx-session-live); } .cx-session--done { --_s: var(--cx-session-done); } .cx-session--noshow { --_s: var(--cx-session-noshow); }
.cx-session--live::before { animation: cx-pulse 1.6s var(--cx-ease) infinite; }

/* неделя/день календаря: .cx-week (--days:7, --hour:56px, --from:8) > .cx-week__head + .cx-week__body > .cx-week__hours + .cx-week__col */
.cx-week { --days: 7; --hour: 56px; --from: 8; display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; font-family: var(--cx-font-ui); font-variant-numeric: tabular-nums; }
.cx-week__head, .cx-week__body { display: grid; grid-template-columns: 52px repeat(var(--days), minmax(0, 1fr)); }
.cx-week__head { position: sticky; top: 0; z-index: var(--cx-z-sticky); background: var(--cx-surface); box-shadow: 0 1px 0 var(--cx-line); }
.cx-week__day { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px 10px; min-width: 0; }
.cx-week__dow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-week__date { display: flex; align-items: center; height: 34px; font-size: 19px; font-weight: 600; line-height: 1; }  /* высота кружка «сегодня» — подписи всех дней на одной линии */
.cx-week__sub { font-size: 11.5px; color: var(--cx-text-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-week__day.is-today .cx-week__date { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: -4px; border-radius: 50%; background: var(--cx-fill-strong); color: var(--cx-on-strong); font-size: 15.5px; }
.cx-week__day.is-off { color: var(--cx-text-4); }
.cx-week__hours { display: grid; grid-auto-rows: var(--hour); }
.cx-week__hours span { position: relative; top: -8px; padding-right: 8px; text-align: right; font-size: 11px; color: var(--cx-text-meta); }
.cx-week__col { position: relative; min-width: 0; background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--hour) - 1px), var(--cx-line) calc(var(--hour) - 1px) var(--hour)); box-shadow: inset 1px 0 0 var(--cx-line); }
.cx-week__col.is-off, .cx-week__off { background-color: var(--cx-surface-soft); }
.cx-week__off { position: absolute; left: 0; right: 0; top: calc((var(--start) - var(--from)) * var(--hour)); height: calc(var(--len) * var(--hour)); }
.cx-week__slot { position: absolute; left: 3px; right: 3px; top: calc((var(--start) - var(--from)) * var(--hour) + 2px); height: calc(var(--len) * var(--hour) - 4px); border: 0; border-radius: var(--cx-r-tag); background: transparent; color: var(--cx-text-3); font: 600 11.5px var(--cx-font-ui); cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-week__slot:hover, .cx-week__slot[aria-expanded="true"] { background: var(--cx-surface-accent); color: var(--cx-text); box-shadow: inset 0 0 0 1.5px var(--cx-accent-deep); }
.cx-week__event { position: absolute; left: 3px; right: 3px; top: calc((var(--start) - var(--from)) * var(--hour) + 2px); height: calc(var(--len) * var(--hour) - 4px); display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 6px 8px 6px 11px; border-radius: var(--cx-r-tag); background: var(--cx-surface); box-shadow: var(--cx-ring); color: var(--cx-text); text-decoration: none; font-size: 12px; line-height: 1.35; cursor: pointer; }
.cx-week__event::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--_s, var(--cx-session-planned)); }
.cx-week__event b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-week__event span { color: var(--cx-text-meta); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-week__event:hover { box-shadow: var(--cx-shadow-menu); }
.cx-week__event--request { --_s: var(--cx-session-request); } .cx-week__event--unpaid { --_s: var(--cx-session-unpaid); } .cx-week__event--planned { --_s: var(--cx-session-planned); }
.cx-week__event--live { --_s: var(--cx-session-live); background: var(--cx-surface-accent); } .cx-week__event--done { --_s: var(--cx-session-done); } .cx-week__event--noshow { --_s: var(--cx-session-noshow); }
.cx-week__now { position: absolute; left: 0; right: 0; top: calc((var(--at) - var(--from)) * var(--hour)); height: 2px; background: var(--cx-critical); z-index: 1; pointer-events: none; }
.cx-week__now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--cx-critical); }

/* месяц: .cx-month > .cx-month__dow ×7 + .cx-month__day (.is-out .is-today .is-off) > .cx-month__num + .cx-month__item */
.cx-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 32px; grid-auto-rows: minmax(104px, 1fr); border-radius: var(--cx-r-md); box-shadow: inset 0 0 0 1px var(--cx-line); overflow: hidden; font-family: var(--cx-font-ui); font-variant-numeric: tabular-nums; }
.cx-month__dow { height: 32px; display: grid; place-items: center start; padding: 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); box-shadow: inset 0 -1px 0 var(--cx-line); }
.cx-month__day { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 6px 8px 8px; box-shadow: inset -1px -1px 0 var(--cx-line); }
.cx-month__num { font-size: 12.5px; font-weight: 600; line-height: 24px; }
.cx-month__day.is-today .cx-month__num { align-self: flex-start; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cx-fill-strong); color: var(--cx-on-strong); }
.cx-month__day.is-out { color: var(--cx-text-4); }
.cx-month__day.is-off { background: var(--cx-surface-soft); }
.cx-month__item { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--cx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.cx-month__item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--_s, var(--cx-session-planned)); }
.cx-month__item--request { --_s: var(--cx-session-request); } .cx-month__item--unpaid { --_s: var(--cx-session-unpaid); } .cx-month__item--live { --_s: var(--cx-session-live); }
.cx-month__item--done { --_s: var(--cx-session-done); } .cx-month__item--noshow { --_s: var(--cx-session-noshow); }
.cx-month__more { font-size: 11.5px; color: var(--cx-text-meta); }

/* нижний лист (телефон): <dialog class="cx-sheet"> > .cx-sheet__grip + .cx-modal__head/__body/__foot; на тёмном звонке — .cx-sheet--inverse */
.cx-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; margin: 0; border: 0; padding: 8px 0 max(16px, env(safe-area-inset-bottom)); border-radius: var(--cx-r-modal) var(--cx-r-modal) 0 0; background: var(--cx-surface); color: var(--cx-text); box-shadow: var(--cx-shadow-modal); font-family: var(--cx-font-ui); }
.cx-sheet::backdrop { background: var(--cx-scrim); }
.cx-sheet[open] { animation: cx-sheet-in var(--cx-dur-enter) var(--cx-ease-out); }
.cx-sheet__grip { width: 36px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: var(--cx-border); }
.cx-sheet .cx-modal__foot { flex-direction: column-reverse; align-items: stretch; }
.cx-sheet .cx-modal__foot .cx-btn { width: 100%; }
.cx-sheet--inverse { background: var(--cx-surface-inverse); color: var(--cx-text-inverse); }
.cx-sheet--inverse .cx-sheet__grip { background: var(--cx-surface-inverse-2); }
@keyframes cx-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* хроника: .cx-timeline > .cx-timeline__month + .cx-timeline__item (.is-muted) > .cx-timeline__dot + .cx-timeline__body (__title, __meta) */
.cx-timeline { position: relative; display: flex; flex-direction: column; padding-left: 22px; font-family: var(--cx-font-ui); }
.cx-timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: var(--cx-line); }
.cx-timeline__month { padding: 14px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-timeline__item { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 0 12px; }
.cx-timeline__dot { position: absolute; left: -22px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--cx-surface); box-shadow: inset 0 0 0 2px var(--_s, var(--cx-text-4)); }
.cx-timeline__item--done .cx-timeline__dot { --_s: var(--cx-session-done); } .cx-timeline__item--noshow .cx-timeline__dot { --_s: var(--cx-session-noshow); }
.cx-timeline__item--note .cx-timeline__dot { --_s: var(--cx-accent-deep); background: var(--cx-accent); box-shadow: none; }
.cx-timeline__title { font-size: 13px; font-weight: 600; }
.cx-timeline__meta { font-size: 12.5px; color: var(--cx-text-meta); }
.cx-timeline__item.is-muted { color: var(--cx-text-3); }

/* источник ИИ: <button class="cx-cite">12:40</button> — метка-таймкод к фразе конспекта */
.cx-cite { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin: 0 2px; border: 0; border-radius: var(--cx-r-pill); background: var(--cx-surface-soft); color: var(--cx-text-2); font: 600 11px var(--cx-font-ui); font-variant-numeric: tabular-nums; vertical-align: 1px; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-cite:hover, .cx-cite[aria-pressed="true"] { background: var(--cx-surface-accent); color: var(--cx-text); }

/* кнопка «ещё рано»: .cx-wait > .cx-btn[disabled] + .cx-wait__hint («Войти можно с 9:50») */
.cx-wait { display: inline-flex; flex-direction: column; align-items: stretch; gap: 6px; }
.cx-wait__hint { font-size: 11.5px; color: var(--cx-text-meta); text-align: center; font-variant-numeric: tabular-nums; }

/* ===================== Corix UI 1.3 — боковая панель-карточка и части шапки ===================== */

/* ---------- Круглая кнопка-иконка: .cx-ibtn (36) · --lg (40) · --ink · --plain; точка — .cx-badge--dot ---------- */
.cx-ibtn { position: relative; display: inline-grid; place-items: center; width: var(--cx-h-md); height: var(--cx-h-md); flex: none; border: 0; padding: 0; border-radius: 50%; background: var(--cx-surface-soft); color: var(--cx-text); cursor: pointer; text-decoration: none; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-ibtn svg { width: 16px; height: 16px; }
.cx-ibtn:hover, .cx-ibtn[aria-expanded="true"] { background: var(--cx-surface-pressed); }
.cx-ibtn:focus-visible { box-shadow: var(--cx-focus); }
.cx-ibtn--lg { width: var(--cx-h-lg); height: var(--cx-h-lg); }
.cx-ibtn--lg svg { width: 18px; height: 18px; }
.cx-ibtn--ink { background: var(--cx-surface-inverse); color: var(--cx-accent); }
.cx-ibtn--plain { background: transparent; }
.cx-ibtn .cx-badge--dot { position: absolute; top: 8px; right: 9px; box-shadow: 0 0 0 1.5px var(--cx-surface-soft); }

/* ---------- Боковая панель-карточка поверх экрана: сессия, клиент, оплата ----------
<aside class="cx-panel" style="--w:500px">
  <div class="cx-panel__head"><a class="cx-ibtn" href="…">←</a><span class="cx-panel__gap"></span><button class="cx-ibtn">⤢</button><button class="cx-ibtn">⋯</button><button class="cx-ibtn">✕</button></div>
  <div class="cx-panel__body">
    <div class="cx-panel__who"><span class="cx-avatar">АК</span><div><a class="cx-panel__title" href="…">Анна К. ›</a><span class="cx-panel__sub">Сессия 14 · пн 12 октября</span></div></div>
    <span class="cx-panel__meta">Индивидуальная · 50 мин · 5 000 ₽</span>
    <div class="cx-panel__tags"><span class="cx-chip">…</span></div>
    <section class="cx-panel__section"><div class="cx-panel__section-head"><h2>Подготовка</h2><span class="cx-panel__aside"><svg>…</svg>из конспекта</span></div>
      <div class="cx-note"><span class="cx-note__label">Итог</span><p>…</p></div>
      <div class="cx-note"><span class="cx-note__label">Договорённости</span><ol class="cx-note__list"><li>…</li></ol></div>
    </section>
  </div>
  <div class="cx-panel__foot"><span class="cx-panel__note">начало через 8 мин</span><div class="cx-panel__actions">…кнопки…</div></div>
</aside> */
.cx-panel { --w: 500px; position: absolute; top: calc(var(--cx-h-header) + 32px); right: 20px; bottom: 20px; width: var(--w); max-width: calc(100% - 40px); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--cx-r-card); background: var(--cx-surface); box-shadow: var(--cx-shadow-drop); color: var(--cx-text); font-family: var(--cx-font-ui); z-index: var(--cx-z-dropdown); }
.cx-panel--fixed { position: fixed; }
.cx-panel--left { right: auto; left: 20px; }
.cx-panel__head { display: flex; align-items: center; gap: 6px; padding: 12px 12px 0 16px; flex: none; }
.cx-panel__gap { flex: 1; }
.cx-panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 28px 20px; display: flex; flex-direction: column; gap: 20px; }
.cx-panel__who { display: flex; align-items: center; gap: 14px; }
.cx-panel__who > div { display: flex; flex-direction: column; min-width: 0; }
.cx-panel__who .cx-avatar { --_s: 44px; }
.cx-panel__title { font: 600 20px/1.25 var(--cx-font-ui); color: var(--cx-text); text-decoration: none; }
.cx-panel__sub, .cx-panel__meta { font-size: 12.5px; color: var(--cx-text-meta); }
.cx-panel__who + .cx-panel__meta, .cx-panel__meta + .cx-panel__tags { margin-top: -10px; }
.cx-panel__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-panel__section { display: flex; flex-direction: column; gap: 12px; }
.cx-panel__section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cx-panel__section-head h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.cx-panel__aside { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cx-text-meta); white-space: nowrap; }
.cx-panel__aside svg { width: 14px; height: 14px; }
.cx-panel__action { border: 0; background: none; padding: 6px 0; font: 600 13px var(--cx-font-ui); color: var(--cx-text); cursor: pointer; }
.cx-panel__action:hover { text-decoration: underline; text-underline-offset: 3px; }
.cx-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 28px 20px; box-shadow: inset 0 1px 0 var(--cx-line); flex: none; }
.cx-panel__note { font-size: 12.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-panel__actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 1100px) { .cx-panel { --w: 440px; } }
@media (max-width: 767px) { .cx-panel { top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: none; border-radius: 0; } .cx-panel__body, .cx-panel__foot { padding-left: 20px; padding-right: 20px; } }

/* ---------- Мягкий блок с подписью капсом: итог встречи, договорённости, запрос ---------- */
.cx-note { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: var(--cx-r-lg); background: var(--cx-surface-soft); box-shadow: inset 0 0 0 1px var(--cx-line); font-size: 13.5px; line-height: 1.55; }
.cx-note p { margin: 0; }
.cx-note__label { font: 600 11px/1.3 var(--cx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-note__list { margin: 0; padding: 0; list-style: none; counter-reset: n; display: flex; flex-direction: column; gap: 8px; }
.cx-note__list li { display: flex; gap: 10px; align-items: flex-start; }
.cx-note__list li::before { counter-increment: n; content: counter(n); color: var(--cx-text-3); font-variant-numeric: tabular-nums; flex: none; }
.cx-note__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 13px; }

/* ---------- Мини-столбики динамики: <span class="cx-minibars"><i style="--v:7"></i>…</span>, шкала --max (10) ---------- */
.cx-minibars { --max: 10; display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.cx-minibars i { width: 6px; height: max(3px, calc(16px * var(--v) / var(--max))); border-radius: 2px; background: var(--cx-text-4); }
.cx-minibars i:last-child { background: var(--cx-success); }
.cx-minibars--worse i:last-child { background: var(--cx-critical); }

/* ===================== Corix UI 1.4 — день психолога: повестка, следующая встреча, ⌘K, нижняя навигация, шаги, слоты, динамика ===================== */

/* ---------- Значки-статусы: .cx-marks > .cx-mark (muted по умолчанию, --success --warn --critical --live) > svg или «₽»; подпись — атрибут title или .cx-tip ---------- */
.cx-marks { display: inline-flex; gap: 6px; flex: none; }
.cx-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--cx-r-tag); background: var(--cx-surface-soft); color: var(--cx-text-3); font: 600 13px var(--cx-font-ui); }
.cx-mark svg { width: 14px; height: 14px; }
.cx-mark--success { color: var(--cx-success); }
.cx-mark--warn { background: var(--cx-warn-bg); color: var(--cx-warn-text); }
.cx-mark--critical { background: var(--cx-critical-bg); color: var(--cx-critical-text); }
.cx-mark--live { background: var(--cx-critical-bg); color: var(--cx-live); }

/* ---------- Повестка дня ----------
<div class="cx-agenda">
  <span class="cx-agenda__day">Сегодня, 12 октября · 14:23</span>
  <a class="cx-agenda__row cx-agenda__row--done" href="…"><span class="cx-agenda__time"><b>10:00</b><span>10:50</span></span><i class="cx-agenda__bar"></i>
    <span class="cx-agenda__body"><span class="cx-agenda__title">Анна К.</span><span class="cx-agenda__meta">Сессия 14 · проведена</span></span>
    <span class="cx-agenda__end"><span class="cx-marks">…</span><button class="cx-btn cx-btn--secondary cx-btn--xs">Проверить конспект</button></span></a>
  <div class="cx-agenda__row cx-agenda__row--live cx-agenda__row--now">… <span class="cx-progress"><i style="--value:46%"></i></span></div>
  <button class="cx-agenda__gap"><span>Свободно 15:00–16:00</span><b>+ Новая сессия</b></button>
  <div class="cx-agenda__break"><span>16:00</span><i></i><span>перерыв до 17:00</span><i></i></div>
</div>
Статус — .cx-agenda__row--request/unpaid/planned/live/done/noshow/cancelled; прошла без исхода — --past; идёт сейчас — --now. */
.cx-agenda { display: flex; flex-direction: column; font-family: var(--cx-font-ui); font-variant-numeric: tabular-nums; }
.cx-agenda__day { padding: 14px 0 6px; font: 600 11px/1.3 var(--cx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-agenda__row { position: relative; display: grid; grid-template-columns: 52px 4px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 12px 0; color: inherit; text-decoration: none; }
.cx-agenda__row + .cx-agenda__row, .cx-agenda__break + .cx-agenda__row, .cx-agenda__gap + .cx-agenda__row { box-shadow: inset 0 1px 0 var(--cx-line); }
a.cx-agenda__row:hover .cx-agenda__title { text-decoration: underline; text-underline-offset: 3px; }
.cx-agenda__time { display: flex; flex-direction: column; }
.cx-agenda__time b { font-size: 13px; font-weight: 600; }
.cx-agenda__time span { font-size: 11.5px; color: var(--cx-text-meta); }
.cx-agenda__bar { width: 4px; height: 40px; border-radius: 2px; background: var(--_s, var(--cx-session-planned)); }
.cx-agenda__row--request { --_s: var(--cx-session-request); } .cx-agenda__row--unpaid { --_s: var(--cx-session-unpaid); } .cx-agenda__row--planned { --_s: var(--cx-session-planned); }
.cx-agenda__row--live { --_s: var(--cx-session-live); } .cx-agenda__row--done { --_s: var(--cx-session-done); } .cx-agenda__row--noshow, .cx-agenda__row--cancelled { --_s: var(--cx-session-noshow); }
.cx-agenda__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-agenda__title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-agenda__meta { font-size: 11.5px; color: var(--cx-text-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-agenda__end { display: flex; align-items: center; gap: 8px; flex: none; }
.cx-agenda__row--past .cx-agenda__title, .cx-agenda__row--cancelled .cx-agenda__title { color: var(--cx-text-2); }
.cx-agenda__row--cancelled .cx-agenda__title { text-decoration: line-through; }
.cx-agenda__row--now { padding: 12px 12px 14px; margin: 0 -12px; border-radius: var(--cx-r-md); background: var(--cx-surface-accent); box-shadow: none; }
.cx-agenda__row--now + .cx-agenda__row { box-shadow: none; }
.cx-agenda__row--now .cx-progress { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; background: transparent; }
.cx-agenda__row--now .cx-progress > i { background: var(--cx-session-live); }
.cx-agenda__gap { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; margin: 6px 0; padding: 0 14px; border: 0; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); color: var(--cx-text-meta); font: 12.5px var(--cx-font-ui); text-align: left; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-agenda__gap b { font-weight: 600; color: var(--cx-text); white-space: nowrap; }
.cx-agenda__gap:hover { background: var(--cx-surface-pressed); }
.cx-agenda__gap:focus-visible { box-shadow: var(--cx-focus); outline: none; }
.cx-agenda__break { display: flex; align-items: center; gap: 14px; padding: 8px 0; font-size: 11.5px; color: var(--cx-text-meta); }
.cx-agenda__break > span:first-child { width: 52px; flex: none; }
.cx-agenda__break i { flex: 1; height: 1px; background: var(--cx-line); }
@media (max-width: 767px) {
  .cx-agenda__row { grid-template-columns: 4px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 2px; }
  .cx-agenda__bar { grid-column: 1; grid-row: 1 / 4; height: auto; align-self: stretch; }
  .cx-agenda__time { grid-column: 2; grid-row: 1; flex-direction: row; align-items: baseline; gap: 6px; }
  .cx-agenda__body { grid-column: 2; grid-row: 2; }
  .cx-agenda__end { grid-column: 2; grid-row: 3; justify-self: start; flex-wrap: wrap; margin-top: 6px; }
  .cx-agenda__end:empty { display: none; }
  .cx-agenda__break > span:first-child { width: auto; }
}

/* ---------- Следующая встреча: .cx-next (--ready — пора, --live — идёт, --lg — крупная на «Сегодня») > .cx-chip.cx-next__when + .cx-next__who (__name, __meta) + .cx-next__prep + .cx-marks + .cx-next__actions ---------- */
.cx-next { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; border-radius: var(--cx-r-lg); background: var(--cx-surface-soft); box-shadow: inset 0 0 0 1px var(--cx-line); color: var(--cx-text); font-family: var(--cx-font-ui); font-variant-numeric: tabular-nums; }
.cx-next__who { display: flex; flex-direction: column; min-width: 0; align-self: stretch; }
.cx-next__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.cx-next__meta { font-size: 11.5px; color: var(--cx-text-meta); }
.cx-next__prep { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cx-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cx-next__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-next--ready { box-shadow: inset 0 0 0 1.5px var(--cx-accent-deep); }
.cx-next--live { background: var(--cx-surface-inverse); color: var(--cx-text-inverse); box-shadow: none; }
.cx-next--live .cx-next__meta, .cx-next--live .cx-next__prep { color: var(--cx-text-inverse-2); }
.cx-next--lg { padding: 24px 28px; gap: 14px; }
.cx-next--lg .cx-next__name { font-size: 20px; }
.cx-next--lg .cx-next__meta { font-size: 12.5px; }

/* ---------- Поиск и команды ⌘K ----------
<dialog class="cx-cmdk" aria-label="Поиск и команды">
  <form class="cx-cmdk__head" method="dialog"><svg>…search</svg><input type="search" placeholder="Найти клиента или действие" autocomplete="off"><kbd class="cx-kbd">esc</kbd></form>
  <div class="cx-cmdk__list" role="listbox">
    <span class="cx-cmdk__group">Клиенты</span>
    <a class="cx-cmdk__item" role="option" href="…" data-q="Анна К."><span class="cx-avatar">АК</span><span class="cx-cmdk__body"><span class="cx-cmdk__title">Анна К.</span><span class="cx-cmdk__sub">Сессия 14 · сегодня в 10:00</span></span><kbd class="cx-kbd">↵</kbd></a>
    <span class="cx-cmdk__group">Действия</span>
    <button class="cx-cmdk__item" role="option" data-q="Новая сессия"><span class="cx-cmdk__icon"><svg>…</svg></span><span class="cx-cmdk__body"><span class="cx-cmdk__title">Новая сессия</span></span><kbd class="cx-kbd">N</kbd></button>
    <div class="cx-cmdk__empty" hidden><div class="cx-state cx-state--compact">…</div><a class="cx-cmdk__item" role="option" href="…">Создать клиента «<span data-query></span>»</a></div>
    <span class="cx-cmdk__group">Перейти</span><div class="cx-cmdk__chips"><a class="cx-cmdk__chip" href="…">Сегодня <kbd class="cx-kbd">T</kbd></a></div>
  </div>
  <div class="cx-cmdk__foot"><span>↑↓ выбрать</span><span>↵ открыть</span><span>esc закрыть</span></div>
</dialog>
Открывает cx.js: ⌘K / Ctrl+K, клик по [data-cx-cmdk] (поиск в шапке), cxCommand.open(). Фильтр по data-q, стрелки и Enter, mark в названии — совпадение. */
.cx-cmdk { position: fixed; top: 110px; left: 50%; transform: translateX(-50%); width: 640px; max-width: calc(100vw - 32px); max-height: calc(100vh - 140px); margin: 0; padding: 0; border: 0; border-radius: var(--cx-r-modal); background: var(--cx-surface); color: var(--cx-text); box-shadow: var(--cx-shadow-modal); font-family: var(--cx-font-ui); overflow: hidden; }
.cx-cmdk::backdrop { background: var(--cx-scrim); }
.cx-cmdk[open] { display: flex; flex-direction: column; }
.cx-cmdk__head { display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px 22px; box-shadow: inset 0 -1px 0 var(--cx-line); flex: none; }
.cx-cmdk__head svg { width: 18px; height: 18px; color: var(--cx-text-meta); flex: none; }
.cx-cmdk__head input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0; font: 600 16px var(--cx-font-ui); color: var(--cx-text); }
.cx-cmdk__head input::placeholder { color: var(--cx-text-3); }
.cx-cmdk__head input::-webkit-search-cancel-button { display: none; }
.cx-cmdk__list { display: flex; flex-direction: column; padding: 8px 10px 10px; min-height: 0; overflow-y: auto; }
.cx-cmdk__group { padding: 10px 12px 6px; font: 600 11px/1.3 var(--cx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-cmdk__item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; width: 100%; padding: 8px 12px; border: 0; border-radius: var(--cx-r-md); background: none; color: var(--cx-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.cx-cmdk__item[aria-selected="true"] { background: var(--cx-surface-soft); }
.cx-cmdk__item:focus-visible { box-shadow: var(--cx-focus); outline: none; }
.cx-cmdk__item .cx-avatar { --_s: 32px; }
.cx-cmdk__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--cx-r-input); background: var(--cx-surface-soft); color: var(--cx-text-meta); }
.cx-cmdk__icon svg { width: 16px; height: 16px; }
.cx-cmdk__body { display: flex; flex-direction: column; min-width: 0; }
.cx-cmdk__title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-cmdk__title mark { background: none; color: inherit; font-weight: 800; }
.cx-cmdk__sub { font-size: 11.5px; color: var(--cx-text-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-cmdk__empty { display: flex; flex-direction: column; }
.cx-cmdk__chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 4px; }
.cx-cmdk__chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 6px 0 12px; border: 0; border-radius: var(--cx-r-pill); background: var(--cx-surface-soft); color: var(--cx-text); font: 12.5px var(--cx-font-ui); text-decoration: none; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-cmdk__chip:not(:has(.cx-kbd)) { padding-right: 12px; }
.cx-cmdk__chip:hover { background: var(--cx-surface-pressed); }
.cx-cmdk__foot { display: flex; gap: 18px; padding: 12px 22px; box-shadow: inset 0 1px 0 var(--cx-line); font-size: 11.5px; color: var(--cx-text-meta); flex: none; }
@media (min-width: 768px) { .cx-cmdk[open] { animation: cx-cmdk-in var(--cx-dur-in) var(--cx-ease-out); } }
@media (max-width: 767px) { .cx-cmdk { inset: 0; transform: none; width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; } .cx-cmdk__list { flex: 1; } .cx-cmdk__foot, .cx-cmdk .cx-kbd { display: none; } }
@keyframes cx-cmdk-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%); } }

/* ---------- Нижняя навигация (телефон, до 900px): nav.cx-tabbar > a.cx-tabbar__item[aria-current=page] (svg + подпись, .cx-badge) ×4–5; центральная кнопка — button.cx-tabbar__plus; в витрине — .cx-tabbar--static ---------- */
.cx-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--cx-z-header); display: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--cx-surface); box-shadow: inset 0 1px 0 var(--cx-line); font-family: var(--cx-font-ui); }
.cx-tabbar--static { display: grid; position: static; }
.cx-tabbar__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; border: 0; padding: 0; background: none; color: var(--cx-text-meta); font: 600 11px/1.3 var(--cx-font-ui); text-decoration: none; cursor: pointer; }
.cx-tabbar__item svg { width: 24px; height: 24px; }
.cx-tabbar__item[aria-current="page"] { color: var(--cx-text); }
.cx-tabbar__item[aria-current="page"]::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--cx-text); }
.cx-tabbar__item .cx-badge { position: absolute; top: 0; left: calc(50% + 6px); }
.cx-tabbar__item:focus-visible { box-shadow: var(--cx-focus); outline: none; border-radius: var(--cx-r-tag); }
.cx-tabbar__plus { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto; border: 0; border-radius: 50%; background: var(--cx-fill-strong); color: var(--cx-on-strong); cursor: pointer; }
.cx-tabbar__plus svg { width: 24px; height: 24px; }
.cx-tabbar__plus:focus-visible { box-shadow: var(--cx-focus); outline: none; }
@media (max-width: 900px) { .cx-tabbar { display: grid; } .cx-app:has(> .cx-tabbar), .cx-app:has(> .cx-page > .cx-tabbar) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* ---------- Линия статусов: ol.cx-steps (--v — столбиком) > li.cx-steps__item (--done --current --error; без модификатора — впереди) > .cx-steps__dot (svg или номер) + текст; ошибка со строкой — .cx-steps__fail ---------- */
.cx-steps { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-family: var(--cx-font-ui); }
.cx-steps__item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--cx-text-3); white-space: nowrap; }
.cx-steps__item + .cx-steps__item::before { content: ""; width: 20px; height: 1.5px; border-radius: 1px; background: var(--cx-border); }
.cx-steps__item--done + .cx-steps__item::before, .cx-steps__item--current::before, .cx-steps__item--error::before { background: var(--cx-text-4); }
.cx-steps__dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cx-surface-soft); color: var(--cx-text-3); font-size: 11px; font-variant-numeric: tabular-nums; flex: none; }
.cx-steps__dot svg { width: 12px; height: 12px; }
.cx-steps__item--done, .cx-steps__item--current { color: var(--cx-text); }
.cx-steps__item--done .cx-steps__dot { background: var(--cx-fill-strong); color: var(--cx-on-strong); }
.cx-steps__item--current .cx-steps__dot { background: var(--cx-accent); color: var(--cx-on-accent); animation: cx-pulse 1.6s var(--cx-ease) infinite; }
.cx-steps__item--error { color: var(--cx-critical-text); }
.cx-steps__item--error .cx-steps__dot { background: var(--cx-critical); color: var(--cx-text-inverse); }
.cx-steps--v { flex-direction: column; align-items: stretch; gap: 10px; }
.cx-steps--v .cx-steps__item::before { display: none; }
.cx-steps__fail { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--cx-r-md); background: var(--cx-critical-bg); color: var(--cx-text); font-size: 13px; font-weight: 600; }
.cx-steps__fail .cx-steps__dot { background: var(--cx-critical); color: var(--cx-text-inverse); }
.cx-steps__fail > span:not(.cx-steps__dot) { flex: 1; }
@media (prefers-reduced-motion: reduce) { .cx-steps__item--current .cx-steps__dot { animation: none; } }

/* ---------- Чек-лист «С чего начать»: .cx-checklist > .cx-checklist__head (b + .cx-progress) + a/button.cx-checklist__item (.is-done .is-current) > .cx-checklist__dot + текст ---------- */
.cx-checklist { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: var(--cx-r-lg); background: var(--cx-surface-soft); font-family: var(--cx-font-ui); }
.cx-checklist__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-checklist__head .cx-progress { width: 120px; height: 4px; background: var(--cx-track); }
.cx-checklist__item { display: flex; align-items: center; gap: 10px; border: 0; padding: 0; background: none; color: var(--cx-text); font: 12.5px var(--cx-font-ui); text-align: left; text-decoration: none; cursor: pointer; }
.cx-checklist__item:hover { text-decoration: underline; text-underline-offset: 3px; }
.cx-checklist__dot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--cx-surface); box-shadow: inset 0 0 0 1.5px var(--cx-border); flex: none; }
.cx-checklist__dot svg { width: 12px; height: 12px; }
.cx-checklist__item.is-done { color: var(--cx-text-meta); text-decoration: line-through; }
.cx-checklist__item.is-done .cx-checklist__dot { background: var(--cx-fill-strong); color: var(--cx-accent); box-shadow: none; }
.cx-checklist__item.is-current { font-weight: 600; }
.cx-checklist__item.is-current .cx-checklist__dot { box-shadow: inset 0 0 0 1.5px var(--cx-accent-deep); }

/* ---------- Выбор времени для записи: .cx-slots > .cx-slots__day + .cx-slots__group (.cx-slots__label + .cx-slots__list > button.cx-slot [aria-pressed] [disabled]) + .cx-slots__tz + .cx-slots__empty ---------- */
.cx-slots { display: flex; flex-direction: column; gap: 14px; font-family: var(--cx-font-ui); font-variant-numeric: tabular-nums; }
.cx-slots__day { font-size: 13px; font-weight: 600; }
.cx-slots__group { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.cx-slots__label { padding-top: 9px; font: 600 11px/1.3 var(--cx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-slots__list { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-slot { height: var(--cx-h-md); padding: 0 14px; border: 0; border-radius: var(--cx-r-pill); background: var(--cx-surface); box-shadow: var(--cx-ring); color: var(--cx-text); font: 600 13px var(--cx-font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-slot:hover { background: var(--cx-surface-hover); }
.cx-slot:focus-visible { box-shadow: var(--cx-focus); outline: none; }
.cx-slot[aria-pressed="true"] { background: var(--cx-fill-strong); color: var(--cx-on-strong); box-shadow: none; }
.cx-slot[disabled] { background: var(--cx-surface-soft); color: var(--cx-text-3); box-shadow: none; text-decoration: line-through; cursor: not-allowed; }
.cx-slot__hold { font-weight: 500; opacity: .75; }
.cx-slots__tz { font-size: 11.5px; color: var(--cx-text-meta); }
.cx-slots__tz a, .cx-slots__tz button { border: 0; padding: 0; background: none; color: var(--cx-text); font: 600 11.5px var(--cx-font-ui); cursor: pointer; }
.cx-slots__empty { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); }
.cx-slots__empty > span { display: flex; flex-direction: column; }
.cx-slots__empty b { font-size: 13px; font-weight: 600; }
.cx-slots__empty small { font-size: 11.5px; color: var(--cx-text-meta); }
@media (max-width: 767px) { .cx-slots__group { grid-template-columns: minmax(0, 1fr); row-gap: 6px; } .cx-slots__label { padding-top: 0; } .cx-slots__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .cx-slot { padding: 0 8px; } .cx-slot:has(.cx-slot__hold) { grid-column: span 2; } }

/* ---------- Мини-динамика: svg.cx-trend (--worse — последняя точка красная) > polyline + circle; рисует cxTrend(svg, [7,6,4], {max:10, worse}); «было → стало» — .cx-trend-delta (--worse --flat); ячейки — .cx-minibars ---------- */
.cx-trend { width: 140px; height: 32px; overflow: visible; flex: none; }
.cx-trend polyline { fill: none; stroke: var(--cx-text-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cx-trend circle { fill: var(--cx-success); }
.cx-trend--worse circle { fill: var(--cx-critical); }
.cx-trend--sm { width: 80px; height: 24px; }
.cx-trend-delta { font-size: 13px; font-weight: 600; color: var(--cx-success); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-trend-delta--worse { color: var(--cx-critical); }
.cx-trend-delta--flat { color: var(--cx-text-meta); }

/* ---------- Неделя, дополнения: отменена, выбрано, перетаскивается, призрак нового времени, закрытое время штриховкой, короткое событие, значки; день с панелью справа; полоса недели на телефоне ---------- */
.cx-week__event--cancelled { --_s: var(--cx-session-noshow); color: var(--cx-text-3); }
.cx-week__event--cancelled b { text-decoration: line-through; }
.cx-week__event.is-selected { box-shadow: 0 0 0 2px var(--cx-accent-deep), var(--cx-shadow-menu); z-index: 2; }
.cx-week__event.is-dragging { opacity: .6; box-shadow: var(--cx-shadow-drop); z-index: 3; cursor: grabbing; }
.cx-week__ghost { position: absolute; left: 3px; right: 3px; top: calc((var(--start) - var(--from)) * var(--hour) + 2px); height: calc(var(--len) * var(--hour) - 4px); padding: 6px 8px; border-radius: var(--cx-r-tag); background: var(--cx-surface-accent); box-shadow: inset 0 0 0 1.5px var(--cx-accent-deep); color: var(--cx-text); font: 600 11.5px var(--cx-font-ui); pointer-events: none; z-index: 2; }
.cx-week__blocked { position: absolute; left: 3px; right: 3px; top: calc((var(--start) - var(--from)) * var(--hour) + 1px); height: calc(var(--len) * var(--hour) - 2px); padding: 6px 8px; border-radius: var(--cx-r-tag); background: repeating-linear-gradient(135deg, var(--cx-surface-soft) 0 6px, var(--cx-line) 6px 8px); font-size: 11.5px; color: var(--cx-text-meta); overflow: hidden; z-index: 1; }
.cx-week__event--short { flex-direction: row; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; }
.cx-week__event--short span { flex: none; }
.cx-week__event .cx-marks { margin-top: auto; gap: 4px; }
.cx-week__event .cx-mark { width: 18px; height: 18px; font-size: 10px; border-radius: 5px; }
.cx-week__event .cx-mark svg { width: 11px; height: 11px; }
.cx-week--day { --days: 1; }
.cx-week--day .cx-week__head, .cx-week--day .cx-week__body { grid-template-columns: 52px minmax(0, 1fr) var(--aside, 280px); }
.cx-week__aside { min-width: 0; padding: 10px 0 10px 14px; box-shadow: inset 1px 0 0 var(--cx-line); }
.cx-week__strip { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 10px; font-family: var(--cx-font-ui); font-variant-numeric: tabular-nums; }
.cx-week__strip::-webkit-scrollbar { display: none; }
.cx-week__strip > a, .cx-week__strip > button { flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border: 0; border-radius: var(--cx-r-md); background: none; color: var(--cx-text-2); font: 600 11px/1.3 var(--cx-font-ui); text-transform: lowercase; text-decoration: none; cursor: pointer; }
.cx-week__strip b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 13.5px; color: var(--cx-text); }
.cx-week__strip i { width: 5px; height: 5px; border-radius: 50%; background: var(--cx-text-4); }
.cx-week__strip i:not([class]) { visibility: hidden; }
.cx-week__strip .has-events i { visibility: visible; }
.cx-week__strip [aria-current="date"] b { background: var(--cx-fill-strong); color: var(--cx-on-strong); }
.cx-week__strip [aria-pressed="true"] { background: var(--cx-surface-soft); }
.cx-week__strip .is-off { color: var(--cx-text-4); }
.cx-week__strip .is-off b { color: var(--cx-text-4); }

/* ---------- Хроника, дополнения: дата слева (.cx-timeline--dated: .cx-timeline__date > b + small), тело .cx-timeline__body, текст .cx-timeline__text, плотность (--list, --excerpt; без модификатора — полностью), иконка на линии .cx-timeline__dot--icon, «Показать ещё» .cx-timeline__more ---------- */
.cx-timeline__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-timeline__text { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--cx-text-2); }
.cx-timeline--list .cx-timeline__text { display: none; }
.cx-timeline--excerpt .cx-timeline__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-timeline__item .cx-marks { margin-top: 6px; }
.cx-timeline__dot--icon { display: grid; place-items: center; width: 20px; height: 20px; left: -26px; top: 8px; background: var(--cx-surface-soft); color: var(--cx-text-meta); box-shadow: 0 0 0 3px var(--cx-surface); }
.cx-timeline__dot--icon svg { width: 11px; height: 11px; }
.cx-timeline--dated { padding-left: 0; }
.cx-timeline--dated::before { left: 71px; }
.cx-timeline--dated .cx-timeline__month { padding-left: 88px; }
.cx-timeline--dated .cx-timeline__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 32px; align-items: start; }
.cx-timeline--dated .cx-timeline__dot { left: 66px; }
.cx-timeline--dated .cx-timeline__dot--icon { left: 62px; }
.cx-timeline__date { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cx-text-2); line-height: 1.45; }
.cx-timeline__date small { font-size: 11px; font-weight: 400; color: var(--cx-text-meta); }
.cx-timeline__more { align-self: flex-start; margin: 8px 0 0; border: 0; padding: 0; background: none; font: 600 12.5px var(--cx-font-ui); color: var(--cx-text-2); cursor: pointer; }
.cx-timeline__more:hover { color: var(--cx-text); text-decoration: underline; text-underline-offset: 3px; }
.cx-timeline--dated .cx-timeline__more { margin-left: 88px; }
@media (max-width: 767px) { .cx-timeline--dated .cx-timeline__item { grid-template-columns: 44px minmax(0, 1fr); column-gap: 26px; } .cx-timeline--dated::before { left: 53px; } .cx-timeline--dated .cx-timeline__dot { left: 48px; } .cx-timeline--dated .cx-timeline__dot--icon { left: 44px; } .cx-timeline--dated .cx-timeline__month, .cx-timeline--dated .cx-timeline__more { padding-left: 70px; margin-left: 0; } .cx-timeline--dated .cx-timeline__more { margin-left: 70px; padding-left: 0; } }

/* ---------- Мелочи: поле с кнопкой очистки, чип-ссылка, строка файла с повтором, цвета серий графика ---------- */
/* .cx-input-wrap > .cx-input + button.cx-input-wrap__clear > svg (x); cx.js ставит .has-value и очищает по клику */
.cx-input-wrap__clear { position: absolute; right: 9px; display: none; place-items: center; width: 22px; height: 22px; border: 0; padding: 0; border-radius: 50%; background: var(--cx-surface-soft); color: var(--cx-text-meta); cursor: pointer; }
.cx-input-wrap__clear svg { width: 12px; height: 12px; }
.cx-input-wrap__clear:hover { background: var(--cx-surface-pressed); color: var(--cx-text); }
.cx-input-wrap.has-value .cx-input-wrap__clear { display: grid; }
.cx-input-wrap:has(.cx-input-wrap__clear) .cx-input { padding-right: 40px; }
/* a.cx-chip.cx-chip--link / button.cx-chip.cx-chip--link — чип, по которому можно перейти; стрелка — svg внутри */
.cx-chip--link { border: 0; text-decoration: none; cursor: pointer; transition: box-shadow var(--cx-dur-hover) var(--cx-ease); }
.cx-chip--link:hover { box-shadow: inset 0 0 0 1px var(--cx-border); }
.cx-chip--link:focus-visible { box-shadow: var(--cx-focus); outline: none; }
.cx-chip--link svg { width: 12px; height: 12px; margin-right: -3px; }
/* .cx-file.is-error > … + .cx-file__end > button.cx-btn--xs «Повторить» + button.cx-ibtn (убрать) */
.cx-file__end { display: flex; align-items: center; gap: 6px; flex: none; }
/* серии графика: .cx-chart .bar.s1…s8, .line.s1…s8, .dot.s1…s8 = --cx-tag-1…8; легенда — .cx-legend__dot--1…8 */
.cx-chart .bar.s1, .cx-chart .area.s1 { fill: var(--cx-tag-1); } .cx-chart .line.s1, .cx-chart .dot.s1 { stroke: var(--cx-tag-1); }
.cx-chart .bar.s2, .cx-chart .area.s2 { fill: var(--cx-tag-2); } .cx-chart .line.s2, .cx-chart .dot.s2 { stroke: var(--cx-tag-2); }
.cx-chart .bar.s3, .cx-chart .area.s3 { fill: var(--cx-tag-3); } .cx-chart .line.s3, .cx-chart .dot.s3 { stroke: var(--cx-tag-3); }
.cx-chart .bar.s4, .cx-chart .area.s4 { fill: var(--cx-tag-4); } .cx-chart .line.s4, .cx-chart .dot.s4 { stroke: var(--cx-tag-4); }
.cx-chart .bar.s5, .cx-chart .area.s5 { fill: var(--cx-tag-5); } .cx-chart .line.s5, .cx-chart .dot.s5 { stroke: var(--cx-tag-5); }
.cx-chart .bar.s6, .cx-chart .area.s6 { fill: var(--cx-tag-6); } .cx-chart .line.s6, .cx-chart .dot.s6 { stroke: var(--cx-tag-6); }
.cx-chart .bar.s7, .cx-chart .area.s7 { fill: var(--cx-tag-7); } .cx-chart .line.s7, .cx-chart .dot.s7 { stroke: var(--cx-tag-7); }
.cx-chart .bar.s8, .cx-chart .area.s8 { fill: var(--cx-tag-8); } .cx-chart .line.s8, .cx-chart .dot.s8 { stroke: var(--cx-tag-8); }
.cx-legend__dot--1 { --_c: var(--cx-tag-1); } .cx-legend__dot--2 { --_c: var(--cx-tag-2); } .cx-legend__dot--3 { --_c: var(--cx-tag-3); } .cx-legend__dot--4 { --_c: var(--cx-tag-4); }
.cx-legend__dot--5 { --_c: var(--cx-tag-5); } .cx-legend__dot--6 { --_c: var(--cx-tag-6); } .cx-legend__dot--7 { --_c: var(--cx-tag-7); } .cx-legend__dot--8 { --_c: var(--cx-tag-8); }

/* ===== 1.5 — звонок и конспект ===== */

/* ---------- Сцена звонка: .cx-call (--panel — с боковой панелью, --gallery — две плитки, --phone — телефон, --demo — фиксированная высота в витрине) ---------- */
.cx-call { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 88px; gap: 12px; padding: 12px; min-height: 100vh; background: var(--cx-surface-call); color: var(--cx-text-inverse); font-family: var(--cx-font-ui); font-variant-numeric: tabular-nums; }
.cx-call--demo { min-height: 0; height: 560px; overflow: hidden; border-radius: var(--cx-r-card); }
.cx-call--panel { grid-template-columns: minmax(0, 1fr) 340px; }
.cx-call > .cx-call__foot { grid-column: 1 / -1; }
.cx-call__stage { position: relative; min-height: 0; border-radius: var(--cx-r-card); overflow: hidden; }
.cx-call--gallery .cx-call__stage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; }
.cx-call--gallery .cx-call__stage .cx-tile { position: relative; }
.cx-call__top { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 10px; }
.cx-grow { flex: 1 1 auto; }
.cx-call__who { display: flex; flex-direction: column; min-width: 0; padding: 4px 12px; border-radius: var(--cx-r-md); background: var(--cx-call-scrim); }
.cx-call__who b { font-size: 13px; font-weight: 600; line-height: 1.4; }
.cx-call__who small { font-size: 11px; line-height: 1.4; color: var(--cx-on-call); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-call__back { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; padding: 0; border-radius: 50%; background: var(--cx-call-scrim); color: var(--cx-text-inverse); cursor: pointer; text-decoration: none; }
.cx-call__back svg { width: 16px; height: 16px; }
.cx-call__back:hover { background: var(--cx-surface-inverse-2); }
.cx-call__back:focus-visible { box-shadow: var(--cx-focus); }
.cx-call__veil { position: absolute; inset: 0; z-index: 4; background: var(--cx-scrim-call); }

/* значки на плитке */
.cx-tile__badge { position: absolute; top: 10px; right: 10px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cx-call-scrim); color: var(--cx-text-inverse); }
.cx-tile__badge svg { width: 14px; height: 14px; }
.cx-tile__badge--net { color: var(--cx-warn); }
.cx-tile__badge--mic { color: var(--cx-text-inverse); }
.cx-tile--dim::after { content: ""; position: absolute; inset: 0; background: var(--cx-surface-call-2); opacity: .65; }
.cx-call--phone .cx-tile--self { width: 104px; height: 140px; right: 12px; bottom: 12px; }

/* связь: .cx-conn--good/ok/bad/lost; --inverse — на сцене */
.cx-conn { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: var(--cx-r-pill); background: var(--cx-surface-soft); color: var(--cx-text-2); font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-conn::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--_d, var(--cx-text-4)); }
.cx-conn--good { --_d: var(--cx-success); } .cx-conn--ok { --_d: var(--cx-warn); } .cx-conn--bad { --_d: var(--cx-critical); }
.cx-conn--lost { --_d: var(--cx-critical); } .cx-conn--lost::before { animation: cx-pulse 1.6s var(--cx-ease) infinite; }
.cx-conn--inverse { background: var(--cx-call-scrim); color: var(--cx-text-inverse); }

/* запись: дополнения к .cx-live */
.cx-live--paused::before { animation: none; background: var(--cx-text-4); }
.cx-live--private svg { flex: none; width: 13px; height: 13px; }
.cx-live--private::before { display: none; }

/* плашки на сцене */
.cx-call__notice { position: absolute; left: 50%; bottom: 16px; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 28px); padding: 10px 14px; border-radius: var(--cx-r-md); background: var(--cx-surface-inverse-2); color: var(--cx-text-inverse); font-size: 13px; line-height: 1.45; }
.cx-call__notice--accent::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-accent); }
.cx-call__notice--top { bottom: auto; top: 64px; white-space: nowrap; }
.cx-call__notice--left { left: 14px; right: 128px; bottom: 14px; transform: none; max-width: none; font-size: 11.5px; }
.cx-call__empty { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, 84px); display: flex; flex-direction: column; align-items: center; gap: 6px; width: 360px; max-width: calc(100% - 28px); text-align: center; }
.cx-call__empty b { font-size: 15.5px; font-weight: 600; }
.cx-call__empty p { font-size: 13px; color: var(--cx-on-call); }
.cx-call__empty .cx-btn { margin-top: 8px; }
.cx-call__lost { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: var(--cx-scrim-call); }
.cx-call__lost-card { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 380px; padding: 18px 22px; border-radius: var(--cx-r-lg); background: var(--cx-surface-inverse-2); box-shadow: var(--cx-shadow-menu); text-align: center; }
.cx-call__lost-card b { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.cx-call__lost-card p { font-size: 13px; color: var(--cx-on-call); }

/* точки ожидания ИИ: <span class="cx-ai-dots"><i></i><i></i><i></i></span>; --ink — на светлом */
.cx-ai-dots { --_c: var(--cx-accent); display: inline-flex; align-items: center; gap: 5px; }
.cx-ai-dots > i { width: 7px; height: 7px; border-radius: 50%; background: var(--_c); animation: cx-pulse var(--cx-dur-ai) var(--cx-ease) infinite; }
.cx-ai-dots > i:nth-child(2) { animation-delay: .15s; } .cx-ai-dots > i:nth-child(3) { animation-delay: .3s; }
.cx-ai-dots--ink { --_c: var(--cx-fill-strong); }

/* нижний ряд: таймер · панель-пилюля · счётчик */
.cx-call__foot { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 8px; }
.cx-call__foot > :last-child:not(.cx-call__bar):not(.cx-timer) { justify-self: end; }
.cx-call__count { font-size: 11.5px; color: var(--cx-on-call); text-align: right; }
.cx-call__bar { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: var(--cx-r-pill); background: var(--cx-surface-call-2); }
.cx-call__sep { flex: none; width: 1px; height: 32px; background: var(--cx-call-avatar); }
.cx-call__bar--phone { position: fixed; left: 8px; right: 8px; bottom: 24px; z-index: 5; height: 76px; padding: 0 8px; border-radius: 38px; justify-content: space-around; }
.cx-call--demo .cx-call__bar--phone { position: absolute; }
.cx-call--phone { grid-template-rows: minmax(0, 1fr); padding: 8px 8px 112px; }

/* кнопка управления: круг 44; подпись и шеврон — по желанию */
.cx-cbtn-item { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.cx-cbtn { position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; padding: 0; border-radius: 50%; background: var(--cx-surface-inverse-2); color: var(--cx-text-inverse); cursor: pointer; text-decoration: none; transition: background var(--cx-dur-hover) var(--cx-ease), transform var(--cx-dur-press) var(--cx-ease); }
.cx-cbtn svg { width: 20px; height: 20px; }
.cx-cbtn:hover { background: var(--cx-call-avatar); }
.cx-cbtn:active { transform: scale(.96); }
.cx-cbtn:focus-visible { box-shadow: var(--cx-focus); outline: none; }
.cx-cbtn--off { background: var(--cx-text-inverse); color: var(--cx-on-accent); }
.cx-cbtn--off:hover { background: var(--cx-on-call); }
.cx-cbtn--danger { background: var(--cx-fill-danger); color: var(--cx-text-inverse); }
.cx-cbtn--danger:hover { background: var(--cx-fill-danger); filter: brightness(1.1); }
.cx-cbtn--accent { background: var(--cx-accent); color: var(--cx-on-accent); }
.cx-cbtn--accent:hover { background: var(--cx-accent-hover); }
.cx-cbtn--lg { width: 52px; height: 52px; }
.cx-cbtn--lg svg { width: 22px; height: 22px; }
.cx-cbtn__label { font-size: 11px; line-height: 1.2; color: var(--cx-on-call); white-space: nowrap; }
.cx-cbtn__chev { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--cx-surface-call-2); color: var(--cx-text-inverse); }
.cx-cbtn__chev svg { width: 10px; height: 10px; }

/* таймер сессии: .cx-timer > .cx-timer__text + .cx-timer__bar > i + .cx-timer__range; --wrap / --last / --over */
.cx-timer { --_t: var(--cx-text-inverse); --_b: var(--cx-on-call); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cx-timer__text { font-size: 15px; font-weight: 600; line-height: 1.4; white-space: nowrap; color: var(--_t); font-variant-numeric: tabular-nums; }
.cx-timer__bar { display: block; width: 220px; max-width: 100%; height: 4px; border-radius: var(--cx-r-pill); background: var(--cx-surface-inverse-2); overflow: hidden; }
.cx-timer__bar > i { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--_b); transition: width var(--cx-dur-enter) var(--cx-ease-out); }
.cx-timer__range { font-size: 11.5px; color: var(--cx-on-call); font-variant-numeric: tabular-nums; }
.cx-timer--wrap, .cx-timer--last { --_t: var(--cx-accent); --_b: var(--cx-accent); }
.cx-timer--last .cx-timer__bar > i { animation: cx-pulse 1.6s var(--cx-ease) infinite; }
.cx-timer--over { --_t: var(--cx-warn); --_b: var(--cx-warn); }

/* боковая панель комнаты */
.cx-call__panel { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 14px; border-radius: var(--cx-r-card); background: var(--cx-surface-call-2); }
.cx-call__panel[hidden] { display: none; }
.cx-call__tabs { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--cx-r-pill); background: var(--cx-surface-call); }
.cx-call__tabs [role="tab"] { flex: 1; height: 32px; padding: 0 8px; border: 0; border-radius: var(--cx-r-pill); background: none; color: var(--cx-on-call); font: 600 11px/1 var(--cx-font-ui); cursor: pointer; white-space: nowrap; }
.cx-call__tabs [role="tab"][aria-selected="true"] { background: var(--cx-surface-inverse-2); color: var(--cx-text-inverse); }
.cx-call__tabs [role="tab"]:focus-visible { box-shadow: var(--cx-focus); outline: none; }
.cx-call__tabs .cx-ibtn { flex: none; width: 32px; height: 32px; background: none; color: var(--cx-on-call); }
.cx-call__tabs .cx-ibtn:hover { background: var(--cx-surface-inverse-2); color: var(--cx-text-inverse); }
.cx-call__scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.cx-call__marks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cx-call__mark { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--cx-r-md); background: var(--cx-surface-inverse-2); font-size: 13px; line-height: 1.45; }
.cx-call__mark time, .cx-call__mark > small { padding-top: 2px; font-size: 11px; font-weight: 600; color: var(--cx-on-call); font-variant-numeric: tabular-nums; }
.cx-call__mark svg { width: 14px; height: 14px; margin-top: 3px; color: var(--cx-accent); }
.cx-call__note { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: var(--cx-r-input); background: var(--cx-surface-inverse-2); }
.cx-call__note input { flex: 1; min-width: 0; height: 30px; border: 0; background: none; color: var(--cx-text-inverse); font-size: 13px; outline: none; }
.cx-call__note input::placeholder { color: var(--cx-on-call); }
.cx-call__note:focus-within { box-shadow: var(--cx-focus); }
.cx-call__note .cx-btn { --_bg: var(--cx-text-inverse); --_fg: var(--cx-on-accent); --_h: 30px; --_px: 12px; font-size: 11px; }
.cx-call__hint { font-size: 11px; color: var(--cx-on-call); }
.cx-call__sec { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.5; }
.cx-call__sec > span:first-child { font: 600 11px/1.4 var(--cx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-on-call); }
.cx-call__metric { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--cx-r-md); background: var(--cx-surface-inverse-2); }
.cx-call__metric > span { font-size: 13px; font-weight: 600; }
.cx-call__metric > div { display: flex; align-items: baseline; gap: 8px; }
.cx-call__metric small { font-size: 11px; color: var(--cx-on-call); }
/* белая кнопка и ссылки на тёмной сцене */
.cx-call .cx-btn--secondary, .cx-sheet--inverse .cx-btn--secondary { --_bg: var(--cx-text-inverse); --_fg: var(--cx-on-accent); --_ring: none; }
.cx-call .cx-btn--secondary:hover, .cx-sheet--inverse .cx-btn--secondary:hover { background: var(--cx-on-call); }
.cx-call .cx-meter, .cx-lobby__cam .cx-meter, .cx-lobby--phone .cx-meter { background: var(--cx-surface-inverse-2); }
.cx-call .cx-meter > i, .cx-lobby__cam .cx-meter > i, .cx-lobby--phone .cx-meter > i { background: var(--cx-success); }

/* меню: dialog.cx-menu (--call — тёмное «Завершить», --outcome — светлое «Исход сессии»); появляется над панелью-пилюлей */
.cx-menu { position: absolute; z-index: var(--cx-z-dropdown); width: 300px; margin: 0; padding: 6px; border: 0; border-radius: var(--cx-r-lg); background: var(--cx-surface); color: var(--cx-text); box-shadow: var(--cx-shadow-menu); font-family: var(--cx-font-ui); }
.cx-menu[open] { display: flex; flex-direction: column; gap: 2px; animation: cx-pop-in var(--cx-dur-in) var(--cx-ease); }
.cx-menu--call, .cx-menu--outcome { inset: auto auto 100% calc(50% + 120px); margin-bottom: 12px; }
.cx-menu--call { background: var(--cx-surface-call-2); color: var(--cx-text-inverse); }
.cx-menu--call .cx-menu__item { color: var(--cx-text-inverse); }
.cx-menu--call .cx-menu__item:hover { background: var(--cx-surface-inverse-2); }
.cx-menu--call .cx-menu__sub, .cx-menu--call .cx-menu__head { color: var(--cx-on-call); }
.cx-menu--call .cx-menu__sep { background: var(--cx-surface-inverse-2); }
.cx-menu--outcome { width: 360px; }
.cx-menu--outcome .cx-menu__item { min-height: 44px; }
.cx-menu__status { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; box-shadow: inset 0 -1px 0 var(--cx-line); }
.cx-menu__status > span:last-child { display: flex; flex-direction: column; }
.cx-menu__status b { font-size: 13px; font-weight: 600; }
.cx-menu__status small { font-size: 11.5px; color: var(--cx-text-meta); }
.cx-menu__item--default { margin-top: 4px; background: var(--cx-surface-soft); }
.cx-menu__foot { padding: 6px 12px 4px; }

/* лобби: .cx-lobby > .cx-lobby__cam (тёмная: .cx-lobby__preview + .cx-lobby__ctl) + .cx-lobby__form (светлая карточка); --phone — телефон */
.cx-lobby { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; min-height: 0; font-family: var(--cx-font-ui); }
.cx-lobby__cam { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 16px; border-radius: var(--cx-r-card); background: var(--cx-surface-call); color: var(--cx-text-inverse); }
.cx-lobby__preview { position: relative; flex: 1; min-height: 240px; border-radius: var(--cx-r-lg); overflow: hidden; }
.cx-lobby__ctl { display: flex; align-items: center; gap: 14px; }
.cx-lobby__ctl small { font-size: 11px; color: var(--cx-on-call); }
.cx-lobby__ctl .cx-meter { width: 120px; min-width: 0; }
.cx-lobby__form { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--cx-r-card); background: var(--cx-surface); }
.cx-lobby__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cx-lobby--phone { display: flex; flex-direction: column; gap: 12px; min-height: 100vh; padding: 16px 12px 24px; background: var(--cx-surface-call); color: var(--cx-text-inverse); }
.cx-lobby--phone .cx-lobby__head { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.cx-lobby--phone .cx-lobby__head b { font-size: 13.5px; font-weight: 600; }
.cx-lobby--phone .cx-lobby__head small { font-size: 11px; color: var(--cx-on-call); }
.cx-lobby--phone .cx-lobby__preview { flex: none; height: 420px; min-height: 0; border-radius: var(--cx-r-card); }
.cx-lobby--phone .cx-lobby__ctl { justify-content: center; gap: 14px; }
.cx-lobby__status { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--cx-r-lg); background: var(--cx-surface-call-2); }
.cx-lobby__status > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cx-lobby__status > div + div { padding-top: 10px; border-top: 1px solid var(--cx-surface-inverse-2); }
.cx-lobby__status span span { display: flex; flex-direction: column; }
.cx-lobby__status b { font-size: 13px; font-weight: 600; }
.cx-lobby__status small { font-size: 11px; color: var(--cx-on-call); }
.cx-lobby__status .cx-meter { flex: none; width: 96px; min-width: 0; }
.cx-lobby--phone .cx-lobby__cta { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.cx-lobby--phone .cx-lobby__cta .cx-btn { width: 100%; }
.cx-lobby--phone .cx-lobby__hint { text-align: center; font-size: 11px; color: var(--cx-on-call); }

/* комната ожидания: .cx-waiting (--phone, --lg) */
.cx-waiting { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 100vh; padding: 24px; background: var(--cx-surface-call); color: var(--cx-text-inverse); text-align: center; font-family: var(--cx-font-ui); }
.cx-waiting--demo { min-height: 0; height: 560px; overflow: hidden; border-radius: var(--cx-r-card); }
.cx-waiting__preview { position: relative; flex: none; width: 360px; height: 220px; max-width: 100%; border-radius: var(--cx-r-card); overflow: hidden; }
.cx-waiting--lg .cx-waiting__preview { width: 760px; height: 428px; }
.cx-waiting--phone .cx-waiting__preview { width: 200px; height: 260px; }
.cx-waiting > div.cx-waiting__body { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 520px; }
.cx-waiting h1 { color: var(--cx-text-inverse); }
.cx-waiting p { font-size: 13px; color: var(--cx-on-call); }
.cx-waiting__top { position: absolute; top: 16px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.cx-waiting__top > span:first-child { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.cx-waiting__top small { font-size: 11px; font-weight: 400; color: var(--cx-on-call); }
.cx-waiting__when { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: var(--cx-r-pill); background: var(--cx-surface-inverse-2); font-size: 11px; font-weight: 600; white-space: nowrap; }
.cx-waiting__guest { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 12px 12px 16px; border-radius: var(--cx-r-lg); background: var(--cx-surface-call-2); text-align: left; }
.cx-waiting__guest > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.cx-waiting__guest small { font-size: 11px; font-weight: 400; color: var(--cx-on-call); }
.cx-waiting__ctl { display: flex; justify-content: center; gap: 16px; }
.cx-waiting--phone .cx-waiting__ctl { gap: 14px; }

/* согласие и выход на компьютере: dialog.cx-modal.cx-modal--call (светлая карточка на затемнении сцены); кнопки в две колонки — .cx-modal__foot--2 */
.cx-modal--call::backdrop { background: var(--cx-scrim-call); }
.cx-modal--call .cx-modal__body { color: var(--cx-text-2); }
.cx-modal__foot--2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cx-call--demo .cx-modal--call[open] { position: absolute; inset: 0; z-index: 5; margin: auto; height: fit-content; }

/* итог звонка: .cx-done (--lg 56) > .cx-done__mark + h1; оценка связи — .cx-rate > button[role=radio] */
.cx-done { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cx-done__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cx-surface-call); color: var(--cx-accent); }
.cx-done__mark svg { width: 20px; height: 20px; }
.cx-done--lg .cx-done__mark { width: 56px; height: 56px; }
.cx-done--lg .cx-done__mark svg { width: 24px; height: 24px; }
.cx-rate { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-rate > button { height: 36px; padding: 0 16px; border: 0; border-radius: var(--cx-r-pill); background: var(--cx-surface-soft); color: var(--cx-text-2); font: 600 12.5px/1 var(--cx-font-ui); cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-rate > button:hover { background: var(--cx-surface-pressed); }
.cx-rate > button[aria-checked="true"] { background: var(--cx-fill-strong); color: var(--cx-on-strong); }
.cx-rate > button:focus-visible { box-shadow: var(--cx-focus); outline: none; }

/* конспект: .cx-note-page > .cx-notecard (__head, __body > __sec > h3 + p, __foot, __signed, __storage) + расшифровка .cx-transcript */
.cx-note-page { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; min-height: 0; }
.cx-notecard { display: flex; flex-direction: column; min-height: 0; border-radius: var(--cx-r-card); background: var(--cx-surface); }
.cx-notecard--draft { box-shadow: inset 0 0 0 1.5px var(--cx-accent-deep); }
.cx-notecard__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 18px 24px 12px; }
.cx-notecard__head .cx-meta { font-size: 11.5px; }
.cx-notecard__head .cx-select { width: 160px; margin-left: auto; }
.cx-notecard__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 4px 24px 18px; font-size: 13.5px; line-height: 1.55; }
.cx-notecard__sec { display: flex; flex-direction: column; gap: 6px; }
.cx-notecard__sec > p { margin: 0; }
.cx-notecard__foot { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 14px; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-notecard__foot > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-notecard__foot > div > .cx-input { flex: 1; min-width: 160px; width: auto; }
.cx-notecard__signed { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.cx-notecard__signed svg { width: 16px; height: 16px; color: var(--cx-success); }
.cx-notecard__storage { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; padding: 12px 24px 16px; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-notecard__storage button { padding: 0; border: 0; background: none; color: var(--cx-text); font: 600 12.5px var(--cx-font-ui); cursor: pointer; }
.cx-notecard__storage button:hover { text-decoration: underline; }

/* источник ИИ: дополнения к .cx-cite */
.cx-cite--active { background: var(--cx-surface-accent); color: var(--cx-text); box-shadow: var(--cx-focus); }
.cx-cite--more { background: var(--cx-surface-soft); }
span.cx-cite { cursor: default; }
.cx-cite--none { height: auto; padding: 1px 8px; background: var(--cx-warn-bg); color: var(--cx-warn-text); cursor: default; }
.cx-cite--mark { gap: 4px; padding: 0; background: none; color: var(--cx-text-meta); cursor: default; }
.cx-cite--mark svg { width: 12px; height: 12px; }
.cx-quote { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--cx-r-md); background: var(--cx-surface-accent); font-size: 13.5px; line-height: 1.5; }
.cx-quote small { font-size: 11px; font-weight: 600; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }

/* расшифровка: .cx-transcript > .cx-transcript__head + .cx-player + .cx-transcript__list > .cx-transcript__line[data-t] */
.cx-transcript { display: flex; flex-direction: column; min-height: 0; border-radius: var(--cx-r-card); background: var(--cx-surface); }
.cx-transcript__head { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 10px; }
.cx-transcript__head > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cx-transcript__head h2 { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.cx-player { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: var(--cx-r-pill); background: var(--cx-surface-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.cx-player > button:first-child { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; padding: 0; border-radius: 50%; background: var(--cx-fill-strong); color: var(--cx-on-strong); cursor: pointer; }
.cx-player > button:first-child svg { width: 14px; height: 14px; }
.cx-player > button:first-child:focus-visible { box-shadow: var(--cx-focus); outline: none; }
.cx-player .cx-progress { flex: 1; background: var(--cx-track); }
.cx-player__speed { height: 20px; padding: 0 7px; border: 0; border-radius: var(--cx-r-tag); background: var(--cx-surface); color: var(--cx-text); font: 600 11px/20px var(--cx-font-ui); cursor: pointer; }
.cx-transcript__list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 0 12px 16px; }
.cx-transcript__line { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 8px 10px; border-radius: var(--cx-r-md); cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-transcript__line:hover { background: var(--cx-surface-hover); }
.cx-transcript__line.is-active { background: var(--cx-surface-accent); }
.cx-transcript__t { align-self: start; padding: 2px 0 0; border: 0; background: none; color: var(--cx-text-meta); font: 11.5px var(--cx-font-ui); font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; }
.cx-transcript__line > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-transcript__line small { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-transcript__line p { font-size: 13.5px; line-height: 1.5; }

/* черновик ИИ для клиента: .cx-ai-draft > __head (h2 + __tag) + label.cx-field … + .cx-meta + __actions */
.cx-ai-draft { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 22px 24px; border-radius: var(--cx-r-card); background: var(--cx-surface); }
.cx-ai-draft__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cx-ai-draft__head h2 { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.cx-ai-draft__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cx-text-meta); }
.cx-ai-draft__tag svg { width: 13px; height: 13px; color: var(--cx-accent-deep); }
.cx-ai-draft .cx-textarea { height: auto; padding: 10px 14px; line-height: 1.55; resize: vertical; }
.cx-ai-draft__actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* ход подготовки: дополнения к .cx-steps */
.cx-steps__item--ai .cx-steps__dot { background: var(--cx-accent); color: var(--cx-on-accent); box-shadow: var(--cx-focus); }
.cx-steps__item--ok .cx-steps__dot { background: var(--cx-surface-soft); color: var(--cx-success); }
.cx-steps__body { display: flex; flex-direction: column; white-space: normal; }
.cx-steps__body small { font-size: 11.5px; font-weight: 400; color: var(--cx-text-meta); }
.cx-steps--v .cx-steps__item { align-items: center; gap: 12px; font-size: 13.5px; }
.cx-banner--accent .cx-ai-dots { flex: none; align-self: center; }

/* без записи: диктовка .cx-dictate, загрузка .cx-drop--soft, QR .cx-qr */
.cx-dictate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.cx-dictate__hints { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cx-dictate__btn { display: grid; place-items: center; width: 112px; height: 112px; border: 0; padding: 0; border-radius: 50%; background: var(--cx-fill-strong); color: var(--cx-on-strong); cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease), transform var(--cx-dur-press) var(--cx-ease); }
.cx-dictate__btn svg { width: 36px; height: 36px; }
.cx-dictate__btn:hover { background: var(--cx-fill-strong-hover); }
.cx-dictate__btn:active { transform: scale(.97); }
.cx-dictate__btn:focus-visible { box-shadow: var(--cx-focus); outline: none; }
.cx-dictate__time { font-size: 40px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cx-dictate__time small { font-size: 21px; color: var(--cx-text-3); }
.cx-dictate .cx-progress { width: 360px; max-width: 100%; background: var(--cx-track); }
.cx-dictate .cx-meter { width: 160px; }
.cx-dictate__actions { display: flex; gap: 8px; }
.cx-dictate .cx-file { width: 100%; max-width: 560px; text-align: left; background: var(--cx-surface-soft); box-shadow: none; }
.cx-dictate .cx-file__icon { background: var(--cx-surface); }
.cx-choice__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--cx-r-input); background: var(--cx-surface); }
.cx-choice__icon svg { width: 16px; height: 16px; }
.cx-drop--soft { min-height: 0; padding: 48px 24px; background-image: none; box-shadow: var(--cx-ring-soft); }
.cx-file__top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; }
.cx-file.is-busy { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; background: var(--cx-surface-soft); box-shadow: none; }
.cx-file.is-busy .cx-progress { height: 6px; background: var(--cx-surface); }
.cx-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 280px; max-width: 100%; padding: 20px; border-radius: var(--cx-r-card); background: var(--cx-surface); text-align: center; }
.cx-qr__img { display: grid; place-items: center; width: 200px; height: 200px; border-radius: var(--cx-r-lg); background: var(--cx-surface); box-shadow: var(--cx-ring); color: var(--cx-text-3); font-size: 12px; font-weight: 600; }
.cx-qr__img > img, .cx-qr__img > svg { width: 100%; height: 100%; border-radius: inherit; }
.cx-qr__sum { font-size: 21px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
.cx-qr small { font-size: 11.5px; color: var(--cx-text-meta); }

@media (max-width: 1180px) {
  .cx-call--panel { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 900px) {
  .cx-call--panel { grid-template-columns: minmax(0, 1fr); }
  .cx-call--panel .cx-call__panel { display: none; }
  .cx-call--gallery .cx-call__stage { grid-template-columns: 1fr; }
  .cx-lobby { grid-template-columns: minmax(0, 1fr); }
  .cx-note-page { grid-template-columns: minmax(0, 1fr); }
  .cx-notecard__head .cx-select { width: 100%; margin-left: 0; }
}
@media (max-width: 600px) {
  .cx-lobby__form { padding: 20px; }
  .cx-ai-draft { padding: 18px; }
  .cx-notecard__head, .cx-notecard__body, .cx-notecard__storage { padding-left: 16px; padding-right: 16px; }
  .cx-call__notice--top { white-space: normal; }
  .cx-call__empty { transform: translate(-50%, 60px); }
}

/* ===== 1.6 — видео: сцена с водяным знаком, дорожка монтажа, куски; парящее меню, баланс в шапке, предел ширины ===== */

/* сцена видео (всегда тёмная): .cx-stage > .cx-stage__frame > video + .cx-stage__over + .cx-stage__crop + .cx-stage__subs + .cx-wm/.cx-stage__logo; сверху .cx-stage__top */
.cx-stage { position: relative; height: clamp(200px, 42vh, 520px); max-width: 100%; border-radius: var(--cx-r-card); overflow: hidden; background: var(--cx-surface-call); }
.cx-stage--ratio { height: auto; aspect-ratio: var(--ar, 16 / 9); }
.cx-stage__frame { position: absolute; inset: 0; overflow: hidden; }
.cx-stage video, .cx-stage__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.cx-stage__over { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cx-stage__top { position: absolute; left: var(--cx-space-3); top: var(--cx-space-3); right: var(--cx-space-3); z-index: 2; display: flex; gap: var(--cx-space-2); align-items: center; pointer-events: none; }
.cx-stage__top > * { pointer-events: auto; }
.cx-stage__top .cx-grow { flex: 1; }
/* кадр под формат экспорта: всё вне рамки затемнено */
.cx-stage__crop { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 1; transform: translateX(-50%); aspect-ratio: var(--ar, 9 / 16); box-shadow: 0 0 0 100vmax var(--cx-scrim-call), inset 0 0 0 2px var(--cx-accent); pointer-events: none; }
.cx-stage__subs { position: absolute; left: 50%; bottom: 8%; z-index: 2; transform: translateX(-50%); max-width: 80%; padding: var(--cx-space-1) var(--cx-space-3); border-radius: var(--cx-r-md); background: var(--cx-scrim-call); color: var(--cx-text-inverse); font-weight: 600; font-size: 15px; line-height: 1.4; text-align: center; pointer-events: none; }
/* логотип клиента: data-pos tl|tr|bl|br, --s — ширина в % кадра */
.cx-stage__logo { position: absolute; z-index: 1; width: var(--s, 14%); aspect-ratio: 1; display: grid; place-items: center; color: var(--cx-text-inverse); pointer-events: none; }
.cx-stage__logo svg, .cx-stage__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cx-stage__logo[data-pos="tl"] { left: 3%; top: 5%; } .cx-stage__logo[data-pos="tr"] { right: 3%; top: 5%; }
.cx-stage__logo[data-pos="bl"] { left: 3%; bottom: 5%; } .cx-stage__logo[data-pos="br"] { right: 3%; bottom: 5%; }
/* водяной знак corix: span.cx-wm > svg (corix-sprite.svg#corix-logo); внутри любого блока с position; data-pos="bl" — слева */
.cx-wm { position: absolute; z-index: 1; right: 3%; bottom: 5%; width: 13%; min-width: 44px; aspect-ratio: 1005 / 323; color: var(--cx-text-inverse); opacity: .75; pointer-events: none; }
.cx-wm svg { width: 100%; height: 100%; display: block; }
.cx-wm[data-pos="bl"] { right: auto; left: 3%; }
.cx-wm--sm { right: var(--cx-space-2); bottom: var(--cx-space-2); width: 22%; }
.cx-stage__crop .cx-wm { width: 24%; }
/* строка под сценой: .cx-player (растягивается) + переключатели */
.cx-stage-bar { display: flex; gap: var(--cx-space-3); align-items: center; flex-wrap: wrap; margin-top: var(--cx-space-3); }
.cx-stage-bar .cx-player { flex: 1; min-width: 240px; }
.cx-player .cx-progress { flex: 1; cursor: pointer; }

/* дорожка монтажа: .cx-track > .cx-track__ruler (span, left %) + .cx-track__strip (img ×N, .cx-track__cut, .cx-track__patch) + .cx-track__wave (i, --h) + .cx-track__shade ×2 + .cx-track__sel (b ×2; --cut — красная, для вырезки; тело тащится, b — ручки) + .cx-track__head */
.cx-track { position: relative; user-select: none; touch-action: none; }
.cx-track__ruler { position: relative; height: 18px; font-size: 10.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-track__ruler span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.cx-track__ruler span:first-child { transform: none; }
.cx-track__strip { position: relative; display: flex; height: 64px; border-radius: var(--cx-r-md); overflow: hidden; background: var(--cx-surface-call); cursor: pointer; }
.cx-track__strip > img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cx-track__cut { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--cx-surface-call); pointer-events: none; }
/* вклеенный вариант поверх кадров; .is-wait — ещё делается, .is-flash — только что вклеен */
.cx-track__patch { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; align-items: flex-start; padding: var(--cx-space-1); overflow: hidden; border-radius: var(--cx-r-xs); box-shadow: inset 0 0 0 2px var(--cx-success); pointer-events: none; }
.cx-track__patch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-track__patch .cx-chip { position: relative; }
.cx-track__patch.is-wait { background: var(--cx-scrim); box-shadow: inset 0 0 0 2px var(--cx-border); }
.cx-track__patch.is-flash { animation: cx-track-flash 1.2s var(--cx-ease) 2; }
@keyframes cx-track-flash { 50% { box-shadow: inset 0 0 0 4px var(--cx-accent); } }
.cx-track__wave { position: relative; display: flex; align-items: center; gap: 1px; height: 36px; margin-top: var(--cx-space-2); padding: 0 var(--cx-space-1); overflow: hidden; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); cursor: pointer; }
.cx-track__wave i { flex: 1 1 0; min-width: 0; height: var(--h); border-radius: 1px; background: var(--cx-text-3); }
.cx-track__wave i.is-in { background: var(--cx-text-2); }
.cx-track__shade { position: absolute; top: 18px; bottom: 0; background: var(--cx-scrim-call); pointer-events: none; }
.cx-track__sel { --_c: var(--cx-accent); position: absolute; z-index: 2; top: 18px; bottom: 0; border-radius: var(--cx-r-xs); box-shadow: inset 0 0 0 2px var(--_c); cursor: grab; }
.cx-track__sel:active { cursor: grabbing; }
.cx-track__sel--cut { --_c: var(--cx-critical); }
.cx-track__sel b { position: absolute; top: 22px; width: 6px; height: 20px; margin-left: -3px; border-radius: var(--cx-r-pill); background: var(--_c); cursor: ew-resize; }
.cx-track__sel b::before { content: ""; position: absolute; inset: -14px -10px; }
.cx-track__sel b:first-child { left: 0; } .cx-track__sel b:last-child { left: 100%; }
.cx-track__head { position: absolute; top: 14px; bottom: -2px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--cx-text-inverse); box-shadow: 0 0 0 1px var(--cx-surface-call); pointer-events: none; }
.cx-track__head::before { content: ""; position: absolute; left: -4px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: inherit; box-shadow: inherit; }

/* куски ролика: .cx-segs > button.cx-seg[aria-pressed] > img + span > b + small; .cx-seg--ext — добавка в конец (div > img + span > b + small|.cx-chip--progress, затем .cx-btn) */
.cx-segs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--cx-space-2); margin-top: var(--cx-space-3); }
.cx-seg { display: flex; gap: var(--cx-space-3); align-items: center; min-width: 0; padding: var(--cx-space-2); border: 0; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); color: var(--cx-text); font: inherit; text-align: left; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-seg:hover { background: var(--cx-surface-hover); }
.cx-seg[aria-pressed="true"] { background: var(--cx-surface-accent); }
.cx-seg:focus-visible { outline: none; box-shadow: var(--cx-focus); }
.cx-seg img { flex: none; width: 56px; height: 32px; object-fit: cover; border-radius: var(--cx-r-xs); background: var(--cx-surface-call); }
.cx-seg > span { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; }
.cx-seg b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-seg small { color: var(--cx-text-meta); font-size: 11px; font-variant-numeric: tabular-nums; }
.cx-seg--ext { grid-column: 1 / -1; cursor: default; background: transparent; box-shadow: inset 0 0 0 1px var(--cx-border); }
.cx-seg--ext:hover { background: transparent; }
.cx-seg--ext > span { flex: 1 1 auto; gap: 4px; }
.cx-seg--ext > .cx-btn { flex: none; margin-left: auto; }
.cx-seg--ext .cx-chip { align-self: flex-start; max-width: 100%; }
/* перестановка кусков: .cx-segs--sort — карточки можно таскать (мышью сразу, пальцем после долгого нажатия);
   .cx-seg.is-lifted — карточка в руке, сдвиг за пальцем через --dx/--dy; .cx-seg.is-armed — палец держит, сейчас поднимется */
.cx-segs--sort > .cx-seg:not(.cx-seg--ext) { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cx-segs--sort > .cx-seg img { pointer-events: none; }
.cx-seg.is-armed { transform: scale(.98); transition: transform var(--cx-dur-hover) var(--cx-ease); }
.cx-seg.is-lifted { position: relative; z-index: 2; cursor: grabbing; pointer-events: none; background: var(--cx-surface); box-shadow: var(--cx-shadow-drop); transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1.03); transition: none; }
.cx-segs.is-sorting > .cx-seg:not(.is-lifted) { transition: background var(--cx-dur-hover) var(--cx-ease); }
@media (max-width: 900px) {
  .cx-stage:not(.cx-stage--ratio) { height: auto; aspect-ratio: 16 / 9; }
  .cx-track__strip { height: 48px; }
  .cx-segs { grid-template-columns: minmax(0, 1fr); }
}

/* нижнее меню, парящее над контентом: nav.cx-tabbar.cx-tabbar--float */
.cx-tabbar--float { left: var(--cx-space-3); right: var(--cx-space-3); bottom: calc(var(--cx-space-3) + env(safe-area-inset-bottom)); padding: 6px 8px; border-radius: var(--cx-r-header); box-shadow: var(--cx-shadow-menu), inset 0 0 0 1px var(--cx-line); }
@media (max-width: 900px) { .cx-app:has(> .cx-tabbar--float), .cx-app:has(> .cx-page > .cx-tabbar--float) { padding-bottom: calc(76px + var(--cx-space-3) * 2 + env(safe-area-inset-bottom)); } }

/* баланс в шапке: a.cx-shell__balance (--warn — мало денег) > svg (ruble) + span; до 480px — только сумма */
.cx-shell__balance { display: inline-flex; align-items: center; gap: 6px; height: var(--cx-h-lg); padding: 0 14px 0 12px; border-radius: var(--cx-r-pill); background: var(--cx-surface-soft); color: var(--cx-text); font: 600 13px/1 var(--cx-font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-shell__balance svg { flex: none; width: 16px; height: 16px; }
.cx-shell__balance:hover { background: var(--cx-surface-pressed); }
.cx-shell__balance:focus-visible { outline: none; box-shadow: var(--cx-focus); }
.cx-shell__balance--warn { background: var(--cx-warn-bg); color: var(--cx-warn-text); }
.cx-shell--compact .cx-shell__balance { height: var(--cx-h-sm); padding: 0 10px; font-size: 12px; }
@media (max-width: 900px) { .cx-shell__balance { height: 38px; } }
@media (max-width: 480px) { .cx-shell__balance { padding: 0 10px; } .cx-shell__balance svg { display: none; } }

/* предел ширины на широком мониторе: .cx-page.cx-page--max — прямые потомки, кроме шапки, нижнего меню, тостов и диалогов, не шире --cx-page-max и по центру */
.cx-page--max > :where(:not(.cx-shell, .cx-tabbar, .cx-toasts, .cx-panel--fixed, dialog)) { width: 100%; max-width: var(--cx-page-max); margin-inline: auto; }

/* ===== монтажный стол (1.7): .cx-montage[style="--px: пикселей на секунду; --len: длина ролика в секундах"] =====
   > .cx-montage__ruler (липкая сверху) > .cx-montage__gutter (масштаб) + .cx-montage__scale (span с --t: секунда)
   > .cx-montage__track[--video|--audio][.is-hidden|.is-muted|.is-over] > .cx-montage__label (липкая слева: иконка, b имя, кнопки .cx-montage__ib)
     + .cx-montage__lane > .cx-clip[--video|--image|--sticker|--text|--pip|--audio][.is-selected|.is-lifted|.is-wait]
       (положение --a/--b в секундах) > img×N | svg.cx-icon + span.cx-clip__name + i.cx-clip__h×2 (ручки)
       + button.cx-montage__join[--t][.is-set] (стык: переход)
   > .cx-montage__cursor[--t] (плейхед) + button.cx-montage__add (добавить дорожку). Масштаб (колесо, щипок), перетаскивание и
   ручки делает продукт, здесь — только разметка и состояния. («Хроника» — это .cx-timeline, другой компонент.) */
.cx-montage { --px: 48px; --len: 10; --gutter: 108px; --h-video: 56px; --h-layer: 40px; --h-audio: 36px; position: relative; overflow: auto; overscroll-behavior-x: contain; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); -webkit-user-select: none; user-select: none; scrollbar-width: thin; }
.cx-montage__ruler { position: sticky; top: 0; z-index: 3; display: flex; width: max-content; min-width: 100%; height: 22px; background: var(--cx-surface-soft); box-shadow: inset 0 -1px 0 var(--cx-line); }
.cx-montage__gutter { position: sticky; left: 0; z-index: 4; flex: none; display: flex; align-items: center; gap: 2px; width: var(--gutter); padding: 0 6px; background: var(--cx-surface-soft); box-shadow: inset -1px 0 0 var(--cx-line); font-size: 11px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-montage__scale { position: relative; flex: none; width: calc(var(--len) * var(--px)); height: 100%; font-size: 10.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; cursor: pointer; }
.cx-montage__scale span { position: absolute; top: 3px; left: calc(var(--t, 0) * var(--px)); transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.cx-montage__scale span::after { content: ""; position: absolute; left: 50%; top: 14px; width: 1px; height: 5px; background: var(--cx-border); }
.cx-montage__scale span:first-child { transform: none; padding-left: 4px; } .cx-montage__scale span:first-child::after { left: 0; }
.cx-montage__track { display: flex; width: max-content; min-width: 100%; height: calc(var(--h-layer) + 1px); box-shadow: inset 0 -1px 0 var(--cx-line); }
.cx-montage__track--video { --h-layer: var(--h-video); }
.cx-montage__track--audio { --h-layer: var(--h-audio); }
.cx-montage__label { position: sticky; left: 0; z-index: 2; flex: none; display: flex; align-items: center; gap: 5px; width: var(--gutter); padding: 0 4px 0 8px; background: var(--cx-surface-soft); box-shadow: inset -1px 0 0 var(--cx-line); font-size: 11.5px; color: var(--cx-text-2); }
.cx-montage__label > .cx-icon { flex: none; width: 14px; height: 14px; color: var(--cx-text-3); }
.cx-montage__label b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cx-montage__ib { all: unset; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--cx-r-xs); color: var(--cx-text-3); cursor: pointer; }
.cx-montage__ib .cx-icon { width: 13px; height: 13px; }
.cx-montage__ib:hover { background: var(--cx-surface-hover); color: var(--cx-text); }
.cx-montage__ib:focus-visible { box-shadow: var(--cx-focus); }
.cx-montage__ib[aria-pressed="true"] { color: var(--cx-text); }
.cx-montage__lane { position: relative; flex: none; width: calc(var(--len) * var(--px)); height: var(--h-layer); }
.cx-montage__track.is-hidden .cx-montage__lane, .cx-montage__track.is-muted .cx-montage__lane { opacity: .4; }
.cx-montage__track.is-over .cx-montage__lane { background: var(--cx-surface-accent); }
.cx-clip { --_c: var(--cx-tag-8); position: absolute; top: 4px; bottom: 4px; left: calc(var(--a, 0) * var(--px)); width: calc((var(--b, 1) - var(--a, 0)) * var(--px)); display: flex; align-items: center; gap: 6px; min-width: 6px; padding: 0 8px 0 10px; overflow: hidden; border-radius: var(--cx-r-xs); background: color-mix(in srgb, var(--_c) 22%, var(--cx-surface)); color: var(--cx-text); font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: grab; touch-action: none; }
.cx-clip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--_c); }
.cx-clip:active { cursor: grabbing; }
.cx-clip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cx-clip > .cx-icon { flex: none; width: 13px; height: 13px; color: var(--_c); }
.cx-clip--video { --_c: var(--cx-text-3); gap: 0; padding: 0; background: var(--cx-surface-call); color: var(--cx-text-inverse); }
.cx-clip--video::before { display: none; }
.cx-clip--video img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; pointer-events: none; }
.cx-clip--video .cx-clip__name { position: absolute; left: 6px; bottom: 4px; max-width: calc(100% - 12px); padding: 1px 6px; border-radius: var(--cx-r-xs); background: var(--cx-scrim-call); font-size: 10.5px; }
.cx-clip--image { --_c: var(--cx-tag-2); } .cx-clip--sticker { --_c: var(--cx-tag-7); } .cx-clip--text { --_c: var(--cx-tag-3); }
.cx-clip--pip { --_c: var(--cx-tag-6); } .cx-clip--audio { --_c: var(--cx-tag-1); }
.cx-clip--audio { gap: 1px; padding: 0 6px 0 8px; }
.cx-clip--audio i:not(.cx-clip__h) { flex: 1 1 0; min-width: 0; align-self: center; height: var(--h, 40%); border-radius: 1px; background: var(--_c); opacity: .7; }
.cx-clip--audio .cx-clip__name { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); padding: 0 4px; border-radius: var(--cx-r-xs); background: color-mix(in srgb, var(--cx-surface) 80%, transparent); }
.cx-clip__h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; opacity: 0; }
.cx-clip__h::before { content: ""; position: absolute; top: 50%; left: 2px; width: 3px; height: 14px; margin-top: -7px; border-radius: var(--cx-r-pill); background: var(--cx-accent); }
.cx-clip__h:first-of-type { left: 0; } .cx-clip__h:last-of-type { right: 0; }
.cx-clip__h:last-of-type::before { left: auto; right: 2px; }
.cx-clip.is-selected { box-shadow: inset 0 0 0 2px var(--cx-accent); z-index: 1; }
.cx-clip.is-selected .cx-clip__h, .cx-clip:hover .cx-clip__h { opacity: 1; }
.cx-clip.is-lifted { z-index: 3; cursor: grabbing; box-shadow: var(--cx-shadow-drop); transform: translate(var(--dx, 0px), var(--dy, 0px)); transition: none; }
.cx-clip.is-wait { background: var(--cx-scrim); box-shadow: inset 0 0 0 2px var(--cx-border); color: var(--cx-text-inverse); }
.cx-clip.is-wait::before { display: none; }
.cx-clip:focus-visible { outline: none; box-shadow: var(--cx-focus); }
.cx-montage__join { all: unset; position: absolute; z-index: 2; top: 50%; left: calc(var(--t, 0) * var(--px)); width: 20px; height: 20px; margin: -10px 0 0 -10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cx-surface); color: var(--cx-text-3); box-shadow: inset 0 0 0 1px var(--cx-border); cursor: pointer; }
.cx-montage__join .cx-icon { width: 12px; height: 12px; }
.cx-montage__join:hover { color: var(--cx-text); box-shadow: inset 0 0 0 1px var(--cx-text-3); }
.cx-montage__join.is-set { background: var(--cx-accent); color: var(--cx-on-accent); box-shadow: none; }
.cx-montage__join:focus-visible { box-shadow: var(--cx-focus); }
.cx-montage__cursor { position: absolute; z-index: 5; top: 0; bottom: 0; left: calc(var(--gutter) + var(--t, 0) * var(--px)); width: 2px; margin-left: -1px; background: var(--cx-text); pointer-events: none; }
.cx-montage__cursor::before { content: ""; position: absolute; left: -5px; top: 0; width: 12px; height: 12px; border-radius: 0 0 6px 6px; background: inherit; }
.cx-montage__add { all: unset; position: sticky; left: 0; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; color: var(--cx-text-meta); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.cx-montage__add .cx-icon { width: 14px; height: 14px; }
.cx-montage__add:hover { color: var(--cx-text); }
.cx-montage__add:focus-visible { box-shadow: var(--cx-focus); border-radius: var(--cx-r-xs); }
@media (max-width: 900px) { .cx-montage { --gutter: 84px; --px: 36px; } .cx-montage__label { padding-left: 8px; font-size: 11px; } .cx-montage__label > .cx-icon, .cx-montage__label .cx-montage__ib:nth-of-type(n+2) { display: none; } }

/* панель инструментов монтажа (1.7): .cx-toolbar[--tabs] > button.cx-toolbar__btn[aria-pressed|disabled] > svg.cx-icon + span.
   Горизонтальная лента, прокручивается пальцем; на телефоне ставится над парящим меню. Активная кнопка — aria-pressed.
   .cx-toolbar--tabs — ряд разделов (Монтаж / Музыка / Фильтры / Текст / Стикеры), кнопки во всю ширину. */
.cx-toolbar { display: flex; gap: 2px; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); }
.cx-toolbar::-webkit-scrollbar { display: none; }
.cx-toolbar__btn { all: unset; flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 56px; height: 52px; padding: 0 6px; border-radius: var(--cx-r-xs); color: var(--cx-text-2); font: 600 10.5px/1 var(--cx-font-ui); white-space: nowrap; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease), color var(--cx-dur-hover) var(--cx-ease); }
.cx-toolbar__btn .cx-icon { width: 20px; height: 20px; }
.cx-toolbar__btn:hover { background: var(--cx-surface-hover); color: var(--cx-text); }
.cx-toolbar__btn:focus-visible { box-shadow: var(--cx-focus); }
.cx-toolbar__btn[aria-pressed="true"] { background: var(--cx-fill-strong); color: var(--cx-on-strong); }
.cx-toolbar__btn:disabled { opacity: .4; cursor: default; }
.cx-toolbar__sep { flex: none; width: 1px; margin: 10px 4px; background: var(--cx-line); }
.cx-toolbar--tabs { background: none; padding: 0; }
.cx-toolbar--tabs .cx-toolbar__btn { flex: 1 1 0; min-width: 64px; height: 44px; }

/* ===================== Corix UI 1.8 — рабочее место поддержки (Пульт) =====================
   Пришло из канваса «Пульт · рабочее место поддержки»: очередь и доска, окно запроса с лентой и редактором ответа,
   звонки, команда и отчёты, клиенты, база знаний. Плюс плавное закрытие всех слоёв и выпадающий список без нативного select. */

/* ---------- Плавное закрытие слоёв: cx.js ставит .is-closing, ждёт --cx-dur-out и закрывает ---------- */
@keyframes cx-pop-out { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes cx-modal-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes cx-drawer-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes cx-sheet-out { to { opacity: 0; transform: translateY(24px); } }
@keyframes cx-fade-out { to { opacity: 0; } }
.cx-pop.is-closing > .cx-pop__panel { animation: cx-pop-out var(--cx-dur-out) var(--cx-ease) forwards; pointer-events: none; }
.cx-modal.is-closing { animation: cx-modal-out var(--cx-dur-out) var(--cx-ease) forwards; }
.cx-drawer.is-closing { animation: cx-drawer-out var(--cx-dur-out) var(--cx-ease) forwards; }
.cx-sheet.is-closing { animation: cx-sheet-out var(--cx-dur-out) var(--cx-ease) forwards; }
.cx-cmdk.is-closing { animation: cx-fade-out var(--cx-dur-out) var(--cx-ease) forwards; }
dialog.is-closing::backdrop { animation: cx-fade-out var(--cx-dur-out) var(--cx-ease) forwards; }
.cx-enter { animation: cx-fade-up var(--cx-dur-enter) var(--cx-ease) both; } /* появление блока: тост-карточка, панель сохранения, новая строка */

/* ---------- Раскрытие любой высоты: .cx-collapse (> один ребёнок), открыт — .is-open на нём или на предке-обёртке; шеврон .cx-chev ---------- */
.cx-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--cx-dur-expand) var(--cx-ease); }
.cx-collapse > * { overflow: hidden; min-height: 0; }
.cx-collapse.is-open, .is-open > .cx-collapse, [aria-expanded="true"] + .cx-collapse { grid-template-rows: 1fr; }
.cx-chev { display: inline-flex; flex: none; color: var(--cx-text-3); transition: transform var(--cx-dur-rotate) var(--cx-ease); }
.cx-chev svg { width: 16px; height: 16px; }
.cx-chev.is-open, .is-open > * > .cx-chev, [aria-expanded="true"] > .cx-chev, [aria-expanded="true"].cx-chev { transform: rotate(180deg); }
.cx-chev--side.is-open, .is-open > * > .cx-chev--side, [aria-expanded="true"] > .cx-chev--side { transform: rotate(90deg); }

/* ---------- Выпадающий список без нативного select: details.cx-pop.cx-dd > summary.cx-dd__btn > .cx-dd__value + .cx-pop__panel.cx-dd__panel > button.cx-option[aria-selected] ----------
   Ширина — --w (по умолчанию по тексту), во всю ширину — .cx-dd--block. Выбор, закрытие, стрелки и событие cx:change — cx.js; в React ставьте data-cx-controlled и меняйте aria-selected сами. */
.cx-dd { --w: auto; width: var(--w); max-width: 100%; vertical-align: middle; }
.cx-dd--block { display: block; width: 100%; }
.cx-dd__btn { display: flex; align-items: center; gap: 8px; width: 100%; height: var(--cx-h-input); padding: 0 12px 0 13px; border-radius: var(--cx-r-input); background: var(--cx-surface); box-shadow: var(--cx-ring); color: var(--cx-text); font: 600 12.5px/1 var(--cx-font-ui); white-space: nowrap; user-select: none; transition: box-shadow var(--cx-dur-button) var(--cx-ease); }
.cx-dd__btn:hover { box-shadow: inset 0 0 0 1px var(--cx-text-4); }
.cx-dd__btn:focus-visible, .cx-dd[open]:not(.is-closing) > .cx-dd__btn { box-shadow: var(--cx-focus); }
.cx-dd__btn::after { content: ""; flex: none; width: 7px; height: 7px; margin: -4px 2px 0 auto; border-right: 1.7px solid var(--cx-text-meta); border-bottom: 1.7px solid var(--cx-text-meta); transform: rotate(45deg); transition: transform var(--cx-dur-rotate) var(--cx-ease); }
.cx-dd[open]:not(.is-closing) > .cx-dd__btn::after { transform: translateY(4px) rotate(225deg); }
.cx-dd__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cx-dd__value:empty::before { content: attr(data-placeholder); color: var(--cx-text-4); }
.cx-dd__panel.cx-pop__panel { left: 0; right: auto; min-width: 100%; max-height: 240px; overflow-y: auto; padding: 6px; border-radius: var(--cx-r-lg); box-shadow: var(--cx-shadow-drop); transform-origin: top center; top: calc(100% + 6px); }
.cx-dd--end > .cx-dd__panel.cx-pop__panel { left: auto; right: 0; }
.cx-pop--up > .cx-dd__panel.cx-pop__panel { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; } /* 1.11.5: список у нижнего края открывается вверх */
.cx-dd .cx-option { width: 100%; min-height: 0; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--cx-text); font: 600 12.5px/1.4 var(--cx-font-ui); text-align: left; white-space: nowrap; gap: 9px; }
.cx-dd .cx-option:hover, .cx-dd .cx-option.is-active { background: var(--cx-surface-hover); }
.cx-dd .cx-option[aria-selected="true"] { background: var(--cx-surface-soft); }
.cx-dd__group { padding: 8px 12px 4px; font: 600 11px/1.4 var(--cx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-dd[aria-disabled="true"] { pointer-events: none; opacity: .5; }

/* ---------- Сегменты с бегунком: .cx-segmented--slide — белый бегунок переезжает к выбранному (до 7 вариантов, без JS); варианты равной ширины ---------- */
.cx-segmented--slide, .cx--ds .cx-segmented { --_n: 1; --_i: 0; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-width: 0; gap: 0; border-radius: var(--cx-r-md); }
.cx-segmented--slide::before, .cx--ds .cx-segmented::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--_n)); border-radius: calc(var(--cx-r-md) - 3px); background: var(--cx-surface); box-shadow: 0 1px 2px rgba(23,24,28,.08), var(--cx-ring-soft); transform: translateX(calc(var(--_i) * 100%)); transition: transform var(--cx-dur-sidebar) var(--cx-ease-out); }
.cx-segmented--slide > *, .cx--ds .cx-segmented > * { position: relative; justify-content: center; }
.cx-segmented--slide [aria-pressed="true"], .cx-segmented--slide label:has(input:checked),
.cx--ds .cx-segmented [aria-pressed="true"], .cx--ds .cx-segmented label:has(input:checked) { background: none; box-shadow: none; }
:is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(2):last-child) { --_n: 2; }
:is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(3):last-child) { --_n: 3; }
:is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(4):last-child) { --_n: 4; }
:is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(5):last-child) { --_n: 5; }
:is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(6):last-child) { --_n: 6; }
:is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(7):last-child) { --_n: 7; }
:is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(2)[aria-pressed="true"], > :nth-child(2) > input:checked) { --_i: 1; }
:is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(3)[aria-pressed="true"], > :nth-child(3) > input:checked) { --_i: 2; }
:is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(4)[aria-pressed="true"], > :nth-child(4) > input:checked) { --_i: 3; }
:is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(5)[aria-pressed="true"], > :nth-child(5) > input:checked) { --_i: 4; }
:is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(6)[aria-pressed="true"], > :nth-child(6) > input:checked) { --_i: 5; }
:is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(7)[aria-pressed="true"], > :nth-child(7) > input:checked) { --_i: 6; }
@media (max-width: 600px) { /* 1.10.2: на телефоне от пяти вариантов равные колонки не влезают — лента по содержимому с прокруткой, выбранный подсвечен сам, без бегунка */
  :is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(5)) { grid-auto-columns: max-content; }
  :is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(5))::before { display: none; }
  :is(.cx-segmented--slide, .cx--ds .cx-segmented):has(> :nth-child(5)) > :is([aria-pressed="true"], label:has(input:checked)) { border-radius: calc(var(--cx-r-md) - 3px); background: var(--cx-surface); box-shadow: 0 1px 2px rgba(23,24,28,.08), var(--cx-ring-soft); }
}

/* ---------- Поиск-пилюля: label.cx-search > svg + input + button.cx-search__clear | kbd.cx-kbd; ширина — --w; крестик виден, когда есть текст ---------- */
.cx-search { --w: auto; display: flex; align-items: center; gap: 8px; width: var(--w); min-width: 0; height: var(--cx-h-input); padding: 0 8px 0 13px; border-radius: var(--cx-r-pill); background: var(--cx-surface-soft); color: var(--cx-text-3); cursor: text; transition: background var(--cx-dur-button) var(--cx-ease), box-shadow var(--cx-dur-button) var(--cx-ease); }
.cx-search > svg { width: 16px; height: 16px; flex: none; }
.cx-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; color: var(--cx-text); font: 600 12.5px var(--cx-font-ui); }
.cx-search input::placeholder { color: var(--cx-text-3); }
.cx-search input::-webkit-search-cancel-button { display: none; }
.cx-search:focus-within { background: var(--cx-surface); box-shadow: var(--cx-focus); }
.cx-search input:focus-visible { box-shadow: none; } /* 1.11.4: рамка фокуса одна — на обёртке, не на input */
.cx-search__clear { display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cx-text-meta); cursor: pointer; }
.cx-search__clear:hover { background: var(--cx-surface-pressed); color: var(--cx-text); }
.cx-search__clear svg { width: 14px; height: 14px; }
.cx-search:has(input:placeholder-shown) .cx-search__clear, .cx-search:not(:has(input:placeholder-shown)) .cx-kbd { display: none; }
.cx-search .cx-kbd { box-shadow: none; background: none; color: var(--cx-text-4); }

/* ---------- Шапка: кнопка поиска ⌘K и строка состояния (смена, счётчики дня) ---------- */
.cx-shell__find { display: inline-flex; align-items: center; gap: 8px; flex: none; height: var(--cx-h-lg); padding: 0 18px; border: 0; border-radius: var(--cx-r-pill); background: var(--cx-fill-strong); color: var(--cx-on-strong); box-shadow: inset 0 0 0 1.5px var(--cx-accent); font: 600 13px/1 var(--cx-font-ui); cursor: pointer; transition: filter var(--cx-dur-button) var(--cx-ease), transform var(--cx-dur-press) var(--cx-ease); }
.cx-shell__find:hover { filter: brightness(1.09); }
.cx-shell__find:active { transform: translateY(1px); }
.cx-shell__find:focus-visible { box-shadow: inset 0 0 0 1.5px var(--cx-accent), var(--cx-focus); }
.cx-shell__find svg { width: 17px; height: 17px; color: var(--cx-accent); }
.cx-shell__find .cx-kbd { height: auto; padding: 0; margin-left: 3px; background: none; box-shadow: none; color: inherit; }
.cx-shell__me { text-decoration: none; }
.cx-shell__status { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cx-shell__stat { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 12.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-shell__stat b { font-weight: 600; color: var(--cx-text); }
.cx-shell__stat b.is-bad { color: var(--cx-critical); }
.cx-shell__stat i { font-style: normal; color: var(--cx-text-ghost); }
@media (max-width: 900px) { .cx-shell__status { display: none; } .cx-shell__find { width: 38px; height: 38px; padding: 0; justify-content: center; font-size: 0; } .cx-shell__find .cx-kbd { display: none; } }

/* ---------- Рейка приложения: nav.cx-rail > a.cx-rail__item[aria-current=page] (svg 20) + .cx-rail__gap + аватар; подписи — тултип справа ---------- */
.cx-rail { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 6px; width: var(--cx-side-rail); padding: 12px 0; border-radius: var(--cx-r-modal); background: var(--cx-surface); flex: none; }
.cx-layout > .cx-rail { position: sticky; top: calc(var(--cx-h-header) + var(--cx-gap) * 2); height: calc(100vh - var(--cx-h-header) - var(--cx-gap) * 3); align-self: flex-start; }
.cx-rail__item { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--cx-r-md); background: transparent; color: var(--cx-text-2); text-decoration: none; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease), color var(--cx-dur-hover) var(--cx-ease); }
.cx-rail__item svg { width: 20px; height: 20px; }
.cx-rail__item:hover { background: var(--cx-surface-pressed); color: var(--cx-text); }
.cx-rail__item[aria-current="page"] { background: var(--cx-accent); color: var(--cx-on-accent); }
.cx-rail__item:focus-visible { box-shadow: var(--cx-focus); }
.cx-rail__item .cx-badge { position: absolute; top: 4px; right: 4px; box-shadow: 0 0 0 2px var(--cx-surface); }
.cx-rail__item .cx-avatar { --_s: 36px; }
.cx-rail__gap { flex: 1 1 auto; }
.cx-tip--right::after { bottom: auto; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%); font-size: 12.5px; font-weight: 400; padding: 6px 10px; white-space: nowrap; max-width: none; box-shadow: var(--cx-shadow-menu); }
.cx-tip--right:hover::after, .cx-tip--right:has(:focus-visible)::after, .cx-tip--right:focus-visible::after, .cx-tip--right.is-open::after { transform: translate(0, -50%); } /* 1.11.4: после клика мышью тултип рейки гаснет — только :focus-visible, не :focus-within */
@media (max-width: 900px) { .cx-rail { display: none; } }

/* ---------- Заголовок раздела: .cx-head > h1.cx-head__title + .cx-tabs + .cx-grow + действия ---------- */
.cx-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: var(--cx-h-lg); }
.cx-head__title { margin: 0 8px 0 0; font-size: 18px; line-height: 1.4; font-weight: 600; }

/* ---------- Ячейки: заголовок и подпись строкой, число, мета — для .cx-rows, .cx-item, .cx-board ---------- */
.cx-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cx-cell__title { min-width: 0; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--cx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-cell__title--wrap { white-space: normal; }
.cx-cell__sub { min-width: 0; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-cell__sub--wrap { white-space: normal; }
.cx-cell--num { font-size: 13px; line-height: 1.5; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cx-cell--meta { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-cell--num.is-bad, .cx-cell--meta.is-bad { color: var(--cx-critical); }

/* ---------- Строки-таблица на сетке: .cx-rows[style=--cols:…] > .cx-rows__head + a/button/div.cx-rows__row ----------
   Колонки задаёт --cols (grid-template-columns). Состояния строки: .is-unread (клиент ждёт ответа), .is-current (открыта справа),
   .is-warn, .is-critical, .is-sub (вложенная, пунктир). В карточке без отступов — .cx-rows--inset. Заголовок капсом — .cx-rows--caps. */
.cx-rows { --cols: minmax(0, 1fr) auto; --gap: 10px; display: flex; flex-direction: column; min-width: 0; }
.cx-rows__head, .cx-rows__row { display: grid; grid-template-columns: var(--cols); gap: var(--gap); align-items: center; padding: 8px 12px; margin: 0 -12px; }
.cx-rows__head { padding: 6px 12px 8px; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); }
.cx-rows__head > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-rows--caps .cx-rows__head > * { overflow: visible; text-overflow: clip; } /* 1.8.2: короткие подписи капсом не режем */
.cx-rows--caps .cx-rows__head { min-height: 30px; padding-top: 0; padding-bottom: 0; font: 600 11px/1.5 var(--cx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-rows__row { border: 0; border-top: 1px solid var(--cx-line); background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; transition: background var(--cx-dur-hover) var(--cx-ease); }
a.cx-rows__row, button.cx-rows__row, .cx-rows__row[tabindex] { cursor: pointer; border-radius: var(--cx-r-md); }
button.cx-rows__row { width: calc(100% + 24px); }
a.cx-rows__row:hover, button.cx-rows__row:hover, .cx-rows__row[tabindex]:hover { background: var(--cx-surface-hover); }
.cx-rows__row:focus-visible { box-shadow: var(--cx-focus); }
.cx-rows__row.is-unread, .cx-rows__row.is-unread:hover { background: var(--cx-surface-accent); }
.cx-rows__row.is-unread .cx-cell__title { font-weight: 700; }
.cx-rows__row.is-unread .cx-cell__sub { color: var(--cx-text); font-weight: 500; } /* 1.8.2: превью у «ждёт ответа» тёмное, как в артборде Main */
.cx-rows__row[aria-selected="true"], .cx-rows__row[aria-selected="true"]:hover { background: var(--cx-surface-soft); } /* 1.8.2: выделена для действий над несколькими */
.cx-rows__row.is-current, .cx-rows__row.is-current:hover { background: var(--cx-surface-soft); }
.cx-rows__row.is-warn { background: color-mix(in srgb, var(--cx-warn) 10%, transparent); border-radius: var(--cx-r-md); border-top-color: transparent; }
.cx-rows__row.is-critical { background: color-mix(in srgb, var(--cx-critical) 9%, transparent); border-radius: var(--cx-r-md); border-top-color: transparent; }
.cx-rows__row.is-sub { border-top-style: dashed; padding: 6px 12px 6px 40px; }
.cx-rows--inset .cx-rows__head, .cx-rows--inset .cx-rows__row { margin: 0; padding-left: 16px; padding-right: 16px; border-radius: 0; }
.cx-rows--inset button.cx-rows__row { width: 100%; }
.cx-rows--tall .cx-rows__row { min-height: 56px; padding-top: 6px; padding-bottom: 7px; } /* 1.10.2: сверху 6 — линия строки рамкой 1px; в канвасе линия тенью, высокая строка (два статуса) — 61.2 */
.cx-rows--tall :is(.cx-cell__sub, .cx-cell--meta) { font-size: 12.5px; } /* 1.8.2: в высоких строках очереди мета 12.5 */
.cx-rows__more { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; font-size: 11.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-rows--inset .cx-rows__more { padding: 12px 16px 14px; border-top: 1px solid var(--cx-line); }

/* ---------- Точка статуса: .cx-dot (8) · --sm (7) · --success --warn --critical --accent (лайм с кольцом) --outline --live ---------- */
.cx-dot { --_c: var(--cx-text-3); display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--_c); vertical-align: middle; }
.cx-dot--sm { width: 7px; height: 7px; }
.cx-dot--success { --_c: var(--cx-success); } .cx-dot--warn { --_c: var(--cx-warn); } .cx-dot--critical { --_c: var(--cx-critical); }
.cx-dot--accent { --_c: var(--cx-accent); box-shadow: inset 0 0 0 1.5px var(--cx-fill-strong); }
.cx-dot--outline { --_c: transparent; box-shadow: inset 0 0 0 1.5px var(--cx-text-3); }
.cx-dot--live { --_c: var(--cx-critical); animation: cx-pulse 1.6s var(--cx-ease) infinite; }

/* ---------- Чипы и ссылка, дополнения: сплошной красный, бледный лайм, малый; ссылка мелким шрифтом; метка «ИИ» ---------- */
.cx-chip--danger { --_bg: var(--cx-fill-danger); --_fg: #fff; }
.cx-chip--tint { --_bg: var(--cx-surface-accent); --_fg: var(--cx-text); }
.cx-chip--sm { height: 20px; padding: 0 7px; font-weight: 400; font-size: 11.5px; } /* метка слоя, уровня: «для клиента», «VIP» */
.cx-link--sm, button.cx-link--sm { font-size: 11.5px; font-weight: 400; color: var(--cx-text-2); text-decoration-thickness: 1px; text-decoration-color: currentColor; white-space: nowrap; }
.cx-link--sm:hover { color: var(--cx-text); }
.cx-ai-badge { display: inline-flex; align-items: center; flex: none; height: 14px; padding: 0 5px; border-radius: 7px; background: var(--cx-surface-inverse); color: var(--cx-accent); font: 700 8.5px/1 var(--cx-font-ui); letter-spacing: .04em; }
.cx-ai-badge--lg { height: 18px; padding: 0 6px; border-radius: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: var(--cx-text-inverse); }
.cx-hl { background: var(--cx-accent); color: inherit; border-radius: 3px; box-shadow: 0 0 0 2px var(--cx-accent); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cx-flag { background: var(--cx-warn-bg); border-radius: 4px; } /* спорное место в тексте */
.cx-progress--sm { height: 5px; }
.cx-progress--ink > i { background: var(--cx-fill-strong); }
.cx-progress--warn > i { background: var(--cx-warn); }

/* ---------- Плитки показателей в одной рамке: .cx-kpis[style=--n:4] > .cx-kpis__item > __label + __value (b, .cx-kpis__delta) + __sub ---------- */
.cx-kpis { --n: 4; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border-radius: var(--cx-r-card); background: var(--cx-surface); overflow: hidden; }
.cx-kpis__item { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px 14px; box-shadow: inset -1px 0 0 var(--cx-line); color: inherit; text-decoration: none; }
.cx-kpis__item:last-child { box-shadow: none; }
a.cx-kpis__item:hover { background: var(--cx-surface-hover); }
.cx-kpis__label, .cx-kpis__sub { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-kpis__value { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-kpis__value > b { font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-kpis__value > b.is-bad { color: var(--cx-critical); }
.cx-kpis__delta { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--cx-surface-accent); color: var(--cx-text); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-kpis__delta--down { background: var(--cx-surface-soft); color: var(--cx-text-2); box-shadow: var(--cx-ring-soft); }
.cx-kpis__delta--bad { background: var(--cx-critical-bg); color: var(--cx-critical-text); }
@media (max-width: 900px) { .cx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cx-kpis__item { box-shadow: inset -1px -1px 0 var(--cx-line); } }

/* ---------- Полоса «Сейчас»: тёмная строка живых значений; .cx-now > .cx-now__cap + .cx-now__item (__value с i-точкой, __label) + .cx-now__end ---------- */
.cx-now { display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; padding: 14px 24px; border-radius: var(--cx-r-lg); background: var(--cx-surface-inverse); color: var(--cx-text-inverse); }
.cx-now__cap { display: inline-flex; align-items: center; gap: 8px; margin-right: 20px; font: 600 11px/1.5 var(--cx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-inverse-2); }
.cx-now__item { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; box-shadow: inset 1px 0 0 color-mix(in srgb, currentColor 12%, transparent); }
.cx-now__cap + .cx-now__item { padding-left: 0; box-shadow: none; }
.cx-now__value { display: inline-flex; align-items: center; gap: 7px; font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cx-now__value > i { width: 7px; height: 7px; border-radius: 50%; background: var(--cx-critical); }
.cx-now__value > i.is-ok { background: var(--cx-accent); }
.cx-now__label { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-inverse-2); white-space: nowrap; }
.cx-now__end { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 11.5px; color: var(--cx-text-inverse-2); font-variant-numeric: tabular-nums; }

/* ---------- Мини-карточка дня: .cx-minicard (--warn) > __label + __value + __sub — прогноз недели, итог дня ---------- */
.cx-minicard { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 6px 8px; border-radius: var(--cx-r-input); background: var(--cx-surface-soft); text-align: center; }
.cx-minicard--warn { background: var(--cx-warn-bg); }
.cx-minicard__label { font-size: 11.5px; color: var(--cx-text-2); }
.cx-minicard__value { font-size: 18px; line-height: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cx-minicard__sub { font-size: 11.5px; line-height: 1.4; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-minicard__sub.is-bad { color: var(--cx-critical); }

/* ---------- Столбики на HTML: .cx-bars[style=--h:120px] > .cx-bars__col > i[style=--v:64%] (сверху вниз — последний ребёнок сверху) + .cx-bars__mark[style=--at:40%] ----------
   Тона столбика: .is-muted .is-accent .is-warn .is-ghost; колонка .is-dim (выходной). Доли каналов — .cx-bars--stack. Подписи — .cx-bars__x > span. */
.cx-bars { display: flex; align-items: flex-end; gap: 4px; height: var(--h, 120px); }
.cx-bars--stack { gap: 3px; }
.cx-bars__col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column-reverse; gap: 1px; }
.cx-bars__col.is-dim { opacity: .6; }
.cx-bars__col > i { display: block; flex: none; height: var(--v, 0%); border-radius: 2px; background: var(--cx-fill-strong); transition: height var(--cx-dur-enter) var(--cx-ease); }
.cx-bars:not(.cx-bars--stack) .cx-bars__col > i { border-radius: 4px 4px 2px 2px; }
.cx-bars__col > i.is-muted { background: var(--cx-text-3); } .cx-bars__col > i.is-accent { background: var(--cx-accent); } .cx-bars__col > i.is-warn { background: var(--cx-warn); }
.cx-bars__col > i.is-ghost { background: var(--cx-border-soft); box-shadow: var(--cx-ring); }
.cx-legend__dot--gray { --_c: var(--cx-text-3); }
.cx-bars__mark { position: absolute; left: 10%; right: 10%; bottom: var(--at, 0%); height: 3px; border-radius: 2px; background: var(--cx-fill-strong); }
.cx-bars__x { display: flex; gap: 4px; margin-top: 6px; }
.cx-bars--stack + .cx-bars__x { gap: 3px; }
.cx-bars__x > span { flex: 1 1 0; min-width: 0; overflow: hidden; text-align: center; font-size: 10.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Тепловая карта день × час: .cx-heat[style=--hours:24] > .cx-heat__y + .cx-heat__cell[style=--q:60%] (0 — пусто) · .is-over — людей не хватает; подписи часов — .cx-heat__x ---------- */
.cx-heat { --hours: 24; display: grid; grid-template-columns: 36px repeat(var(--hours), minmax(0, 1fr)); gap: 3px; align-items: center; }
.cx-heat__x { font-size: 10.5px; color: var(--cx-text-meta); text-align: center; font-variant-numeric: tabular-nums; }
.cx-heat__y { font-size: 11.5px; color: var(--cx-text-meta); }
.cx-heat__cell { display: block; height: 22px; border-radius: 4px; background: color-mix(in srgb, var(--cx-accent) var(--q, 0%), var(--cx-surface-soft)); }
.cx-heat__cell.is-empty { background: var(--cx-surface-soft); box-shadow: var(--cx-ring-soft); }
.cx-heat__cell.is-over { box-shadow: inset 0 0 0 1.5px var(--cx-critical); }

/* ---------- График смен: .cx-roster (имя + 7 дней) > .cx-roster__head (.is-today .is-weekend) + .cx-person + .cx-roster__cell + .cx-roster__sum ----------
   Клетка: смена (по умолчанию), --off выходной, --vacation, --sick, --oncall (на связи), .is-ask — заявка на изменение. */
.cx-roster { --days: 7; display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(var(--days), minmax(0, 1fr)); gap: 6px 8px; align-items: center; }
.cx-roster__head { padding-bottom: 4px; font-size: 11.5px; color: var(--cx-text-meta); text-align: center; }
.cx-roster__head b { display: block; font-size: 13px; font-weight: 600; color: var(--cx-text); }
.cx-roster__head.is-today b { text-decoration: underline; text-decoration-color: var(--cx-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cx-roster__head.is-weekend { color: var(--cx-text-3); }
.cx-roster__cell { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 4px; border: 0; border-radius: 10px; background: var(--cx-surface-soft); color: var(--cx-text); font: 400 11.5px/1 var(--cx-font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-roster__cell:hover { background: var(--cx-surface-pressed); }
.cx-roster__cell--off { background: transparent; box-shadow: inset 0 0 0 1px var(--cx-line); color: var(--cx-text-3); }
.cx-roster__cell--vacation { background: var(--cx-warn-bg); }
.cx-roster__cell--sick { background: var(--cx-critical-bg); color: var(--cx-critical-text); }
.cx-roster__cell--oncall { background: transparent; outline: 1px dashed var(--cx-line); outline-offset: -1px; color: var(--cx-text-2); }
.cx-roster__cell.is-ask { box-shadow: inset 0 0 0 1.5px var(--cx-accent); }
.cx-roster__hours { font-size: 11.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-roster__hours.is-bad { color: var(--cx-critical); }
.cx-roster__sum { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--cx-surface); box-shadow: var(--cx-ring-soft); }
.cx-roster__sum b { font-size: 16px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-roster__sum b.is-bad { color: var(--cx-critical); }
.cx-roster__sum > span { font-size: 10.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-roster__sum--short { background: var(--cx-warn-bg); box-shadow: none; }

/* ---------- Вложенный блок-строка: .cx-item[style=--cols:…] > .cx-cell + .cx-item__end ----------
   Мягкий фон по умолчанию, белый с обводкой — --ring. Выбран или горячий — .is-hot / [aria-selected=true] (лаймовое кольцо), .is-dim, .is-off, .is-done (зачёркнут).
   Список блоков — .cx-items. Кандидат с загрузкой: --cols:32px minmax(0,1fr) auto и .cx-load справа. */
.cx-items { display: flex; flex-direction: column; gap: 8px; }
.cx-item { --cols: minmax(0, 1fr) auto; position: relative; display: grid; grid-template-columns: var(--cols); gap: 12px; align-items: center; min-width: 0; padding: 10px 12px; border: 0; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); color: inherit; font: inherit; text-align: left; text-decoration: none; transition: background var(--cx-dur-hover) var(--cx-ease), box-shadow var(--cx-dur-hover) var(--cx-ease), opacity var(--cx-dur-hover) var(--cx-ease); }
.cx-item--ring { background: var(--cx-surface); box-shadow: var(--cx-ring-soft); }
.cx-item--top { align-items: start; }
a.cx-item, button.cx-item, label.cx-item, .cx-item[tabindex] { cursor: pointer; }
a.cx-item:hover, button.cx-item:hover, label.cx-item:hover, .cx-item[tabindex]:hover { background: var(--cx-surface-pressed); }
.cx-item--ring:is(a, button, label, [tabindex]):hover { background: var(--cx-surface-hover); }
.cx-item:focus-visible { box-shadow: var(--cx-focus); }
.cx-item.is-hot, .cx-item[aria-selected="true"], .cx-item:has(> input:checked) { box-shadow: 0 0 0 1.5px var(--cx-accent); }
.cx-item > input[type="radio"], .cx-item > input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.cx-item.is-dim { opacity: .55; }
.cx-item.is-off .cx-cell__title { color: var(--cx-text-3); }
.cx-item.is-done .cx-cell__title { color: var(--cx-text-3); text-decoration: line-through; text-decoration-color: var(--cx-text-ghost); }
.cx-item__end { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.cx-item__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--cx-surface-soft); color: var(--cx-text); }
.cx-item__icon svg { width: 16px; height: 16px; }
.cx-item__icon--sm { width: 28px; height: 28px; border-radius: 8px; color: var(--cx-text-2); }
.cx-item__icon--accent { background: var(--cx-surface-accent); }
.cx-item__icon--warn { background: var(--cx-warn-bg); color: var(--cx-warn-text); }
.cx-item--ring .cx-item__icon, .cx-items--lined .cx-item__icon { background: var(--cx-surface-soft); }
.cx-items--lined { gap: 0; }
.cx-items--lined > .cx-item { padding: 9px 0; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-items--lined > .cx-item:first-child { box-shadow: none; }
.cx-load { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11.5px; color: var(--cx-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-load > .cx-progress { width: 72px; height: 5px; background: var(--cx-border-soft); }

/* ---------- Конвейер обработки: .cx-pipe > .cx-pipe__step (.is-ok .is-bad) > b + span ---------- */
.cx-pipe { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.cx-pipe__step { display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding: 8px 12px; border-radius: 10px; background: var(--cx-surface-soft); }
.cx-pipe__step b { font-size: 12.5px; font-weight: 600; }
.cx-pipe__step > span { font-size: 11.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-pipe__step.is-ok b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--cx-accent); box-shadow: inset 0 0 0 1.5px var(--cx-fill-strong); }
.cx-pipe__step.is-bad { background: var(--cx-critical-bg); }
.cx-pipe__step.is-bad > span { color: var(--cx-critical-text); }

/* ---------- Список строк, плотный: .cx-list--dense (плитка 30, отступ 9); время слева .cx-row__time; крупный срок .cx-row__lead; день-заголовок .cx-list__day ---------- */
.cx-list--dense .cx-row { padding-top: 9px; padding-bottom: 9px; gap: 12px; }
.cx-list--dense .cx-row__tile { width: 30px; height: 30px; border-radius: 10px; }
.cx-list--dense .cx-row__tile svg { width: 16px; height: 16px; }
.cx-row--top { align-items: flex-start; }
.cx-row__time { flex: none; width: 44px; padding-top: 3px; font-size: 11.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-row__lead { flex: none; width: 60px; font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-row__lead.is-bad { color: var(--cx-critical); }
.cx-row__tile.cx-row__tile--sm { width: 28px; height: 28px; border-radius: 8px; }
.cx-row__tile--ink { background: var(--cx-fill-strong); color: var(--cx-on-strong); }
.cx-row__tile--tint { background: var(--cx-surface-accent); color: var(--cx-text); }
.cx-list__day { padding: 14px 0 4px; font-size: 11.5px; color: var(--cx-text-meta); letter-spacing: .06em; text-transform: uppercase; }
.cx-list__day:first-child { padding-top: 2px; }

/* ---------- Дерево разделов и срезов: .cx-tree > .cx-tree__cap + a/button.cx-tree__item[aria-current] (> span + svg замок + .cx-tree__count) · --sub · .is-bad ---------- */
.cx-tree { display: flex; flex-direction: column; gap: 1px; }
.cx-tree__cap { padding: 12px 10px 6px; font: 600 11px/1.5 var(--cx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-meta); }
.cx-tree__item { display: flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--cx-text); font: 600 13px/1 var(--cx-font-ui); text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease), color var(--cx-dur-hover) var(--cx-ease); }
.cx-tree--lg .cx-tree__item { height: 34px; }
.cx-tree__item > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cx-tree__item--sub { padding-left: 26px; font-size: 12.5px; font-weight: 400; }
.cx-tree__item:hover { background: var(--cx-surface-hover); }
.cx-tree__item[aria-current="true"], .cx-tree__item[aria-current="page"] { background: var(--cx-fill-strong); color: var(--cx-on-strong); }
.cx-tree__item:focus-visible { box-shadow: var(--cx-focus); }
.cx-tree__item svg { width: 14px; height: 14px; flex: none; color: var(--cx-text-3); }
.cx-tree__item[aria-current] svg { color: currentColor; }
.cx-tree__count { font-size: 11.5px; font-weight: 400; font-variant-numeric: tabular-nums; opacity: .7; }
.cx-tree__item.is-bad .cx-tree__count { color: var(--cx-critical); opacity: 1; }
.cx-tree__item[aria-current].is-bad .cx-tree__count { color: currentColor; }

/* ---------- Поля с подписью слева: .cx-frows[style=--label:132px] > .cx-frow > .cx-frow__label + .cx-frow__value (поле, .cx-frow__ro — значение строкой, .cx-frow__hint) ---------- */
.cx-frows { --label: 132px; display: flex; flex-direction: column; gap: 12px; }
.cx-frow { display: grid; grid-template-columns: var(--label, 132px) minmax(0, 1fr); gap: 6px 12px; align-items: start; }
.cx-frow__label { padding-top: 9px; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); }
.cx-frow__value { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cx-frow__ro { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 36px; font-size: 13px; line-height: 1.5; font-weight: 600; }
.cx-frow__hint { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .cx-frow { grid-template-columns: minmax(0, 1fr); } .cx-frow__label { padding-top: 0; } }

/* ---------- Ключ — значение: .cx-kv (пары подряд); с линиями и жирным значением — .cx-kv--lined[style=--label:104px] ---------- */
.cx-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 12.5px; line-height: 1.6; }
.cx-kv > :nth-child(odd) { color: var(--cx-text-meta); white-space: nowrap; }
.cx-kv > :nth-child(even) { min-width: 0; }
.cx-kv--lined { --label: 104px; grid-template-columns: var(--label) minmax(0, 1fr); gap: 0; line-height: 1.5; }
.cx-kv--lined > :nth-child(odd) { white-space: normal; } /* 1.11.4: подпись шире колонки переносится, а не наезжает на значение */
.cx-kv--lined > * { padding: 8px 0; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-kv--lined > :nth-child(even) { padding-left: 10px; } /* 1.8.3: линия строки сплошная, без разрыва на зазоре колонок */
.cx-kv--lined > :nth-child(-n+2) { box-shadow: none; }
.cx-kv--lined > :nth-child(even) { font-weight: 600; }

/* ---------- Раздел боковой панели: .cx-sect > button.cx-sect__head[aria-expanded] (заголовок, .cx-sect__count, .cx-chev) + .cx-collapse ---------- */
.cx-sect { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-sect:first-child { padding-top: 0; box-shadow: none; }
.cx-sect__head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: var(--cx-text); font: 600 15.5px/1.4 var(--cx-font-ui); text-align: left; }
button.cx-sect__head { cursor: pointer; }
.cx-sect__head > .cx-chev { margin-left: auto; }
.cx-sect__count { font-size: 11.5px; font-weight: 400; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-sect > .cx-collapse { margin-top: -10px; } /* отступ до содержимого живёт внутри раскрытия, чтобы закрытый раздел не оставлял щели */
.cx-sect > .cx-collapse > * { display: flex; flex-direction: column; gap: 10px; }
.cx-sect > .cx-collapse > *::before { content: ""; }
.cx-sect p { font-size: 13px; line-height: 1.6; } /* 1.8.3: текст раздела — «Суть» помощника */

/* ---------- Доска: .cx-board[style=--n:5] > .cx-board__col (> .cx-board__head + .cx-bcard…) ----------
   Перенос: колонка .is-drop (можно), .is-target (сюда), .is-off (нельзя); слот .cx-board__slot; карточка .is-ghost (место) и .is-dragging (в руке). */
.cx-board { --n: 5; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; align-items: start; }
.cx-board__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; border-radius: var(--cx-r-lg); transition: opacity var(--cx-dur-hover) var(--cx-ease), background var(--cx-dur-hover) var(--cx-ease); }
.cx-board__head { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px; font-size: 15.5px; line-height: 1.4; font-weight: 600; }
.cx-board__count { font-size: 11.5px; font-weight: 600; color: var(--cx-text-3); font-variant-numeric: tabular-nums; }
.cx-board__aside { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--cx-text-meta); }
.cx-board__col.is-drop, .cx-board__col.is-target { outline: 1.5px dashed var(--cx-text-ghost); outline-offset: 6px; }
.cx-board__col.is-target { outline-color: var(--cx-accent-deep); background: var(--cx-surface-accent); box-shadow: 0 0 0 6px var(--cx-surface-accent); }
.cx-board__col.is-off { opacity: .4; }
.cx-board__slot { display: flex; align-items: center; justify-content: center; min-height: 84px; padding: 12px 16px; border: 1.5px dashed var(--cx-accent-deep); border-radius: var(--cx-r-lg); background: var(--cx-surface); text-align: center; font-size: 12.5px; line-height: 1.4; font-weight: 600; }
.cx-board__col.is-off .cx-board__slot { border-color: var(--cx-text-ghost); background: transparent; font-weight: 400; color: var(--cx-text-2); }
.cx-board__more { padding: 6px 4px; font-size: 11.5px; color: var(--cx-text-meta); }
.cx-bcard { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; border-radius: var(--cx-r-lg); background: var(--cx-surface); color: inherit; text-decoration: none; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease), box-shadow var(--cx-dur-hover) var(--cx-ease), opacity var(--cx-dur-hover) var(--cx-ease), transform var(--cx-dur-hover) var(--cx-ease); }
.cx-bcard:hover { background: var(--cx-surface-hover); }
.cx-bcard:focus-visible { box-shadow: var(--cx-focus); }
.cx-bcard__head { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.cx-bcard__head > svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.cx-bcard__title { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.3; font-weight: 600; }
.cx-bcard__sub { margin-top: -4px; font-size: 11.5px; color: var(--cx-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-bcard__text { font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-bcard__msg { display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); font-size: 12.5px; line-height: 1.4; font-weight: 600; }
.cx-bcard__msg svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.cx-bcard__tags, .cx-bcard__foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cx-bcard__foot { gap: 8px; flex-wrap: nowrap; }
.cx-bcard.is-ghost { opacity: .35; background: transparent; box-shadow: inset 0 0 0 1.5px var(--cx-text-ghost); }
.cx-bcard.is-dragging { z-index: 3; transform: rotate(-2deg); box-shadow: var(--cx-shadow-drop); cursor: grabbing; }
.cx-bcard.is-dragging:hover { background: var(--cx-surface); }
@media (max-width: 1180px) { .cx-board { grid-template-columns: repeat(var(--n), minmax(220px, 1fr)); overflow-x: auto; padding-bottom: 8px; } }

/* ---------- Лента переписки: .cx-feed > .cx-feed__day + .cx-feed__sys + .cx-msg(--out) + .cx-feed__note + .cx-feed__card ----------
   Сообщение: .cx-msg > .cx-msg__head (b автор, время, .cx-msg__reply по наведению) + .cx-msg__bubble (.cx-msg__quote, текст, .cx-msg__atts > .cx-att, .cx-media). */
.cx-feed { display: flex; flex-direction: column; gap: 14px; }
.cx-feed__day { display: flex; align-items: center; gap: 10px; font: 600 11px/1.5 var(--cx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-feed__day::before, .cx-feed__day::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--cx-line); }
.cx-feed__sys { align-self: center; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; text-align: center; }
.cx-msg { display: flex; flex-direction: column; gap: 5px; align-self: flex-start; max-width: 86%; min-width: 0; }
.cx-msg--out { align-self: flex-end; align-items: flex-end; }
.cx-msg__head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-msg__head b { font-weight: 600; color: var(--cx-text); }
.cx-msg__reply { opacity: 0; transition: opacity var(--cx-dur-hover) var(--cx-ease); }
.cx-msg:hover .cx-msg__reply, .cx-msg__reply:focus-visible { opacity: 1; }
.cx-msg__bubble { max-width: 100%; padding: 11px 14px; border-radius: 4px 16px 16px 16px; background: var(--cx-surface-soft); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.cx-msg--out .cx-msg__bubble { border-radius: 16px 4px 16px 16px; background: var(--cx-surface-accent); }
.cx-msg__quote { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-bottom: 8px; padding: 5px 10px; border-left: 2px solid var(--cx-fill-strong); border-radius: 6px; background: var(--cx-surface); font-size: 11.5px; line-height: 1.45; }
.cx-msg__quote b { font-weight: 600; }
.cx-msg__quote > span { color: var(--cx-text-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-msg__atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cx-att { display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 6px 10px; border: 0; border-radius: var(--cx-r-input); background: var(--cx-surface); color: var(--cx-text); font: 400 12.5px/1.4 var(--cx-font-ui); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; transition: box-shadow var(--cx-dur-hover) var(--cx-ease); }
.cx-att:hover { box-shadow: var(--cx-ring); }
.cx-att svg { width: 16px; height: 16px; flex: none; color: var(--cx-text-3); }
.cx-att--ring { box-shadow: var(--cx-ring-soft); height: 28px; padding: 0 10px; border-radius: 9px; font-size: 11.5px; font-weight: 500; }
.cx-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 372px; max-width: 100%; margin-top: 8px; }
.cx-media--2 { grid-template-columns: repeat(2, 1fr); width: 300px; }
.cx-media__item { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; padding: 6px; border: 0; border-radius: 10px; background: var(--cx-line); overflow: hidden; cursor: pointer; }
.cx-media__item > img, .cx-media__item > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-media__name { position: relative; max-width: 100%; padding: 1px 6px; border-radius: 6px; background: var(--cx-surface); font-size: 11.5px; color: var(--cx-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-media__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cx-surface); color: var(--cx-text); }
.cx-media__play svg { width: 14px; height: 14px; }
.cx-media__dur { position: absolute; top: 6px; right: 6px; padding: 1px 6px; border-radius: 6px; background: var(--cx-fill-strong); color: var(--cx-on-strong); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cx-voice { display: flex; flex-direction: column; gap: 6px; min-width: 340px; }
.cx-voice__text { margin-top: 4px; font-size: 12.5px; line-height: 1.55; }
.cx-feed__note { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--cx-r-lg); background: var(--cx-warn-bg); }
.cx-feed__note p { font-size: 13px; line-height: 1.6; }
.cx-feed__tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px 0 8px; border-radius: 11px; background: var(--cx-surface); color: var(--cx-warn-text); font: 600 11px/1 var(--cx-font-ui); white-space: nowrap; }
.cx-feed__card { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--cx-r-lg); box-shadow: var(--cx-ring-soft); }
.cx-feed__card--soft { background: var(--cx-surface-soft); box-shadow: none; }
.cx-feed__card.is-live { box-shadow: 0 0 0 1.5px var(--cx-accent); }
.cx-feed__card p { font-size: 13px; line-height: 1.6; }
.cx-feed__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-feed__head b { font-size: 13px; font-weight: 600; color: var(--cx-text); }
.cx-feed__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- Реплики разговора компактно: .cx-lines > .cx-lines__row (time + div > b автор + текст) · .is-me · .is-now (ещё печатается) ---------- */
.cx-lines { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--cx-r-input); background: var(--cx-surface-soft); }
.cx-lines--scroll { max-height: 188px; overflow-y: auto; scrollbar-width: thin; }
.cx-lines__row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; font-size: 12.5px; line-height: 1.5; }
.cx-lines__row > time { padding-top: 1px; font-size: 11.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-lines__row b { font-weight: 600; }
.cx-lines__row.is-me b { color: var(--cx-text-2); }
.cx-lines__row.is-now > div::after { content: ""; display: inline-block; width: 6px; height: 12px; margin-left: 3px; vertical-align: -1px; background: var(--cx-accent); animation: cx-pulse var(--cx-dur-ai) var(--cx-ease) infinite; }

/* ---------- Редактор ответа: .cx-composer(--note) > .cx-composer__bar (режим, кнопки) + .cx-composer__reply + .cx-composer__field > textarea + .cx-composer__foot ---------- */
.cx-composer { position: relative; flex: none; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-composer__bar { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-composer__field { display: block; flex: none; }
.cx-composer__field > .cx-textarea { min-height: 38px; max-height: 240px; padding-top: 9px; padding-bottom: 9px; line-height: 20px; resize: none; overflow-y: auto; field-sizing: content; }
.cx-composer--note .cx-composer__field { padding: 8px; border-radius: var(--cx-r-lg); background: var(--cx-warn-bg); }
.cx-composer__mode { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--cx-warn-text); }
.cx-composer__reply { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; border-left: 2px solid var(--cx-fill-strong); border-radius: 8px; background: var(--cx-surface-soft); font-size: 11.5px; line-height: 1.45; }
.cx-composer__reply > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cx-composer__reply b { font-weight: 600; }
.cx-composer__reply span { color: var(--cx-text-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-composer__foot { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }

/* ---------- Окошко выбора над кнопкой: .cx-pop__panel.cx-picker[style=--w:440px] > .cx-picker__head + .cx-search + .cx-picker__list > .cx-picker__sec + .cx-picker__item + .cx-picker__foot ----------
   Шаблоны ответа, статьи для ответа, вложения. Смайлы — .cx-emoji > button. */
.cx-pop__panel.cx-picker { --w: 440px; width: var(--w); max-width: calc(100vw - 32px); padding: 12px; border-radius: var(--cx-r-lg); box-shadow: var(--cx-shadow-drop); display: flex; flex-direction: column; gap: 10px; }
.cx-pop--up > .cx-pop__panel.cx-picker { bottom: calc(100% + 10px); transform-origin: bottom left; }
.cx-picker__head { display: flex; align-items: center; gap: 8px; }
.cx-picker__head b { font-size: 13px; font-weight: 600; }
.cx-picker__list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.cx-picker__sec { display: flex; align-items: center; gap: 6px; padding: 6px 10px 2px; font-size: 11.5px; color: var(--cx-text-meta); }
.cx-picker__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--cx-r-input); background: none; color: var(--cx-text); font: inherit; text-align: left; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-picker__item:hover { background: var(--cx-surface-soft); }
.cx-picker__item[aria-selected="true"] { background: var(--cx-surface-accent); }
.cx-picker__title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; line-height: 1.5; font-weight: 600; }
.cx-picker__title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-picker__sub { grid-column: 1 / -1; font-size: 11.5px; color: var(--cx-text-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-picker__actions { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity var(--cx-dur-hover) var(--cx-ease); }
.cx-picker__item:hover .cx-picker__actions, .cx-picker__item[aria-selected="true"] .cx-picker__actions, .cx-picker__item:focus-within .cx-picker__actions { opacity: 1; }
.cx-picker__preview { margin-top: 4px; padding: 10px 12px; border-radius: var(--cx-r-input); background: var(--cx-surface-accent); font-size: 13px; line-height: 1.45; font-weight: 600; }
.cx-picker__foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-emoji { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; max-height: 224px; overflow-y: auto; scrollbar-width: thin; }
.cx-emoji > button { display: grid; place-items: center; height: 38px; padding: 0; border: 0; border-radius: 10px; background: transparent; font-size: 21px; line-height: 1; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-emoji > button:hover, .cx-emoji > button:focus-visible { background: var(--cx-surface-soft); }

/* ---------- Звонок в рабочем месте: полоска .cx-callstrip, входящий .cx-ring (--bar), тост-карточка .cx-toastcard. Сцена звонка тёмная в обеих темах ---------- */
.cx-callstrip { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px 10px 14px; border-radius: var(--cx-r-md); background: var(--cx-surface-call); color: var(--cx-text-inverse); }
.cx-callstrip > .cx-avatar, .cx-ring > .cx-avatar { --_s: 36px; background: var(--cx-call-avatar); color: var(--cx-text-inverse); }
.cx-callstrip .cx-cell__title { color: var(--cx-text-inverse); }
.cx-callstrip .cx-cell__sub { color: var(--cx-on-call); }
.cx-callstrip .cx-ibtn { background: var(--cx-surface-call-2); color: var(--cx-text-inverse); }
.cx-callstrip .cx-ibtn:hover { filter: brightness(1.15); }
.cx-callstrip > :is(.cx-btn, .cx-ibtn, .cx-avatar, .cx-ai-dots), .cx-ring--bar > :is(.cx-btn, .cx-ibtn, .cx-avatar) { flex: none; } /* 1.8.6: кнопки полоски не сжимаются — сжимается подпись */
.cx-ring { box-sizing: border-box; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px 16px; align-items: center; --w: 560px; width: var(--w); max-width: 100%; padding: 18px 18px 18px 20px; border-radius: var(--cx-r-modal); background: var(--cx-surface-call); color: var(--cx-text-inverse); box-shadow: var(--cx-shadow-drop); animation: cx-fade-up var(--cx-dur-enter) var(--cx-ease) both; }
.cx-ring > .cx-avatar { --_s: 56px; font-size: 18px; }
.cx-ring__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cx-ring__kicker { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1.5 var(--cx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-on-call); font-variant-numeric: tabular-nums; }
.cx-ring__name { font-size: 17px; line-height: 1.4; font-weight: 600; }
.cx-ring__meta { font-size: 12.5px; line-height: 1.6; color: var(--cx-on-call); font-variant-numeric: tabular-nums; }
.cx-ring__meta b { font-weight: 600; color: var(--cx-text-inverse); }
.cx-ring__owner { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--cx-on-call); }
.cx-ring__owner b { font-weight: 600; color: var(--cx-text-inverse); }
.cx-ring__owner .cx-avatar { --_s: 22px; }
.cx-ring__list { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--cx-r-input); background: var(--cx-surface-call-2); }
.cx-ring__row { display: flex; align-items: center; gap: 8px; overflow: hidden; font-size: 11.5px; color: var(--cx-on-call); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-ring__row b { font-weight: 600; color: var(--cx-text-inverse); overflow: hidden; text-overflow: ellipsis; }
.cx-ring__row .cx-dot { --_c: var(--cx-on-call); width: 6px; height: 6px; }
.cx-ring__row.is-hot .cx-dot { --_c: var(--cx-accent); }
.cx-ring__actions, .cx-ring__note { grid-column: 1 / -1; }
.cx-ring__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cx-ring__note { font-size: 11.5px; color: var(--cx-on-call); }
.cx-ring--bar { display: flex; gap: 12px; padding: 10px 12px 10px 14px; border-radius: var(--cx-r-md); }
.cx-ring--bar > .cx-avatar { --_s: 36px; font-size: 13px; }
.cx-ring--bar .cx-ring__name { font-size: 13px; }
.cx-toastcard { box-sizing: border-box; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; max-width: 592px; padding: 16px 16px 16px 18px; border-radius: var(--cx-r-lg); background: var(--cx-surface-inverse); color: var(--cx-text-inverse); box-shadow: var(--cx-shadow-toast); animation: cx-fade-up var(--cx-dur-enter) var(--cx-ease) both; }
.cx-toastcard__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cx-surface-inverse-2); color: var(--cx-accent); }
.cx-toastcard__icon svg { width: 18px; height: 18px; }
.cx-toastcard__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cx-toastcard__kicker { font: 600 11px/1.5 var(--cx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-inverse-2); }
.cx-toastcard__title { font-size: 14px; line-height: 1.4; font-weight: 600; }
.cx-toastcard__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--cx-text-inverse-2); font-variant-numeric: tabular-nums; }
.cx-toastcard__actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
@media (max-width: 600px) { .cx-ring { width: 100%; } .cx-toastcard { grid-template-columns: 40px minmax(0, 1fr); } .cx-toastcard__actions { grid-column: 1 / -1; flex-direction: row; } }

/* ---------- Просмотр вложения: .cx-viewer > .cx-viewer__stage (img/video, .cx-viewer__play, .cx-viewer__name) или .cx-viewer__doc > .cx-viewer__page + .cx-viewer__foot ---------- */
.cx-viewer { display: flex; flex-direction: column; gap: 12px; }
.cx-viewer__stage { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--cx-r-lg); background: var(--cx-surface-call); color: var(--cx-text-inverse); overflow: hidden; }
.cx-viewer__stage > img, .cx-viewer__stage > video { width: 100%; height: 100%; object-fit: contain; }
.cx-viewer__play { display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--cx-surface); color: var(--cx-text); cursor: pointer; }
.cx-viewer__play svg { width: 20px; height: 20px; }
.cx-viewer__name { position: absolute; left: 12px; bottom: 10px; font-size: 11.5px; opacity: .8; }
.cx-viewer__doc { display: flex; justify-content: center; max-height: 480px; padding: 18px; border-radius: var(--cx-r-lg); background: var(--cx-surface-soft); overflow-y: auto; scrollbar-width: thin; }
.cx-viewer__page { flex: none; width: 420px; max-width: 100%; padding: 28px 32px; border-radius: 6px; background: var(--cx-surface); box-shadow: var(--cx-shadow-drop); }
.cx-viewer__foot { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }

/* ---------- Текст статьи: .cx-prose > h1, h2, p, ol/ul (li > small — пояснение), .cx-prose__sec, .cx-prose__code; эскалация — .cx-banner--warn ---------- */
.cx-prose { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.cx-prose h1 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.01em; }
.cx-prose h2 { font-size: 15.5px; line-height: 1.4; font-weight: 600; }
.cx-prose p, .cx-prose li { font-size: 13.5px; line-height: 1.6; }
.cx-prose__sec { display: flex; flex-direction: column; gap: 8px; }
.cx-prose ol, .cx-prose ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.cx-prose li > small { display: block; font-size: 12.5px; color: var(--cx-text-2); }
.cx-prose__code { display: block; padding: 10px 12px; border-radius: 10px; background: var(--cx-surface-soft); font: 400 12.5px/1.6 var(--cx-font-ui); white-space: pre-wrap; }

/* ---------- Редактор статьи: .cx-editor > .cx-editor__bar (кнопки .cx-ibtn--plain) + текст; вставка помощника — .cx-suggest (> текст + .cx-suggest__actions) ---------- */
.cx-editor { display: flex; flex-direction: column; gap: 10px; min-height: 420px; padding: 14px 16px; border-radius: var(--cx-r-md); background: var(--cx-surface); box-shadow: var(--cx-ring); }
.cx-editor:focus-within { box-shadow: var(--cx-focus); }
.cx-editor__bar { display: flex; align-items: center; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--cx-line); }
.cx-editor__body { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; outline: none; }
.cx-suggest { display: block; padding: 4px 6px; border-radius: 6px; background: var(--cx-surface-accent); }
.cx-suggest__actions { display: inline-flex; gap: 8px; margin-left: 8px; vertical-align: baseline; }

/* ---------- Панель несохранённых изменений: .cx-savebar > .cx-savebar__text (.cx-dot--warn + текст) + .cx-savebar__actions; прилипает к низу ---------- */
.cx-savebar { position: sticky; bottom: var(--cx-space-5); z-index: var(--cx-z-sticky); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 24px; border-radius: var(--cx-r-card); background: var(--cx-surface); box-shadow: var(--cx-shadow-menu); animation: cx-fade-up var(--cx-dur-enter) var(--cx-ease) both; }
.cx-savebar__text { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.cx-savebar__actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 600px) { .cx-savebar { flex-direction: column; align-items: stretch; padding: 12px; } .cx-savebar__actions .cx-btn { flex: 1; } }

/* ---------- Мелочи раскладки: загрузка в узкой колонке, выбор иконки, дни недели ---------- */
.cx-drop--sm { min-height: 0; gap: 6px; padding: 14px 12px; background-color: transparent; font-size: 11.5px; color: var(--cx-text-2); }
.cx-drop--sm .cx-drop__title { font-size: 12.5px; }
.cx-iconpick { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-iconpick > button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); color: var(--cx-text-2); cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease), color var(--cx-dur-hover) var(--cx-ease); }
.cx-iconpick > button svg { width: 18px; height: 18px; }
.cx-iconpick > button:hover { background: var(--cx-surface-pressed); color: var(--cx-text); }
.cx-iconpick > button[aria-pressed="true"] { background: var(--cx-fill-strong); color: var(--cx-on-strong); }
.cx-iconpick > button:focus-visible { box-shadow: var(--cx-focus); }
.cx-weekdays { display: inline-flex; gap: 4px; }
.cx-weekdays > button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--cx-surface-soft); color: var(--cx-text-3); font: 600 11.5px/1 var(--cx-font-ui); cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease), color var(--cx-dur-hover) var(--cx-ease); }
.cx-weekdays > button[aria-pressed="true"] { background: var(--cx-fill-strong); color: var(--cx-on-strong); }

/* ---------- 1.8.3 · Окно запроса: две колонки в окне справа, путь запроса, задача, чек-лист, комментарии, вопрос помощнику, месяц-выбор ---------- */
/* окно справа в две колонки: тело не прокручивается, листаются только .cx-work__scroll; слева шапка запроса и лента, справа панель --w */
.cx-modal__body:has(> .cx-work) { display: flex; min-height: 0; overflow: hidden; }
.cx-work { --w: 340px; flex: 1 1 auto; display: flex; gap: 18px; min-width: 0; min-height: 0; }
.cx-work__main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.cx-work__side { flex: none; display: flex; flex-direction: column; width: var(--w); min-height: 0; padding-left: 18px; box-shadow: inset 1px 0 0 var(--cx-line); }
.cx-work__scroll { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--cx-text-ghost) transparent; }
.cx-work__main > .cx-work__scroll { gap: 14px; padding: 14px 6px 14px 0; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-work__side > .cx-work__scroll { padding: 0 2px 12px 0; }
.cx-work__tabs { flex: none; display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.cx-work__title { font: 600 17px/1.3 var(--cx-font-ui); letter-spacing: -.005em; }
.cx-work__foot { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 2px 4px 0; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-work__bar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } /* ряд: чипы, кнопки, вкладки */
.cx-work__bar--tabs { flex-wrap: nowrap; }
.cx-work__find { padding: 2px 0 4px; }
.cx-work__scroll + .cx-composer { margin-top: -10px; } /* редактор сразу под лентой, без зазора колонки */
.cx-feed__sys { flex-wrap: wrap; justify-content: center; } /* 1.8.3: системная строка со ссылкой переносится по центру */
/* форма в узкой панели (реквизиты): подпись 12.5 по центру строки, ряды через 10 */
.cx-frows--sm { gap: 10px; padding: 8px 0 4px; }
.cx-frows--sm .cx-frow { column-gap: 8px; align-items: center; }
.cx-frows--sm .cx-frow__label { padding-top: 0; font-size: 12.5px; }
.cx-frows--sm .cx-frow:has(textarea) { align-items: start; }
.cx-frows--sm .cx-frow:has(textarea) .cx-frow__label { padding-top: 9px; }
.cx-work__bar > .cx-input { min-width: 0; }
.cx-work__bar > .cx-btn { flex: none; } /* поиск по ленте в раскрытии под вкладками: место под кольцо фокуса */ /* вкладки сжимаются, кнопки остаются в строке */
.cx-modal:focus-visible, .cx-drawer:focus-visible { box-shadow: var(--cx-shadow-modal); } /* окно получает фокус при открытии — без кольца */
@media (max-width: 600px) {
  .cx-work .cx-segmented { display: flex; max-width: 100%; overflow-x: auto; } /* вкладки окна листаются вбок, бегунка нет */
  .cx-work .cx-segmented::before { display: none; }
  .cx-work .cx-segmented [aria-pressed="true"] { background: var(--cx-surface); box-shadow: 0 1px 2px rgba(23,24,28,.08), var(--cx-ring-soft); }
}
@media (max-width: 900px) {
  .cx-modal__body:has(> .cx-work) { display: block; overflow-y: auto; }
  .cx-work { flex-direction: column; }
  .cx-work__side { width: auto; padding: 14px 0 0; box-shadow: inset 0 1px 0 var(--cx-line); }
  .cx-work__scroll { flex: none; overflow: visible; }
}

.cx-work__main > .cx-work__scroll--dense { gap: 10px; } /* 1.10.2: разделы анкеты через 10; история, файлы, задачи — через 14, как лента (прежний --list так и не срабатывал — убран) */
.cx-feed__card--soft .cx-lines { background: var(--cx-surface); }
/* заголовок блока строкой с чипом: .cx-item__title > span (обрезается) + .cx-chip */
.cx-item__title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.5; font-weight: 600; }
.cx-item__title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-item.is-off .cx-item__title { color: var(--cx-text-3); font-weight: 500; }
.cx-item__title s { text-decoration-color: var(--cx-text-ghost); } /* неактуальный контакт */
/* поля с подписью сверху без капса (окна канваса): .cx-field.cx-field--quiet; два поля в ряд — .cx-fields[style=--w:200px] */
.cx-field--quiet { gap: 6px; }
.cx-field--quiet > .cx-field__label { font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cx-text-meta); }
.cx-fields { --w: 200px; display: grid; grid-template-columns: minmax(0, 1fr) var(--w); gap: 12px; }
@media (max-width: 600px) { .cx-fields { grid-template-columns: minmax(0, 1fr); } }

/* круглые кнопки 32 и 28 (шапка окна, редактор, строки) */
.cx-ibtn--sm { width: 32px; height: 32px; }
.cx-ibtn--sm svg { width: 15px; height: 15px; }
.cx-ibtn--xs { width: 28px; height: 28px; }
.cx-ibtn--xs svg { width: 14px; height: 14px; }

/* путь запроса между линиями: .cx-trail > .cx-trail__steps (.cx-trail__step > .cx-dot + текст с b, между шагами svg-шеврон) + кнопка; текущая линия — .cx-dot--accent */
.cx-trail { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--cx-r-input); background: var(--cx-surface-soft); font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-trail__steps { flex: 1 1 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.cx-trail__step { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cx-trail__step b { font-weight: 600; color: var(--cx-text); }
.cx-trail > .cx-btn { flex: none; }
.cx-trail__steps > svg { flex: none; width: 14px; height: 14px; color: var(--cx-text-3); }

/* полоска-сообщение мелким: .cx-banner.cx-banner--sm(.cx-banner--soft) — «у клиента идёт другой запрос» */
.cx-banner--soft { --_bg: var(--cx-surface-soft); }
.cx-banner--sm { display: block; padding: 8px 12px; border-radius: var(--cx-r-input); font-size: 11.5px; line-height: 1.5; }
.cx-banner--sm b { font-weight: 600; }
/* ссылка-действие в ленте и карточках: жирнее, подчёркивание бледное */
.cx-link.cx-link--bold { font-weight: 600; text-underline-offset: 2px; text-decoration-color: var(--cx-text-ghost); }
.cx-link .cx-chev { margin-left: 3px; vertical-align: middle; }
.cx-link .cx-chev svg { width: 12px; height: 12px; } /* шеврон в ссылке «расшифровка ⌄» */
.cx-feed__actions--tight, .cx-msg__actions.cx-feed__actions--tight { gap: 6px; } /* ссылки под звонком и голосовым */

/* плеер записи без подложки — в карточке звонка и голосовом: круглая кнопка 28, полоса, время */
.cx-player--plain { padding: 0; gap: 10px; background: none; }
.cx-player--plain > button:first-child { width: 28px; height: 28px; background: var(--cx-surface-soft); color: var(--cx-text); }
.cx-player--plain .cx-progress { height: 5px; background: var(--cx-line); }
.cx-player--plain > :last-child { font-size: 11.5px; color: var(--cx-text-meta); white-space: nowrap; }
/* ссылки под содержимым пузыря: «скачать всё», «открыть в Файлах» */
.cx-msg__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.cx-att__meta { font-weight: 400; color: var(--cx-text-meta); }
.cx-att--soft { height: 28px; padding: 0 10px; border-radius: 9px; background: var(--cx-surface-soft); font-size: 11.5px; font-weight: 500; }

/* строка под строкой блока: .cx-item > … + .cx-item__sub (на всю ширину; после аватара или плитки — со второй колонки) */
.cx-item:has(> .cx-item__sub) { row-gap: 4px; }
.cx-item__sub { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-width: 0; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-item > :is(.cx-avatar, .cx-item__icon) ~ .cx-item__sub { grid-column: 2 / -1; }
.cx-item__sub b { font-size: 12.5px; font-weight: 600; color: var(--cx-text); }
.cx-item > .cx-inset { grid-column: 1 / -1; margin-top: 4px; } /* форма на месте строки: правка, пометка, удаление */

/* факт помощника пилюлей: .cx-facts > .cx-fact > span (ключ) + значение + .cx-ai-badge */
.cx-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cx-fact { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 8px 4px 11px; border-radius: 15px; background: var(--cx-surface-soft); box-shadow: var(--cx-ring-soft); font-size: 12.5px; font-weight: 600; }
.cx-fact > span:first-child { font-weight: 400; color: var(--cx-text-meta); }
/* черновик помощника: .cx-draft > .cx-draft__head + p + .cx-draft__src + .cx-draft__actions; сноски — span.cx-cite */
.cx-draft { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: var(--cx-r-lg); background: var(--cx-surface); box-shadow: inset 0 0 0 1.5px var(--cx-fill-strong); }
.cx-draft p { font-size: 13px; line-height: 1.6; }
.cx-draft__head, .cx-draft__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cx-draft__src { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); }
/* малые вкладки-переключатели 28 с обводкой (переписать, отделы, «сегодня · завтра»): .cx-tab.cx-tab--sm[aria-pressed|aria-selected] */
.cx-tab--sm { height: 28px; padding: 0 13px; box-shadow: var(--cx-ring); font-size: 11.5px; font-weight: 700; }
.cx-tab[aria-pressed="true"] { background: var(--cx-fill-strong); color: var(--cx-on-strong); }
.cx-tab--sm:is([aria-pressed="true"], [aria-selected="true"]) { box-shadow: none; font-weight: 800; }

/* задача: .cx-task(.is-open .is-done) > .cx-task__main (b + .cx-kv) + .cx-task__aside (чип, ссылка) + .cx-task__toggle (.cx-ibtn > .cx-chev) + .cx-collapse > .cx-task__body */
.cx-task { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; gap: 0 12px; align-items: start; padding: 12px 12px 12px 14px; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); }
.cx-task__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; }
.cx-task__main > b { font-size: 13px; font-weight: 600; line-height: 1.5; }
.cx-task__main > .cx-kv { grid-template-columns: 104px minmax(0, 1fr); gap: 4px 10px; margin-top: 6px; line-height: 1.6; }
.cx-task__main > .cx-kv > :nth-child(even) { font-weight: 500; }
.cx-task__who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.cx-task__who > b { font-weight: 700; }
.cx-task__who > span:last-child { font-weight: 400; color: var(--cx-text-meta); }
.cx-task__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-top: 1px; }
.cx-task__toggle, .cx-task__toggle[aria-expanded="true"] { width: 28px; height: 28px; margin-top: 1px; background: none; }
.cx-task__toggle .cx-chev { color: var(--cx-text); }
.cx-task > .cx-collapse { grid-column: 1 / -1; }
.cx-task__body { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; padding: 12px 0 2px; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-task__desc { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } /* описание и «показать полностью» */
.cx-task__desc > p { font-size: 13px; line-height: 1.55; }
.cx-task__label { margin-bottom: 6px; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--cx-text-meta); }
.cx-task.is-done .cx-task__main > b { color: var(--cx-text-3); text-decoration: line-through; text-decoration-color: var(--cx-text-ghost); }
.cx-task.is-done .cx-kv > :nth-child(even), .cx-task.is-done .cx-task__who > b { color: var(--cx-text-2); font-weight: 600; }
.cx-task__group { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; padding: 6px 2px 2px; } /* заголовок группы задач: b + подпись, справа ссылка */
.cx-task__group > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 11.5px; color: var(--cx-text-meta); }
.cx-task__group b { font-size: 13px; font-weight: 600; color: var(--cx-text); }
.cx-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cx-avatar--xxs { --_s: 18px; font-size: 7.5px; }

/* чек-лист галочками 16: .cx-todo > label > input[type=checkbox] + текст; сделанное — лаймовая галочка и зачёркнуто */
.cx-todo { display: flex; flex-direction: column; gap: 6px; }
.cx-todo > label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.6; color: var(--cx-text); cursor: pointer; user-select: none; }
.cx-todo input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; flex: none; width: 16px; height: 16px; margin: 0; border-radius: 5px; background: var(--cx-surface); box-shadow: inset 0 0 0 1.5px var(--cx-text-ghost); cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-todo input::after { content: ""; width: 7px; height: 4px; border-left: 1.6px solid var(--cx-on-accent); border-bottom: 1.6px solid var(--cx-on-accent); transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.cx-todo > label:hover input { box-shadow: inset 0 0 0 1.5px var(--cx-text-3); }
.cx-todo input:checked { background: var(--cx-accent); box-shadow: none; }
.cx-todo input:checked::after { opacity: 1; }
.cx-todo input:focus-visible { box-shadow: var(--cx-focus); outline: none; }
.cx-todo > label:has(input:checked) { color: var(--cx-text-3); text-decoration: line-through; text-decoration-color: var(--cx-text-ghost); }

/* комментарий (задача, Битрикс24): .cx-comment > .cx-avatar + .cx-comment__head (b, время, чип) + .cx-comment__text */
.cx-comments { display: flex; flex-direction: column; gap: 10px; }
.cx-comment { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.cx-comment__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 28px; font-size: 11.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-comment__head b { font-weight: 600; color: var(--cx-text); }
.cx-comment__text { grid-column: 2; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: var(--cx-surface); font-size: 13px; line-height: 1.55; }
.cx-chip--ring { --_bg: var(--cx-surface); --_fg: var(--cx-text-2); box-shadow: var(--cx-ring-soft); }

/* строка вопроса помощнику, комментария в задачу: label.cx-chatline > button.cx-ibtn (скрепка) + input + button.cx-chatline__send */
.cx-chatline { display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 5px; border-radius: 19px; background: var(--cx-surface); box-shadow: var(--cx-ring); transition: box-shadow var(--cx-dur-hover) var(--cx-ease); }
.cx-chatline:focus-within { box-shadow: var(--cx-focus); }
.cx-chatline > input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 4px; border: 0; outline: none; background: none; color: var(--cx-text); font: 400 12px var(--cx-font-ui); }
.cx-chatline > input::placeholder { color: var(--cx-text-4); }
.cx-chatline > .cx-ibtn { width: 28px; height: 28px; background: none; color: var(--cx-text-meta); }
.cx-chatline__send { display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--cx-accent); color: var(--cx-on-accent); font: 700 13px/1 var(--cx-font-ui); cursor: pointer; transition: opacity var(--cx-dur-hover) var(--cx-ease); }
.cx-chatline__send:disabled { opacity: .5; cursor: default; }

/* поле-переключатель встроенной панели (ответственный, срок): button.cx-dd__btn[aria-expanded] + .cx-collapse > .cx-inset--sm */
.cx-dd__btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--cx-accent); }
.cx-dd__btn[aria-expanded="true"]::after { transform: translateY(4px) rotate(225deg); }
button.cx-dd__btn { border: 0; height: 40px; text-align: left; cursor: pointer; }
.cx-inset--sm { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.cx-inset .cx-search { background: var(--cx-surface); box-shadow: var(--cx-ring); }
.cx-inset .cx-picker__item[aria-selected="true"] { background: var(--cx-surface); } /* на мягком фоне выбранный — белый */
.cx-picker__item > .cx-person { min-width: 0; }
.cx-picker__list--sm { max-height: 236px; }

/* месяц-выбор: .cx-month.cx-month--sm > .cx-month__dow ×7 + button.cx-month__day (.is-out — прошло, .is-off — выходной, [aria-selected], .is-today) > .cx-month__num */
.cx-month--sm { grid-auto-rows: 36px; background: var(--cx-surface); }
.cx-month--sm .cx-month__day { padding: 6px 8px; }
button.cx-month__day { border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.cx-month__day:disabled { cursor: default; }
.cx-month__day[aria-selected="true"] .cx-month__num { align-self: flex-start; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cx-accent); color: var(--cx-on-accent); font-weight: 700; }
.cx-month__day.is-today[aria-selected="true"] .cx-month__num { box-shadow: 0 0 0 2px var(--cx-fill-strong); }

/* ---------- 1.8.5 · Окно запроса, часть 2: окошки над редактором, анкета, просмотр вложения ---------- */
/* окошки над редактором (шаблоны, статьи, скрепка, смайлы) прибиты к левому краю панели кнопок, а не к своей кнопке */
.cx-composer__bar > .cx-pop { position: static; }
.cx-picker__head .cx-field__hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cx-picker__head b { white-space: nowrap; }
.cx-picker__preview > small { display: block; font-size: 11.5px; line-height: 1.5; font-weight: 400; color: var(--cx-text-meta); }
.cx-picker__preview > small:first-child { margin-bottom: 4px; }
.cx-picker__preview > small:last-child { margin-top: 6px; }
.cx-picker__list--lg { max-height: 320px; }
.cx-picker__title > .cx-chip { flex: none; }
.cx-voice > .cx-msg__actions { margin-top: 0; } /* в голосовом ряд ссылок идёт через общий зазор 6 */ /* «похоже на 64 %» не режется — режется название */
.cx-emoji__sec { padding: 4px 4px 0; font-size: 11.5px; color: var(--cx-text-meta); } /* «ничего не нашли» в смайлах */

/* просмотр: строка внизу окна на всю ширину; полоса видео; страница PDF строками */
.cx-modal__foot > .cx-viewer__foot { flex: 1 1 auto; }
/* поля столбиком через 14, подпись сверху — окна канваса («Новая задача», «Передать запрос») */
.cx-form { display: flex; flex-direction: column; gap: 14px; }
.cx-viewer__bar { position: absolute; left: 12px; right: 12px; bottom: 34px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cx-viewer__bar > .cx-progress { flex: 1 1 auto; height: 5px; background: var(--cx-line); }
.cx-viewer__page { display: flex; flex-direction: column; gap: 9px; }
.cx-viewer__page > i { display: block; height: 8px; border-radius: 4px; background: var(--cx-line); }
.cx-viewer__page > i.is-h { width: 60%; height: 14px; margin-bottom: 8px; background: var(--cx-text-ghost); }
.cx-viewer__page > i.is-m { width: 88%; }
.cx-viewer__page > i.is-s { width: 75%; }

/* анкета запроса: факты (ключ 112 — значение с чипами и дополнением помощника), уверенность гипотезы, шаг решения, журнал */
.cx-kv--facts { grid-template-columns: 112px minmax(0, 1fr); gap: 7px 12px; line-height: 1.5; align-items: start; }
.cx-kv--facts > :nth-child(odd) { padding-top: 1px; }
.cx-kv--facts > :nth-child(even) { font-weight: 500; }
.cx-kv--facts .cx-chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; } /* 1.10.2: малые чипы по верху ряда, как в канвасе */
.cx-ai-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 11.5px; font-weight: 400; }
.cx-ai-note > span:last-child { color: var(--cx-text-meta); }
.cx-feed__card--soft .cx-item { background: var(--cx-surface); } /* блок на мягкой карточке — белый */
.cx-conf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cx-conf > .cx-progress { flex: 1 1 auto; min-width: 0; }
.cx-conf > b { width: 34px; font-size: 11.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cx-progress--ghost > i { background: var(--cx-text-ghost); }
.cx-item.is-done .cx-conf { opacity: .45; }
.cx-item__step { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cx-text-ghost); font-size: 11.5px; font-weight: 600; color: var(--cx-text-2); font-variant-numeric: tabular-nums; }
.cx-item__step svg { width: 13px; height: 13px; }
.cx-item__step.is-done { background: var(--cx-accent); box-shadow: none; color: var(--cx-on-accent); }
.cx-log { display: flex; flex-direction: column; gap: 6px; }
.cx-log > div { display: grid; grid-template-columns: 44px 96px minmax(0, 1fr); gap: 10px; font-size: 11.5px; line-height: 1.45; }
.cx-log > div > :not(:last-child) { color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { /* окошки над редактором на телефоне — листом снизу */
  .cx-pop > .cx-pop__panel.cx-picker { position: fixed; top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; max-height: calc(100vh - 96px); overflow-y: auto; }
  .cx-picker__foot { flex-wrap: wrap; }
  .cx-picker__foot > .cx-btn { flex: none; }
}
@media (max-width: 600px) { .cx-kv--facts { grid-template-columns: minmax(0, 1fr); } .cx-log > div { grid-template-columns: 44px minmax(0, 1fr); } .cx-log > div > :nth-child(2) { display: none; } }

/* ---------- 1.8.6 · Звонки Пульта: слой поверх окон, окно звонка, услышанное из разговора, конспект ---------- */
/* слой поверх открытых окон: <div popover="manual" class="cx-float cx-float--tr"> — входящий звонок, плитка звонка, тост-карточка;
   в верхнем слое браузера, поэтому виден и над <dialog>. --tr — справа сверху под шапкой (--top), --br — справа снизу */
.cx-float { position: fixed; inset: auto; width: auto; height: auto; max-width: calc(100vw - 32px); margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; z-index: var(--cx-z-toast); }
.cx-float:popover-open { animation: cx-pop-in var(--cx-dur-in) var(--cx-ease); }
.cx-float--tr { --top: 96px; top: var(--top); right: 20px; }
.cx-float--br { bottom: 20px; right: 20px; }
.cx-float .cx-toastcard { width: min(592px, calc(100vw - 32px)); } /* в слое ширина не тянется от родителя */
@media (max-width: 600px) { .cx-float--tr, .cx-float--br { left: 16px; right: 16px; } .cx-float--tr { --top: 80px; } .cx-float .cx-ring { width: 100%; } }
.cx-toasts[popover] { inset: auto 16px 20px 16px; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; overflow: visible; }
.cx-btn--ink { --_bg: var(--cx-surface-inverse); --_fg: var(--cx-accent); } /* «позже» на тёмной карточке */
.cx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } /* текст и чипы строкой с переносом */
.cx-ring--bar .cx-ring__body { cursor: pointer; } /* плитка звонка: клик по имени разворачивает окно */
.cx-ring--bar .cx-ibtn, .cx--ds .cx-callstrip .cx-ibtn { background: var(--cx-surface-soft); color: var(--cx-text); } /* как IconButton soft канваса: светлые круги на тёмной полоске */
.cx-callstrip .cx-ibtn[aria-pressed="true"], .cx-ring--bar .cx-ibtn[aria-pressed="true"] { background: var(--cx-accent); color: var(--cx-on-accent); } /* микрофон выключен, удержание */

/* подсказка помощника плотнее: .cx-banner.cx-banner--accent.cx-banner--tight > .cx-ai-badge.cx-ai-badge--lg + текст */
.cx-banner--tight { gap: 10px; padding: 10px 12px; border-radius: var(--cx-r-input); line-height: 1.5; }
.cx-banner--tight > .cx-ai-badge { margin-top: 1px; }
.cx-banner--tight b { font-weight: 600; }
.cx-back--sm { font-size: 11.5px; font-weight: 400; }

/* услышано из разговора: .cx-heard > (ключ, значение, время) ×N — анкета нового запроса по звонку */
.cx-heard { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; gap: 8px 10px; align-items: start; padding: 10px 12px; border-radius: var(--cx-r-input); background: var(--cx-surface-soft); font-size: 12.5px; line-height: 1.6; }
.cx-heard > :nth-child(3n+1) { color: var(--cx-text-meta); }
.cx-heard > :nth-child(3n) { font-size: 11.5px; color: var(--cx-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-heard .cx-chips { display: flex; flex-wrap: wrap; gap: 4px; }
/* конспект разговора: .cx-summary (обводка) / --soft (мягкий фон); .is-live — каретка печатает */
.cx-summary { padding: 10px 12px; border-radius: var(--cx-r-input); box-shadow: var(--cx-ring); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; }
.cx-summary--soft { box-shadow: none; background: var(--cx-surface-soft); }
.cx-summary.is-live::after { content: ""; display: inline-block; width: 2px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--cx-text); animation: cx-pulse var(--cx-dur-ai) var(--cx-ease) infinite; }

/* ---------- 1.9.1 · Настройки Пульта: меню разделов с группами, таблица с полями, плитка-кнопка, блок с обводкой, значение «задано», полоски микрофона ---------- */
/* меню разделов: .cx-side > .cx-side__group.cx-label + .cx-side__item (svg, .cx-side__label, .cx-side__n — число простым текстом) + .cx-note.cx-note--sm.cx-side__note */
.cx-side__n { margin-left: auto; font-size: 11.5px; font-weight: 400; line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--cx-text-meta); }
.cx-side__note { margin: 12px 4px 4px; }
@media (max-width: 1180px) { .cx-layout > .cx-side :is(.cx-side__n, .cx-side__note) { display: none; } }
/* пояснение мелким на мягком фоне: .cx-note.cx-note--sm — текст строкой, <b> тёмный */
.cx-note--sm { display: block; padding: 12px 16px; border-radius: var(--cx-r-md); box-shadow: none; font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); }
.cx-note--sm b { font-weight: 600; color: var(--cx-text); }
/* шапка карточки строкой: .cx-card__head.cx-card__head--row > .cx-card__title + .cx-card__actions (.cx-card__meta + кнопка); ниже сразу строки с линиями */
.cx-card__head--row { min-height: 32px; margin-bottom: 6px; }
.cx-card__head--row .cx-card__actions { align-items: center; gap: 10px; }
.cx-card__meta { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); }
/* таблица с полями: .cx-rows.cx-rows--caps.cx-rows--form[style=--cols] — без отступов по бокам, строка 10 сверху и снизу, цифры ровно;
   .cx-rows__span — подпись над двумя колонками; .is-mid и .is-end — ячейка по центру и справа */
.cx-rows--form { --gap: 14px; font-variant-numeric: tabular-nums; }
.cx-rows--form .cx-rows__head, .cx-rows--form .cx-rows__row { margin: 0; padding: 10px 0; }
.cx-rows--form .cx-rows__head { min-height: 0; padding: 6px 0; }
.cx-rows--form .cx-cell, .cx-box .cx-cell { gap: 0; }
.cx-rows__who { display: flex; align-items: center; gap: 12px; min-width: 0; } /* чип и подпись строкой: «VIP 2 клиента», статус и пояснение */
.cx-rows--form + .cx-setting { margin-top: 6px; } .cx-rows--form + .cx-box { margin-top: 8px; } .cx-rows--form + .cx-note { margin-top: 12px; } /* что идёт под таблицей */
.cx-rows--form .cx-cell--meta { font-size: 12.5px; line-height: 1.6; }
.cx-rows__span { grid-column: span 2; text-align: center; }
.cx-rows .is-mid, .cx-rows .is-end { display: flex; align-items: center; justify-self: center; justify-content: center; text-align: center; } /* флексом: переключатель и «да» по середине строки */
.cx-rows .is-end { justify-self: end; justify-content: flex-end; text-align: right; }
@media (max-width: 600px) { /* на телефоне таблица (--form, --scroll) и график смен листаются вбок, колонки не сжимаются; списки и меню в них — листом снизу, прокрутка их не режет */
  :is(.cx-rows--form, .cx-rows--scroll) { overflow-x: auto; margin: 0 calc(var(--cx-card-pad-x) * -1); padding: 0 var(--cx-card-pad-x); }
  :is(.cx-rows--form, .cx-rows--scroll) > * { min-width: var(--min, 760px); }
  .cx-roster { grid-template-columns: 132px repeat(var(--days), 72px); overflow-x: auto; margin: 0 calc(var(--cx-card-pad-x) * -1); padding: 0 var(--cx-card-pad-x); }
  :is(.cx-rows--form, .cx-rows--scroll, .cx-roster) .cx-pop__panel { position: fixed; top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; min-width: 0; max-width: none; }
  .cx-head > .cx-tabs { flex-basis: 100%; } /* вкладки раздела — своей строкой */
}
.cx-input--num { text-align: right; font-variant-numeric: tabular-nums; }
.cx-setting__control > :is(.cx-input, .cx-textarea) { width: var(--w, 240px); } /* поле в строке настройки: ширина через --w */
.cx-card[id] { scroll-margin-top: calc(var(--cx-h-header) + var(--cx-gap) * 2); } /* раздел по якорю встаёт под липкой шапкой, вровень с меню */
/* плитка-кнопка 36 в строке (иконка источника): .cx-tilebtn[aria-pressed="true"] — выбранная, лаймовая */
.cx-tilebtn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); color: var(--cx-text); cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-tilebtn svg { width: 18px; height: 18px; }
.cx-tilebtn:hover { background: var(--cx-surface-pressed); }
.cx-tilebtn[aria-pressed="true"] { background: var(--cx-accent); color: var(--cx-on-accent); }
.cx-tilebtn:focus-visible { box-shadow: var(--cx-focus); }
/* блок с обводкой внутри карточки: .cx-box > .cx-box__head (текст + чип) + содержимое — например, выбор иконки .cx-iconpick */
.cx-box { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-radius: var(--cx-r-lg); box-shadow: var(--cx-ring-soft); }
.cx-box__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cx-box__head .cx-cell__title { line-height: 1.6; }
/* значение задано регламентом или продуктом, переключить нельзя: .cx-fixed > svg (lock, check, x) + текст; --on — тёмное */
.cx-fixed { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.6; color: var(--cx-text-meta); white-space: nowrap; }
.cx-fixed svg { width: 14px; height: 14px; flex: none; }
.cx-fixed--on { color: var(--cx-text); }
/* проверка микрофона: .cx-micbars > i ×6, .is-on — слышно; высоты полосок — рисунок канваса; до кнопки рядом 10 */
.cx-micbars { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; margin-right: 2px; }
.cx-micbars > i { display: block; width: 4px; height: 6px; border-radius: 2px; background: var(--cx-text-4); transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-micbars > i:nth-child(2) { height: 10px; } .cx-micbars > i:nth-child(3) { height: 16px; } .cx-micbars > i:nth-child(4) { height: 12px; } .cx-micbars > i:nth-child(5) { height: 8px; } .cx-micbars > i:nth-child(6) { height: 5px; }
.cx-micbars > i.is-on { background: var(--cx-accent-deep); }
/* панель сохранения уходит плавно: .cx-savebar.is-leaving, убрать из разметки после animationend */
.cx-savebar.is-leaving { animation: cx-fade-out var(--cx-dur-out) var(--cx-ease) forwards; pointer-events: none; }

/* ---------- 1.9.2 · Команда Пульта: дашборды руководителя — колонки по шаблону, шапка карточки строкой, загрузка в строку, отметка с точкой, легенда, вопрос помощнику ---------- */
.cx-cols--top { align-items: start; } /* колонки разной высоты не тянутся */
@media (max-width: 1180px) { .cx-cols.cx-cols--wide { grid-template-columns: minmax(0, 1fr); } } /* две колонки только на широком экране: таблицам в них нужно место */
.cx-stack { display: flex; flex-direction: column; gap: var(--cx-gap); min-width: 0; } /* карточки столбиком внутри колонки */
/* шапка карточки строкой по базовой линии: .cx-card__head.cx-card__head--bar > .cx-card__lead (.cx-card__title + .cx-card__meta) + .cx-card__actions;
   справа ссылка или пояснение, не влезло — переносится под заголовок влево */
.cx-card__head--bar { align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 0; padding-bottom: 8px; }
.cx-card__lead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.cx-card__head--bar .cx-card__actions { align-items: baseline; margin-left: 0; }
/* карточка со списком: строки до краёв по вертикали — 14 сверху и снизу, шапка ниже на 6 */
.cx-card--list { --cx-card-pad-y: 14px; }
.cx-card--list > .cx-card__head--bar:first-child { padding-top: 6px; }
/* загрузка строкой: .cx-load.cx-load--row > .cx-progress + b (процент) */
.cx-load--row { flex-direction: row; align-items: center; gap: 8px; }
.cx-load--row > .cx-progress { flex: 1 1 auto; width: auto; height: 6px; background: var(--cx-border-soft); }
.cx-load--row > b { width: 40px; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--cx-text); text-align: right; }
/* отметка с точкой: .cx-signal > .cx-dot (+ --sm) + текст — смена, SLA; .is-bad — текст красным; --icon — иконка 16 и подпись */
.cx-signal { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-2); white-space: nowrap; overflow: hidden; }
.cx-signal.is-bad { color: var(--cx-critical); }
.cx-signal--icon { gap: 10px; }
.cx-signal--icon > svg { width: 16px; height: 16px; flex: none; color: var(--cx-text-3); }
/* легенда: квадрат 8 (в .cx--ds), круг — --round; лайм — --lime, пусто и прогноз — --ghost */
.cx-legend__dot--lime { --_c: var(--cx-accent); }
.cx-legend__dot--ghost { --_c: var(--cx-border-soft); box-shadow: inset 0 0 0 1px var(--cx-border); }
.cx-legend i.cx-legend__dot--round { border-radius: 50%; }
.cx-card > .cx-legend { margin-top: 12px; }
/* подсказка помощника на дашборде: .cx-banner.cx-banner--accent.cx-banner--note > .cx-ai-dots + span (b вывод, span что делать) */
.cx-banner--note { gap: 10px; padding: 12px 14px; border-radius: var(--cx-r-md); line-height: 1.6; }
.cx-banner--note > .cx-ai-dots + span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cx-banner--note b { font-weight: 600; }
.cx-banner--note b + span { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-2); }
.cx-banner--note .cx-ai-dots, .cx-now__cap .cx-ai-dots { gap: 3px; } .cx-banner--note .cx-ai-dots > i, .cx-now__cap .cx-ai-dots > i { width: 6px; height: 6px; } /* точки помощника 6 через 3, как AiDots канваса */
.cx-progress--ring { background: var(--cx-border-soft); } /* трек полосы на белом и мягком фоне */
.cx-items--pick { gap: 6px; } .cx-items--pick > .cx-item { padding: 9px 12px; border-radius: var(--cx-r-input); } /* выбор человека в окне: строки плотнее */
/* строка раскрывается по дням: .cx-rows > button.cx-rows__row[aria-expanded] (+ .cx-chev.cx-chev--side) + .cx-collapse > div > .cx-rows__row.is-sub — подстроки мелким */
.cx-rows > .cx-collapse > div { margin: 0 -12px; padding: 0 12px; }
.cx-rows__row.is-sub :is(.cx-cell--num, .cx-cell__sub, .cx-cell--meta), .cx-rows__row.is-sub .cx-load--row > b { font-size: 11.5px; font-weight: 400; color: var(--cx-text-2); }
.cx-rows__row.is-sub .cx-cell--num.is-bad { color: var(--cx-critical); }
.cx-rows__row > .cx-chev svg { width: 14px; height: 14px; }
/* тепловая карта: линия «на смене» под ней — .cx-heat.cx-heat--line > .cx-heat__x + .cx-heat__bar[style=--n:людей] (.is-zero — никого) */
.cx-heat--line { align-items: end; margin-top: 23px; } /* в канвасе под картой пустой ряд сетки — линия ниже на 23 */
.cx-heat.cx-heat--line > .cx-heat__x { text-align: left; line-height: 1.1; }
.cx-heat__bar { display: block; height: calc(4px + var(--n, 0) * 4px); border-radius: 2px; background: var(--cx-text-3); }
.cx-heat__bar.is-zero { opacity: .35; }
.cx-legend__dot--half { --_c: color-mix(in srgb, var(--cx-accent) 50%, var(--cx-surface-soft)); }
.cx-legend__dot--over { --_c: transparent; box-shadow: inset 0 0 0 1.5px var(--cx-critical); }
.cx-legend i.cx-legend__dot--line { --_c: var(--cx-text-3); height: 5px; }
/* прогноз недели: .cx-minicards > .cx-minicard ×7, ниже подсказка помощника */
.cx-minicards { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 8px; }
.cx-minicards + .cx-banner { margin-top: 14px; }
.cx-rows + .cx-banner--note { margin-top: 10px; } /* вывод помощника под таблицей */
.cx-rows > .cx-rows__row:first-child { border-top-color: transparent; } /* таблица без шапки: над первой строкой линии нет */
.cx-progress--muted > i { background: var(--cx-text-3); } /* слабый показатель — серым */
.cx-rows .cx-cell--meta.is-end { display: block; justify-self: stretch; } /* мета справа, длинная — с многоточием */
/* изменение к прошлому периоду мелким в ячейке: .cx-change (.is-up — рост плохого, красным; .is-dn — снижение) */
.cx-change { justify-self: end; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-change.is-up { color: var(--cx-critical); } .cx-change.is-dn { color: var(--cx-text); }
/* вопрос помощнику под таблицей: form.cx-ask > подсказка + .cx-search + .cx-chips */
.cx-ask { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.cx-ask .cx-chips, .cx-form .cx-chips { gap: 6px; }
/* поля окна: подпись капсом мелким (.cx-field.cx-field--quiet.cx-field--caps), галочки столбиком через 8 (.cx-checks) */
.cx-field--caps > .cx-field__label { text-transform: uppercase; letter-spacing: .06em; }
.cx-checks { display: flex; flex-direction: column; gap: 8px; }
/* смены: подпись часов под именем переносится, перебор — красным; клетка — меню выбора смены; легенда клеток */
.cx-roster .cx-person__sub { white-space: normal; }
.cx-person__sub.is-bad { color: var(--cx-critical); }
.cx-roster__pop > .cx-pop__panel { min-width: 180px; }
.cx-legend__dot--shift { --_c: var(--cx-surface-soft); box-shadow: var(--cx-ring-soft); }
.cx-legend__dot--vacation { --_c: var(--cx-warn-bg); } .cx-legend__dot--sick { --_c: var(--cx-critical-bg); }
.cx-legend__dot--ask { --_c: transparent; box-shadow: inset 0 0 0 1.5px var(--cx-accent); }
/* строки-дела: аватар 30 вместо плитки; второй заголовок в карточке — ниже на 16; вывод помощника под графиком — через 14 */
.cx-list--dense .cx-row > .cx-avatar { --_s: 30px; }
.cx-list + .cx-card__head--bar { padding-top: 16px; }
.cx-bars__x + .cx-banner { margin-top: 14px; }
a.cx-row__title { color: inherit; text-decoration: none; } a.cx-row__title:hover { text-decoration: underline; text-underline-offset: 3px; } /* заголовок строки ссылкой — открыть запрос */

/* ---------- 1.9.3 · Клиенты Пульта: шапка карточки клиента и человека, лента анамнеза, похожие случаи, заметки, ответственные, строка фильтров ---------- */
/* шапка карточки: .cx-entity > .cx-avatar (48) + __main (h1.__title, .cx-chips, .__facts с b) + __side (подпись, .__value, .__acts) */
.cx-entity { display: flex; align-items: flex-start; gap: 16px; }
.cx-entity > .cx-avatar { --_s: 48px; font-size: 12px; }
.cx-entity__main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; }
.cx-entity__title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
.cx-entity .cx-chips { gap: 6px; }
.cx-entity__facts { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); }
.cx-entity__facts b { font-weight: 600; color: var(--cx-text); }
.cx-entity__side { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 6px; }
.cx-entity__value { font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-entity__value.is-bad { color: var(--cx-critical); }
.cx-entity__acts { display: flex; align-items: center; gap: 8px; }
@media (max-width: 900px) { .cx-entity { flex-wrap: wrap; } .cx-entity__side { align-items: flex-start; flex-basis: 100%; } .cx-entity__acts { flex-wrap: wrap; } }
/* вкладки карточки строкой с кнопкой справа; чипы-фильтры над лентой или таблицей; значение красным в .cx-kv */
.cx-head--tabs { min-height: 0; padding-top: 4px; }
.cx-chips--bar { gap: 6px; padding-bottom: 10px; }
.cx-kv > .is-bad { color: var(--cx-critical); }
/* лента анамнеза: .cx-list.cx-list--feed > .cx-list__day + .cx-row.cx-row--top (.cx-row__time, .cx-row__tile--sm, __body, ссылка) — над каждой строкой линия */
.cx-list--feed .cx-row { gap: 10px; padding: 9px 12px 8px; border-radius: 12px; }
.cx-list--feed > .cx-list__day:first-child { padding-top: 14px; }
.cx-list--feed + .cx-rows__more { min-height: 22px; padding-top: 0; } /* «показать ещё» сразу под лентой */
.cx-list--feed .cx-row::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--cx-line); transition: opacity var(--cx-dur-hover); }
.cx-list--feed .cx-row__tile.cx-row__tile--sm { border-radius: 9px; }
.cx-list--feed .cx-row__tile svg { width: 14px; height: 14px; }
.cx-list--feed .cx-row__body { display: flex; flex-direction: column; gap: 2px; }
.cx-list--feed :is(.cx-row__title, .cx-row__meta) { white-space: normal; }
.cx-list--feed .cx-row > .cx-link { flex: none; padding-top: 3px; }
/* похожие случаи: .cx-banner--note.cx-banner--cases > точки + span (b, span, .cx-cases > .cx-box.cx-box--sm (b, span, span, .cx-cases__bar)) */
.cx-banner--cases > .cx-ai-dots, .cx--ds .cx-banner--accent.cx-banner--cases > .cx-ai-dots { align-self: center; margin-top: 0; }
.cx-banner--cases > .cx-ai-dots + span { flex: 1 1 auto; }
.cx-cases { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.cx-box--sm { gap: 6px; padding: 12px 14px; border-radius: var(--cx-r-md); background: var(--cx-surface); }
.cx-cases b { font-size: 13px; line-height: 1.5; }
.cx-cases .cx-box--sm > span { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-2); }
.cx-cases__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.cx-cases__bar > .cx-btn + .cx-link, .cx-cases__bar > .cx-btn + .cx-card__meta, .cx-cases__bar > .cx-card__meta:only-of-type { margin-left: auto; }
/* заметка: .cx-memo — текст и подпись автора; ответственные: .cx-people > div (.cx-person + .cx-ibtn 30) */
.cx-memo { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--cx-surface-soft); font-size: 12.5px; line-height: 1.6; }
.cx-memo > span { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); }
.cx-people { display: flex; flex-direction: column; gap: 8px; }
.cx-people > div { display: flex; align-items: center; gap: 10px; }
.cx-people > div > :first-child { flex: 1 1 auto; min-width: 0; }
.cx-people .cx-ibtn { width: 30px; height: 30px; }
.cx-people .cx-ibtn svg { width: 14px; height: 14px; }
.cx-people__link { color: inherit; text-decoration: none; }
/* список клиентов: карточка срезов, строка фильтров над таблицей, подвал таблицы слева и по центру, пояснение под таблицей */
.cx-card--tree { padding: 8px 10px 12px; }
@media (max-width: 1180px) { .cx-card--tree { padding: 8px; } .cx-card--tree .cx-tree { flex-direction: row; overflow-x: auto; scrollbar-width: none; } .cx-card--tree .cx-tree__cap { display: none; } .cx-card--tree .cx-tree__item { flex: none; } } /* срезы над таблицей лентой */
.cx-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; }
.cx-rows__more--start { justify-content: flex-start; gap: 10px; min-height: 22px; padding-top: 0; } /* подвал сразу под таблицей, как в карточке клиента */
.cx-card__note { display: block; padding-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); }
/* раскрытая запись: строка без сетки — участники, конвейер .cx-pipe, кнопки */
.cx-rows__row.cx-rows__row--detail { display: block; padding-left: 24px; }
.cx-rows__row--detail > .cx-pipe { padding: 8px 0 4px; }
.cx-rows__row--detail > .cx-cases__bar { padding-top: 6px; }
/* строки без линий и подсветки: .cx-list.cx-list--flat > .cx-row (плитка 28, текст, ссылка) — сессии человека */
.cx-list--flat { gap: 8px; }
.cx-list--flat .cx-row { gap: 10px; padding: 0; margin: 0; }
.cx-list--flat .cx-row:hover { background: none; }
.cx-list--flat .cx-row + .cx-row::before { display: none; }
.cx-list--flat .cx-row__tile.cx-row__tile--sm { border-radius: 9px; }
.cx-list--flat .cx-row__tile svg { width: 14px; height: 14px; }
/* полосы по строкам: .cx-meters > div (подпись, .cx-progress, b — число, .is-bad) — ошибки по экранам */
.cx-meters { display: flex; flex-direction: column; gap: 6px; }
.cx-meters > div { display: grid; grid-template-columns: minmax(0, 1fr) 120px 36px; gap: 10px; align-items: center; font-size: 12.5px; line-height: 1.6; }
.cx-meters b { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.cx-meters b.is-bad { color: var(--cx-critical); }
/* отступы между блоками карточки: после списка — свойства, после свойств — заголовок и пояснение; вывод помощника под таблицей через 12 */
.cx-list--flat + .cx-kv { padding-top: 14px; }
.cx-kv + .cx-card__head--bar { padding-top: 16px; }
.cx-kv + .cx-card__note { padding-top: 14px; }
.cx-rows + .cx-banner--gap { margin-top: 12px; }

/* ---------- 1.10.1 · База знаний Пульта: дерево с загрузкой, «ничего не нашли», статья, редактор, пробелы, «Входящие», импорт ---------- */
/* дерево разделов: под ним загрузка и пояснение; до 1180 дерево лентой — без них */
.cx-card--tree > .cx-drop { margin: 12px 4px 0; }
.cx-card--tree > .cx-card__note { padding: 12px 10px 0; }
@media (max-width: 1180px) { .cx-card--tree > :is(.cx-drop, .cx-card__note) { display: none; } }
/* загрузка: иконка без круга (20, в --sm 16), кнопки под текстом — поверх поля выбора файла */
.cx-drop > svg { width: 20px; height: 20px; flex: none; color: var(--cx-text-2); }
.cx-drop--sm > svg { width: 16px; height: 16px; }
.cx-drop--sm .cx-drop__title { color: var(--cx-text); }
.cx-drop__hint { line-height: 1.5; }
.cx-drop__acts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 4px; }
/* «ничего не нашли» в карточке списка: без картинки, текст мельче и шире; ниже — вывод помощника */
.cx-state--inline { gap: 8px; }
.cx-state.cx-state--inline .cx-state__text { max-width: 460px; font-size: 12.5px; color: var(--cx-text-2); }
.cx-state--inline .cx-state__actions { margin-top: 6px; }
.cx-state + .cx-banner { margin-top: 4px; }
/* ячейки: подпись с чипом или полосой — в строку; чип в столбике не тянется; жирное в подписи — тёмным */
.cx-cell__sub:has(> .cx-chip, > .cx-progress) { display: flex; align-items: center; gap: 6px; }
.cx-cell__sub > .cx-progress { flex: none; width: 72px; }
.cx-cell__sub:has(> .cx-progress) { flex-direction: column; align-items: flex-start; gap: 0; } /* 1.10.2: полоса — под подписью вплотную, как «разбираем · 40 %» в KbImport канваса */
.cx-cell__sub--status { padding-top: 2px; gap: 3px; } /* 1.10.2: строка состояния под подписью (импорт: «разобран · 6 статей», «разбираем · 40 %») — поле 2 сверху, текст от чипа через пробел */
.cx-cell > .cx-chip { align-self: flex-start; }
.cx-cell__sub b { font-weight: 600; color: var(--cx-text); }
.cx-cell__sub--ink { color: var(--cx-text); }
.cx-cell--num.is-soft { color: var(--cx-text-meta); }
/* таблица под заголовком карточки: --lined — линия и над первой строкой, --loose — строки 10 сверху и снизу; плитка в строке — 36/10, --sm — 28/8 */
.cx-rows--lined > .cx-rows__row:first-child { border-top-color: var(--cx-line); }
.cx-rows--loose > .cx-rows__row { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 600px) { /* на телефоне третья ячейка (полка и слой у файла) — второй строкой под названием */
  .cx-rows--loose > .cx-rows__row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .cx-rows--loose > .cx-rows__row > :nth-child(3) { grid-column: 2 / -1; grid-row: 2; }
}
.cx-rows__row > .cx-row__tile { border-radius: 10px; } .cx-rows__row > .cx-row__tile svg { width: 16px; height: 16px; }
.cx-rows__row > .cx-row__tile.cx-row__tile--sm { border-radius: 8px; } .cx-rows__row > .cx-row__tile--sm svg { width: 14px; height: 14px; }
/* уверенность помощника мелким серым: .cx-conf.cx-conf--soft > .cx-progress + b */
.cx-conf--soft > b { width: auto; font-weight: 400; color: var(--cx-text-meta); text-align: left; }
/* списки: --lined — линия и над первой строкой; --sep — строки через линию без подсветки, заголовок 12.5 переносится, справа чип */
.cx-list--lined > .cx-row:first-child::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--cx-line); }
.cx-list--sep { gap: 8px; }
.cx-list--sep .cx-row { align-items: flex-start; gap: 10px; padding: 8px 0; margin: 0; border-radius: 0; }
.cx-list--sep .cx-row:first-child { padding-top: 0; }
.cx-list--sep .cx-row:hover { background: none; }
.cx-list--sep .cx-row + .cx-row::before { left: 0; right: 0; opacity: 1; }
.cx-list--sep .cx-row__body { display: flex; flex-direction: column; gap: 2px; }
.cx-list--sep :is(.cx-row__title, .cx-row__meta) { white-space: normal; } .cx-list.cx-list--sep .cx-row__title { font-size: 12.5px; line-height: 1.6; }
.cx-list--sep .cx-row + .cx-row { padding-top: 9px; } /* линия над строкой — 1 px сверх отступа 8 */
/* статья: карточка с полями 28/32 (предпросмотр — 24/28), чипы под заголовком через 6, связанные статьи, «Статья помогла?» */
.cx-card--prose { --cx-card-pad-y: 28px; --cx-card-pad-x: 32px; }
.cx-card--prose:has(.cx-prose--sm) { --cx-card-pad-y: 24px; --cx-card-pad-x: 28px; }
@media (max-width: 900px) { .cx-card--prose, .cx-card--prose:has(.cx-prose--sm) { --cx-card-pad-y: 20px; --cx-card-pad-x: 18px; } }
.cx-prose__sec:has(> h1) { gap: 10px; }
.cx-prose .cx-chips { gap: 6px; }
.cx-prose--sm { gap: 14px; } .cx-prose--sm h1 { font-size: 20px; line-height: 26px; }
.cx-prose__links { display: flex; flex-direction: column; gap: 6px; }
.cx-prose__links > * { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; line-height: 1.6; color: inherit; text-decoration: none; }
.cx-prose__links > a:hover > span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }
.cx-prose__links svg { width: 14px; height: 14px; flex: none; }
.cx-prose__links .cx-chip { margin-left: auto; }
.cx-prose__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 6px; border-top: 1px solid var(--cx-line); font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); }
.cx-prose__foot > :last-child:not(.cx-btn) { margin-left: auto; }
/* плитки показателей прямо на фоне страницы, без карточки (пробелы и «Входящие» базы) */
.cx-kpis--bare { background: none; }
/* числа парами: .cx-figures > div (b — число, span — подпись) — «Использование» статьи */
.cx-figures { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 10px 14px; }
.cx-figures > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-figures b { font-size: 20px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-figures b.is-bad { color: var(--cx-critical); }
.cx-figures span { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); }
.cx-figures + .cx-banner { margin-top: 12px; }
/* перечень строками без линий: .cx-tally[style=--cols] — ячейки подряд, как в .cx-kv; номер — .cx-cell--num, мета — .cx-cell--meta, справа — .is-end;
   текст с пояснением — span > small; точка — .cx-dot; --top — по верху строки (версии, замечания помощника) */
.cx-tally { display: grid; grid-template-columns: var(--cols, minmax(0, 1fr) auto); gap: var(--gap, 6px 8px); align-items: center; font-size: 12.5px; line-height: 1.6; }
.cx-tally > * { min-width: 0; }
.cx-tally > .is-end { text-align: right; } .cx-tally > :is(.cx-link, .is-end) { justify-self: end; }
.cx-tally--top { align-items: start; }
.cx-tally--top > .cx-dot { margin-top: 5px; }
.cx-tally small { display: block; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); }
/* вывод помощника с кнопками или списком под текстом — точки по середине; полоса-предупреждение строкой (черновик из запроса) */
.cx-banner--note > .cx-ai-dots + span { flex: 1 1 auto; }
.cx-banner__acts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.cx-banner--note .cx-tally { padding-top: 6px; } .cx-banner--note .cx-tally small { margin-top: 4px; } /* в выводе пояснение через 4, как его абзацы */
.cx-banner.cx-banner--note:has(.cx-banner__acts) > .cx-ai-dots { align-self: center; margin-top: 0; }
.cx-banner--bar { align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--cx-r-md); line-height: 1.6; }
.cx-banner--bar b { font-weight: 600; }
.cx-banner--bar > .cx-banner__end { gap: 10px; }
/* редактор: заголовок раздела — .cx-editor__h рядом с .cx-editor__body; теги под полями статьи — строкой через 6 */
.cx-editor__h { font-size: 13.5px; line-height: 1.6; font-weight: 600; outline: none; }
.cx-cols + .cx-chips { gap: 6px; padding-top: 12px; }
/* шапка обычной карточки с отступом 6 сверху, как у карточки списка (источники «Входящих») */
.cx-card__head--gap { padding-top: 6px; }

/* ---------- 1.10.2 · Сверка Пульта: то, что было временным в продукте — заглушки, оценка, ячейки, доска, ширины, отступы окна запроса ---------- */
/* заглушки загрузки стопкой: .cx-skeletons > .cx-skeleton… — строки высотой поля, через 8 */
.cx-skeletons { display: flex; flex-direction: column; gap: var(--cx-space-2); }
.cx-skeletons > .cx-skeleton { height: var(--cx-h-md); }
/* оценка клиента: .cx-rating > svg звезды + число */
.cx-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-rating > svg { width: 12px; height: 12px; flex: none; color: var(--cx-warn); }
/* ячейки таблицы: чипы с переносом строкой ниже — .cx-chips.cx-chips--cell; иконка с подписью — .cx-cell--icon */
.cx-chips--cell { gap: 4px 8px; min-width: 0; }
.cx-cell--icon { display: flex; align-items: center; gap: 6px; }
.cx-cell--lock { display: inline-flex; justify-content: center; width: 30px; color: var(--cx-text-3); } .cx-cell--lock > svg { width: 14px; height: 14px; } /* 1.10.2: замок на месте действия в строке — место 30, значок 14 по центру */
/* карточка доски в руке: .cx-board__fly[style="--x; --y; --w"] > .cx-bcard.is-dragging — идёт за указателем */
.cx-board__fly { position: fixed; left: var(--x); top: var(--y); width: var(--w); z-index: var(--cx-z-overlay); pointer-events: none; }
/* поле и окошко своей ширины: .cx-input--fit, .cx-pop__panel--fit + style="--w: 72px" */
.cx-input--fit { --w: 120px; width: var(--w); flex: none; }
.cx-pop__panel--fit { --w: 320px; width: var(--w); max-width: calc(100vw - 32px); }
/* кнопки под текстом предупреждения: через 8, отступ 6 (в выводе помощника — через 6, отступ 8) */
.cx-banner--warn .cx-banner__acts { gap: 8px; padding-top: 6px; }
/* правая колонка окна запроса: сводка клиента под именем через 6, реквизиты под ней через 4;
   разделы помощника .cx-sects под строкой «готово» (высота 32) через 10, предложенные действия под ними через 6 */
.cx-work__title + .cx-kv { margin-top: 6px; }
.cx-kv + .cx-sect { margin-top: 4px; }
.cx-work__bar:has(+ .cx-sects) { min-height: 32px; } .cx-work__bar + .cx-sects { margin-top: 10px; }
.cx-sects + .cx-item { margin-top: 6px; }
.cx-work__side .cx-items--lined > .cx-item { column-gap: 10px; } /* продукты и контакты клиента: аватар и текст через 10 */
.cx-work__side .cx-items--lined > .cx-item > .cx-cell { gap: 0; } /* имя и должность контакта вплотную */
.cx-work__side .cx-items--lined > .cx-item > .cx-item__end { gap: 2px; } /* «позвонить» и «⋯» через 2 */
.cx-item__sub--contact { font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); } /* телефон и почта контакта: строка 20 */
/* реквизиты: значения в несколько строк (адрес, договор) — межстрочный 1.45, строка по самой высокой ячейке */
.cx-kv--wrap > :nth-child(even) { line-height: 1.45; }
/* неактуальный контакт: чип, причина и «вернуть» под именем — через 8, переносятся строками */
.cx-item.is-off > .cx-item__sub { gap: 8px; }
/* плотная карточка ленты: звонок идёт, не дозвонились, звонок в истории, передача на линию — поля 11/12, через 6, строки 1.5, текст 12.5 */
.cx-feed__head { line-height: 1.5; } /* шапка карточки ленты: строка 1.5, с чипом — 20.5 */
.cx-feed__card--sm { gap: 6px; padding: 11px 12px; border-radius: var(--cx-r-md); line-height: 1.5; }
.cx-feed__card--sm p { font-size: 12.5px; line-height: 1.5; }
.cx-item--sm { gap: 10px; padding: 8px 10px; } /* плотная строка-блок: событие в истории запроса */
/* вкладки окна запроса: «Задачи» — шапка с «Новой задачей» поля 2/2/4, заголовок группы по строке 1.5; подпись в конце вкладки (файлы, задачи) — поля 4/2 */
.cx-work__bar:has(+ .cx-task__group) { padding: 2px 2px 4px; }
.cx-task__group { line-height: 1.5; }
.cx-work__main > .cx-work__scroll > .cx-field__hint { padding: 4px 2px; }
/* блоки на мягкой карточке анкеты (гипотеза, решение) через 10: поля 9/10, радиус 12, заголовок и подпись через 2;
   у решения номер и текст через 10, у гипотезы «подтвердить» и «не то» через 4 в месте не уже 64 */
.cx-feed__card--soft:not(.cx-feed__card--sm) { gap: 10px; line-height: 1.5; } /* раздел анкеты: строки 1.5, блоки через 10 */
.cx-feed__card--soft > .cx-feed__actions { padding-top: 2px; }
.cx-feed__card--soft > .cx-items { gap: 10px; }
.cx-feed__card--soft .cx-item { padding: 9px 10px; border-radius: var(--cx-r-input); }
.cx-feed__card--soft .cx-item > .cx-cell { gap: 2px; }
.cx-feed__card--soft .cx-item:has(> .cx-item__step) { column-gap: 10px; }
.cx-feed__card--soft .cx-item:has(> .cx-conf) > .cx-item__end { gap: 4px; min-width: 64px; }

/* ---------- Метрики канваса: .cx--ds рядом с .cx на body ----------
   Канвасы Claude Design рисуются дизайн-системой «CORIX — лайм»; у неё чуть другие чип, поле, переключатель, галочка, окно и меню.
   Продукт, который верстается 1 в 1 по канвасу, ставит <body class="cx cx--ds cx-app">. Без класса всё как раньше. */
.cx--ds { --cx-card-pad-y: 20px; --cx-card-pad-x: 24px; --cx-side-w: 240px; }
.cx--ds .cx-page { padding: var(--cx-space-5); }
.cx--ds .cx-shell { gap: 6px; padding: 0 14px 0 24px; }
.cx--ds .cx-shell > .cx-brand { margin-right: 22px; }
.cx--ds .cx-shell .cx-avatar { --_s: 38px; font-size: 12px; }
.cx--ds .cx-shell__end { gap: 6px; }
.cx--ds .cx-shell__icon .cx-badge--dot { top: 9px; right: 10px; min-width: 7px; width: 7px; height: 7px; box-shadow: 0 0 0 1.5px var(--cx-surface-soft); }
.cx--ds .cx-chip { height: 22px; padding: 0 11px; }
.cx--ds .cx-chip--sm { height: 20px; padding: 0 7px; }
.cx--ds .cx-chip--sm.cx-chip--ring { height: 18px; } /* 1.8.5: метка-источник «из Битрикс24», симптом анкеты */
.cx--ds .cx-chip--dot::before { width: 7px; height: 7px; }
.cx--ds .cx-chip--lg { height: 28px; padding: 0 12px; }
.cx--ds .cx-input, .cx--ds .cx-textarea, .cx--ds .cx-select select { padding-left: 13px; padding-right: 13px; font-size: 12.5px; font-weight: 600; }
.cx--ds .cx-textarea { padding-top: 10px; padding-bottom: 10px; line-height: 1.55; }
.cx--ds .cx-textarea:not(.cx-textarea--auto) { min-height: 0; } /* 1.8.3: высота по rows, как Textarea канваса */
.cx--ds .cx-composer__field > .cx-textarea { padding-top: 9px; padding-bottom: 9px; line-height: 20px; }
.cx--ds .cx-check, .cx--ds .cx-radio { gap: 9px; font-size: 12.5px; }
.cx--ds .cx-check input, .cx--ds .cx-radio input { width: 20px; height: 20px; box-shadow: inset 0 0 0 1.5px var(--cx-border); }
.cx--ds .cx-check input:checked, .cx--ds .cx-check input:indeterminate { box-shadow: inset 0 0 0 1.5px var(--cx-fill-strong); }
.cx--ds .cx-check input::after { border-color: var(--cx-accent); }
.cx--ds .cx-switch input { width: 40px; height: 24px; background: var(--cx-border); }
.cx--ds .cx-switch input::after { width: 18px; height: 18px; box-shadow: 0 1px 2px rgba(23,24,28,.15); }
.cx--ds .cx-switch input:checked { background: var(--cx-accent); }
.cx--ds .cx-switch input:checked::after { transform: translateX(16px); background: var(--cx-fill-strong); }
.cx--ds .cx-setting { padding: 12px 0; } /* 1.9.1: строка настройки как SettingRow канваса */
.cx--ds .cx-setting:first-child { padding-top: 0; }
.cx--ds .cx-setting__title { line-height: 1.6; }
.cx--ds .cx-setting__hint { font-size: 11.5px; }
.cx--ds .cx-setting__control > .cx-switch { margin-bottom: 6px; } /* в канвасе переключатель SettingRow стоит на строке текста — на 3 выше середины */
.cx--ds .cx-tab { padding: 0 13px; gap: 6px; }
.cx--ds .cx-tab .cx-tab__count { margin-left: 4px; font-size: 11.5px; font-weight: 600; opacity: 1; color: var(--cx-text-3); }
.cx-tab > svg { width: 14px; height: 14px; flex: none; } /* 1.8.2: шеврон у таба-фильтра */
.cx--ds .cx-tab[aria-selected="true"], .cx--ds .cx-tab[aria-current="page"] { font-weight: 700; }
.cx--ds :where(.cx-kbd) { height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--cx-line); font-size: 11.5px; color: var(--cx-text); }
.cx--ds { --pop-gap: 6px; } /* 1.10.2: меню от кнопки через 6, как Menu и Select канваса */
.cx--ds .cx-pop__panel:not(.cx-pop__panel--lg, .cx-picker) { padding: 6px; border-radius: var(--cx-r-lg); }
.cx--ds .cx-menu__item { min-height: 0; padding: 8px 10px; font-size: 12.5px; line-height: 1.6; } /* 1.8.5: строка меню 36, как Menu канваса */
.cx--ds .cx-menu__hint { font-size: 11px; font-weight: 600; color: var(--cx-text-4); }
.cx--ds .cx-menu__sep { margin: 4px 10px; background: var(--cx-border-soft); }
.cx--ds .cx-modal__head { padding: 18px 22px 0; }
.cx--ds .cx-modal__title { font-size: 15px; }
.cx--ds .cx-modal__sub { font-size: 11.5px; }
.cx--ds .cx-modal__close { width: 30px; height: 30px; border-radius: 10px; color: var(--cx-text-meta); }
.cx--ds .cx-modal__body { padding: 14px 22px 0; }
.cx--ds .cx-modal__body:last-child { padding-bottom: 18px; }
.cx--ds .cx-modal__foot { gap: 10px; padding: 18px 22px; }
.cx--ds .cx-drawer { inset: 12px 12px 12px auto; height: calc(100vh - 24px); max-height: calc(100vh - 24px); border-radius: var(--cx-r-modal); }
.cx--ds .cx-drawer > .cx-modal__head { padding: 20px 22px 14px; }
.cx--ds .cx-drawer > .cx-modal__head .cx-modal__title { font-size: 15.5px; line-height: 1.6; }
.cx--ds .cx-drawer > .cx-modal__body { padding: 0 22px 20px; }
.cx--ds .cx-drawer > .cx-modal__body:has(> .cx-work) { padding-top: 2px; } /* 1.8.3: окно запроса — содержимое на 2 ниже шапки */
.cx--ds .cx-drawer > .cx-modal__foot { padding: 14px 22px; }
.cx--ds .cx-side { gap: 4px; padding: 12px; border-radius: var(--cx-r-card); } /* 1.9.1: меню разделов настроек — карточка 240, пункты через 4 (1.11.4, было вплотную) */
.cx--ds .cx-side__group { padding: 16px 12px 6px; line-height: 1.5; }
.cx--ds .cx-side__group:first-child { padding-top: 6px; }
.cx--ds .cx-side__item { gap: 12px; border-radius: var(--cx-r-md); }
.cx--ds .cx-legend :where(i) { width: 8px; height: 8px; border-radius: 2px; vertical-align: 0; } /* 1.9.2: метки легенды канваса 8 */
.cx--ds .cx-now { row-gap: 0; } /* 1.9.2: «обновлено…» переносится вплотную, как в канвасе */
.cx--ds .cx-field--quiet > .cx-field__label { line-height: 1.5; } /* 1.9.2: подпись поля — meta-sm канваса */
.cx--ds .cx-crumbs { gap: 6px; font-size: 11.5px; line-height: 1.5; } /* 1.9.3: крошки канваса — мелко, шеврон между частями */
.cx--ds .cx-crumbs a, .cx--ds .cx-crumbs [aria-current="page"] { font-weight: 400; }
.cx--ds .cx-crumbs > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 8px 1px 2px; border: solid var(--cx-text-3); border-width: 1.2px 1.2px 0 0; transform: rotate(45deg); }
.cx--ds .cx-tree--lg { gap: 2px; } /* 1.9.3: срезы клиентов через 2 (1.10.1: дерево базы знаний — через 1) */
.cx--ds .cx-btn { gap: 7px; } .cx--ds .cx-btn svg { width: 14px; height: 14px; } /* 1.9.3: кнопка канваса — иконка 14 через 7 */
.cx--ds .cx-now__cap + .cx-now__item { padding-left: 16px; box-shadow: inset 1px 0 0 color-mix(in srgb, currentColor 12%, transparent); } /* 1.9.3: в канвасе разделитель и после «Сейчас» */
.cx-list--flat .cx-row__meta { white-space: normal; } /* подпись сессии переносится */
.cx--ds .cx-bars:not(.cx-bars--stack) + .cx-bars__x > span { font-size: 11.5px; } /* 1.9.3: подписи обычных столбиков 11.5, у долей по дням — 10.5 */
.cx--ds .cx-head__title { margin-right: 0; } .cx--ds .cx-head__title + .cx-tabs { margin-left: 8px; } /* 1.9.3: после заголовка пояснение через 10, вкладки — через 18 */
.cx--ds :is(.cx-legend, .cx-bars__x, .cx-heat__x, .cx-heat__y, .cx-roster__head, .cx-roster__hours, .cx-list__day, .cx-rows__more, .cx-now__end, .cx-link--sm) { line-height: 1.5; } /* 1.9.2: мелкие подписи графиков — 1.5, как meta-sm канваса */
.cx--ds :is(.cx-person__name, .cx-person__sub, .cx-row__title, .cx-row__meta) { line-height: 1.5; } /* 1.9.2: строка и подпись канваса — 13/1.5 и 11.5/1.5 */
.cx--ds .cx-list--dense .cx-row__body { display: flex; flex-direction: column; gap: 1px; }
.cx--ds .cx-rows:not(.cx-rows--tall) .cx-cell { gap: var(--cell-gap, 0); } /* 1.9.2: в таблицах канваса имя и подпись вплотную; --cell-gap — где в канвасе 1 */
.cx--ds .cx-list--dense .cx-row + .cx-row { padding-top: 10px; } .cx--ds .cx-list--dense .cx-row + .cx-row::before { left: 0; right: 0; } /* 1.9.2: линия во всю ширину и занимает 1 px, как рамка в канвасе */
.cx--ds .cx-list--dense.cx-list--lined > .cx-row:first-child { padding-top: 10px; } /* 1.10.3: линия над первой строкой тоже занимает 1 px — строка 57, как остальные */
.cx--ds .cx-list--dense div.cx-row:hover { background: none; } .cx--ds .cx-list--dense div.cx-row:hover::before, .cx--ds .cx-list--dense div.cx-row:hover + .cx-row::before { opacity: 1; }
.cx--ds .cx-side__item:hover { background: var(--cx-surface-pressed); }
.cx--ds .cx-side__item[aria-current="page"] { box-shadow: none; }
/* в дизайн-системе канваса цвет --lk-ink-meta не задан, и подписи её компонентов наследуют цвет текста: невыбранные сегменты,
   подсказки настроек, подзаголовок окна, шеврон списка, иконки меню — тёмные, как на артбордах */
.cx--ds .cx-segmented :is(button, label, a) { color: var(--cx-text); }
.cx--ds .cx-segmented .cx-segmented__count { font-size: 11.5px; font-weight: 400; color: var(--cx-text-2); } /* 1.8.3: «История 11» в окне запроса */
.cx--ds .cx-setting__hint, .cx--ds .cx-modal__sub, .cx--ds .cx-modal__close, .cx--ds .cx-state__text { color: var(--cx-text); }
.cx--ds .cx-dd__btn::after { border-color: var(--cx-text); }
.cx--ds .cx-dd__btn { gap: 12.5px; padding-right: 10px; } .cx--ds .cx-dd__btn::after { margin-right: 4.5px; } /* 1.10.2: Select канваса — поля 0 10 0 13, шеврон 16: уголок 7 по центру места 16 */
.cx--ds .cx-search, .cx--ds .cx-search .cx-kbd { color: var(--cx-text); } /* 1.10.2: лупа SearchInput канваса — цвета текста (там var(--lk-ink-meta) без запасного) */
.cx--ds .cx-drop__title { line-height: 1.5; } /* 1.10.2: заголовок зоны загрузки — строка 13/1.5, как в канвасе */
.cx--ds .cx-search input::placeholder { color: var(--cx-text-2); } /* 1.9.2: у SearchInput канваса подсказка браузерная — темнее нашей */
.cx--ds .cx-banner--warn { color: var(--cx-warn-text); } /* предупреждения канваса (nt-warn, cp-warn, ban, esc) — цветом warn */
.cx--ds .cx-banner--accent .cx-ai-dots { align-self: flex-start; margin-top: 7px; } /* подсказка помощника: точки у первой строки, как в nt-ai */
.cx--ds .cx-banner--note > .cx-ai-dots { margin-top: 0; } /* 1.10.1: в выводах на дашбордах (.ai канваса) точки по верху строки */
.cx--ds :is(.cx-work__side :is(.cx-item__title, .cx-item__sub), .cx-feed__head, .cx-kv--facts .cx-chips, .cx-cell__sub--status) > .cx-chip:not(.cx-chip--sm) { height: auto; padding-top: 2px; padding-bottom: 2px; line-height: 1.5; } /* 1.10.2: в правой колонке окна запроса, в шапке карточки ленты, в фактах анкеты и в строке состояния ячейки чип по строке 1.5, как Chip канваса — 20.5 */
.cx--ds .cx-chips--cell > .cx-chip:not(.cx-chip--sm) { height: auto; padding-top: 2px; padding-bottom: 2px; line-height: 1.6; } /* 1.10.2: статусы в ячейке таблицы — Chip канваса по строке 1.6, 21.6: два статуса стопкой дают строку 61.2 */
.cx--ds .cx-drop { min-height: 0; padding: 26px 20px; border: 1.5px dashed var(--cx-text-4); border-radius: var(--cx-r-input); background-image: none; } /* 1.10.1: загрузка канваса — пунктир рамкой */
.cx--ds .cx-drop--sm { padding: 14px 12px; border-color: var(--cx-line); }
.cx--ds .cx-menu__item svg { color: currentColor; }
/* рейка под шапкой: снизу отступ страницы 20, как у артбордов */
.cx--ds .cx-layout > .cx-side { top: calc(var(--cx-h-header) + var(--cx-gap)); } /* 1.9.1: меню разделов прилипает вровень с рейкой */
.cx--ds .cx-card[id] { scroll-margin-top: calc(var(--cx-h-header) + var(--cx-gap)); }
.cx--ds .cx-layout > .cx-rail { top: calc(var(--cx-h-header) + var(--cx-gap)); height: calc(100vh - var(--cx-h-header) - var(--cx-gap) - var(--cx-space-5) * 2); }
@media (max-width: 900px) { .cx--ds .cx-page { padding: 0 8px 8px; } }
@media (max-width: 600px) { .cx--ds .cx-drawer { inset: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; } } /* 1.8.3: на телефоне окно справа — на весь экран */

/* ---------- Адаптив новых частей ---------- */
@media (max-width: 900px) {
  .cx-now__item { padding: 0 12px; }
  .cx-head__title { font-size: 16px; }
  .cx-voice { min-width: 0; }
  .cx-msg { max-width: 94%; }
}

/* ===================== Corix UI 1.9 — календарь (из Психолога): страница, слои, личные события, выделение, поповер ===================== */
/* страница: колонка обзора 248 (228 до 1180) + карточка сетки; на 900 и уже колонка уходит вниз
   <div class="cx-calpage"><aside class="cx-card cx-calpage__side">… <div class="cx-calpage__foot">…</div></aside><div class="cx-card">…</div></div> */
.cx-calpage { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--cx-gap); align-items: start; }
.cx-calpage__side { display: flex; flex-direction: column; gap: 22px; padding: 16px; position: sticky; top: calc(var(--cx-h-header) + 24px); }
.cx-calpage__foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--cx-line); display: flex; flex-direction: column; gap: 4px; }
/* заголовок карточки и подпись в строку: <div class="cx-card__heading"><h1 class="cx-card__title">…</h1><span class="cx-meta">…</span></div> */
.cx-card__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-left: 4px; min-width: 0; }
/* мини-месяц на всю ширину колонки, без фона и тени; точка «есть события» у дня — <i class="cx-cal__dot"> */
.cx-cal--fluid { width: 100%; padding: 0; background: none; box-shadow: none; }
.cx-cal__dot { position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--cx-text-3); pointer-events: none; }
.cx-cal__day.is-today .cx-cal__dot { display: none; } /* 1.10.4: у сегодня свой маркер — точка «есть события» не ложится на него */
/* событие лежит выше закрытого времени */
.cx-week__event { z-index: 2; }
/* в дне событие до часа — в одну строку: время · имя · подпись */
.cx-week__event--line { flex-direction: row; align-items: center; gap: 10px; }
.cx-week__event--line > * { flex: none; }
.cx-week__event--line > span:last-child { flex: 1; min-width: 0; }
/* метка оплаты в строке времени: <span>10:00–10:50<b class="cx-week__mark">₽</b></span> */
.cx-week__mark { margin-left: 6px; color: var(--cx-success); font-weight: 600; }
.cx-week__mark--muted { color: var(--cx-text-3); }
/* личное событие цветом своего календаря: <button class="cx-week__event cx-week__event--tag cx-week__event--c3"> — полоска и лёгкая заливка;
   --free — событие «свободно» (не занимает время), --half — событие поверх сессии, правая половина */
.cx-week__event--tag { z-index: 1; border: 0; font: inherit; text-align: left; background: color-mix(in srgb, var(--_s) 12%, var(--cx-surface)); }
.cx-week__event--tag b { display: flex; align-items: center; gap: 4px; }
.cx-week__event--tag .cx-icon { width: 13px; height: 13px; }
.cx-week__event--half { left: auto; width: 45%; z-index: 3; }
.cx-week__event--free { background: var(--cx-surface); box-shadow: inset 0 0 0 1px var(--cx-line); }
.cx-week__event--c1, .cx-month__item--c1 { --_s: var(--cx-tag-1); } .cx-week__event--c2, .cx-month__item--c2 { --_s: var(--cx-tag-2); }
.cx-week__event--c3, .cx-month__item--c3 { --_s: var(--cx-tag-3); } .cx-week__event--c4, .cx-month__item--c4 { --_s: var(--cx-tag-4); }
.cx-week__event--c5, .cx-month__item--c5 { --_s: var(--cx-tag-5); } .cx-week__event--c6, .cx-month__item--c6 { --_s: var(--cx-tag-6); }
.cx-week__event--c7, .cx-month__item--c7 { --_s: var(--cx-tag-7); } .cx-week__event--c8, .cx-month__item--c8 { --_s: var(--cx-tag-8); }
/* события на весь день под датой в шапке дня; --bare — полоской над сеткой (на телефоне шапки нет)
   <span class="cx-week__allday"><button class="cx-tag cx-tag--3">Отпуск</button></span> */
.cx-week__allday { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; min-width: 0; }
.cx-week__allday--bare { margin: 0 0 8px; }
.cx-week__allday .cx-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; border: 0; cursor: pointer; justify-content: flex-start; }
/* выбор цвета календаря: <div class="cx-legend cx-swatches" role="radiogroup"><button role="radio" aria-checked="true"><i class="cx-legend__dot--3"></i>Мята</button>…</div>;
   выбор значка: <div class="cx-swatch-icons"><button class="cx-ibtn" role="radio" aria-checked="true">…</button>…</div> */
.cx-swatches { gap: 6px; align-items: center; }
.cx-swatches button { display: inline-flex; align-items: center; gap: 6px; height: var(--cx-h-sm); padding: 0 10px; border: 0; border-radius: var(--cx-r-tag); background: var(--cx-surface-soft); color: var(--cx-text); font: inherit; cursor: pointer; }
.cx-swatches button i { margin-right: 0; }
.cx-swatches button[aria-checked="true"], .cx-swatch-icons .cx-ibtn[aria-checked="true"] { box-shadow: 0 0 0 2px var(--cx-accent-deep); }
.cx-swatch-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* строка слоя календаря (галочка, имя, меню «…» проявляется при наведении): <div class="cx-layer">… <button class="cx-ibtn">…</button></div> */
.cx-layer { display: flex; align-items: center; gap: var(--cx-space-2); min-width: 0; }
.cx-layer .cx-ibtn { opacity: .55; }
.cx-layer:hover .cx-ibtn, .cx-layer .cx-ibtn:focus-visible { opacity: 1; }
/* рамка выделения времени мышью внутри колонки: <div class="cx-week__slot cx-week__select" aria-expanded="true" style="--start;--len">10:15–11:30</div> */
.cx-week__select { pointer-events: none; display: flex; align-items: flex-start; justify-content: center; user-select: none; }
/* поповер на клетке сетки: <div class="cx-pop__panel cx-popover cx-week__pop cx-week__pop--left" style="--start: 13.5">; --right у правых дней, --day в дне; .is-up — вверх от клетки */
.cx-week__pop { top: calc((var(--start) - var(--from)) * var(--hour)); }
.cx-week__pop--left { left: calc(100% + 6px); right: auto; }
.cx-week__pop--right { right: calc(100% + 6px); left: auto; }
.cx-week__pop--day { left: 16px; right: auto; }
.cx-week__pop.is-up { transform: translateY(calc(-100% + var(--hour))); }
/* легенда календаря: цвета сессий и штриховка «закрыто» */
.cx-legend__dot--planned { --_c: var(--cx-session-planned); } .cx-legend__dot--request { --_c: var(--cx-session-request); } .cx-legend__dot--unpaid { --_c: var(--cx-session-unpaid); }
.cx-legend i.cx-legend__dot--closed { background: repeating-linear-gradient(135deg, var(--cx-surface-soft) 0 3px, var(--cx-border) 3px 4px); box-shadow: inset 0 0 0 1px var(--cx-line); }
@media (max-width: 1180px) { .cx-calpage { grid-template-columns: 228px minmax(0, 1fr); } }
@media (max-width: 900px) { .cx-calpage { grid-template-columns: minmax(0, 1fr); } .cx-calpage__side { position: static; order: 2; } }
@media (max-width: 767px) { .cx-week__pop--left, .cx-week__pop--right, .cx-week__pop--day { left: 8px; right: 8px; width: auto; } }

/* ===== 1.10 — видеоаналитика (Око): рамки детекции, зоны на кадре, плитка камеры и сетка камер, пустая сцена ===== */

/* рамки детекции поверх кадра: svg.cx-detect[viewBox="0 0 100 100"][preserveAspectRatio="none"] > rect (x/y/width/height в % кадра; .is-alarm — тревога, .is-held — объект на миг пропал) */
.cx-detect, .cx-detect-tags { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.cx-detect rect { fill: none; stroke: var(--cx-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cx-detect rect.is-alarm { stroke: var(--cx-critical); stroke-width: 3; }
.cx-detect rect.is-held { stroke-dasharray: 4 3; }
/* подписи рамок: div.cx-detect-tags > span.cx-detect-tag (left/top в %, у правого края кадра — right); стоит над рамкой, .cx-detect-tag--in — внутри, под верхом рамки */
.cx-detect-tag { position: absolute; max-width: 60%; overflow: hidden; transform: translateY(-100%); padding: 1px 6px; border-radius: var(--cx-r-xs); background: var(--cx-accent); color: var(--cx-on-accent); font-size: 11px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.cx-detect-tag--in { transform: none; }
.cx-detect-tag.is-alarm { background: var(--cx-critical); color: var(--cx-text-inverse); }

/* зоны на кадре: svg.cx-zones[viewBox="0 0 100 100"][preserveAspectRatio="none"] > polygon.cx-zone--shelf|checkout|exit|blind (.is-alarm — в зоне тревога); черновик — g.cx-zone--* > polyline (пунктир) + circle/ellipse (точки); .is-drawing — слой ловит клики */
.cx-zones { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.cx-zones.is-drawing { z-index: 3; pointer-events: auto; cursor: crosshair; }
.cx-zones polygon, .cx-zones polyline { fill: currentColor; fill-opacity: .14; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cx-zones polyline { fill: none; stroke-dasharray: 6 4; }
.cx-zones circle, .cx-zones ellipse { fill: currentColor; }
.cx-zone--shelf { color: var(--cx-info); }
.cx-zone--checkout { color: var(--cx-success); }
.cx-zone--exit { color: var(--cx-warn); }
.cx-zone--blind { color: var(--cx-text-3); }
.cx-zones .is-alarm { color: var(--cx-critical); fill-opacity: .24; }
/* точка цвета зоны для списков и легенд: i.cx-zone-dot.cx-zone--* */
.cx-zone-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: var(--cx-r-xs); background: currentColor; }

/* сетка камер: .cx-cams > button.cx-tile.cx-tile--cam (--ar — пропорции потока) > img + .cx-detect + .cx-detect-tags + .cx-tile__top (чипы) + .cx-tile__wait + .cx-tile__name + .cx-tile__badge; .cx-tile--alarm — тревога, .cx-tile--dim — нет связи */
.cx-cams { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--cx-w-lg), 1fr)); gap: var(--cx-space-3); }
.cx-cams--dense { grid-template-columns: repeat(auto-fill, minmax(var(--cx-w-md), 1fr)); gap: var(--cx-space-2); }
.cx-tile--cam { width: 100%; aspect-ratio: var(--ar, 16 / 9); padding: 0; border: 0; background: var(--cx-surface-call); font: inherit; text-align: left; cursor: pointer; }
.cx-tile--cam > img { object-fit: contain; }
.cx-tile--cam::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; transition: box-shadow var(--cx-dur-hover) var(--cx-ease); }
.cx-tile--cam:hover::before { box-shadow: inset 0 0 0 2px var(--cx-on-call); }
.cx-tile--cam:focus-visible { outline: none; }
.cx-tile--cam:focus-visible::before { box-shadow: var(--cx-focus); }
.cx-tile--cam .cx-tile__name { z-index: 2; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-tile--cam .cx-tile__name > span { overflow: hidden; text-overflow: ellipsis; }
.cx-tile--cam .cx-tile__badge { z-index: 2; }
.cx-tile--cam.cx-tile--dim::after { z-index: 1; }
.cx-tile__top { position: absolute; top: 10px; left: 10px; right: 46px; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--cx-space-1); pointer-events: none; }
.cx-tile__wait { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: var(--cx-space-2); color: var(--cx-on-call); font-size: 12.5px; }
.cx-tile--alarm::before { box-shadow: inset 0 0 0 3px var(--cx-critical); animation: cx-pulse 1.6s var(--cx-ease) infinite; }
.cx-tile--alarm:hover::before { box-shadow: inset 0 0 0 3px var(--cx-critical); }

/* пустая сцена: .cx-stage__empty > svg (иконка) + b (что делать) + span (подсказка); подходит и для .cx-tile */
.cx-stage__empty { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--cx-space-2); padding: var(--cx-space-6); color: var(--cx-on-call); font-size: 12.5px; line-height: 1.5; text-align: center; }
.cx-stage__empty svg { width: 28px; height: 28px; margin-bottom: var(--cx-space-1); }
.cx-stage__empty b { color: var(--cx-text-inverse); font-size: 15px; font-weight: 600; }
.cx-stage__empty span { max-width: 360px; }
@media (max-width: 520px) { .cx-cams, .cx-cams--dense { grid-template-columns: minmax(0, 1fr); } .cx-stage__empty { padding: var(--cx-space-4); } .cx-stage__empty svg { display: none; } }

/* ===================== 1.11 — Персонал (найм): доработки и новые компоненты по канвасу «Персонал · рабочее место найма» ===================== */

/* --- меню разделов: метка новых «+3» и подпись внутри пункта ---
   .cx-side__item > svg + .cx-side__body (> .cx-side__label + .cx-side__sub) + .cx-side__new + .cx-side__n */
.cx-side__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-side__sub { font-size: 11.5px; font-weight: 400; line-height: 1.4; color: var(--cx-text-meta); white-space: normal; }
.cx-side__item:has(.cx-side__body) { height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; line-height: 1.3; }
.cx-side__new { display: inline-flex; align-items: center; height: 18px; margin-left: auto; padding: 0 6px; border-radius: var(--cx-r-pill); background: var(--cx-accent); color: var(--cx-on-accent); font: 700 11.5px/1 var(--cx-font-ui); font-variant-numeric: tabular-nums; flex: none; }
.cx-side__new + .cx-side__n { margin-left: 8px; }
@media (max-width: 1180px) { .cx-layout > .cx-side :is(.cx-side__new, .cx-side__sub) { display: none; } }

/* --- строка критерия оценки с весом, шкалой и обоснованием ---
   .cx-crit.cx-crit--full > .cx-crit__label (текст + .cx-crit__w «вес 30%») + .cx-score + .cx-crit__why (текст + .cx-quote/.cx-cite); не обсуждали — .is-none */
.cx-crit__w { display: block; font-size: 11.5px; font-weight: 400; color: var(--cx-text-meta); }
.cx-crit:has(.cx-crit__w) .cx-crit__label { white-space: normal; }
.cx-crit--full { grid-template-columns: minmax(0, 180px) auto minmax(0, 1fr); align-items: start; gap: 16px; padding: 12px 0; border-top: 1px solid var(--cx-line); font-size: 13px; }
.cx-crit--full > .cx-score { padding-top: 2px; }
.cx-crit__why { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 12.5px; line-height: 1.5; }
.cx-crit__why > .cx-quote { padding: 6px 10px; font-size: 12.5px; }
.cx-crit.is-none, .cx-crit.is-none :is(.cx-crit__label, .cx-crit__why, .cx-crit__score) { color: var(--cx-text-meta); }
@media (max-width: 600px) { .cx-crit--full { grid-template-columns: minmax(0, 1fr) auto; } .cx-crit--full > .cx-crit__why { grid-column: 1 / -1; } }

/* --- строка сообщения без лайма: label.cx-chatline.cx-chatline--ink > textarea + button.cx-btn.cx-btn--sm («Отправить» + .cx-chev) --- */
.cx-chatline--ink { height: auto; align-items: flex-end; gap: 8px; padding: 6px; border-radius: var(--cx-r-input); }
.cx-chatline--ink > textarea { flex: 1 1 auto; min-width: 0; min-height: 36px; max-height: 200px; padding: 7px 8px; border: 0; outline: none; resize: none; field-sizing: content; background: none; color: var(--cx-text); font: 400 13px/1.5 var(--cx-font-ui); }
.cx-chatline--ink > textarea::placeholder { color: var(--cx-text-4); }
.cx-chatline--ink > .cx-btn { flex: none; }
.cx-chatline--ink > .cx-btn .cx-chev { color: inherit; }

/* --- меню с группами и местом под галочку: .cx-menu.cx-menu--check > .cx-menu__group + .cx-menu__item(.is-checked) --- */
.cx-menu__group { padding: 10px 12px 4px; font: 700 11px/1.4 var(--cx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-menu__group:first-child { padding-top: 4px; }
.cx-menu--check .cx-menu__item { position: relative; padding-left: 38px; }
.cx-menu--check .cx-menu__item.is-checked::before { content: ""; position: absolute; left: 15px; top: 50%; width: 9px; height: 5px; border-left: 2px solid var(--cx-text); border-bottom: 2px solid var(--cx-text); transform: translateY(-70%) rotate(-45deg); }

/* --- чекбокс с подписью второй строкой: label.cx-check > input + .cx-check__body > span + .cx-check__sub --- */
.cx-check:has(.cx-check__body) { align-items: flex-start; }
.cx-check:has(.cx-check__body) input { margin-top: 1px; }
.cx--ds .cx-check:has(.cx-check__body) input { margin-top: 0; }
.cx-check__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-check__sub { font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--cx-text-2); }

/* --- событие недели по стадии найма, без радуги: .cx-week__event--soft (скрининг) · --ring (техническое) · --ink (финальное); точка состояния — .cx-dot в b --- */
.cx-week__event:is(.cx-week__event--soft, .cx-week__event--ring, .cx-week__event--ink) { padding-left: 8px; }
.cx-week__event:is(.cx-week__event--soft, .cx-week__event--ring, .cx-week__event--ink)::before { display: none; }
.cx-week__event:is(.cx-week__event--soft, .cx-week__event--ring, .cx-week__event--ink) b { display: flex; align-items: center; gap: 6px; }
.cx-week__event--soft { background: var(--cx-surface-soft); box-shadow: none; }
.cx-week__event--ring { background: var(--cx-surface); box-shadow: inset 0 0 0 1.5px var(--cx-text-4); }
.cx-week__event--ink { background: var(--cx-fill-strong); color: var(--cx-on-strong); box-shadow: none; }
.cx-week__event--ink span { color: color-mix(in srgb, var(--cx-on-strong) 72%, transparent); }
.cx-week__event--ink:hover { box-shadow: var(--cx-shadow-menu); }
.cx-week__event.is-past { opacity: .55; }

/* --- плеер с перемоткой и метками: .cx-player > button + .cx-player__skip ×2 + .cx-player__track (.cx-progress + .cx-player__marks > i[style=--at:34%].is-ok|.is-warn) --- */
.cx-player__skip { height: 20px; padding: 0 7px; border: 0; border-radius: var(--cx-r-tag); background: var(--cx-surface); color: var(--cx-text); font: 600 11px/20px var(--cx-font-ui); font-variant-numeric: tabular-nums; cursor: pointer; flex: none; }
.cx-player__skip:focus-visible, .cx-player__marks > :focus-visible { box-shadow: var(--cx-focus); outline: none; }
.cx-player__track { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.cx-player__track > .cx-progress { flex: 1; }
.cx-player__marks { position: absolute; inset: -5px 0; pointer-events: none; }
.cx-player__marks > * { position: absolute; top: 0; bottom: 0; left: var(--at); width: 3px; margin-left: -1.5px; padding: 0; border: 0; border-radius: 2px; background: var(--cx-text-3); pointer-events: auto; cursor: pointer; }
.cx-player__marks > .is-ok { background: var(--cx-success); }
.cx-player__marks > .is-warn { background: var(--cx-warn); }

/* --- пропуск в расшифровке: .cx-transcript__gap («… 7 минут пропущено ·» + button) --- */
.cx-transcript__gap { padding: 6px 10px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--cx-text-meta); }
.cx-transcript__gap > button { padding: 0; border: 0; background: none; color: var(--cx-text-2); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* --- «Сейчас»: тревожная точка и ячейка-ссылка --- */
.cx-now__value > i.is-warn { background: var(--cx-warn); }
a.cx-now__item { margin: -6px 0; padding-top: 6px; padding-bottom: 6px; border-radius: var(--cx-r-md); color: inherit; text-decoration: none; transition: background var(--cx-dur-hover) var(--cx-ease); }
a.cx-now__item:hover { background: var(--cx-surface-inverse-2); }
a.cx-now__item:focus-visible { box-shadow: var(--cx-focus); outline: none; }

/* --- выбор-действие без радио: a|button.cx-choice.cx-choice--act > .cx-choice__icon + .cx-choice__body + .cx-choice__go (шеврон) --- */
.cx-choice--act { align-items: center; width: 100%; border: 0; color: inherit; font: inherit; text-align: left; text-decoration: none; }
.cx-choice--act:focus-visible { box-shadow: var(--cx-focus); outline: none; }
.cx-choice__go { margin-left: auto; flex: none; color: var(--cx-text-meta); }
.cx-choice__go svg, svg.cx-choice__go { width: 16px; height: 16px; }

/* --- таблица-строки с выбором и ячейками в несколько строк: .cx-rows.cx-rows--top > .cx-rows__row > .cx-rows__check (label.cx-check > input) --- */
.cx-rows__check { display: flex; align-items: flex-start; padding-top: 2px; }
.cx-rows__check > .cx-check { gap: 0; }
.cx-rows--top :is(.cx-rows__row, .cx-rows__head) { align-items: start; }

/* --- подвал окна с подписью слева: .cx-modal__foot > .cx-modal__note + кнопки --- */
.cx-modal__note { flex: 1 1 auto; min-width: 0; margin-right: auto; align-self: center; font-size: 12.5px; line-height: 1.5; color: var(--cx-text-meta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-sheet .cx-modal__note { margin: 0; text-align: center; }

/* --- итоговая строка таблицы: .cx-rows__row.cx-rows__row--total --- */
.cx-rows__row--total, .cx-rows__row--total:hover { background: var(--cx-surface-soft); border-radius: var(--cx-r-md); border-top-color: transparent; }
.cx-rows__row--total > :first-child { font-weight: 700; }

/* --- воронка со сравнением: .cx-funnel.cx-funnel--cmp > .cx-funnel__head + .cx-funnel__step(.is-warn)
       > .cx-funnel__label (текст + .cx-funnel__sub — папка hh) + .cx-funnel__n + .cx-funnel__bar (i[style=--v] + .cx-funnel__prev[style=--at]) + .cx-funnel__num ×2 (b + .cx-change) + .cx-funnel__n --- */
.cx-funnel__bar { position: relative; }
.cx-funnel__prev { position: absolute; top: 3px; bottom: 3px; left: var(--at); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--cx-text-3); }
.cx-funnel--cmp { gap: 0; }
.cx-funnel--cmp :is(.cx-funnel__head, .cx-funnel__step) { grid-template-columns: minmax(0, 180px) 56px minmax(0, 1fr) 110px 110px 64px; gap: 14px; padding: 10px 0; }
.cx-funnel--cmp .cx-funnel__step { border-top: 1px solid var(--cx-line); }
.cx-funnel__head { display: grid; align-items: center; font: 600 11px/1.5 var(--cx-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-funnel__head > :nth-child(n+4), .cx-funnel__num, .cx-funnel__n { text-align: right; }
.cx-funnel__label:has(.cx-funnel__sub) { white-space: normal; }
.cx-funnel__sub { display: block; font-size: 11.5px; font-weight: 400; color: var(--cx-text-meta); }
.cx-funnel__n { font-variant-numeric: tabular-nums; font-size: 13px; }
.cx-funnel__num { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; font-size: 13px; }
.cx-funnel__num > .cx-change { justify-self: auto; }
.cx-funnel--cmp .cx-funnel__bar { height: 22px; border-radius: var(--cx-r-pill); }
.cx-funnel--cmp .cx-funnel__bar i { border-radius: var(--cx-r-pill); min-width: 8px; padding: 0; font-size: 0; }
.cx-funnel__step.is-warn { margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-top-color: transparent; border-radius: var(--cx-r-md); background: var(--cx-warn-bg); }
.cx-funnel__step.is-warn .cx-change { color: var(--cx-warn-text); }
@media (max-width: 760px) {
  .cx-funnel--cmp :is(.cx-funnel__head, .cx-funnel__step) { grid-template-columns: minmax(0, 1fr) 48px 72px; row-gap: 6px; }
  .cx-funnel--cmp .cx-funnel__bar { grid-column: 1 / -1; grid-row: 2; }
  .cx-funnel--cmp :is(.cx-funnel__step, .cx-funnel__head) > :nth-child(5), .cx-funnel--cmp :is(.cx-funnel__step, .cx-funnel__head) > :nth-child(6), .cx-funnel--cmp .cx-funnel__head > :nth-child(3) { display: none; }
}

/* --- перетаскивание строк списка: строка в руке .is-lifted, место под неё .cx-rows__slot[style=--h] --- */
:is(.cx-rows__row, .cx-list > *).is-lifted { position: relative; z-index: 2; border-top-color: transparent; border-radius: var(--cx-r-md); background: var(--cx-surface); box-shadow: var(--cx-ring), var(--cx-shadow-drop); transform: translateY(-6px); cursor: grabbing; }
.cx-rows__slot { height: var(--h, 48px); margin: 0 -12px; border-radius: var(--cx-r-md); background: var(--cx-surface-accent); }
.cx-grip { display: inline-grid; place-items: center; flex: none; color: var(--cx-text-4); cursor: grab; }
.cx-grip svg { width: 16px; height: 16px; }

/* --- переключатель «всегда включено»: label.cx-switch.is-locked > input[checked][disabled] + текст + .cx-switch__note --- */
.cx-switch.is-locked, .cx-switch.is-locked:has(input:disabled) { color: inherit; cursor: default; }
.cx-switch.is-locked input, .cx-switch.is-locked input:disabled { opacity: 1; cursor: default; pointer-events: none; }
.cx-switch__note { font-size: 11.5px; font-weight: 400; color: var(--cx-text-meta); }

/* --- выбранная плитка показателя (открыт этот отчёт): .cx-kpis__item[aria-current] --- */
.cx-kpis__item[aria-current="true"], .cx-kpis__item[aria-current="page"] { position: relative; z-index: 1; background: var(--cx-surface); box-shadow: var(--cx-ring); border-radius: var(--cx-r-card); }
.cx-kpis--bare .cx-kpis__item[aria-current] { box-shadow: var(--cx-ring); }

/* --- подвал отчёта: .cx-report__foot > button.cx-btn (Скачать Excel) + .cx-report__mail (текст + label.cx-switch) --- */
.cx-report__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 14px 20px; border-top: 1px solid var(--cx-line); }
.cx-report__mail { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; font-size: 12.5px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }

/* --- неразрывные суммы: «12 000 ₽» не рвётся --- */
.cx-meters b, .cx-figures b, .cx-funnel__num > b, .cx-score > b, .cx-counts__step > b { white-space: nowrap; }

/* --- 3.1 шкала оценки ИИ: span.cx-score[style=--v:8] > .cx-score__bar + b (8,4) + span (подходит); --sm в строках; .is-busy · .is-error · .is-empty --- */
.cx-score { --_cell: 8px; --_h: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.4; color: var(--cx-text-meta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-score__bar { flex: none; width: calc(var(--_cell) * 10 - 2px); height: var(--_h); background: linear-gradient(90deg, var(--cx-fill-strong) 0 calc(var(--v, 0) * var(--_cell)), var(--cx-track) 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14'%3E%3Crect width='6' height='14' rx='1.5'/%3E%3C/svg%3E") 0 0 / var(--_cell) var(--_h) repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14'%3E%3Crect width='6' height='14' rx='1.5'/%3E%3C/svg%3E") 0 0 / var(--_cell) var(--_h) repeat-x; }
.cx-score > b { font-size: 13px; font-weight: 700; color: var(--cx-text); }
.cx-score--sm { --_cell: 6px; --_h: 10px; gap: 6px; font-size: 11.5px; }
.cx-score--sm > b { font-size: 12.5px; }
.cx-score:is(.is-busy, .is-error, .is-empty) .cx-score__bar { display: none; }
.cx-score.is-error { color: var(--cx-critical-text); }
.cx-score .cx-ai-dots { --_c: var(--cx-text-3); gap: 3px; }
.cx-score .cx-ai-dots > i { width: 5px; height: 5px; }

/* --- 3.2 счётчики этапов вакансии: .cx-counts[style=--n:5] > .cx-counts__step(.is-zero) > b + span (+ .cx-chip.cx-chip--tint.cx-chip--sm «+4 за ночь»); --sm в строке --- */
.cx-counts { --n: 5; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); min-width: 0; }
.cx-counts__step { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 0 12px; box-shadow: inset 1px 0 0 var(--cx-line); }
.cx-counts__step:first-child { padding-left: 0; box-shadow: none; }
.cx-counts__step > b { font-size: 18px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cx-counts__step > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); }
.cx-counts__step > .cx-chip { margin-top: 2px; }
.cx-counts__step.is-zero > b { color: var(--cx-text-4); }
.cx-counts--sm .cx-counts__step { padding: 0 6px; }
.cx-counts--sm .cx-counts__step > span { font-size: 11px; }
.cx-counts--sm .cx-counts__step > b { font-size: 13px; line-height: 18px; }
@media (max-width: 600px) { .cx-counts:not(.cx-counts--sm) { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; } .cx-counts:not(.cx-counts--sm) .cx-counts__step:nth-child(3n+1) { padding-left: 0; box-shadow: none; } }

/* --- 3.3 дорожки говорящих: .cx-speakers > .cx-speakers__row(.is-main) > .cx-person + .cx-speakers__track (i[style=--at;--len] + .cx-speakers__now[style=--at]) + .cx-speakers__share --- */
.cx-speakers { display: flex; flex-direction: column; gap: 10px; }
.cx-speakers__row { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr) 44px; align-items: center; gap: 12px; font-size: 12.5px; }
.cx-speakers__track { position: relative; height: 10px; border-radius: var(--cx-r-pill); background: var(--cx-track); }
.cx-speakers__track > i { position: absolute; top: 0; bottom: 0; left: var(--at); width: var(--len); border-radius: 3px; background: var(--cx-text-4); cursor: pointer; }
.cx-speakers__row.is-main .cx-speakers__track > i { background: var(--cx-fill-strong); }
.cx-speakers__now { position: absolute; top: -4px; bottom: -4px; left: var(--at); width: 2px; margin-left: -1px; background: var(--cx-critical); pointer-events: none; }
.cx-speakers__share { text-align: right; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .cx-speakers__row { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 6px; } .cx-speakers__track { grid-column: 1 / -1; grid-row: 2; } }

/* --- 3.4 решение менеджера: .cx-decision > .cx-decision__from (small + текст) + textarea.cx-textarea + .cx-decision__acts (lime «Да» + 2 secondary);
       после решения — .cx-decision__done (.cx-dot + текст + button.cx-link--sm «Изменить») --- */
.cx-decision { display: flex; flex-direction: column; gap: 12px; }
.cx-decision__from { padding: 12px 14px; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); font-size: 13px; line-height: 1.5; }
.cx-decision__from > small { display: block; margin-bottom: 2px; font-size: 11.5px; color: var(--cx-text-meta); }
.cx-decision__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-decision__done { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--cx-r-md); background: var(--cx-surface-accent); font-size: 13px; }
.cx-decision__done > :last-child { margin-left: auto; }
@media (max-width: 600px) { .cx-decision__acts > .cx-btn { flex: 1 1 auto; } }

/* --- 3.5 лист документа: .cx-paper > .cx-paper__head (.cx-paper__logo + реквизиты) + h1 + p/table + .cx-paper__signs > div (должность, i — линия, ФИО) --- */
.cx-paper { max-width: 760px; margin: 0 auto; padding: 48px 56px; border-radius: var(--cx-r-xs); background: var(--cx-surface); box-shadow: var(--cx-shadow-drop); color: var(--cx-text); font-size: 13px; line-height: 1.6; }
.cx-paper__head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--cx-line); font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); }
.cx-paper__head b { display: block; font-size: 13px; color: var(--cx-text); }
.cx-paper__logo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; overflow: hidden; border-radius: var(--cx-r-xs); background: var(--cx-surface-soft); color: var(--cx-text); font: 700 11px/1 var(--cx-font-ui); }
.cx-paper__logo img { width: 100%; height: 100%; object-fit: contain; }
.cx-paper h1 { margin: 0 0 20px; font-size: 18px; font-weight: 700; line-height: 1.35; text-align: center; }
.cx-paper h2 { margin: 18px 0 8px; font-size: 13.5px; font-weight: 700; }
.cx-paper p { margin: 0 0 10px; }
.cx-paper table { width: 100%; margin: 12px 0; border-collapse: collapse; font-size: 12.5px; }
.cx-paper :is(th, td) { padding: 6px 8px; border: 1px solid var(--cx-line); text-align: left; vertical-align: top; }
.cx-paper th { font-weight: 600; background: var(--cx-surface-soft); }
.cx-paper__signs { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; font-size: 12px; color: var(--cx-text-meta); }
.cx-paper__signs > div { display: flex; flex-direction: column; gap: 4px; }
.cx-paper__signs i { display: block; height: 28px; border-bottom: 1px solid var(--cx-border); }
@media (max-width: 600px) { .cx-paper { padding: 24px 20px; } .cx-paper__signs { grid-template-columns: 1fr; gap: 20px; } }

/* --- 3.6 переменная в тексте: span|button.cx-var (обычная) · .cx-var--ai (заполнил ИИ, title — откуда) · .cx-var--todo (допишите) --- */
.cx-var { display: inline; padding: 1px 4px; border: 0; border-radius: var(--cx-r-xs); background: var(--cx-surface-soft); color: inherit; font: inherit; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
button.cx-var { cursor: pointer; }
button.cx-var:focus-visible { box-shadow: var(--cx-focus); outline: none; }
.cx-var--ai { background: var(--cx-surface-accent); }
.cx-var--todo { background: var(--cx-warn-bg); color: var(--cx-warn-text); }

/* --- 3.7 публичная страница кандидата (без шапки продукта): body.cx.cx-public > .cx-public__brand (.cx-public__logo + b/small) + .cx-public__card + .cx-public__foot (текст + .cx-public__by «работает на» + .cx-brand) --- */
.cx-public { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 48px 16px 32px; background: var(--cx-bg); }
.cx-public__brand, .cx-public__card { width: 100%; max-width: 640px; }
.cx-public__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.cx-public__brand b { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; }
.cx-public__brand small { display: block; font-size: 12px; color: var(--cx-text-meta); }
.cx-public__logo { display: grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: var(--cx-r-md); background: var(--cx-fill-strong); color: var(--cx-on-strong); font: 700 11.5px/1 var(--cx-font-ui); }
.cx-public__logo img { width: 100%; height: 100%; object-fit: contain; background: var(--cx-surface); }
.cx-public__card { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: var(--cx-r-card); background: var(--cx-surface); }
.cx-public__card > .cx-btn { width: 100%; }
.cx-public__foot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 24px; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); text-align: center; }
.cx-public__by { display: inline-flex; align-items: center; gap: 10px; }
.cx-public__by .cx-brand { --_s: 11px; --_slot: 0; }
@media (max-width: 600px) { .cx-public { padding: 20px 12px 24px; } .cx-public__card { padding: 20px 18px; } }

/* --- 3.8 строка согласования: .cx-approval > .cx-avatar + .cx-approval__body (.cx-approval__who: имя + .cx-chip; .cx-approval__meta; .cx-approval__quote; .cx-approval__att > .cx-att--soft) + button.cx-btn --- */
.cx-approval { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--cx-line); }
.cx-approval > .cx-avatar { --_s: 36px; }
.cx-approval__body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.cx-approval__who { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.cx-approval__meta { font-size: 12px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-approval__quote { font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-approval__att { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cx-approval > .cx-btn { flex: none; }
@media (max-width: 600px) { .cx-approval { flex-wrap: wrap; } .cx-approval > .cx-btn { margin-left: 48px; } }

/* --- 3.10 правило «если … → …»: .cx-rule(.is-off) > .cx-rule__body (.cx-rule__line: .cx-rule__if + условие (+ input.cx-input.cx-input--num) + svg + этап; .cx-rule__sub) + label.cx-switch --- */
.cx-rule { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--cx-line); }
.cx-rule__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cx-rule__line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.cx-rule__if { font-weight: 400; color: var(--cx-text-meta); }
.cx-rule__line > svg { width: 14px; height: 14px; color: var(--cx-text-meta); flex: none; }
.cx-rule__line > .cx-input { width: 64px; height: var(--cx-h-sm); }
.cx-rule__sub { font-size: 12.5px; line-height: 1.5; color: var(--cx-text-meta); }
.cx-rule.is-off .cx-rule__line { color: var(--cx-text-meta); }

/* --- 3.11 редактор весов: .cx-weights > .cx-weights__row(.is-ai) (.cx-grip, input.cx-input, .cx-weights__w > input.cx-input.cx-input--num, .cx-weights__bar[style=--v:30] > i, button.cx-ibtn) + .cx-weights__sum(.is-warn) > b + текст --- */
.cx-weights { display: flex; flex-direction: column; gap: 8px; }
.cx-weights__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 72px minmax(48px, 140px) 28px; align-items: center; gap: 10px; }
.cx-weights__row.is-ai { margin: 0 -8px; padding: 6px 8px; border-radius: var(--cx-r-md); background: var(--cx-surface-accent); }
.cx-weights__w { position: relative; }
.cx-weights__w > input { width: 100%; padding-right: 26px; }
.cx-weights__w::after { content: "%"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--cx-text-meta); pointer-events: none; }
.cx-weights__bar { height: 6px; overflow: hidden; border-radius: var(--cx-r-pill); background: var(--cx-track); }
.cx-weights__bar > i { display: block; width: calc(var(--v, 0) * 1%); height: 100%; border-radius: var(--cx-r-pill); background: var(--cx-fill-strong); }
.cx-weights__sum { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; padding: 10px 14px; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); font-size: 12.5px; color: var(--cx-text-meta); }
.cx-weights__sum > b { font-size: 13.5px; font-weight: 600; color: var(--cx-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-weights__sum.is-warn, .cx-weights__sum.is-warn > b { background: var(--cx-warn-bg); color: var(--cx-warn-text); }
@media (max-width: 600px) { .cx-weights__row { grid-template-columns: 20px minmax(0, 1fr) 72px 28px; } .cx-weights__bar { display: none; } }

/* --- 3.12 папки hh и наши этапы: .cx-mapping > .cx-mapping__row(.is-warn) > .cx-mapping__name + .cx-mapping__n + .cx-mapping__ours (.cx-chip…) + .cx-mapping__note --- */
.cx-mapping { display: flex; flex-direction: column; }
.cx-mapping__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--cx-line); }
.cx-mapping__name { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.cx-mapping__n { font-size: 12px; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-mapping__ours { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.cx-mapping__note { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-meta); }
.cx-mapping__row.is-warn { margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-top-color: transparent; border-radius: var(--cx-r-md); background: var(--cx-warn-bg); }
.cx-crit--full:first-child, .cx-rule:first-child, .cx-approval:first-child, .cx-mapping__row:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 600px) {
  .cx-player:has(.cx-player__track) { flex-wrap: wrap; row-gap: 6px; border-radius: var(--cx-r-lg); }
  .cx-player__track { order: 9; flex: 1 1 100%; margin: 2px 6px 6px; }
  .cx-approval__body { flex-basis: calc(100% - 48px); }
  .cx-funnel--cmp :is(.cx-funnel__head, .cx-funnel__step) { grid-template-columns: minmax(0, 1fr) 40px auto; }
}

/* ===================== 1.11.1 — Персонал: каркас (артборды Header, HeaderLead, Sidebar, SidebarLead, SidebarManager) ===================== */
.cx-rail__sep { flex: none; width: 28px; height: 1px; margin: 4px 0; background: var(--cx-line); } /* черта перед разделами администрирования */
.cx-shell__stat b.is-warn { color: var(--cx-warn-text); } /* «4 ждут ответа дольше суток» — тревога, не авария */
.cx--ds .cx-shell__search svg { color: var(--cx-text); } /* поиск в шапке канваса: иконка и «Поиск» тёмные, ⌘K без плашки */
.cx--ds .cx-shell__search input::placeholder { color: var(--cx-text); }
.cx--ds .cx-shell__search .cx-kbd { height: auto; padding: 0; background: none; box-shadow: none; color: var(--cx-text-3); }
.cx--ds .cx-shell__icon { color: var(--cx-text-2); }
.cx--ds .cx-pop > summary.cx-shell__icon { color: var(--cx-text); } /* 1.11.5: переключатель продуктов в канвасе тёмный, серый только колокольчик */
@media (max-width: 1180px) { .cx--ds .cx-shell__search--wide { width: var(--cx-w-lg); } } /* на артбордах 1100 широкий поиск остаётся 240 */

/* ===================== 1.11.2 — Персонал: «Сегодня» (артборды Today, TodayLead, TodayManager, TodayEmpty, TodayNoHh, TodayFirstDay, Today1100, Today390) ===================== */
/* приветствие: .cx-head.cx-head--hello > h1.cx-head__title + span.cx-meta (дата) + чип + .cx-grow + кнопка */
.cx-head--hello { gap: 12px; min-height: 0; padding: 4px 4px 0; }
.cx-head.cx-head--hello .cx-head__title { margin: 0; font-size: 21px; line-height: 1.3; }
.cx-head--hello .cx-meta { line-height: 1.6; font-variant-numeric: tabular-nums; }

/* «Сейчас» на всю ширину: .cx-now.cx-now--fill > span.cx-now__cap (текст + span «обновлено») + a/div.cx-now__item (__value, __label, __sub) — ячейки делят ширину, подписи переносятся */
.cx-now.cx-now--fill { align-items: stretch; row-gap: 12px; padding: 16px 22px; border-radius: var(--cx-r-card); }
.cx-now--fill .cx-now__cap { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; margin-right: 0; padding-right: 22px; }
.cx-now--fill .cx-now__cap > span { font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.cx-now.cx-now--fill .cx-now__item { flex: 1 1 150px; min-width: 0; gap: 3px; padding-left: 18px; padding-right: 18px; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--cx-text-inverse) 14%, transparent); }
.cx-now.cx-now--fill .cx-now__item { margin: 0; padding-top: 2px; padding-bottom: 2px; border-radius: 0; } /* разделитель прямой, по высоте ячейки */
.cx-now--fill a.cx-now__item:hover { background: none; } /* ссылка подсвечивает подпись, а не ячейку */
.cx-now--fill .cx-now__value { gap: 8px; font-size: 24px; line-height: 28px; letter-spacing: 0; color: var(--cx-text-inverse); }
.cx-now--fill .cx-now__value > i { width: 8px; height: 8px; }
.cx-now--fill .cx-now__label { font-size: 12.5px; line-height: 1.35; white-space: normal; }
.cx-now__sub { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-inverse-2); font-variant-numeric: tabular-nums; }
a.cx-now__item:hover .cx-now__label { color: var(--cx-text-inverse); }
@media (max-width: 600px) { /* телефон: подпись строкой сверху, ячейки по две */
  .cx-now.cx-now--fill { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; padding: 14px 16px; }
  .cx-now--fill .cx-now__cap { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: center; gap: 8px; padding: 0; }
  .cx-now.cx-now--fill .cx-now__item { padding-left: 12px; padding-right: 12px; }
  .cx-now.cx-now--fill .cx-now__item:nth-of-type(odd) { padding-left: 0; box-shadow: none; }
  .cx-now--fill .cx-now__value { font-size: 20px; line-height: 24px; }
  .cx-head.cx-head--hello { gap: 6px 10px; }
  .cx-head.cx-head--hello .cx-head__title { font-size: 19px; }
  .cx-head--hello > .cx-btn { width: 100%; }
}

/* колонка дня: .cx-card.cx-lane > .cx-lane__head (b + span счётчик + .cx-grow + .cx-tab--sm / .cx-segmented) + .cx-lane__item… + .cx-lane__empty + .cx-lane__foot (текст + .cx-grow + ссылка). Колонки — .cx-cols.cx-cols--top[style=--cols:3] */
.cx-lane { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.cx-lane__head { display: flex; align-items: center; gap: 8px; padding: 16px 18px 10px; }
.cx-lane__head > b { font-size: 15.5px; line-height: 1.4; font-weight: 600; }
.cx-lane__head > b + span { font-size: 12.5px; line-height: 1.6; color: var(--cx-text-3); font-variant-numeric: tabular-nums; }
/* блок колонки: собеседование, вакансия; линия сверху; .is-past — прошло, .is-soon — ближайшее; a.cx-lane__item — строка-ссылка с подсветкой */
.cx-lane__item { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 14px; box-shadow: inset 0 1px 0 var(--cx-line); color: inherit; text-decoration: none; }
.cx-lane__item.is-past { opacity: .72; }
.cx-lane__item.is-soon { background: var(--cx-surface-accent); }
a.cx-lane__item { gap: 6px; padding-bottom: 12px; transition: background var(--cx-dur-hover) var(--cx-ease); }
a.cx-lane__item:hover { background: var(--cx-surface-hover); }
.cx-lane__top { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; line-height: 1.6; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-lane__top > b { font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--cx-text); }
.cx-lane__top > strong { margin-left: auto; font-size: 11.5px; line-height: 1.5; font-weight: 600; color: var(--cx-text); } /* «через 25 мин» */
.cx-lane__name { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; font-weight: 600; }
.cx-lane__name > span:first-child { flex: 1 1 auto; min-width: 0; }
.cx-lane__name > .cx-avatar { flex: none; margin-bottom: 2px; } /* как в канвасе: аватар стоит на базовой линии, строка 24 */
.cx-lane__meta { font-size: 12.5px; line-height: 1.45; color: var(--cx-text-2); }
.cx-lane__nums { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); font-variant-numeric: tabular-nums; }
.cx-lane__nums b { font-weight: 600; color: var(--cx-text); }
.cx-lane__plus { padding: 0 6px; border-radius: var(--cx-r-tag); background: var(--cx-accent); color: var(--cx-on-accent); font-size: 11.5px; line-height: 1.5; font-weight: 600; } /* «+5 за ночь» */
.cx-lane__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
/* событие «требует действия»: .cx-lane__item.cx-lane__item--act > .cx-lane__icon(--warn) > svg + .cx-lane__body (b, span, q) + кнопка */
.cx-lane__item--act { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 8px 10px; padding-bottom: 12px; }
.cx-lane__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cx-surface-soft); color: var(--cx-text); }
.cx-lane__icon svg { width: 16px; height: 16px; }
.cx-lane__icon--warn { background: var(--cx-warn-bg); color: var(--cx-warn-text); }
.cx-lane__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--cx-text-2); }
.cx-lane__body > b { font-size: 13px; line-height: 1.35; font-weight: 600; color: var(--cx-text); }
.cx-lane__body > q { color: var(--cx-text); }
.cx-lane__item--act > .cx-btn { grid-column: 2; justify-self: start; }
.cx-lane__empty { padding: 18px 18px 22px; box-shadow: inset 0 1px 0 var(--cx-line); font-size: 12.5px; line-height: 1.5; color: var(--cx-text-2); }
.cx-lane__foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px 14px; box-shadow: inset 0 1px 0 var(--cx-line); font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); font-variant-numeric: tabular-nums; }
.cx-lane .cx-link--sm { font-weight: 600; color: var(--cx-text); text-underline-offset: 2px; } /* «Открыть», «Неделя целиком» — тёмные, как в канвасе */

/* баннер как Banner канваса: .cx-banner.cx-banner--warn.cx-banner--line > svg (18, цветом тона) + span (b + текст) + .cx-banner__end */
.cx-banner.cx-banner--line { align-items: center; gap: 12px; padding: 12px 14px 12px 16px; line-height: 1.5; color: var(--cx-text-2); }
.cx-banner--line > svg { flex: none; width: 18px; height: 18px; color: var(--_c, var(--cx-info)); }
.cx-banner--warn.cx-banner--line > svg { color: var(--cx-warn-text); }
.cx-banner--line > span:not(.cx-banner__end) { flex: 1 1 auto; min-width: 0; }
.cx-banner--line b { margin-right: 6px; font-weight: 600; color: var(--cx-text); }

/* инициалы как Avatar канваса: до 30 — 9.5, до 38 — 11, вес 600 */
.cx--ds .cx-avatar--xs { font-size: 9.5px; font-weight: 600; letter-spacing: 0; }
.cx--ds .cx-avatar--sm { font-size: 11px; font-weight: 600; letter-spacing: 0; }

/* точка чипа другим цветом: прошло — --dot-muted, готово — --dot-ok, впереди — --dot-ink */
.cx-chip--dot-muted { --_dot: var(--cx-text-3); }
.cx-chip--dot-ok { --_dot: var(--cx-success); }
.cx-chip--dot-ink { --_dot: var(--cx-text); }

/* первый день: .cx-card.cx-start > заголовок + .cx-cols > .cx-box.cx-box--lg (b, ul, .cx-box__foot) + ol.cx-start__steps > li (span номер + текст) */
.cx-start { display: flex; flex-direction: column; gap: 16px; padding: 22px; }
.cx-start__title { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; }
.cx-box--lg { gap: 10px; padding: 18px; }
.cx-box--lg > b { font-size: 15.5px; line-height: 1.4; font-weight: 600; }
.cx-box--lg > ul { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); }
.cx-box__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.cx-start__steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); }
.cx-start__steps > li { display: flex; align-items: center; gap: 10px; }
.cx-start__steps > li > span { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cx-surface-soft); font-size: 11.5px; font-weight: 600; color: var(--cx-text); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .cx-start .cx-cols { grid-template-columns: minmax(0, 1fr); } }

/* ================= 1.11.3 — Персонал: «Вакансии» и «Вакансия» ================= */

/* заголовок раздела канваса: .cx-head.cx-head--page > h1.cx-head__title (21/1.3) + чип + .cx-grow + кнопки */
.cx-head--page { gap: 10px; min-height: 0; padding: 4px 4px 0; }
.cx-head.cx-head--page .cx-head__title { margin: 0; font-size: 21px; line-height: 1.3; }
@media (max-width: 600px) { .cx-head.cx-head--page .cx-head__title { font-size: 19px; } }

/* карточка-таблица: .cx-card.cx-card--flush > .cx-card__bar (вкладки, переключатель, поиск) + .cx-card__count + .cx-rows--inset | .cx-card__empty */
.cx-card__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 16px 0; }
.cx-card__count { padding: 12px 16px 6px; font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); font-variant-numeric: tabular-nums; }
.cx-card__count b { font-weight: 600; color: var(--cx-text); }
.cx-card__empty { padding: 24px 0 36px; box-shadow: inset 0 1px 0 var(--cx-line); }

/* высокие строки канваса: 76 и больше, поле 12, подпись 12.5 с переносом, чипы через 6; подвал 12.5 */
.cx-rows--lg .cx-rows__row { min-height: 76px; padding-top: 11px; padding-bottom: 12px; }
.cx-rows--lg .cx-cell { --cell-gap: 4px; }
.cx-rows--lg .cx-cell__sub { font-size: 12.5px; line-height: 1.45; color: var(--cx-text-2); }
.cx-rows--lg .cx-cell > .cx-chips { margin-top: 2px; }
.cx--ds .cx-rows--lg .cx-cell > .cx-chips > .cx-chip { height: auto; padding-top: 2px; padding-bottom: 2px; line-height: 1.6; }
.cx-rows--lg > .cx-rows__head { align-items: center; }
.cx-rows--lg .cx-person { gap: 8px; font-size: 12.5px; line-height: 1.6; white-space: nowrap; }
.cx-rows--lg .cx-rows__more { font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); }
.cx-avatar--row { --_s: 24px; }
.cx--ds .cx-avatar--row { font-size: 9.5px; font-weight: 600; letter-spacing: 0; }

/* колонка, которая на ≤1180 уходит в подпись: .cx-rows--fold[style=--cols; --cols-md] > .cx-rows__wide (прячется) и .cx-rows__narrow (появляется) */
.cx-rows__narrow { display: none; }
@media (max-width: 1180px) {
  .cx-rows--fold > :is(.cx-rows__head, .cx-rows__row) { grid-template-columns: var(--cols-md, var(--cols)); }
  .cx-rows--fold .cx-rows__wide { display: none; }
  .cx-rows--fold .cx-rows__narrow { display: inline; }
}
@media (max-width: 600px) {
  .cx-rows--fold > .cx-rows__head { display: none; }
  .cx-rows--fold > .cx-rows__row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
}

/* счётчики этапов плитками (Вакансии канваса): .cx-counts.cx-counts--tiles > .cx-counts__step > b (+ .cx-counts__plus «+5») + span */
.cx-counts--tiles { gap: 4px; }
.cx-counts.cx-counts--tiles .cx-counts__step { gap: 1px; padding: 6px 8px; border-radius: var(--cx-r-input); background: var(--cx-surface-soft); box-shadow: none; }
.cx-counts--tiles .cx-counts__step > b { display: flex; align-items: baseline; gap: 4px; font-size: 13px; line-height: 1.5; font-weight: 600; }
.cx-counts--tiles .cx-counts__step > span { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-3); }
.cx-counts--tiles .cx-counts__step.is-zero > b { color: var(--cx-text-3); }
.cx-counts__plus { padding: 0 5px; border-radius: var(--cx-r-tag); background: var(--cx-accent); color: var(--cx-on-accent); font-size: 11.5px; line-height: 1.5; font-weight: 600; }
@media (max-width: 600px) { .cx-counts.cx-counts--tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.cx-chip--dot-bad { --_dot: var(--cx-critical); }

/* пустое состояние как EmptyState канваса Персонала: кружок 52, значок цвета текста, поля 40 */
.cx-state--md { gap: 8px; padding: 40px 24px; }
.cx-state--md .cx-state__art { width: 52px; height: 52px; border-radius: 50%; color: var(--cx-text); }
.cx-state--md .cx-state__art svg { width: 22px; height: 22px; }

/* --- «Вакансия»: шапка-карточка .cx-card.cx-card--head > nav.cx-crumbs.cx-crumbs--back + .cx-head.cx-head--page.cx-head--in + .cx-dotline --- */
.cx-card.cx-card--head { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 16px; }
.cx-crumbs--back, .cx--ds .cx-crumbs--back { min-height: 26px; gap: 6px; font-size: 12.5px; line-height: 1.5; }
.cx-crumbs--back a, .cx-crumbs--back [aria-current="page"], .cx--ds .cx-crumbs--back :is(a, [aria-current="page"]) { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--cx-text); }
.cx-crumbs--back a svg { width: 14px; height: 14px; }
.cx-crumbs--back > * + *::before, .cx--ds .cx-crumbs--back > * + *::before { content: "/"; display: inline; width: auto; height: auto; margin: 0 6px 0 0; border: 0; transform: none; color: var(--cx-text-ghost); }
.cx-head.cx-head--in { gap: 14px; padding: 0; }
.cx-head__narrow { display: none; }
@media (max-width: 1180px) { .cx-head__narrow { display: inline-flex; } }
/* строка фактов через точку: .cx-dotline > span + i (·) + span…; люди — .cx-dotline__who (аватар + имя) */
.cx-dotline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; line-height: 1.6; color: var(--cx-text-meta); font-variant-numeric: tabular-nums; }
.cx-dotline b { font-weight: 600; color: var(--cx-text); }
.cx-dotline > i { font-style: normal; color: var(--cx-text-ghost); }
.cx-dotline__who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* --- три колонки: .cx-trio > .cx-folders (212) + список + .cx-sidecard (276); .cx-trio--two — без правой; ≤1180 правая уходит в окно --- */
.cx-trio { display: grid; grid-template-columns: 212px minmax(0, 1fr) 276px; gap: 12px; align-items: start; }
.cx-trio--two { grid-template-columns: 212px minmax(0, 1fr); }
@media (max-width: 1180px) { .cx-trio { grid-template-columns: 212px minmax(0, 1fr); } .cx-trio > .cx-sidecard { display: none; } }
@media (max-width: 600px) { .cx-trio, .cx-trio--two { grid-template-columns: minmax(0, 1fr); } }

/* папки этапов: nav.cx-folders > .cx-folders__group (> .cx-folders__title + button.cx-folders__item[aria-current] > .cx-folders__label (small) + .cx-plus + .cx-folders__n) */
.cx-folders { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cx-folders__group { padding: 8px; border-radius: var(--cx-r-card); background: var(--cx-surface); }
.cx-folders__title { padding: 6px 10px 4px; font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-folders__item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 7px 10px; border: 0; border-radius: var(--cx-r-input); background: transparent; font: 400 13px/1.4 var(--cx-font-ui); color: var(--cx-text-2); text-align: left; cursor: pointer; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-folders__item:hover { background: var(--cx-surface-hover); }
.cx-folders__item[aria-current] { background: var(--cx-surface-soft); color: var(--cx-text); font-weight: 600; }
.cx-folders__item:focus-visible { box-shadow: var(--cx-focus); outline: 0; }
.cx-folders__label { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.cx-folders__label small { display: block; font-size: 11.5px; line-height: 1.5; font-weight: 400; color: var(--cx-text-3); }
.cx-folders__n { font-weight: 600; color: var(--cx-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-folders__n.is-zero { font-weight: 400; color: var(--cx-text-3); }
.cx-folders__auto { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; font-size: 12.5px; line-height: 1.35; color: var(--cx-text-2); }
.cx-folders__auto > i { flex: none; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--cx-success); }
.cx-folders__auto > i.is-off { background: var(--cx-text-ghost); }
.cx-folders__auto b { font-weight: 600; color: var(--cx-text); }
.cx-folders__note { margin: 0; padding: 6px 10px 4px; font-size: 11.5px; line-height: 1.4; color: var(--cx-text-3); }
.cx-plus { padding: 0 6px; border-radius: var(--cx-r-tag); background: var(--cx-accent); color: var(--cx-on-accent); font-size: 11.5px; line-height: 1.5; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .cx-folders { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; } .cx-folders__group { display: flex; flex: none; gap: 2px; padding: 4px; } .cx-folders__group:first-child, .cx-folders__title, .cx-folders__note, .cx-folders__label small { display: none; } .cx-folders__item { width: auto; white-space: nowrap; } }

/* --- список кандидатов в карточке: полосы .cx-card__bar--title/--tools/--chips, счётчик .cx-card__count--bar, статус .cx-box--status --- */
.cx-card__bar.cx-card__bar--title { gap: 10px; padding: 16px 16px 0; }
.cx-card__name { margin: 0; font-size: 15.5px; line-height: 1.4; font-weight: 600; white-space: nowrap; }
.cx-card__name > span { margin-left: 6px; font-weight: 400; color: var(--cx-text-3); font-variant-numeric: tabular-nums; }
.cx-card__bar.cx-card__bar--tools { flex-wrap: nowrap; padding: 12px 16px 0; }
.cx-card__bar--tools > .cx-search { flex: 1 1 auto; width: auto; }
.cx-card__bar.cx-card__bar--chips { gap: 6px; padding: 10px 16px 0; }
.cx-card__count.cx-card__count--bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 44px; padding: 8px 16px 4px; }
.cx-box.cx-box--status { display: flex; flex-direction: column; gap: 8px; margin: 10px 16px 0; padding: 12px 14px; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); box-shadow: none; }
.cx-box__line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); font-variant-numeric: tabular-nums; }
.cx-box__line b { font-weight: 600; color: var(--cx-text); }
/* выбрано несколько: тёмная полоса .cx-bulk вместо счётчика > .cx-bulk__n + кнопки + .cx-bulk__x */
.cx-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 12px 4px; padding: 6px 6px 6px 14px; border-radius: var(--cx-r-card); background: var(--cx-fill-strong); color: var(--cx-on-strong); font-size: 12.5px; line-height: 1.6; font-weight: 600; }
.cx-bulk__n { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-bulk__x { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-left: auto; padding: 0 10px; border: 0; border-radius: var(--cx-r-pill); background: transparent; color: var(--cx-text-ghost); font: inherit; cursor: pointer; }
.cx-bulk__x:hover { color: var(--cx-on-strong); }
.cx-bulk__x svg { width: 14px; height: 14px; }
/* строки кандидатов: .cx-rows.cx-rows--cands; выбранная — [aria-selected] лаймовым тоном */
.cx-rows--cands { --gap: 10px; }
.cx-rows--cands > .cx-rows__head { align-items: center; }
.cx-rows--cands > .cx-rows__row { min-height: 64px; padding-top: 9px; padding-bottom: 9px; cursor: pointer; }
.cx-rows--cands > .cx-rows__row > * { margin-top: 2px; }
.cx-rows--cands > .cx-rows__row[aria-selected="true"], .cx-rows--cands > .cx-rows__row[aria-selected="true"]:hover { background: var(--cx-surface-accent); }
.cx-rows__sort { display: inline-flex; align-items: center; gap: 2px; color: var(--cx-text); }
.cx-rows__sort svg { width: 12px; height: 12px; }
.cx-cand { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cx-cand__line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cx-cand__new { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-accent); box-shadow: inset 0 0 0 1.5px var(--cx-fill-strong); }
.cx-cand__name { font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--cx-text); }
.cx-cand__name.is-seen { font-weight: 500; }
.cx-cand__city { font-size: 12.5px; line-height: 1.6; color: var(--cx-text-meta); }
.cx-cand__src { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-3); white-space: nowrap; }
.cx-cand__pv { font-size: 12.5px; line-height: 1.45; color: var(--cx-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-cand__pv > span { color: var(--cx-text-3); }
.cx-cand > .cx-chips { margin-top: 2px; gap: 4px 6px; }
.cx--ds .cx-cand > .cx-chips > .cx-chip { height: auto; padding-top: 2px; padding-bottom: 2px; line-height: 1.5; }
.cx-dates { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-dates > :nth-child(2) { color: var(--cx-text-3); }
@media (max-width: 600px) { .cx-rows--cands > .cx-rows__head { display: none; } .cx-rows--cands > .cx-rows__row { grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; } .cx-rows--cands > .cx-rows__row > .cx-check { display: none; } .cx-rows--cands > .cx-rows__row > .cx-cand { grid-column: 2 / -1; } .cx-rows--cands > .cx-rows__row > .cx-score { grid-column: 2; } }
/* оценка ИИ столбиком: деления 7×8 над числом и словом; в карточке доски — строкой (.cx-score--row) */
.cx-score.cx-score--stack { --_cell: 9px; --_h: 8px; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--cx-text-2); }
.cx-score--stack > span:not(.cx-score__bar, .cx-ai-dots) { font-size: 12.5px; line-height: 1.6; }
.cx-score--stack b { font-weight: 600; color: var(--cx-text); }
.cx-score.cx-score--stack.is-busy { flex-direction: row; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.6; }
.cx-score.cx-score--stack.is-error { color: var(--cx-text-2); font-size: 12.5px; }
.cx-score--stack.is-error .cx-link--sm { font-weight: 600; color: var(--cx-text); text-underline-offset: 2px; }
.cx-score.cx-score--row { flex-direction: row; align-items: center; gap: 8px; }

/* --- панель справа: aside.cx-sidecard.cx-card > .cx-sidecard__head + section.cx-sidecard__sec (> .cx-sidecard__cap (svg + .cx-sidecard__act) + .cx-kv + .cx-sidecard__text + ul.cx-sidecard__list > li(.is-stop .is-q)) --- */
.cx-sidecard { display: flex; flex-direction: column; min-width: 0; }
.cx-card.cx-sidecard { padding: 6px 0 8px; }
.cx-sidecard__head { display: flex; align-items: center; gap: 8px; padding: 12px 18px 6px; }
.cx-sidecard__head > b { flex: 1 1 auto; font-size: 15.5px; line-height: 1.4; font-weight: 600; }
.cx-sidecard__sec { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 12px 18px 14px; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-sidecard__head + .cx-sidecard__sec, .cx-sidecard > .cx-sidecard__sec:first-child { box-shadow: none; }
.cx-sidecard__sec > * { align-self: stretch; }
.cx-sidecard__sec > .cx-link { align-self: flex-start; }
.cx-sidecard__cap { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-sidecard__cap > svg { width: 14px; height: 14px; }
.cx-sidecard__act { margin-left: auto; padding: 0; border: 0; background: none; font: 600 11.5px/1.5 var(--cx-font-ui); letter-spacing: 0; text-transform: none; color: var(--cx-text); cursor: pointer; }
.cx-sidecard__act:hover { text-decoration: underline; text-underline-offset: 2px; }
.cx-sidecard .cx-kv { gap: 4px 12px; line-height: 1.4; }
.cx-sidecard .cx-kv > :nth-child(odd) { color: var(--cx-text-3); }
.cx-sidecard .cx-kv > :nth-child(even) { color: var(--cx-text); font-variant-numeric: tabular-nums; }
.cx-sidecard__text { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cx-text-2); }
.cx-sidecard__text b { font-weight: 600; color: var(--cx-text); }
.cx-sidecard .cx-link--sm { font-weight: 600; color: var(--cx-text); text-underline-offset: 2px; }
.cx-sidecard__list { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.cx-sidecard__list > li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.4; color: var(--cx-text); }
.cx-sidecard__list > li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--cx-fill-strong); }
.cx-sidecard__list > li.is-stop::before { background: var(--cx-critical); }
.cx-sidecard__list > li.is-q::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cx-text-3); }
.cx-sidecard__cost { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.cx-sidecard__cost > b { font-size: 15.5px; line-height: 1.4; font-weight: 600; }
.cx-sidecard__cost > span { font-size: 12.5px; line-height: 1.6; color: var(--cx-text-3); }
.cx-drawer .cx-sidecard__sec { padding-left: 0; padding-right: 0; }

/* --- доска этапов hh: .cx-board.cx-board--hh — шапка колонки в две строки (название, число, «hh: …»); полоса сводки .cx-card.cx-card--strip --- */
.cx-board--hh .cx-board__head { flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 0 8px; height: auto; min-height: 44px; padding: 4px 4px 0; line-height: 1.25; }
.cx-board__hh { flex-basis: 100%; font-size: 11.5px; line-height: 1.5; font-weight: 400; color: var(--cx-text-3); }
.cx-bcard--cand { gap: 7px; }
.cx-bcard--cand .cx-cand__new { margin-top: 5px; }
.cx-bcard--cand .cx-bcard__sub { margin-top: 0; line-height: 1.5; white-space: normal; }
.cx-board__empty { padding: 14px 12px; border-radius: var(--cx-r-lg); box-shadow: inset 0 0 0 1.5px var(--cx-border-soft); font-size: 12.5px; line-height: 1.6; color: var(--cx-text-3); text-align: center; }
button.cx-board__more { padding: 4px 4px 6px; border: 0; background: none; font: 400 11.5px/1.5 var(--cx-font-ui); color: var(--cx-text-meta); text-align: left; cursor: pointer; }
button.cx-board__more:hover { color: var(--cx-text); }
.cx-card.cx-card--strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 12px 16px; font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); font-variant-numeric: tabular-nums; }
.cx-card--strip b { font-weight: 600; color: var(--cx-text); }
.cx-card--strip > i { font-style: normal; color: var(--cx-text-ghost); }
.cx-score--stack .cx-score__bar { background: linear-gradient(90deg, var(--cx-text-3) 0 calc(var(--v, 0) * var(--_cell)), var(--cx-line) 0); }
.cx-card__empty--lg { padding: 32px 0 44px; }
.cx-card__empty--sm { padding-bottom: 32px; }
.cx-state--md .cx-state__text { max-width: 328px; line-height: 1.5; }
.cx-head__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cx-state--sm { padding: 20px 24px; }
.cx-state--sm .cx-state__text { line-height: 1.45; }
.cx-state--sm .cx-state__art { width: 40px; height: 40px; }
.cx-state--sm .cx-state__art svg { width: 16px; height: 16px; }
@media (max-width: 600px) { .cx-card__bar.cx-card__bar--tools { flex-wrap: wrap; } .cx-card__bar--tools > .cx-search { flex-basis: 100%; } .cx-card--strip > .cx-grow { display: none; } }

/* ===================== 1.11.7 · Персонал: «Кандидат» (A-04) и «Пригласить» (A-04a) ===================== */
/* --- шапка кандидата: .cx-card.cx-card--head.cx-card--person > .cx-card__top (крошки, .cx-grow, .cx-pos) + .cx-who + .cx-actbar --- */
.cx-card.cx-card--person { gap: 14px; }
.cx--ds .cx-who > .cx-avatar--xl { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.cx-card__top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cx-pos { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-pos > .cx-ibtn svg { width: 16px; height: 16px; }
.cx-who { display: flex; align-items: flex-start; gap: 16px; }
.cx-who__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cx-who__name { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 600; color: var(--cx-text); }
.cx-who__body > .cx-dotline { gap: 4px 10px; }
.cx-who__body > .cx-chips { gap: 6px; }
/* строка действий: этап слева, кнопки справа; .cx-actbar__note — где этап в hh */
.cx-actbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-actbar__note { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-3); white-space: nowrap; }
.cx-actbar .cx-link--sm { font-weight: 600; color: var(--cx-text); text-underline-offset: 2px; }
/* выбор этапа: summary.cx-stagepick > i (точка) + small «этап» + название + .cx-chev; меню — .cx-menu.cx-pop__panel--fit (--w: 280px), у текущего этапа svg check */
.cx-stagepick { display: inline-flex; align-items: center; gap: 8px; height: var(--cx-h-lg); padding: 0 12px 0 14px; border-radius: var(--cx-r-pill); background: var(--cx-surface-soft); color: var(--cx-text); font: 600 13px/1.5 var(--cx-font-ui); white-space: nowrap; cursor: pointer; list-style: none; transition: background var(--cx-dur-hover) var(--cx-ease); }
.cx-stagepick::-webkit-details-marker { display: none; }
.cx-stagepick:hover { background: var(--cx-surface-pressed); }
.cx-stagepick > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-text); }
.cx-stagepick > small { font-size: 11.5px; font-weight: 400; color: var(--cx-text-3); }
.cx-stagepick > .cx-chev { color: var(--cx-text); }
.cx-stagepick > .cx-chev svg { width: 14px; height: 14px; }
.cx-pop[open] > .cx-stagepick > .cx-chev { transform: rotate(180deg); }

/* --- решение менеджера карточкой: .cx-card.cx-decision.cx-decision--card > .cx-decision__head (b + .cx-meta) + __from + .cx-chips + поле + __acts / __done --- */
.cx-card.cx-decision--card { padding: 18px 22px 16px; }
.cx-decision__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cx-decision__head > b { font-size: 15.5px; line-height: 1.4; font-weight: 600; }
.cx-decision--card .cx-decision__from { font-size: 12.5px; line-height: 1.55; }
.cx-decision--card .cx-decision__from > small { margin-bottom: 4px; color: var(--cx-text-3); }
.cx-decision--card .cx-decision__acts > .cx-btn { flex: none; }
.cx-decision--card .cx-decision__done { padding: 0; background: none; font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); }
.cx-decision--card .cx-decision__done > :last-child { margin-left: 0; }
.cx-decision__done .cx-link--sm { font-weight: 600; color: var(--cx-text); text-underline-offset: 2px; }

/* --- тело: .cx-duo > .cx-tabcard (лента вкладок) + aside.cx-sidecard.cx-card (312, на ≤1180 — 288) --- */
.cx-duo { display: flex; align-items: flex-start; gap: 12px; }
.cx-duo > .cx-tabcard { flex: 1 1 auto; min-width: 0; }
.cx-duo > .cx-sidecard { flex: 0 0 312px; }
.cx-duo > .cx-sidecard > .cx-sidecard__sec { gap: 8px; padding: 14px 18px; }
.cx-sidecard__row { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 12.5px; line-height: 1.6; color: var(--cx-text); font-variant-numeric: tabular-nums; }
.cx-sidecard__row > .cx-sidecard__k { flex: none; min-width: 48px; color: var(--cx-text-3); }
.cx-sidecard__row > .cx-sidecard__v { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.cx-sidecard__row > .cx-sidecard__v.is-meta { color: var(--cx-text-meta); }
.cx-sidecard__quote { padding: 8px 12px; border-radius: var(--cx-r-input); background: var(--cx-surface-soft); font-size: 12.5px; line-height: 1.5; color: var(--cx-text); }
.cx-sidecard__sec > .cx-btn { align-self: flex-start; }

/* --- карточка с вкладками: .cx-card.cx-card--flush.cx-tabcard > .cx-tabcard__tabs (.cx-tab + .cx-tab__count) + .cx-tabcard__pane --- */
.cx-tabcard__tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 14px 16px 12px; box-shadow: inset 0 -1px 0 var(--cx-line); }
.cx-tabcard__pane { display: flex; flex-direction: column; gap: 18px; padding: 18px 22px 22px; }
.cx-tabcard__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cx-tabcard__head > b { font-size: 15.5px; line-height: 1.4; font-weight: 600; }
.cx-tabcard__head .cx-meta, .cx-tabcard__pane > .cx-meta { line-height: 1.6; font-variant-numeric: tabular-nums; }
.cx-tabcard__tools { display: flex; align-items: center; gap: 10px; } /* кнопки справа в шапке вкладки; на телефоне — столбиком */
.cx-tabcard__cap { margin: 0 0 8px; font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-tabcard__text { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--cx-text); }
.cx-tabcard__text b { font-weight: 600; }
.cx-tabcard__text--2 { line-height: 1.55; color: var(--cx-text-2); }
.cx-tabcard__sum { padding: 12px 14px; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); font-size: 12.5px; line-height: 1.6; color: var(--cx-text); }
.cx-tabcard__fine { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--cx-line); font-size: 11.5px; line-height: 1.5; color: var(--cx-text-3); }
.cx-tabcard__fine .cx-link--sm, .cx-box .cx-link--sm { font-weight: 600; color: var(--cx-text); text-underline-offset: 2px; }
.cx-tabcard__end { display: flex; justify-content: flex-end; margin-top: -8px; }
.cx-tabcard__track { padding: 12px 14px; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); overflow-x: auto; }

/* резюме: .cx-job > .cx-job__when (+ small срок) + div (.cx-job__co > span где, .cx-job__role, ul) */
.cx-job { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 4px 18px; padding: 12px 0; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-job__when { font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); font-variant-numeric: tabular-nums; }
.cx-job__when > small { display: block; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-3); }
.cx-job__co { font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--cx-text); }
.cx-job__co > span { font-weight: 400; color: var(--cx-text-3); }
.cx-job__role { margin-top: 2px; font-size: 12.5px; line-height: 1.6; font-weight: 600; }
.cx-job ul { margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; line-height: 1.6; }

/* ответы автоопроса: .cx-qa > .cx-qa__q + .cx-qa__a + .cx-qa__v (.cx-dot + вывод) */
.cx-qa { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-qa:first-child { padding-top: 0; box-shadow: none; }
.cx-qa__q { font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); }
.cx-qa__a { padding: 10px 14px; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); font-size: 12.5px; line-height: 1.6; }
.cx-qa__v { display: flex; align-items: center; gap: 7px; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-2); }
.cx-dot--ink { --_c: var(--cx-text); }

/* оценка: .cx-verdict > b (8,7) + .cx-score.cx-score--lg (деления 9×10) + span + .cx-chip.cx-chip--strong «ИИ» */
.cx-verdict { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 12.5px; line-height: 1.6; color: var(--cx-text); }
.cx-verdict > b { font-size: 21px; line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-verdict > .cx-meta { color: var(--cx-text-2); }
.cx-verdict .cx-chip svg { width: 12px; height: 12px; }
.cx-score.cx-score--lg { --_cell: 11px; --_h: 10px; }
.cx-score--lg .cx-score__bar { background: linear-gradient(90deg, var(--cx-text-3) 0 calc(var(--v, 0) * var(--_cell)), var(--cx-line) 0); }
/* обязательные и стоп-факторы: ul.cx-musts > li (.cx-dot + span с i-пояснением) */
.cx-musts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cx-musts > li { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.45; }
.cx-musts > li > .cx-dot { margin-top: 5px; }
.cx-musts i { font-style: normal; color: var(--cx-text-3); }
/* критерий строкой: .cx-crit.cx-crit--row > .cx-crit__label (+ .cx-crit__w) + .cx-score.cx-score--stack (b «9 из 10») + .cx-crit__why (+ .cx-quote.cx-quote--line) */
.cx-crit.cx-crit--row { grid-template-columns: minmax(0, 190px) 96px minmax(0, 1fr); align-items: start; gap: 4px 16px; padding: 12px 0; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-crit--row > .cx-crit__label { font-size: 12.5px; line-height: 1.6; }
.cx-crit--row .cx-crit__w { font-size: 12.5px; line-height: 1.6; color: var(--cx-text-3); font-variant-numeric: tabular-nums; }
.cx-crit--row > .cx-score { --_cell: 8px; --_h: 8px; padding-top: 4px; }
.cx-crit--row > .cx-score > b { font-size: 12.5px; line-height: 1.6; font-weight: 600; }
.cx-crit--row > .cx-crit__why { grid-column: auto; gap: 4px; line-height: 1.5; }
.cx-quote.cx-quote--line, .cx-crit__why > .cx-quote.cx-quote--line { display: block; padding: 0 0 0 10px; border-radius: 0; background: none; box-shadow: inset 2px 0 0 var(--cx-border); font-size: 12.5px; line-height: 1.5; color: var(--cx-text-2); }
.cx-quote--line > i { font-style: normal; font-size: 11.5px; color: var(--cx-text-3); }
/* оценивается: .cx-box.cx-box--pend > .cx-box__line + .cx-skeleton[style=--w:70%] */
.cx-box.cx-box--pend { gap: 10px; padding: 14px; border-radius: var(--cx-r-md); }
.cx-box--pend > .cx-skeleton { width: var(--w, 100%); height: 12px; }

/* --- собеседование: .cx-box.cx-box--iv > .cx-box__row (чипы, b) + .cx-box__meta + .cx-box__link + .cx-verdict + .cx-pts + .cx-box__foot --- */
.cx-box.cx-box--iv { gap: 10px; padding: 14px 16px; }
.cx-box__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cx-box__row > b { font-size: 13px; line-height: 1.5; font-weight: 600; }
.cx-box__meta { font-size: 12.5px; line-height: 1.6; color: var(--cx-text-2); font-variant-numeric: tabular-nums; }
.cx-box__link { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px 8px 14px; border-radius: var(--cx-r-md); background: var(--cx-surface-soft); font-size: 12.5px; line-height: 1.6; }
.cx-box__link > svg { width: 14px; height: 14px; flex: none; }
.cx-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cx-pts > div { display: flex; flex-direction: column; gap: 8px; }
.cx-pts .cx-tabcard__cap { margin: 0; }
.cx-pt { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; line-height: 1.5; }
.cx-pt > q { color: var(--cx-text-2); quotes: "«" "»"; }
/* таймкод записи: a.cx-tc > svg play + «12:40» */
.cx-tc { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: var(--cx-r-tag); background: var(--cx-surface-soft); font-size: 11.5px; line-height: 1.5; font-weight: 600; color: var(--cx-text); font-variant-numeric: tabular-nums; text-decoration: none; }
.cx-tc:hover { background: var(--cx-surface-pressed); }
.cx-tc > svg { width: 12px; height: 12px; }

/* --- переписка с кандидатом: .cx-chat > .cx-chat__sys / .cx-chat__call / .cx-chat__msg(.is-out) > .cx-chat__bubble + .cx-chat__meta --- */
.cx-chat { display: flex; flex-direction: column; gap: 10px; }
.cx-chat__sys { align-self: center; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-3); text-align: center; font-variant-numeric: tabular-nums; }
.cx-chat__call { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--cx-r-md); box-shadow: var(--cx-ring-soft); font-size: 11.5px; line-height: 1.5; color: var(--cx-text-2); font-variant-numeric: tabular-nums; }
.cx-chat__call > svg { width: 14px; height: 14px; }
.cx-chat__msg { display: flex; flex-direction: column; align-self: flex-start; gap: 4px; max-width: 76%; }
.cx-chat__msg.is-out { align-self: flex-end; align-items: flex-end; }
.cx-chat__bubble { padding: 10px 14px; border-radius: var(--cx-r-lg); background: var(--cx-surface-soft); font-size: 12.5px; line-height: 1.6; color: var(--cx-text); overflow-wrap: anywhere; }
.cx-chat__msg.is-out .cx-chat__bubble { background: var(--cx-fill-strong); color: var(--cx-on-strong); }
.cx-chat__meta { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-3); font-variant-numeric: tabular-nums; }
.cx-composer.cx-composer--chat { padding-top: 14px; }
.cx-composer__quick { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- заметки: .cx-memo(.is-pin) > .cx-memo__head (.cx-avatar--xs + b + span + .cx-grow + span + svg) + текст --- */
.cx-memo { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--cx-r-md); box-shadow: var(--cx-ring-soft); font-size: 12.5px; line-height: 1.6; }
.cx-memo.is-pin { box-shadow: none; background: var(--cx-surface-accent); }
.cx-memo__head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-3); }
.cx-memo__head > b { font-size: 12.5px; font-weight: 600; color: var(--cx-text); }
.cx-memo__head > svg { width: 14px; height: 14px; }

/* --- история: .cx-tabcard__track > ol.cx-steps.cx-steps--track; события .cx-events > .cx-event (время, кто — чип, что + small) --- */
.cx-steps--track { gap: 16px; }
.cx-steps--track > .cx-steps__item::before { display: none; }
.cx-events > .cx-event { display: grid; grid-template-columns: 108px 52px minmax(0, 1fr); align-items: start; gap: 12px; padding: 10px 0; box-shadow: inset 0 1px 0 var(--cx-line); font-size: 12.5px; line-height: 1.5; }
.cx-events > .cx-event:first-child { box-shadow: none; }
.cx-event__when { color: var(--cx-text-2); font-variant-numeric: tabular-nums; }
.cx-event > .cx-chip { justify-self: start; height: 20px; }
.cx-event__what > small { display: block; font-size: 11.5px; line-height: 1.5; color: var(--cx-text-3); }

/* --- окно «Пригласить»: .cx-frows.cx-frows--lined (строки через линию, подписи капсом) --- */
.cx-frows.cx-frows--lined { gap: 0; }
.cx-frows--lined > .cx-frow { grid-template-columns: var(--label, 132px) minmax(0, 1fr); gap: 14px; padding: 10px 0; box-shadow: inset 0 1px 0 var(--cx-line); }
.cx-frows--lined .cx-frow__label { padding-top: 12px; font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-text-label); }
.cx-frow__line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cx-frow__hint.is-warn { color: var(--cx-warn-text); }
.cx-frow__hint.is-bad { color: var(--cx-critical-text); }
.cx-frow__hint .cx-meta { font-size: inherit; color: var(--cx-text-3); }
/* участники: .cx-hosts > .cx-host… + кнопка «добавить»; плашка над строками — через 10 */
.cx-hosts { display: flex; flex-direction: column; gap: 4px; }
.cx-banner + .cx-frows--lined { margin-top: 10px; }
/* участник встречи: .cx-host > .cx-avatar + .cx-host__body (b + span, .is-busy) + label.cx-check + .cx-ibtn--xs */
.cx-host { display: flex; align-items: center; gap: 10px; min-height: 38px; }
.cx-host__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.cx-host__body > b { font-size: 13px; line-height: 1.5; font-weight: 600; }
.cx-host__body > span { font-size: 11.5px; line-height: 1.5; color: var(--cx-text-3); }
.cx-host__body > span.is-busy { color: var(--cx-warn-text); }
.cx-host > .cx-host__gap { width: 28px; flex: none; }
.cx-input.is-bad { box-shadow: inset 0 0 0 1.5px var(--cx-critical); }
/* подвал окна с подписью (.cx-modal__note): кнопки не сжимаются */
.cx-modal__note ~ .cx-btn { flex: none; }
/* форма окна по DS.Field: .cx-form.cx-form--ink — подписи и подсказки полей цветом текста, отступ 12 от шапки */
.cx-form.cx-form--ink { padding-top: 12px; }
.cx-form--ink .cx-field__label, .cx-form--ink .cx-field__hint { color: var(--cx-text); }

@media (max-width: 1180px) {
  .cx-duo > .cx-sidecard { flex-basis: 288px; }
  .cx-actbar__note.is-quiet { display: none; }
  .cx-tabcard__tabs { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .cx-tabcard__tabs > .cx-tab { height: 28px; padding: 0 11px; box-shadow: var(--cx-ring); font-size: 11.5px; font-weight: 700; } /* узко — вкладки как .cx-tab--sm (поля 11), с обводкой */
  .cx-tabcard__tabs > .cx-tab[aria-selected="true"] { box-shadow: none; }
}
@media (max-width: 600px) {
  .cx-card.cx-card--person { padding: 16px; }
  .cx-who__name { font-size: 15.5px; line-height: 1.4; }
  .cx-who > .cx-avatar--xl { --_s: 44px; }
  .cx-who__body > .cx-dotline { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cx-who__body > .cx-dotline > i { display: none; }
  .cx-duo { flex-direction: column; align-items: stretch; }
  .cx-duo > .cx-sidecard { flex-basis: auto; }
  .cx-tabcard__tabs { padding: 12px 14px 10px; }
  .cx-tabcard__tabs > .cx-tab { height: var(--cx-h-sm); padding: 0 13px; box-shadow: none; font-size: 12.5px; font-weight: 600; } /* телефон — снова простые вкладки, как в канвасе 390 */
  .cx-tabcard__tools { flex: 1 1 100%; flex-direction: column; align-items: flex-start; }
  .cx-actbar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cx-actbar__note { white-space: normal; }
  .cx-tabcard__pane { padding: 16px; }
  .cx-card.cx-decision--card { padding: 16px; }
  .cx-job { grid-template-columns: minmax(0, 1fr); }
  .cx-crit.cx-crit--row { grid-template-columns: minmax(0, 1fr) 92px; }
  .cx-crit--row > .cx-crit__why { grid-column: 1 / -1; }
  .cx-pts { grid-template-columns: minmax(0, 1fr); }
  .cx-events > .cx-event { grid-template-columns: 84px minmax(0, 1fr); }
  .cx-events > .cx-event > .cx-chip { display: none; }
  .cx-frows--lined > .cx-frow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cx-frows--lined .cx-frow__label { padding-top: 0; }
}