/* Hide Chrome autofill overlay on token/credential inputs */
input[data-no-autofill]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-base-100) inset !important;
}

/* HTMX loading indicators */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-flex; }

/* HTMX swap transitions */
.htmx-swapping { opacity: 0; transition: opacity 150ms ease-out; }
.htmx-settling { opacity: 1; transition: opacity 150ms ease-in; }

html {
  overflow-x: hidden;
}

body {
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  overflow-x: hidden;
}

/* Заголовки и лого — Bricolage Grotesque (дисплейный гротеск UltimateAI).
   ВАЖНО: Bricolage Grotesque покрывает только latin/latin-ext/vietnamese и НЕ
   содержит кириллицы. Поэтому Manrope стоит сразу за ним: латиница (лого
   «UltimateAI», бренд-вордмарк) рендерится Bricolage, а кириллические заголовки
   по-глифовому падают на Manrope (полная кириллица) — консистентно во всех ОС,
   без скачка на системный шрифт. Если понадобится дисплейный шрифт и для
   кириллицы — заменить пару на Cyrillic-capable display (напр. Onest/Unbounded). */
h1,
h2,
h3,
h4,
.font-display,
.workspace-display,
.workspace-brand-title,
.auth-brand-title,
.auth-card-title {
  font-family: "Bricolage Grotesque", "Manrope", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* Числа-акценты (метрики, статы) — Manrope ExtraBold с табличными цифрами */
.font-numeric,
.stat-value {
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ===== Utility classes from redesign ===== */
/* Бренд-вордмарк UltimateAI — синий градиент из Figma (#2a59f7 → #668cf7),
   а не старый сине-фиолетово-розовый. */
.gradient-text {
  background: linear-gradient(90deg, #2a59f7 0%, #668cf7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glow-btn {
  box-shadow: 0 0 20px color-mix(in oklab, var(--color-primary) 25%, transparent);
  transition: all 0.3s ease;
}

.glow-btn:hover {
  box-shadow: 0 0 32px color-mix(in oklab, var(--color-primary) 40%, transparent);
  transform: translateY(-1px);
}

.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

/* ===== Soft focus for all form controls (redesign style) ===== */
/* Remove harsh black outline/border on focus — keep subtle existing border */
select:focus,
input:focus,
textarea:focus,
.select:focus,
.select:focus-within,
.input:focus,
.input:focus-within,
select,
input,
textarea {
  outline: none !important;
  outline-style: none !important;
  --tw-outline-style: none !important;
}

.select,
.input,
textarea.textarea {
  --input-color: color-mix(in oklab, var(--color-base-content) 15%, transparent);
}

.select:focus,
.select:focus-within,
.input:focus,
.input:focus-within,
textarea:focus {
  --input-color: color-mix(in oklab, var(--color-primary) 40%, transparent) !important;
  border-color: color-mix(in oklab, var(--color-primary) 40%, transparent) !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 10%, transparent) !important;
}

/* ===== Sidebar navigation ===== */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
  transition: all 0.15s ease;
}

.nav-link:hover {
  background: color-mix(in oklab, var(--color-base-content) 6%, transparent);
  color: var(--color-base-content);
}

.nav-link.active {
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

.nav-link .nav-badge {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 0.375rem;
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

.nav-link .nav-badge-coming {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 0.375rem;
  background: color-mix(in oklab, var(--color-warning) 15%, transparent);
  color: color-mix(in oklab, var(--color-warning) 80%, black 20%);
  letter-spacing: 0.02em;
}

/* ===== Auth screens ===== */
.auth-shell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at top left, color-mix(in oklab, var(--color-primary) 18%, transparent), transparent 28%),
    radial-gradient(circle at 82% 18%, color-mix(in oklab, var(--color-accent) 16%, transparent), transparent 24%),
    radial-gradient(circle at bottom right, color-mix(in oklab, var(--color-secondary) 16%, transparent), transparent 26%),
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-base-200) 88%, white 12%),
      var(--color-base-200)
    );
}

.auth-shell::before,
.auth-shell::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  filter: blur(72px);
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
}

.auth-shell::before {
  width: 26rem;
  height: 26rem;
  top: -8rem;
  left: -7rem;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--color-primary) 30%, transparent) 0%,
    transparent 70%
  );
}

