/* 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; }

.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--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--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; padding: 20px 18px; }
}

/* =====================================================================
   Бренд-блок «ИМЯ | 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% + 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% + 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; }

/* =====================================================================
   Структура
   ===================================================================== */
/* ---------- 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; inset: 1px 2px; border-radius: 50%; z-index: -1; transition: background var(--cx-dur-hover) var(--cx-ease); }
.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 { width: 480px; border-radius: var(--cx-r-modal); }
.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; width: 460px; 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; }
.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-within::after, .cx-tip.is-open::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 300ms; }
.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-within::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-within::after, .cx-tip--start.is-open::after { transform: none; }

/* тост: <div class="cx-toasts"><div class="cx-toast" role="status">…</div></div> */
.cx-toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); 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-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: repeat(var(--cols, 2), minmax(0, 1fr)); }
.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 { font-size: 19px; font-weight: 600; line-height: 1.3; }
.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) + .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: crosshair; }
.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: crosshair; }
.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 { position: absolute; top: 18px; bottom: 0; border-radius: var(--cx-r-xs); box-shadow: inset 0 0 0 2px var(--cx-accent); pointer-events: none; }
.cx-track__sel b { position: absolute; top: 22px; width: 6px; height: 20px; margin-left: -3px; border-radius: var(--cx-r-pill); background: var(--cx-accent); }
.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, с кнопкой и .cx-progress) */
.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 { flex-wrap: wrap; cursor: default; background: transparent; box-shadow: inset 0 0 0 1px var(--cx-border); }
.cx-seg--ext:hover { background: transparent; }
.cx-seg--ext .cx-progress { flex: 1 1 100%; }
@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; }