/* ============================================================
   COBRA UI Kit — расширения (X-серия).
   Компоненты, которых нет в базовом cobra-ui.css: закрывают
   полный каталог типов интерфейса по образцу ant.design.
   Требует cobra-tokens.css и cobra-ui.css, подключается третьим.
   Правила те же: только переменные, все три темы, префикс .ck-.
   Кандидаты на переезд в cobra-ui.css по мере обкатки.
   ============================================================ */

/* ── Плавающая кнопка (FloatButton) ──────────────────────── */

.ck-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--ck-z-sticky);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--ck-radius-pill);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--ck-shadow-md);
  transition: background var(--transition), transform var(--transition);
}
.ck-fab:hover { background: var(--hover-bg); }
.ck-fab--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ck-fab--primary:hover { background: var(--accent); filter: brightness(1.06); }

/* Группа: столбик кнопок, прижатый к углу */
.ck-fab-group {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--ck-z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--ck-space-4);
}
.ck-fab-group .ck-fab,
.ck-fab--static { position: static; right: auto; bottom: auto; }

/* ── Разделитель: текст и вертикальный ───────────────────── */

.ck-divider--text {
  display: flex;
  align-items: center;
  gap: var(--ck-space-5);
  height: auto;
  background: none;
  color: var(--text-muted);
  font-size: var(--ck-text-sm);
  margin: var(--ck-space-6) 0;
}
.ck-divider--text::before,
.ck-divider--text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.ck-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 var(--ck-space-4);
  vertical-align: middle;
  background: var(--border);
}

/* ── Сетка (Grid) ────────────────────────────────────────── */

.ck-grid { display: grid; gap: var(--ck-space-6); }
.ck-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ck-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ck-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ck-grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

@media (max-width: 640px) {
  .ck-grid--2, .ck-grid--3, .ck-grid--4 { grid-template-columns: 1fr; }
}

/* ── Каркас приложения (Layout) ──────────────────────────── */

.ck-layout {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.ck-layout__header {
  display: flex;
  align-items: center;
  gap: var(--ck-space-6);
  height: 48px;
  padding: 0 var(--ck-space-7);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.ck-layout__body { display: flex; flex: 1; min-height: 0; }

.ck-layout__sider {
  width: 200px;
  flex-shrink: 0;
  padding: var(--ck-space-6);
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.ck-layout__content { flex: 1; min-width: 0; padding: var(--ck-space-7); overflow-y: auto; }

.ck-layout__footer {
  padding: var(--ck-space-5) var(--ck-space-7);
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: var(--ck-text-sm);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Кладка (Masonry) ────────────────────────────────────── */

.ck-masonry { columns: 3 220px; column-gap: var(--ck-space-6); }
.ck-masonry > * { break-inside: avoid; margin-bottom: var(--ck-space-6); }

/* ── Отступы (Space): переопределение зазора ряда/стека ──── */

.ck-row--gap-sm, .ck-stack--gap-sm { gap: var(--ck-space-2); }
.ck-row--gap-lg, .ck-stack--gap-lg { gap: var(--ck-space-7); }

/* ── Разделяемые панели (Splitter) ───────────────────────── */
/* Без JS: левая панель тянется нативным resize за правый нижний угол. */

.ck-split {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

.ck-split__pane { padding: var(--ck-space-7); overflow: auto; min-width: 0; }

.ck-split__pane--resize {
  resize: horizontal;
  min-width: 120px;
  max-width: 70%;
  border-right: 1px solid var(--border);
  background: var(--surface-2);
}

.ck-split__rest { flex: 1; }

/* ── Якорь (Anchor) ──────────────────────────────────────── */

.ck-anchor {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--border);
}

.ck-anchor__link {
  padding: 4px 0 4px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--ck-text-md);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}
.ck-anchor__link:hover { color: var(--text); }
.ck-anchor__link--active {
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: var(--ck-weight-medium);
}

/* ── Хлебные крошки (Breadcrumb) ─────────────────────────── */

.ck-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ck-space-3);
  font-size: var(--ck-text-md);
}

.ck-crumbs a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}
.ck-crumbs a:hover { color: var(--text); background: var(--hover-bg); }