.auth-shell::after {
  width: 30rem;
  height: 30rem;
  right: -10rem;
  bottom: -12rem;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--color-secondary) 28%, transparent) 0%,
    transparent 70%
  );
}

.auth-scene,
.auth-grid {
  position: relative;
}

.auth-scene::before,
.auth-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--color-base-content) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--color-base-content) 6%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 85%);
  pointer-events: none;
  z-index: -1;
}

.auth-topbar {
  position: relative;
  backdrop-filter: blur(18px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-base-100) 92%, transparent),
      color-mix(in oklab, var(--color-base-100) 82%, transparent)
    );
  box-shadow:
    0 16px 48px color-mix(in oklab, var(--color-base-content) 8%, transparent),
    inset 0 1px 0 color-mix(in oklab, white 38%, transparent);
}

.auth-layout,
.auth-hero,
.auth-form-card {
  width: 100%;
  min-width: 0;
}

.auth-brand-mark,
.auth-theme-toggle,
.auth-inline-note,
.auth-metric,
.auth-pillar {
  backdrop-filter: blur(16px);
}

.auth-body-text,
.auth-card-copy,
.auth-form,
.auth-footnote {
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
}

.auth-card {
  backdrop-filter: blur(22px);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-base-100) 92%, transparent),
    color-mix(in oklab, var(--color-base-100) 82%, transparent)
  );
  box-shadow:
    0 30px 80px color-mix(in oklab, var(--color-base-content) 18%, transparent),
    inset 0 1px 0 color-mix(in oklab, white 55%, transparent);
}

.auth-feature-card,
.auth-side-panel,
.auth-fieldset,
.auth-inline-note,
.auth-metric,
.auth-pillar {
  backdrop-filter: blur(14px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-base-100) 84%, transparent),
      color-mix(in oklab, var(--color-base-100) 74%, transparent)
    );
}

.auth-form-card {
  align-self: center;
  justify-self: stretch;
}

.auth-side-panel {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-base-100) 80%, transparent),
      color-mix(in oklab, var(--color-base-100) 68%, transparent)
    );
}

.auth-input {
  min-height: 3.5rem;
  padding-inline: 1rem;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.auth-input:focus,
.auth-input:focus-visible {
  border-color: color-mix(in oklab, var(--color-primary) 55%, var(--color-base-300));
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--color-primary) 14%, transparent),
    0 10px 26px color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

.auth-form .fieldset {
  gap: 0.5rem;
}

.auth-form .fieldset-legend {
  margin-bottom: 0.2rem;
}

.auth-form .label {
  margin-top: 0.15rem;
  line-height: 1.45;
}

.auth-submit {
  min-height: 3.5rem;
  letter-spacing: 0.02em;
  font-weight: 700;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-primary) 92%, white 8%),
    color-mix(in oklab, var(--color-secondary) 28%, var(--color-primary))
  );
  border: 1px solid color-mix(in oklab, var(--color-primary) 74%, white 26%);
  box-shadow: 0 18px 35px color-mix(in oklab, var(--color-primary) 24%, transparent);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.auth-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 22px 40px color-mix(in oklab, var(--color-primary) 30%, transparent);
}

.auth-submit:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--color-primary) 52%, transparent);
  outline-offset: 3px;
}

/* ===== Workspace (dashboard) ===== */
.workspace-shell {
  position: relative;
  min-height: 100vh;
}

.workspace-main {
  position: relative;
}

.workspace-page {
  position: relative;
  z-index: 1;
}

.workspace-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-base-content) 48%, transparent);
}

.workspace-panel,
.workspace-stat-card,
.workspace-step,
.workspace-dialog .modal-box {
  backdrop-filter: blur(20px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-base-100) 93%, transparent),
      color-mix(in oklab, var(--color-base-100) 84%, transparent)
    );
  box-shadow:
    0 22px 60px color-mix(in oklab, var(--color-base-content) 10%, transparent),
    inset 0 1px 0 color-mix(in oklab, white 45%, transparent);
}

.workspace-hero {
  overflow: hidden;
  position: relative;
}

