/* components.css — стили базовых компонентов дизайн-системы.
   Каждый класс соответствует компоненту из src/shared/ui.
   Утверждённый здесь вид компонента — обязателен для всех контуров. */

/* --------------- Button — принят из Figma Button (Godji) ---------------
   Type: Primary / Secondary / Tertiary / Text / Link / Dashed
   Size: S(32) / M(40) / L(48), radius 8, gap 8 */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  line-height: 1;
  padding: 0 var(--sp-4);          /* CONTROL_PADDING_X = 16px */
  height: var(--h-md);             /* CONTROL_HEIGHT_DEFAULT = 34px */
  min-height: var(--h-md);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--t-fast), border-color var(--t-fast),
    color var(--t-fast), box-shadow var(--t-base), transform var(--t-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
/* press: только лёгкий возврат вниз, БЕЗ изменения размера кнопки */
.btn:active:not(:disabled) { transform: translateY(0); transition-duration: 60ms; filter: brightness(0.96); }
.btn:disabled { cursor: not-allowed; opacity: 0.65; }
/* small (служебные): 32px, padding 12, radius 10, gap 6 */
.btn--sm { height: var(--h-sm); min-height: var(--h-sm); padding: 0 var(--sp-3); border-radius: var(--r-sm); gap: 6px; }
.btn--lg { height: var(--h-lg); padding: 0 var(--sp-6); font-size: var(--fs-lg); }
/* icon-only: квадрат 32×32, radius 10 (CONTROL_HEIGHT_ICON) */
.btn--icon { padding: 0; width: var(--h-sm); height: var(--h-sm); min-width: var(--h-sm); min-height: var(--h-sm); border-radius: var(--r-sm); }
.btn--icon.btn--sm { width: var(--h-sm); }
.btn--block { width: 100%; }

/* «Shine» — световой проблеск по кнопке на hover */
.btn--primary::after,
.btn--ai::after,
.btn--danger::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn--primary:hover:not(:disabled)::after,
.btn--ai:hover:not(:disabled)::after,
.btn--danger:hover:not(:disabled)::after { left: 130%; }

/* Primary — бренд-зелёный + glow */
.btn--primary {
  background: var(--c-brand);
  color: #ffffff;
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover:not(:disabled) { background: var(--c-brand-hover); box-shadow: 0 10px 22px var(--c-brand-glow); }
.btn--primary:disabled { background: var(--c-inset); color: var(--c-ink-300); box-shadow: none; }

/* AI — индиго (для AI-оркестратора) */
.btn--ai {
  background: var(--c-ai);
  color: #fff;
  box-shadow: 0 6px 16px rgba(47, 109, 240, 0.28);
}
.btn--ai:hover:not(:disabled) { background: var(--c-ai-hover); box-shadow: 0 10px 22px rgba(47, 109, 240, 0.3); }

/* Secondary — outline */
.btn--secondary {
  background: var(--bg-surface);
  border-color: var(--c-line-3);
  color: var(--c-ink-800);
}
.btn--secondary:hover:not(:disabled) { border-color: var(--c-ink-800); }
.btn--secondary:disabled { border-color: var(--c-line); color: var(--c-ink-300); background: var(--c-surface-2); }

/* Tertiary — мягкая бренд-заливка */
.btn--tertiary {
  background: var(--c-brand-soft);
  color: var(--c-brand);
}
.btn--tertiary:hover:not(:disabled) { background: #d6efdf; }
.btn--tertiary:disabled { background: var(--c-inset); color: var(--c-ink-300); }

/* Text — призрачная, hover #f5f5f5 */
.btn--ghost,
.btn--text { background: transparent; color: var(--c-ink-800); }
.btn--ghost:hover:not(:disabled),
.btn--text:hover:not(:disabled) { background: var(--c-hover); }
.btn--ghost:disabled, .btn--text:disabled { color: var(--c-ink-300); }

/* Link — красный текст */
.btn--link { background: transparent; color: var(--c-brand); padding: 0 var(--sp-1); }
.btn--link:hover:not(:disabled) { color: var(--c-brand-hover); text-decoration: underline; }
.btn--link:disabled { color: var(--c-ink-300); }

/* Dashed — пунктирная рамка */
.btn--dashed {
  background: var(--bg-surface);
  border: 1px dashed var(--c-ink-400);
  color: var(--c-ink-800);
}
.btn--dashed:hover:not(:disabled) { border-color: var(--c-ink-800); }
.btn--dashed:disabled { border-color: var(--c-line-3); color: var(--c-ink-300); }

/* Danger — solid red */
.btn--danger { background: var(--c-danger); color: #fff; box-shadow: 0 6px 16px rgba(201, 53, 53, 0.26); }
.btn--danger:hover:not(:disabled) { background: var(--c-danger-strong); box-shadow: 0 10px 22px rgba(201, 53, 53, 0.3); }

/* Loading-состояние: текст гаснет, по центру спиннер */
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading > * { opacity: 0; }
.btn.is-loading::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: ez-spin 0.6s linear infinite;
}
.btn--secondary.is-loading::before,
.btn--ghost.is-loading::before,
.btn--dashed.is-loading::before,
.btn--text.is-loading::before { color: var(--c-brand); }

/* ------------------------------- Card ------------------------------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.card--hover { transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base); }
.card--hover:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.card__header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.card__body { padding: var(--sp-5); }
.card__footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border-default);
  background: var(--bg-surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* --------------------------- Stat / KPI card --------------------------- */
.stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-xs);
}
.stat__label {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fw-medium);
}
.stat__value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin-top: var(--sp-2);
}
.stat__delta { font-size: var(--fs-sm); margin-top: var(--sp-1); }
.stat__delta--up { color: var(--c-success); }
.stat__delta--down { color: var(--c-danger); }