.ck-crumbs__sep { color: var(--text-dim); display: inline-flex; }
.ck-crumbs__current { color: var(--text); padding: 2px 4px; }

/* ── Меню навигации (Menu) ───────────────────────────────── */
/* Вертикальное меню раздела — как сайдбар этой документации. */

.ck-nav { display: flex; flex-direction: column; gap: 1px; }

.ck-nav__group {
  padding: var(--ck-space-5) var(--ck-space-5) var(--ck-space-2);
  font-size: var(--ck-text-xs);
  font-weight: var(--ck-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.ck-nav__item {
  display: flex;
  align-items: center;
  gap: var(--ck-space-4);
  padding: 6px var(--ck-space-5);
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--ck-text-md);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.ck-nav__item:hover { background: var(--hover-bg); }
.ck-nav__item--active,
.ck-nav__item--active:hover {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: var(--ck-weight-semibold);
}
.ck-nav__item .ck-badge { margin-left: auto; }
.ck-nav__icon { display: inline-flex; flex-shrink: 0; color: var(--text-muted); }
.ck-nav__item--active .ck-nav__icon { color: inherit; }

/* Горизонтальный вариант — как .ck-tabs, но пилюлями */
.ck-nav--h { flex-direction: row; gap: var(--ck-space-2); }

/* ── Пагинация (Pagination) ──────────────────────────────── */

.ck-pagination { display: flex; align-items: center; gap: var(--ck-space-2); }

.ck-pagination__btn {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--ck-text-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.ck-pagination__btn:hover { background: var(--hover-bg); }
.ck-pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; }
.ck-pagination__btn--on {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: var(--ck-weight-semibold);
}
.ck-pagination__dots { color: var(--text-dim); padding: 0 2px; }

/* ── Шаги (Steps) ────────────────────────────────────────── */

.ck-steps { display: flex; gap: var(--ck-space-4); }

.ck-step { flex: 1; display: flex; align-items: flex-start; gap: var(--ck-space-4); min-width: 0; }

.ck-step__dot {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--ck-text-sm);
  font-weight: var(--ck-weight-semibold);
}

.ck-step__body { min-width: 0; padding-top: 3px; }
.ck-step__title { font-size: var(--ck-text-md); font-weight: var(--ck-weight-semibold); color: var(--text-muted); }
.ck-step__desc { font-size: var(--ck-text-xs); color: var(--text-muted); margin-top: 1px; }

/* Соединительная линия — у всех, кроме последнего */
.ck-step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 1px;
  margin-top: 13px;
  background: var(--border);
}

.ck-step--done .ck-step__dot {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent);
}
.ck-step--done .ck-step__title { color: var(--text); }
.ck-step--done:not(:last-child)::after { background: var(--accent-border); }

.ck-step--current .ck-step__dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ck-step--current .ck-step__title { color: var(--text); }

.ck-step--error .ck-step__dot {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
.ck-step--error .ck-step__title { color: var(--danger); }

/* Вертикальные шаги */
.ck-steps--v { flex-direction: column; gap: var(--ck-space-6); }
.ck-steps--v .ck-step { flex: none; }
.ck-steps--v .ck-step:not(:last-child)::after { display: none; }

/* ── Каскадный выбор (Cascader) ──────────────────────────── */

.ck-cascade {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--ck-shadow-md);
  overflow: hidden;
}

.ck-cascade__pane {
  min-width: 160px;
  max-height: 260px;
  overflow-y: auto;
  padding: var(--ck-space-3);
}
.ck-cascade__pane + .ck-cascade__pane { border-left: 1px solid var(--border); }

