/* 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); }
.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;
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: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: 12px; 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; }
.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); }
/* чекбокс и радио: */
.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); }
/* переключатель: */
.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 { height: 6px; border-radius: var(--cx-r-pill); background: var(--cx-surface-soft); overflow: hidden; }
.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
===================================================================== */
/* Секретарь
Модификаторы: --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); }
/* ---------- Всплывающие слои на (без 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: 240px; }
@media (max-width: 1360px) { .cx-shell__search { width: 170px; } .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: 392px; }
.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(392px, 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 { 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"]: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 { font-size: 13px; font-weight: 600; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-row__meta { 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; padding: 3px; gap: 2px; border-radius: var(--cx-r-pill); background: var(--cx-surface-soft); }
.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, поповер, тултип, тост, подтверждение
===================================================================== */
/*