/* ---- Карточка-метрика (Metric) с выравниванием по ряду ----
   Карта растягивается на высоту ряда (grid align stretch), метка фиксирует
   высоту до 2 строк → значения на одной линии, бейдж-подпись прижат к низу
   → все бейджи в ряду выровнены. Используется на /mail-infra и др. */
.mi-metric { display: flex; flex-direction: column; height: 100%; }
.mi-metric__body { display: flex; flex-direction: column; height: 100%; }
.mi-metric__label {
  min-height: 2.5em;            /* до двух строк метки — значения выравниваются */
  display: flex;
  align-items: flex-start;
  margin: 0;
}
.mi-metric .stat__value { margin-top: var(--sp-1); }
.mi-metric__sub { margin-top: auto; padding-top: var(--sp-3); }
.mi-metric__sub .tag { max-width: 100%; white-space: normal; }  /* длинная подпись переносится, не обрезается */

/* ------------------------------- Badge ------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 2px 8px;
  border-radius: var(--r-full);
  line-height: 1.5;
  white-space: nowrap;
}
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: currentColor;
}
.badge--neutral { background: var(--c-bg); color: var(--c-ink-500); }
.badge--success { background: var(--c-success-bg); color: var(--c-success); }
.badge--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.badge--danger { background: var(--c-danger-bg); color: var(--c-danger); }
.badge--info { background: var(--c-info-bg); color: var(--c-info); }
.badge--accent { background: var(--c-accent-50); color: var(--accent); }

/* statuses (data-driven via inline color) */
.badge--status { color: var(--fg-on-accent); }

/* ------------------------------- Tabs ------------------------------- */
.tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--sp-5);
}
.tab {
  appearance: none;
  background: none;
  border: none;
  /* компактная высота таба = стандарт 34px (8px + текст + 8px), не раздувает шапку */
  padding: var(--sp-2) var(--sp-3);
  min-height: var(--h-md);
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--fg-default); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* segmented control */
.segmented {
  display: inline-flex;
  align-items: stretch;
  height: var(--h-md);              /* CONTROL_HEIGHT_DEFAULT = 34px */
  background: var(--bg-inset);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}
.segmented__item {
  appearance: none;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.segmented__item.is-active {
  background: var(--bg-surface);
  color: var(--fg-default);
  box-shadow: var(--shadow-xs);
}

/* ---------------------------- Form controls ---------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--fg-default);
}
.field__hint { font-size: var(--fs-sm); color: var(--fg-muted); }

/* Input — принят из Figma Input-Mine-Element: border #e0e0e0, r=10, h=40,
   focus → синий #214fe2 + кольцо */
.input,
.select,
.textarea {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);        /* CONTROL_RADIUS = 12px (как у кнопок/селекта) */
  padding: 0 var(--sp-4);            /* CONTROL_PADDING_X = 16px */
  height: var(--h-md);               /* CONTROL_HEIGHT_DEFAULT = 34px */
  min-height: var(--h-md);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--fg-default);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { height: auto; min-height: 96px; padding: 14px var(--sp-4); line-height: 1.5; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--c-ink-300); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-line-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--ring);
}
/* select: своя стрелка вместо нативной, чтобы не выбивался из стиля */
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6a64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