/* ── Выбор цвета (ColorPicker) ───────────────────────────── */

.ck-color {
  display: inline-flex;
  align-items: center;
  gap: var(--ck-space-4);
  height: var(--ck-control-md);
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  font-size: var(--ck-text-sm);
  color: var(--text);
}

.ck-color input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.ck-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.ck-color input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }

.ck-color-presets { display: flex; gap: var(--ck-space-3); flex-wrap: wrap; }
.ck-color-presets__swatch {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}
.ck-color-presets__swatch--on {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Календарь (Calendar / DatePicker) ───────────────────── */

.ck-calendar {
  width: 280px;
  padding: var(--ck-space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.ck-calendar--pop { box-shadow: var(--ck-shadow-md); }

.ck-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-space-4);
  margin-bottom: var(--ck-space-4);
}

.ck-calendar__month { font-size: var(--ck-text-md); font-weight: var(--ck-weight-semibold); }

.ck-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.ck-calendar__dow {
  text-align: center;
  font-size: var(--ck-text-xs);
  color: var(--text-dim);
  padding: 4px 0;
}

.ck-calendar__day {
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--ck-text-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--transition);
}
.ck-calendar__day:hover { background: var(--hover-bg); }
.ck-calendar__day--out { color: var(--text-dim); }
.ck-calendar__day--today { border-color: var(--accent-border); color: var(--accent); font-weight: var(--ck-weight-semibold); }
.ck-calendar__day--sel,
.ck-calendar__day--sel:hover { background: var(--accent); color: #fff; }
.ck-calendar__day--range,
.ck-calendar__day--range:hover { background: var(--accent-bg); color: var(--accent); border-radius: 0; }
.ck-calendar__day:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; }

/* ── Форма (Form) ────────────────────────────────────────── */

.ck-form { display: grid; gap: var(--ck-space-7); }

/* Горизонтальная раскладка: подпись слева */
.ck-form-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--ck-space-6);
  align-items: start;
}
.ck-form-row > .ck-label { padding-top: 9px; text-align: right; }

@media (max-width: 560px) {
  .ck-form-row { grid-template-columns: 1fr; gap: var(--ck-space-3); }
  .ck-form-row > .ck-label { padding-top: 0; text-align: left; }
}

/* Обязательное поле */
.ck-label--req::after { content: ' *'; color: var(--danger); }

/* ── Числовое поле (InputNumber) ─────────────────────────── */

.ck-number {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden;
}
.ck-number:focus-within { border-color: var(--accent); box-shadow: var(--ck-focus-ring); }

.ck-number__btn {
  width: 30px;
  border: none;
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.ck-number__btn:hover { background: var(--hover-bg-strong); color: var(--text); }
.ck-number__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ck-number input {
  width: 56px;
  height: calc(var(--ck-control-md) - 2px);
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--ck-text-md);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ck-number input::-webkit-outer-spin-button,
.ck-number input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ck-number input:focus { outline: none; }

/* ── Оценка (Rate) ───────────────────────────────────────── */

.ck-rate { display: inline-flex; gap: var(--ck-space-1); }

.ck-rate__star {
  padding: 2px;
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  transition: color var(--transition), transform var(--transition);
}
.ck-rate__star:hover { transform: scale(1.12); }
.ck-rate__star--on { color: var(--warning); }
.ck-rate__star--on .ck-icon { fill: currentColor; }
.ck-rate--readonly .ck-rate__star { cursor: default; }
.ck-rate--readonly .ck-rate__star:hover { transform: none; }

/* ── Ползунок (Slider) ───────────────────────────────────── */

.ck-slider {
  width: 100%;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
}
.ck-slider:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Перенос между списками (Transfer) ───────────────────── */

.ck-transfer { display: flex; align-items: center; gap: var(--ck-space-5); }

.ck-transfer__panel {
  width: 200px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  overflow: hidden;
}

.ck-transfer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ck-space-4) var(--ck-space-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--ck-text-sm);
  font-weight: var(--ck-weight-medium);
}
.ck-transfer__count { color: var(--text-muted); font-weight: var(--ck-weight-normal); }