.workspace-hero::after {
  content: "";
  position: absolute;
  inset: auto -4rem -6rem auto;
  width: 14rem;
  height: 14rem;
  border-radius: 9999px;
  background: radial-gradient(circle, color-mix(in oklab, var(--color-primary) 20%, transparent), transparent 68%);
  pointer-events: none;
}

/* Legacy nav-link styles (for pages that still use workspace-nav-link) */
.workspace-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 1rem;
  padding: 0.85rem 0.95rem;
  color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
  transition: background 150ms ease, transform 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.workspace-nav-link:hover {
  background: color-mix(in oklab, var(--color-base-200) 86%, transparent);
  color: var(--color-base-content);
  transform: translateX(2px);
}

.workspace-nav-link-active {
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-neutral) 90%, black 10%),
    color-mix(in oklab, var(--color-base-content) 86%, var(--color-neutral))
  );
  color: var(--color-neutral-content);
  box-shadow: 0 12px 28px color-mix(in oklab, var(--color-base-content) 18%, transparent);
}

.workspace-nav-link-active:hover {
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-neutral) 88%, black 12%),
    color-mix(in oklab, var(--color-base-content) 84%, var(--color-neutral))
  );
  color: var(--color-neutral-content);
  transform: none;
}

.workspace-project-card {
  position: relative;
  overflow: hidden;
}

.workspace-project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    color-mix(in oklab, var(--color-primary) 8%, transparent),
    transparent 34%,
    color-mix(in oklab, var(--color-secondary) 7%, transparent)
  );
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.workspace-project-card:hover::before {
  opacity: 1;
}

.workspace-channel-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.workspace-channel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px color-mix(in oklab, var(--color-base-content) 8%, transparent);
}

.workspace-channel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  flex-shrink: 0;
}

.workspace-tabs {
  isolation: isolate;
}

.workspace-tabs .tab {
  border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  background: color-mix(in oklab, var(--color-base-100) 72%, transparent);
  color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
}

.workspace-tabs .tab-active {
  background: var(--color-base-100);
  color: var(--color-base-content);
  box-shadow: 0 -8px 30px color-mix(in oklab, var(--color-base-content) 8%, transparent);
}

.workspace-dialog::backdrop {
  background: color-mix(in oklab, var(--color-base-content) 30%, transparent);
  backdrop-filter: blur(4px);
}

/* Userbot login panel embedded in the post-create connect modal: the modal
   header already says «Подключение …» and the glassy modal-box provides the
   card chrome, so strip the panel's own border/padding and duplicate header
   (the partial is shared with the channel page, where both are needed). */
#channel-connect-modal #userbot-login-panel {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

#channel-connect-modal .userbot-panel-head {
  display: none;
}

/* ===== Coming soon stub ===== */
.coming-soon-card {
  text-align: center;
  padding: 4rem 2rem;
  border: 2px dashed color-mix(in oklab, var(--color-base-content) 15%, transparent);
  border-radius: 1.5rem;
  background: color-mix(in oklab, var(--color-base-100) 60%, transparent);
}