.input--with-icon { padding-left: 34px; }
.input-wrap { position: relative; }
.input-wrap__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-subtle);
  pointer-events: none;
}

.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch__track {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: var(--r-full);
  transition: background var(--t-fast);
}
.switch__track::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: var(--r-full);
  transition: transform var(--t-fast);
  box-shadow: var(--shadow-xs);
}
/* Switch ON — зелёный #34c759 (из Figma Switch/Active=True) */
.switch input:checked + .switch__track { background: var(--c-success); }
.switch input:checked + .switch__track::before { transform: translateX(16px); }

.checkbox {
  width: 18px;
  height: 18px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  flex-shrink: 0;
}
.checkbox.is-checked { background: var(--accent); border-color: var(--accent); }

/* ------------------------------- Table ------------------------------- */
.table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.table thead th {
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--bg-hover); }
.table--compact tbody td, .table--compact thead th { padding: var(--sp-2) var(--sp-3); }

/* ------------------------------- Modal ------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.5);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  z-index: var(--z-modal);
}
.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal__header {
  padding: var(--sp-5);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal--lg { max-width: 760px; }
.modal--xl { max-width: 1040px; }
/* tall — фиксированная высота рабочего окна: не «прыгает» при переключении
   вкладок (контент короче — окно НЕ сжимается; длиннее — скроллится тело). */
.modal--tall { height: min(86vh, 820px); }
/* тело занимает всю высоту → футер прижат к низу, контент скроллится внутри */
.modal--tall .modal__body { flex: 1 1 auto; }
/* min-height:0 — чтобы flex-тело реально сжималось и скроллилось внутри окна,
   а не растягивало модалку/страницу вниз (рабочие окна с табами). */
.modal__body { padding: var(--sp-5); overflow-y: auto; min-height: 0; }
.modal__footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* Drawer */
.drawer-overlay { position: fixed; inset: 0; background: rgba(2,6,23,0.5); z-index: var(--z-modal); }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 92vw);
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
}
.drawer__header { padding: var(--sp-5); border-bottom: 1px solid var(--border-default); display:flex; align-items:center; justify-content:space-between; }
.drawer__body { padding: var(--sp-5); overflow-y: auto; flex: 1 1 auto; }

/* ------------------------------- Alert ------------------------------- */
.alert {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  font-size: var(--fs-md);
}
.alert__icon { flex-shrink: 0; margin-top: 1px; }
.alert--info { background: var(--c-info-bg); border-color: transparent; color: var(--c-info); }
.alert--success { background: var(--c-success-bg); border-color: transparent; color: var(--c-success); }
.alert--warning { background: var(--c-warning-bg); border-color: transparent; color: var(--c-warning); }
.alert--danger { background: var(--c-danger-bg); border-color: transparent; color: var(--c-danger); }
.alert__title { font-weight: var(--fw-semibold); }
.alert__body { color: var(--fg-default); }

/* ------------------------- Skeleton / Empty ------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-inset) 25%, var(--bg-hover) 50%, var(--bg-inset) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-12) var(--sp-6);
  color: var(--fg-muted);
}
.empty__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  background: var(--bg-inset);
  color: var(--fg-subtle);
}

/* ----------------------------- ЗАГЛУШКА бейдж ----------------------------- */
/* По правилу проекта: данные на mock должны быть видимо помечены. */
.stub-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--c-warning);
  background: repeating-linear-gradient(
    45deg,
    var(--c-warning-bg),
    var(--c-warning-bg) 6px,
    transparent 6px,
    transparent 12px
  );
  border: 1px dashed var(--c-warning);
  border-radius: var(--r-sm);
  padding: 1px 7px;
}

/* ------------------------------- Misc ------------------------------- */
.divider { height: 1px; background: var(--border-default); margin: var(--sp-5) 0; }
.kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: var(--bg-inset);
  border: 1px solid var(--border-default);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  padding: 1px 5px;
  color: var(--fg-muted);
}
.swatch {
  height: 56px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
}
.token-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border-default);
  font-size: var(--fs-base);
}
.token-row:last-child { border-bottom: none; }

.meta-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-md);
}
.meta-grid dt { color: var(--fg-muted); }
.meta-grid dd { color: var(--fg-default); }

.progress {
  height: 6px;
  background: var(--bg-inset);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-full);
  transition: width var(--t-base);
}