.ck-transfer__list {
  max-height: 200px;
  overflow-y: auto;
  padding: var(--ck-space-3);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ck-transfer__list .ck-check {
  padding: 5px 7px;
  border-radius: 8px;
}
.ck-transfer__list .ck-check:hover { background: var(--hover-bg); }

.ck-transfer__ops { display: flex; flex-direction: column; gap: var(--ck-space-4); }

/* ── Дерево (Tree / TreeSelect) ──────────────────────────── */

.ck-tree { display: flex; flex-direction: column; gap: 1px; font-size: var(--ck-text-md); }

.ck-tree details { }
.ck-tree summary { list-style: none; }
.ck-tree summary::-webkit-details-marker { display: none; }

.ck-tree__row {
  display: flex;
  align-items: center;
  gap: var(--ck-space-3);
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition);
}
.ck-tree__row:hover { background: var(--hover-bg); }
.ck-tree__row--sel,
.ck-tree__row--sel:hover { background: var(--accent-bg); color: var(--accent); }

.ck-tree__caret {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform var(--transition);
}
.ck-tree details[open] > summary .ck-tree__caret { transform: rotate(90deg); }
.ck-tree__caret--leaf { visibility: hidden; }

.ck-tree__children { padding-left: 22px; display: flex; flex-direction: column; gap: 1px; }

/* ── Аватар (Avatar) ─────────────────────────────────────── */

.ck-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: var(--ck-text-sm);
  font-weight: var(--ck-weight-semibold);
  overflow: visible;
}
.ck-avatar img,
.ck-avatar .ck-avatar__fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  overflow: hidden;
}

.ck-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.ck-avatar--lg { width: 40px; height: 40px; font-size: var(--ck-text-md); }
.ck-avatar--xl { width: 56px; height: 56px; font-size: var(--ck-text-xl); }
.ck-avatar--square { border-radius: var(--radius-sm); }

/* Точка статуса */
.ck-avatar__dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--card);
  background: var(--text-dim);
}
.ck-avatar__dot--online { background: var(--success); }
.ck-avatar__dot--busy { background: var(--danger); }

/* Группа с наложением */
.ck-avatar-group { display: inline-flex; }
.ck-avatar-group .ck-avatar {
  border: 2px solid var(--card);
  margin-left: -8px;
}
.ck-avatar-group .ck-avatar:first-child { margin-left: 0; }
.ck-avatar-group .ck-avatar--rest { background: var(--surface-3); color: var(--text-muted); }

/* ── Карусель (Carousel) ─────────────────────────────────── */

.ck-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--radius);
  scrollbar-width: none;
}
.ck-carousel::-webkit-scrollbar { display: none; }

.ck-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ck-carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--ck-space-3);
  margin-top: var(--ck-space-4);
}
.ck-carousel-dots__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background var(--transition), width var(--transition);
}
.ck-carousel-dots__dot--on { width: 16px; border-radius: 3px; background: var(--accent); }

/* ── Свёртка (Collapse) ──────────────────────────────────── */