/* ===== Theme transition ===== */
html * {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

html .btn,
html .badge {
  transition: none;
}

/* ===== Responsive ===== */
@media (max-width: 1023px) {
  .auth-scene::before,
  .auth-grid::before {
    opacity: 0.45;
  }

  .auth-form-card {
    align-self: stretch;
  }

  .auth-shell::before {
    width: 18rem;
    height: 18rem;
  }

  .auth-shell::after {
    width: 20rem;
    height: 20rem;
  }
}

@media (max-width: 640px) {
  .auth-scene {
    padding-inline: 0.75rem;
    padding-block: 0.75rem;
  }

  .auth-topbar {
    border-radius: 1.15rem;
  }

  .auth-layout {
    gap: 0.9rem;
    padding-block: 0.9rem;
  }

  .auth-form-card {
    order: -1;
  }

  .auth-hero,
  .auth-form-card .card-body {
    padding: 1rem;
  }

  .auth-hero .workspace-display,
  .auth-form-card .auth-card-title {
    font-size: clamp(2rem, 10vw, 2.75rem);
    line-height: 1.02;
  }

  .auth-hero .workspace-display + p {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .auth-feature-card,
  .auth-side-panel,
  .auth-fieldset,
  .auth-inline-note,
  .auth-metric,
  .auth-pillar {
    border-radius: 1rem;
  }
}

@media (max-width: 360px) {
  .auth-scene {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-block: 0;
  }

  .auth-layout,
  .auth-topbar,
  .auth-hero,
  .auth-form-card {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .auth-topbar,
  .auth-hero,
  .auth-form-card {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .auth-topbar {
    padding-inline: 0.75rem;
    padding-block: 0.7rem;
  }

  .auth-hero {
    padding-inline: 0.9rem;
    padding-block: 1rem;
  }

  .auth-form-card .card-body {
    padding-inline: 0.9rem;
    padding-block: 1rem;
  }

  .auth-hero .workspace-display {
    font-size: clamp(1.75rem, 9vw, 2.2rem);
  }

  .auth-feature-card,
  .auth-side-panel,
  .auth-inline-note {
    display: none;
  }

  .auth-form .label,
  .auth-card-copy,
  .auth-footnote {
    font-size: 0.875rem;
  }
}

/* =====================================================================
   UltimateAI design system — daisyUI 5 themes (Light / Dark)
   Источник истины: Figma «UltimateAI» (key FmrLa5PWhH6tIChCtm9xN6),
   коллекция переменных `UltimateAI Theme`. См. docs/figma-design.md.

   No-build setup: кастомную тему daisyUI задаём через CSS-переменные под
   html[data-theme="…"] (специфичность html… перебивает CDN-тему daisyUI),
   а НЕ через @plugin (требует сборки).
   ===================================================================== */

/* Геометрия компонентов (общая для обеих тем):
   карточки radius 16, кнопки/инпуты ~10px, бейджи ~8px, бордер 1px,
   плоский стиль без «depth»/noise — как в макете UltimateAI. */
html[data-theme="light"],
html[data-theme="dark"] {
  --radius-selector: 0.5rem;   /* бейджи, тогглы, чекбоксы */
  --radius-field: 0.625rem;    /* кнопки, инпуты, селекты, табы */
  --radius-box: 1rem;          /* карточки, модалки, алерты (16px) */
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* ---- Light (по умолчанию) — токены UltimateAI Light mode ---- */
html[data-theme="light"] {
  color-scheme: light;

  /* Поверхности и текст: surface→base-100, bg→base-200, border→base-300, ink→base-content */
  --color-base-100: #ffffff;        /* surface — карточки, сайдбар, топбар */
  --color-base-200: #f3f6fc;        /* bg — фон приложения */
  --color-base-300: #e5e9f3;        /* border — рамки/разделители */
  --color-base-content: #0f1729;    /* ink — основной текст */

  /* Бренд-акцент (единственный) — из логотипа Laplace */
  --color-primary: #2a59f7;
  --color-primary-content: #ffffff;
  /* secondary/accent — соседние ступени бренд-рампы (#1B3AA1…#436DFD),
     используются служебно (градиенты auth-экранов), не как второй бренд-цвет */
  --color-secondary: #1b3aa1;
  --color-secondary-content: #ffffff;
  --color-accent: #436dfd;
  --color-accent-content: #ffffff;
  /* neutral — тёмная нейтраль = ink */
  --color-neutral: #0f1729;
  --color-neutral-content: #ffffff;

  /* Статусы (ink-варианты из Figma; soft-фоны даёт badge-soft / alert-soft) */
  --color-info: #1d5bd6;            /* infoInk */
  --color-info-content: #ffffff;
  --color-success: #0b7a45;         /* successInk */
  --color-success-content: #ffffff;
  --color-warning: #b26a06;         /* warnInk */
  --color-warning-content: #ffffff;
  --color-error: #e34d61;           /* danger */
  --color-error-content: #ffffff;

  /* Доп. токены UltimateAI (точные soft-фоны/тексты + третичный текст) —
     для кастомных утилит ниже и будущих экранов */
  --ua-text-gray: #5a6478;          /* textGray — вторичный текст */
  --ua-text-muted: #8a93a6;         /* textMuted — третичный текст */
  --ua-surface-2: #f6f8fd;          /* surface2 — вложенные блоки */
  --ua-border-soft: #eef2f9;        /* borderSoft — тонкие разделители */
  --ua-primary-soft-bg: #e7edfe;
  --ua-primary-soft-ink: #2a59f7;
  --ua-success-bg: #ddf3e8;
  --ua-warn-bg: #fbefd2;
  --ua-info-bg: #e2ecfd;
  --ua-danger-bg: #fdecee;
  --ua-neutral-bg: #eeeff2;
  --ua-sidebar-bg: #ffffff;         /* в Light = surface */
  --ua-topbar-bg: #ffffff;
}

/* ---- Dark — точные токены UltimateAI Theme (Dark mode из Figma) ---- */
html[data-theme="dark"] {
  color-scheme: dark;

  --color-base-100: #121a2e;        /* surface */
  --color-base-200: #080c18;        /* bg */
  --color-base-300: #222d45;        /* border */
  --color-base-content: #e9edf8;    /* ink */

  --color-primary: #4f7dff;         /* primary (Figma Dark) */
  --color-primary-content: #ffffff;
  --color-secondary: #6f8cff;
  --color-secondary-content: #0a1120;
  --color-accent: #7c9bff;
  --color-accent-content: #0a1120;
  --color-neutral: #9aa4b8;         /* neutralInk */
  --color-neutral-content: #0a1120;

  --color-info: #7fb0ff;            /* infoInk */
  --color-info-content: #0a1120;
  --color-success: #34d399;         /* successInk */
  --color-success-content: #06241a;
  --color-warning: #fbbf24;         /* warnInk */
  --color-warning-content: #2a1c02;
  --color-error: #fb7185;           /* danger */
  --color-error-content: #2a0a10;

  --ua-text-gray: #9aa4b8;          /* textGray */
  --ua-text-muted: #6b7589;         /* textMuted */
  --ua-surface-2: #0d1626;          /* surface2 */
  --ua-border-soft: #1a2236;        /* borderSoft */
  --ua-primary-soft-bg: #17244c;
  --ua-primary-soft-ink: #9db6ff;
  --ua-success-bg: #0e2a1e;
  --ua-warn-bg: #2e2410;
  --ua-info-bg: #14233f;
  --ua-danger-bg: #2e1518;
  --ua-neutral-bg: #1c2335;
  --ua-sidebar-bg: #0e1626;         /* сайдбар/топбар темнее surface */
  --ua-topbar-bg: #0e1626;
}

/* Сайдбар и топбар: в Dark они темнее поверхности (#0e1626), в Light = surface.
   Перебиваем utility-классы bg-base-100 / bg-base-100/95 точечно по id/классу. */
#sidebar-panel { background-color: var(--ua-sidebar-bg); }
.app-topbar {
  background-color: color-mix(in oklab, var(--ua-topbar-bg) 95%, transparent);
}

/* ===== Утилиты поверх daisyUI (токены UltimateAI) ===== */
/* Вторичный/третичный текст по ролям textGray / textMuted */
.text-gray { color: var(--ua-text-gray); }
.text-muted { color: var(--ua-text-muted); }

/* primarySoft-чип («подключено / скоро») — точные Figma-цвета.
   Альтернатива: daisyUI `badge badge-primary badge-soft` (тот же эффект). */
.badge-primary-soft {
  background-color: var(--ua-primary-soft-bg);
  color: var(--ua-primary-soft-ink);
  border-color: transparent;
}

/* Стандартная карточка-поверхность UltimateAI: surface + 1px border + мягкая
   тень + radius 16. Базовый паттерн для будущих экранов (опт-ин класс, не
   переопределяет дефолтный daisyUI `.card`, чтобы не ломать текущие шаблоны). */
.card-surface {
  background-color: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-box);
  box-shadow:
    0 1px 2px color-mix(in oklab, var(--color-base-content) 5%, transparent),
    0 10px 30px color-mix(in oklab, var(--color-base-content) 6%, transparent);
}

/* Вложенный блок на «surface2» (мягче основной поверхности) */
.bg-surface-2 { background-color: var(--ua-surface-2); }
.border-soft { border-color: var(--ua-border-soft); }