/* ------------------- Steps — принят из Figma Steps ------------------- */
.steps { display: flex; align-items: flex-start; }
.step { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; position: relative; }
.step__dot {
  width: 28px; height: 28px; border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  background: var(--bg-surface); border: 1.5px solid var(--c-line-3);
  color: var(--c-ink-400); z-index: 1;
}
.step__label { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--fg-muted); text-align: center; }
.step__line {
  position: absolute; top: 14px; left: 50%; right: -50%; height: 2px;
  background: var(--c-line); z-index: 0;
}
.step:last-child .step__line { display: none; }
.step.is-done .step__dot { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.step.is-done .step__line { background: var(--c-brand); }
.step.is-active .step__dot { border-color: var(--c-brand); color: var(--c-brand); }
.step.is-active .step__label, .step.is-done .step__label { color: var(--c-ink-800); }

/* ---------------- Status Tag — принят из Figma Tags ---------------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 24px; padding: 0 var(--sp-2);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  border: 1px solid transparent; white-space: nowrap;
}
.tag--draft   { border-color: var(--c-line); color: var(--c-ink-500); background: var(--bg-surface); }
.tag--neutral { background: var(--c-bg); color: var(--c-ink-700); }
.tag--info    { background: var(--c-info-bg); color: var(--c-blue); }
.tag--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.tag--success { background: var(--c-success-bg); color: #1f9d4d; }
.tag--danger  { background: var(--c-danger-bg); color: var(--c-danger); }

/* ============================================================================
   АНИМАЦИИ — «оживляж». Кнопки/иконки/загрузки/появление.
   ============================================================================ */
@keyframes ez-spin { to { transform: rotate(360deg); } }
@keyframes ez-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ez-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes ez-pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes ez-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ez-bounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-3px); } 60% { transform: translateY(-1px); } }
@keyframes ez-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ez-bar-grow { from { transform: scaleY(0.05); } }
@keyframes ez-ring { 0% { box-shadow: 0 0 0 0 var(--c-brand-glow); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ------------------------------- Spinner ------------------------------- */
.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid var(--c-line-2);
  border-top-color: var(--c-brand);
  border-radius: 50%;
  animation: ez-spin 0.6s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
.spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.spinner--lg { width: 28px; height: 28px; border-width: 3px; }
.spinner--ai { border-top-color: var(--c-ai); }
.spinner--white { border-color: rgba(255,255,255,.35); border-top-color: #fff; }

/* Точки-загрузка (по смыслу — «думает/печатает») */
.dots { display: inline-flex; gap: 4px; align-items: center; }
.dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-brand);
  animation: ez-pulse 1s ease-in-out infinite;
}
.dots span:nth-child(2) { animation-delay: 0.16s; }
.dots span:nth-child(3) { animation-delay: 0.32s; }

/* Загрузочная панель (indeterminate bar) */
.loadbar { height: 3px; background: var(--c-line); border-radius: var(--r-full); overflow: hidden; position: relative; }
.loadbar::before {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: var(--c-brand); border-radius: var(--r-full);
  animation: ez-loadbar 1.1s ease-in-out infinite;
}
@keyframes ez-loadbar { 0% { left: -40%; } 100% { left: 100%; } }

/* ----------------- Осмысленные анимации иконок ----------------- */
.anim-spin { animation: ez-spin 1s linear infinite; }           /* загрузка/синк */
.anim-spin-slow { animation: ez-spin 3s linear infinite; }
.anim-pulse { animation: ez-pulse 1.6s ease-in-out infinite; }  /* ожидание */
.anim-breathe { animation: ez-breathe 2.4s ease-in-out infinite; }
.anim-float { animation: ez-float 3s ease-in-out infinite; }
.anim-bounce { animation: ez-bounce 1.4s ease infinite; }       /* «новое» */
.anim-pop { animation: ez-pop var(--t-spring) both; }           /* успех/появление */
.hover-spin:hover svg { animation: ez-spin 0.7s ease; }         /* refresh по hover */

/* Live-точка (пульсирующий статус) */
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--c-brand); flex-shrink: 0; }
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--c-brand); animation: ez-ring 1.8s ease-out infinite;
}
.live-dot--danger { background: var(--c-danger); }
.live-dot--danger::after { background: var(--c-danger); box-shadow: 0 0 0 0 rgba(201,53,53,.4); }
.live-dot--warning { background: var(--c-warning); }