.ck-collapse {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

.ck-collapse__item + .ck-collapse__item { border-top: 1px solid var(--border); }

.ck-collapse__head {
  display: flex;
  align-items: center;
  gap: var(--ck-space-4);
  padding: var(--ck-space-5) var(--ck-space-7);
  font-size: var(--ck-text-md);
  font-weight: var(--ck-weight-medium);
  cursor: pointer;
  list-style: none;
  transition: background var(--transition);
}
.ck-collapse__head:hover { background: var(--hover-bg); }
.ck-collapse__head::-webkit-details-marker { display: none; }

.ck-collapse__caret {
  display: inline-flex;
  color: var(--text-dim);
  transition: transform var(--transition);
}
.ck-collapse__item[open] > .ck-collapse__head .ck-collapse__caret { transform: rotate(90deg); }

.ck-collapse__body {
  padding: 0 var(--ck-space-7) var(--ck-space-6) 38px;
  font-size: var(--ck-text-md);
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── Описания (Descriptions) ─────────────────────────────── */

.ck-desc {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--ck-space-3) var(--ck-space-8);
  font-size: var(--ck-text-md);
}

.ck-desc__label { color: var(--text-muted); }
.ck-desc__value { color: var(--text); min-width: 0; }

/* С рамкой — таблично */
.ck-desc--bordered {
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ck-desc--bordered .ck-desc__label,
.ck-desc--bordered .ck-desc__value { padding: var(--ck-space-4) var(--ck-space-6); }
.ck-desc--bordered .ck-desc__label {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
.ck-desc--bordered .ck-desc__label:not(:nth-child(1)),
.ck-desc--bordered .ck-desc__value:not(:nth-child(2)) { border-top: 1px solid var(--border); }

/* ── Изображение (Image) ─────────────────────────────────── */

.ck-img { display: inline-block; margin: 0; max-width: 100%; }

.ck-img img {
  display: block;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.ck-img figcaption {
  margin-top: var(--ck-space-3);
  font-size: var(--ck-text-xs);
  color: var(--text-muted);
  text-align: center;
}

/* Заглушка, когда картинка не загрузилась */
.ck-img--error {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ck-space-3);
  width: 160px;
  height: 120px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: var(--ck-text-xs);
}

/* ── Список (List) ───────────────────────────────────────── */

.ck-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

.ck-list__item {
  display: flex;
  align-items: center;
  gap: var(--ck-space-5);
  padding: var(--ck-space-5) var(--ck-space-7);
  transition: background var(--transition);
}
.ck-list__item:hover { background: var(--hover-bg); }
.ck-list__item + .ck-list__item { border-top: 1px solid var(--border); }

.ck-list__body { flex: 1; min-width: 0; }
.ck-list__title { font-size: var(--ck-text-md); font-weight: var(--ck-weight-medium); }
.ck-list__desc {
  margin-top: 1px;
  font-size: var(--ck-text-sm);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ck-list__extra { flex-shrink: 0; display: flex; align-items: center; gap: var(--ck-space-2); }

/* ── Поповер и подтверждение (Popover / Popconfirm) ──────── */
/* Открытие по клику — через механику .ck-menu (data-menu). */

.ck-menu__pop--pad { padding: var(--ck-space-6); width: 280px; }

.ck-pop__title {
  font-size: var(--ck-text-md);
  font-weight: var(--ck-weight-semibold);
  margin-bottom: var(--ck-space-3);
}
.ck-pop__body { font-size: var(--ck-text-sm); color: var(--text-muted); line-height: 1.5; }

.ck-popconfirm { width: 260px; }
.ck-popconfirm__row { display: flex; gap: var(--ck-space-4); align-items: flex-start; }
.ck-popconfirm__icon { flex-shrink: 0; color: var(--warning); padding-top: 1px; }
.ck-popconfirm__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ck-space-3);
  margin-top: var(--ck-space-5);
}

/* ── QR-код (QRCode) ─────────────────────────────────────── */
/* Кит не генерирует QR — картинку отдаёт сервер; здесь рамка и состояния. */

.ck-qr {
  position: relative;
  width: 160px;
  padding: var(--ck-space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff; /* QR обязан оставаться контрастным и в тёмной теме */
  display: inline-flex;
}
.ck-qr img, .ck-qr svg { width: 100%; height: auto; display: block; }

.ck-qr__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ck-space-3);
  border-radius: inherit;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(2px);
  font-size: var(--ck-text-sm);
  color: var(--text);
}

/* ── Показатель (Statistic) ──────────────────────────────── */

.ck-stat { display: flex; flex-direction: column; gap: var(--ck-space-2); }

.ck-stat__label { font-size: var(--ck-text-sm); color: var(--text-muted); }

.ck-stat__value {
  display: flex;
  align-items: baseline;
  gap: var(--ck-space-3);
  font-size: 24px;
  font-weight: var(--ck-weight-semibold);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.ck-stat__unit { font-size: var(--ck-text-md); color: var(--text-muted); font-weight: var(--ck-weight-normal); }

.ck-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--ck-text-sm);
  font-weight: var(--ck-weight-semibold);
}
.ck-stat__delta--up { color: var(--success); }
.ck-stat__delta--down { color: var(--danger); }

/* ── Лента времени (Timeline) ────────────────────────────── */

.ck-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 6px;
}

.ck-timeline__item {
  position: relative;
  padding: 0 0 var(--ck-space-7) 22px;
  border-left: 2px solid var(--border);
}
.ck-timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }

.ck-timeline__dot {
  position: absolute;
  left: -6px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--card);
}
.ck-timeline__dot--success { border-color: var(--success); background: var(--success); }
.ck-timeline__dot--danger { border-color: var(--danger); }
.ck-timeline__dot--muted { border-color: var(--text-dim); }

.ck-timeline__time { font-size: var(--ck-text-xs); color: var(--text-dim); }
.ck-timeline__title { font-size: var(--ck-text-md); font-weight: var(--ck-weight-medium); }
.ck-timeline__body { font-size: var(--ck-text-sm); color: var(--text-muted); margin-top: 1px; }

/* ── Знакомство с интерфейсом (Tour) ─────────────────────── */

.ck-tour {
  width: 300px;
  padding: var(--ck-space-6) var(--ck-space-7);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--ck-shadow-lg);
}

.ck-tour__step {
  font-size: var(--ck-text-xs);
  font-weight: var(--ck-weight-semibold);
  color: var(--accent);
  margin-bottom: var(--ck-space-2);
}
.ck-tour__title { font-size: var(--ck-text-lg); font-weight: var(--ck-weight-semibold); }
.ck-tour__body { margin-top: var(--ck-space-2); font-size: var(--ck-text-md); color: var(--text-muted); line-height: 1.5; }
.ck-tour__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-space-4);
  margin-top: var(--ck-space-6);
}

/* Подсвеченная цель шага */
.ck-tour-target {
  position: relative;
  z-index: var(--ck-z-modal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-sm);
}

/* ── Оповещение (Alert) ──────────────────────────────────── */

.ck-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ck-space-5);
  padding: var(--ck-space-5) var(--ck-space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--ck-text-md);
  color: var(--text);
}

.ck-alert__icon { flex-shrink: 0; padding-top: 1px; }
.ck-alert__content { flex: 1; min-width: 0; }
.ck-alert__title { font-weight: var(--ck-weight-semibold); }
.ck-alert__desc { margin-top: 2px; font-size: var(--ck-text-sm); color: var(--text-muted); line-height: 1.5; }

.ck-alert__close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ck-alert__close:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }

.ck-alert--info    { background: var(--accent-bg);  border-color: var(--accent-border); }
.ck-alert--info .ck-alert__icon { color: var(--accent); }
.ck-alert--success { background: var(--accent-bg);  border-color: var(--accent-border); }
.ck-alert--success .ck-alert__icon { color: var(--success); }
.ck-alert--warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.ck-alert--warning .ck-alert__icon { color: var(--warning); }
.ck-alert--danger  { background: var(--danger-bg);  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.ck-alert--danger .ck-alert__icon { color: var(--danger); }

/* ── Выдвижная панель (Drawer) ───────────────────────────── */
/* Работает с тем же .ck-backdrop и атрибутом hidden, что и модальное окно. */

.ck-backdrop--end { justify-content: flex-end; padding: 0; }
.ck-backdrop--start { justify-content: flex-start; padding: 0; }

.ck-drawer {
  display: flex;
  flex-direction: column;
  width: min(380px, 92vw);
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--ck-shadow-lg);
  animation: ck-drawer-in 200ms ease-out;
}
.ck-backdrop--start .ck-drawer {
  border-left: none;
  border-right: 1px solid var(--border);
  animation-name: ck-drawer-in-l;
}