/* ----------------- Появление страницы (stagger) ----------------- */
.page__inner > * { animation: ez-fade-up 0.42s var(--t-base) both; }
.page__inner > *:nth-child(2) { animation-delay: 0.04s; }
.page__inner > *:nth-child(3) { animation-delay: 0.08s; }
.page__inner > *:nth-child(4) { animation-delay: 0.12s; }
.page__inner > *:nth-child(5) { animation-delay: 0.16s; }
.page__inner > *:nth-child(n+6) { animation-delay: 0.2s; }

/* Карточки богаче на hover */
.card--hover { transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base); }
.card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--c-line-3); }

/* Мини-бар-чарт (sparkbars) */
.sparkbars { display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.sparkbars span {
  flex: 1; background: var(--c-brand-soft); border-radius: 3px 3px 0 0;
  transform-origin: bottom; animation: ez-bar-grow 0.5s var(--t-spring) both;
}
.sparkbars span.is-peak { background: var(--c-brand); }

/* Стрик-полоска (живой верх страницы) */
.beam {
  height: 3px; border-radius: var(--r-full); overflow: hidden;
  background: linear-gradient(90deg, var(--c-brand), var(--c-ai), var(--c-brand));
  background-size: 200% 100%;
  animation: ez-beam 4s linear infinite;
}
@keyframes ez-beam { to { background-position: 200% 0; } }

/* ============ Единый Select (кастомный popover) ============ */
.select-ctl {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; height: var(--h-md); min-height: var(--h-md); padding: 0 var(--sp-3) 0 var(--sp-4);
  background: var(--bg-surface); border: 1px solid var(--c-line-2); border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: var(--fs-md); color: var(--fg-default);
  cursor: pointer; text-align: left;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.select-ctl--sm { height: var(--h-sm); }
.select-ctl:hover:not(:disabled) { border-color: var(--c-line-3); }
.select-ctl.is-open, .select-ctl:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); }
.select-ctl:disabled { opacity: 0.55; cursor: not-allowed; }
.select-ctl__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-ctl__val.is-placeholder { color: var(--c-ink-400); }
.select-ctl__arrow { color: var(--c-ink-500); flex-shrink: 0; transition: transform var(--t-fast); }
.select-ctl.is-open .select-ctl__arrow { transform: rotate(180deg); }

.ds-select__menu {
  z-index: var(--z-dropdown);
  background: var(--bg-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 4px; max-height: 284px; overflow-y: auto;
  animation: ez-fade-in 0.12s ease both;
}
.ds-select__opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; padding: 8px 10px; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-md); color: var(--c-ink-800);
  border-radius: var(--r-sm); text-align: left;
  transition: background var(--t-fast);
}
.ds-select__opt:hover { background: var(--c-surface-2); }
.ds-select__opt.is-selected { background: var(--c-brand-soft); color: var(--c-brand); font-weight: var(--fw-medium); }
.ds-select__opt svg { color: var(--c-brand); flex-shrink: 0; }

/* ============ Единый SearchInput ============ */
.search-input { position: relative; display: inline-flex; align-items: center; width: 100%; height: var(--h-md); }
.search-input__icon { position: absolute; left: 12px; color: var(--c-ink-400); pointer-events: none; }
.search-input__field {
  width: 100%; height: var(--h-md); min-height: var(--h-md); padding: 0 var(--sp-4) 0 34px;
  background: var(--bg-surface); border: 1px solid var(--c-line-2); border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: var(--fs-md); color: var(--fg-default);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-input__field::placeholder { color: var(--c-ink-400); }
.search-input__field:hover { border-color: var(--c-line-3); }
.search-input__field:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); }
.search-input--sm .search-input__field { height: var(--h-sm); }

/* компактный pill-вариант Select (composer: режим «Спросить», модель) */
.ds-select__menu { min-width: 168px; }
.select-ctl--pill {
  width: auto; height: 30px; padding: 0 8px 0 11px;
  border-radius: var(--r-full); border-color: transparent;
  background: var(--c-surface-2); font-size: var(--fs-base); gap: 5px;
  font-weight: var(--fw-medium);
}
.select-ctl--pill:hover:not(:disabled) { background: var(--c-inset); border-color: transparent; }
.select-ctl--pill.is-open { background: var(--c-inset); box-shadow: none; border-color: transparent; }
.select-ctl--pill .select-ctl__val { display: inline-flex; align-items: center; gap: 5px; }
.select-ctl--pill .select-ctl__arrow { width: 13px; height: 13px; }
.select-ctl--ghost { background: transparent; }
.select-ctl--ghost:hover:not(:disabled) { background: var(--c-surface-2); }