@keyframes ck-drawer-in { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes ck-drawer-in-l { from { transform: translateX(-24px); opacity: 0.6; } to { transform: none; opacity: 1; } }

.ck-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ck-space-4);
  padding: var(--ck-space-7) var(--ck-space-8);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ck-drawer__title { margin: 0; font-size: var(--ck-text-xl); font-weight: var(--ck-weight-semibold); }
.ck-drawer__body { flex: 1; overflow-y: auto; padding: var(--ck-space-7) var(--ck-space-8); }
.ck-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ck-space-4);
  padding: var(--ck-space-6) var(--ck-space-8);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) { .ck-drawer { animation: none; } }

/* ── Лёгкое сообщение (Message) ──────────────────────────── */
/* Короткий отклик на действие; для содержательных уведомлений — .ck-toast. */

.ck-messages {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--ck-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ck-space-4);
  pointer-events: none;
}

.ck-message {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--ck-space-4);
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--ck-radius-pill);
  background: var(--card);
  box-shadow: var(--ck-shadow-md);
  font-size: var(--ck-text-md);
  color: var(--text);
  animation: ck-message-in 160ms ease-out;
}

@keyframes ck-message-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .ck-message { animation: none; } }

/* ── Итог (Result) ───────────────────────────────────────── */

.ck-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ck-space-4);
  padding: var(--ck-space-10);
  text-align: center;
}

.ck-result__icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-muted);
  margin-bottom: var(--ck-space-2);
}
.ck-result__icon--success { background: var(--accent-bg); color: var(--success); }
.ck-result__icon--error   { background: var(--danger-bg); color: var(--danger); }
.ck-result__icon--warning { background: var(--warning-bg); color: var(--warning); }
.ck-result__icon--info    { background: var(--accent-bg); color: var(--accent); }

.ck-result__title { font-size: var(--ck-text-2xl); font-weight: var(--ck-weight-semibold); }
.ck-result__subtitle { max-width: 380px; font-size: var(--ck-text-md); color: var(--text-muted); line-height: 1.5; }
.ck-result__actions { display: flex; gap: var(--ck-space-4); margin-top: var(--ck-space-4); }

/* ── Водяной знак (Watermark) ────────────────────────────── */
/* Текст задаётся SVG-картинкой в переменной --ck-watermark-image
   (инлайн-стилем): CSS не умеет параметризовать текст сам. */

.ck-watermark { position: relative; }

.ck-watermark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--ck-z-base);
  pointer-events: none;
  background-image: var(--ck-watermark-image);
  background-repeat: repeat;
  opacity: 0.5;
}

/* ── Прилипание (Affix) ──────────────────────────────────── */

.ck-affix {
  position: sticky;
  top: var(--ck-affix-top, 8px);
  z-index: var(--ck-z-sticky);
}

/* ── Анимированная рамка (BorderBeam) ────────────────────── */
/* Декоративный бегущий блик по границе — для акцентных карточек. */

@property --ck-beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.ck-beam { position: relative; }

.ck-beam::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: var(--ck-z-base);
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--ck-beam-angle),
              transparent 0 78%, var(--accent) 88%, transparent 98%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: ck-beam-spin 3.2s linear infinite;
}

@keyframes ck-beam-spin { to { --ck-beam-angle: 360deg; } }

@media (prefers-reduced-motion: reduce) { .ck-beam::before { animation: none; } }

/* ── Скрытое для глаз, видимое диктору (Util) ────────────── */

.ck-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}