/* Собран из UIKit/index.css. Файл создаётся сборкой — правьте источники. */

/* ── index.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Entry Point
   Версия: 1.0.0

   Сборка: токены, контекстные цвета, унифицированные и префиксные
   компоненты, страничные модули.

   Использование:
     <link rel="stylesheet" href="UIKit/index.css">
     <html data-theme="dark">           ← или "light"
       <body>
         <section data-color="emerald"> ← цветовой контекст
           <button class="btn btn--solid">Action</button>
           <article class="card card--accent-top">...</article>
         </section>
       </body>
     </html>

   Порядок импортов критичен:
   1) Tokens — атомарные значения и семантические маппинги
   2) Compat aliases — мост для legacy-префиксов --ux-* / --ornament-*
   3) Base — reset, animations, typography, glass
   4) Components — атомарные → дублирующие → префиксные → страничные
   5) Color rules — контекстные [data-color] правила для ux-компонентов
   ═══════════════════════════════════════════════════════════════════ */

/* ───── 1. TOKENS ─────────────────────────────────────────────── */

/* ── tokens/brand.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Brand Atomic Palette
   Версия: 1.0.0

   LAYER 1 — атомарные токены, единственный источник правды.
   Меняешь здесь — меняется во всём UI.
   Семантические токены (--lp-*, --cat-*, --ch-* …) описаны в themes.css
   и ссылаются ТОЛЬКО на эти --b-* переменные.
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ─── СВЕТЛЫЕ ПОВЕРХНОСТИ — FAI HUB (холодный голубой) ──────────── */
  --b-cream:        #eef3fb;   /* основной фон страницы */
  --b-cream-deep:   #e3ecfa;   /* «затемнённая бумага» — секции, hero alt */
  --b-paper:        #ffffff;   /* «лист» — карточки, панели */
  --b-paper-hi:     #ffffff;   /* поверх «листа» — input, surface up */

  /* ─── ТЁМНЫЕ ПОВЕРХНОСТИ — тёмно-сине-чёрная серия ──────────────── */
  --b-void:         #02030a;   /* самый тёмный слой — под body */
  --b-deep:         #050710;   /* глубокий фон страниц */
  --b-night:        #080b17;   /* основной тёмный фон */
  --b-dark-card:    #0f1426;   /* фон карточек на тёмном */
  --b-dark-elev:    #141c32;   /* приподнятые поверхности */

  /* ─── ТЕКСТ — тёмный (на светлом, FAI HUB ink) ──────────────────── */
  --b-coffee:       #0d1017;   /* H1, цены, акцентный текст */
  --b-coffee-mid:   #3a4250;   /* body */
  --b-coffee-soft:  #626b78;   /* muted */
  --b-coffee-faint: #9aa3b0;   /* faint, eyebrow, captions */
  --b-coffee-rgb:      13, 16, 23;
  --b-coffee-soft-rgb: 98, 107, 120;

  /* ─── ТЕКСТ — светлый (на тёмном, slate-серия) ──────────────────── */
  --b-slate-1: #f8fafc;   /* primary — заголовки */
  --b-slate-2: #e2e8f0;   /* secondary — подзаголовки */
  --b-slate-3: #94a3b8;   /* muted — основной текст */
  --b-slate-4: #64748b;   /* faint — метки, подписи */
  --b-slate-5: #475569;   /* ghost — неактивный, placeholder */
  --b-slate-6: #334155;   /* dim — разделители */

  /* ─── АКЦЕНТ — FAI HUB digital blue (legacy alias --b-gold) ─────── */
  --b-gold:         #2f6aff;
  --b-gold-rgb:     47, 106, 255;
  --b-gold-dark:    #1f55e0;
  --b-gold-light:   #5b8bff;
  --b-gold-bright:  #7aa2ff;
  --b-gold-shine:   #a8c4ff;

  /* Типы решений (агент / инструмент / сборка) */
  --b-type-agent:       #7c5cff;
  --b-type-agent-soft:  #efeaff;
  --b-type-tool:        #2f6aff;
  --b-type-tool-soft:   #eaf0ff;
  --b-type-assembly:    #0fa389;
  --b-type-assembly-soft:#e3f6f1;

  /* ─── ТЁМНО-СИНИЙ NAVY ────────────────────────────────────────── */
  --b-navy:         #1A2038;
  --b-navy-mid:     #2d3a70;
  --b-navy-soft:    rgba(26, 32, 56, 0.05);

  /* ─── СЕМАНТИЧЕСКИЕ СИГНАЛЫ — в тёплой палитре ──────────────────── */
  --b-terra:        #b85842;        /* error / break — мягкая терракота */
  --b-terra-rgb:    184, 88, 66;
  --b-success:      #6b8e4e;        /* приглушённый оливково-зелёный */
  --b-warn:         #c89a4a;        /* янтарный */
  --b-info:         #5e7a9b;        /* пыльно-синий, для ссылок */

  /* ─── СЕМАНТИЧЕСКИЕ — яркие (для тёмной темы / AI-контекста) ────── */
  --b-error:        #f43f5e;
  --b-error-light:  #fb7185;
  --b-success-br:   #10b981;
  --b-success-light:#34d399;
  --b-warn-br:      #f59e0b;
  --b-warn-light:   #fbbf24;
  --b-info-br:      #3b82f6;
  --b-info-light:   #60a5fa;

  /* ─── МОДУЛЬНЫЕ ЦВЕТА — 6 цветовых контекстов [data-color] ─────── */
  /* Каждый цвет имеет: base / bg / border / rgb */

  --b-c-sky:            #38bdf8;
  --b-c-sky-bg:         rgba(14, 165, 233, 0.10);
  --b-c-sky-border:     rgba(14, 165, 233, 0.22);
  --b-c-sky-rgb:        14, 165, 233;

  --b-c-indigo:         #818cf8;
  --b-c-indigo-bg:      rgba(79, 70, 229, 0.10);
  --b-c-indigo-border:  rgba(79, 70, 229, 0.25);
  --b-c-indigo-rgb:     79, 70, 229;

  --b-c-violet:         #a78bfa;
  --b-c-violet-bg:      rgba(124, 58, 237, 0.10);
  --b-c-violet-border:  rgba(124, 58, 237, 0.25);
  --b-c-violet-rgb:     124, 58, 237;

  --b-c-emerald:        #34d399;
  --b-c-emerald-bg:     rgba(5, 150, 105, 0.10);
  --b-c-emerald-border: rgba(5, 150, 105, 0.22);
  --b-c-emerald-rgb:    5, 150, 105;

  --b-c-amber:          #fbbf24;
  --b-c-amber-bg:       rgba(217, 119, 6, 0.10);
  --b-c-amber-border:   rgba(217, 119, 6, 0.25);
  --b-c-amber-rgb:      217, 119, 6;

  --b-c-pink:           #f472b6;
  --b-c-pink-bg:        rgba(219, 39, 119, 0.10);
  --b-c-pink-border:    rgba(219, 39, 119, 0.25);
  --b-c-pink-rgb:       219, 39, 119;

  /* ─── ЛИНИИ / ТЕНИ / ОВЕРЛЕИ ─────────────────────────────────────── */
  /* Светлая тема — производные от кофейного */
  --b-line:         #e5e8ee;
  --b-line-hi:      #d6dbe3;
  --b-line-dash:    rgba(13, 16, 23, 0.10);
  --b-shadow-sm:    0 1px 3px rgba(20, 40, 95, 0.06), 0 2px 10px rgba(20, 40, 95, 0.04);
  --b-shadow-md:    0 14px 36px -28px rgba(20, 40, 95, 0.30);
  --b-shadow-lg:    0 28px 54px -26px rgba(20, 40, 95, 0.32);

  /* Тёмная тема — производные от чёрного */
  --b-line-dk:      rgba(255, 255, 255, 0.08);
  --b-line-dk-hi:   rgba(255, 255, 255, 0.14);
  --b-line-dk-soft: rgba(255, 255, 255, 0.05);
  --b-shadow-dk-sm: 0 2px 10px -2px rgba(0, 0, 0, 0.45);
  --b-shadow-dk-md: 0 8px 32px -8px rgba(0, 0, 0, 0.55);
  --b-shadow-dk-lg: 0 20px 60px -16px rgba(0, 0, 0, 0.65);

  /* Оверлей для модальных окон */
  --b-overlay-light: rgba(26, 22, 18, 0.65);
  --b-overlay-dark:  rgba(2, 3, 10, 0.78);

  /* ─── ГРАДИЕНТЫ ──────────────────────────────────────────────────── */
  --b-grad-gold:    linear-gradient(135deg, #2f6aff 0%, #5b8bff 100%);
  --b-grad-coffee:  linear-gradient(135deg, #0d1017, #1a2a4a);
  --b-grad-paper:   linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.25) 100%);
  --b-grad-indigo:  linear-gradient(135deg, #4f46e5, #6366f1);
  --b-grad-sky:     linear-gradient(135deg, #0284c7, #0ea5e9);
  --b-grad-violet:  linear-gradient(135deg, #7c5cff, #9b85ff);
  --b-grad-emerald: linear-gradient(135deg, #0fa389, #34d399);
  --b-grad-amber:   linear-gradient(135deg, #b45309, #d97706);
  --b-grad-pink:    linear-gradient(135deg, #be185d, #ec4899);
  --b-grad-blue:    linear-gradient(135deg, #2f6aff, #5b8bff);
  --b-grad-night:   linear-gradient(160deg, #0a1226 0%, #060c1c 100%);

  /* ═══════════════════════════════════════════════════════════════════
     RAW RGB-каналы для rgba()-композиций
     ═══════════════════════════════════════════════════════════════════ */
  --rgb-indigo:    99, 102, 241;
  --rgb-blue:      59, 130, 246;
  --rgb-slate-400: 148, 163, 184;
  --rgb-slate-500: 100, 116, 139;
  --rgb-dark-bg:   10, 14, 28;
  --rgb-white:     255, 255, 255;

  /* ═══════════════════════════════════════════════════════════════════
     ТИПОГРАФИКА
     ═══════════════════════════════════════════════════════════════════ */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-serif:   'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:      'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Mono', 'Cascadia Code', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-size-base:   15px;
  --line-height-base: 1.6;

  /* ── Типографическая шкала (minor-third, ratio ≈ 1.2) ── */
  --ts-3xs:  0.625rem;   /*  9.4px — микро-бейджи, счётчики */
  --ts-2xs:  0.6875rem;  /* 10.3px — капсы, мета-метки */
  --ts-xs:   0.75rem;    /* 11.25px — теги, мелкие подписи */
  --ts-sm:   0.8125rem;  /* 12.2px — вспомогательный текст, описания карточек */
  --ts-base: 0.875rem;   /* 13.1px — основной body */
  --ts-md:   0.9375rem;  /* 14.1px — кнопки, поля ввода */
  --ts-lg:   1rem;       /* 15px   — акцентный body, card titles */
  --ts-xl:   1.125rem;   /* 16.9px — подзаголовки секций */
  --ts-2xl:  1.3125rem;  /* 19.7px — заголовки секций */
  --ts-3xl:  1.5rem;     /* 22.5px — h2 hero */
  --ts-4xl:  1.875rem;   /* 28.1px — h1 hero mobile */
  --ts-5xl:  2.25rem;    /* 33.75px — h1 hero desktop */
  --ts-6xl:  2.75rem;    /* 41.25px — h1 hero wide */

  --font-size-desktop-big:    18px;
  --font-size-desktop-medium: 14px;
  --font-size-desktop-low:    14px;
  --font-size-mobile-big:     16px;
  --font-size-mobile-medium:  14px;
  --font-size-mobile-low:     14px;

  /* ═══════════════════════════════════════════════════════════════════
     СКРУГЛЕНИЯ — единая шкала (в rem где возможно)
     ═══════════════════════════════════════════════════════════════════ */
  --r-xs:   0.3rem;
  --r-sm:   0.375rem;     /* 6px */
  --r-md:   0.625rem;     /* 10px */
  --r-lg:   0.875rem;     /* 14px */
  --r-xl:   1.125rem;     /* 18px */
  --r-2xl:  1.5rem;       /* 24px */
  --r-card: 1.25rem;      /* 20px — стандартный радиус карточек */
  --r-full: 999px;        /* пилюли, аватары */

  /* Совместимость со старыми пиксельными значениями (legacy) */
  --r-2:    2px;
  --r-4:    4px;
  --r-8:    8px;
  --r-12:   12px;

  /* ═══════════════════════════════════════════════════════════════════
     СКОРОСТИ И EASING-КРИВЫЕ
     ═══════════════════════════════════════════════════════════════════ */
  --t-fast:   0.1s ease;
  --t-hover:  0.12s ease;
  --t-base:   0.15s ease;
  --t-smooth: 0.2s ease;
  --t-appear: 0.25s cubic-bezier(.22,1,.36,1);
  --t-slow:   0.35s ease;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.21, 0.47, 0.32, 0.98);
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ═══════════════════════════════════════════════════════════════════
     BREAKPOINTS — стандартный набор для @media queries
     CSS не поддерживает переменные в @media, но конвенция
     фиксируется здесь как единый источник правды.
     ─────────────────────────────────────────────────────────────────
     xs:  360px   — мелкие телефоны (Galaxy Fold, etc.)
     sm:  640px   — телефоны landscape / крупные телефоны
     md:  768px   — планшет portrait
     lg:  1280px  — десктоп (основной)
     xl:  1500px  — широкий десктоп
     ═══════════════════════════════════════════════════════════════════ */

  /* ═══════════════════════════════════════════════════════════════════
     LAYOUT — макет
     ═══════════════════════════════════════════════════════════════════ */
  --max-width:      2200px;
  --max-height:     1024px;
  --max-w-wide:     90rem;
  --max-w-default:  78rem;
  --max-w-narrow:   72rem;
  --content-max:    1280px;
  --header-height:  64px;
  --footer-height:  48px;
  --content-height: calc(100dvh - 152px);
  --sidebar-width:  322px;
  --topbar-height:  2.9rem;

  /* ═══════════════════════════════════════════════════════════════════
     Z-ИНДЕКСЫ
     ═══════════════════════════════════════════════════════════════════ */
  --z-topbar:  40;
  --z-header:  50;
  --z-modal:   100;
  --z-tooltip: 200;
  --z-overlay: 9000;

  /* ═══════════════════════════════════════════════════════════════════
     GLASS — параметры стекломорфизма
     ═══════════════════════════════════════════════════════════════════ */
  --glass-blur-sm:    blur(8px);
  --glass-blur-md:    blur(12px);
  --glass-blur-lg:    blur(16px);
  --glass-blur-xl:    blur(24px);
  --glass-blur-xxl:   blur(32px);
  --glass-sat-low:    saturate(1.2);
  --glass-sat:        saturate(1.4);
  --glass-sat-high:   saturate(1.6);
  --glass-border:     rgba(255,255,255,0.08);
  --glass-border-lt:  rgba(226,232,240,0.7);
  --glass-bg-dark:    rgba(15,22,42,0.72);
  --glass-bg-light:   rgba(255,255,255,0.88);
  --glass-filter:     var(--glass-blur-md) var(--glass-sat);

  /* ═══════════════════════════════════════════════════════════════════
     REDESIGN 2.0 — современный слой (display-типографика, elevation,
     радиусы, кольца, easing для микроинтеракций). Все значения ссылаются
     на атомарные --b-* и потому автоматически адаптируются под тему.
     ═══════════════════════════════════════════════════════════════════ */

  /* Флюидная display-шкала (clamp): крупные заголовки без брейкпоинтов. */
  --ds-1: clamp(2.6rem, 1.5rem + 4.6vw, 5rem);      /* hero h1 */
  --ds-2: clamp(2rem, 1.35rem + 2.9vw, 3.4rem);     /* крупный h2 секции */
  --ds-3: clamp(1.55rem, 1.2rem + 1.7vw, 2.35rem);  /* h2 */
  --ds-4: clamp(1.25rem, 1.05rem + 1vw, 1.7rem);    /* h3 */
  --ds-lead: clamp(1rem, 0.93rem + 0.4vw, 1.2rem);  /* лид-абзац */
  --ds-tracking: -0.022em;                          /* трекинг для display */

  /* Elevation — мягкие многослойные тени, адаптивны к теме. */
  --elev-1: var(--b-shadow-sm);
  --elev-2: var(--b-shadow-md);
  --elev-3: var(--b-shadow-lg);
  /* Цветная «свечная» тень акцента для hover-карточек определена ниже
     (на базе единого --lp-accent, чтобы быть синей и в тёмной теме). */

  /* Скругления редизайна (алиасы к единой шкале). */
  --radius-md: var(--r-lg);    /* 14px */
  --radius-lg: var(--r-card);  /* 20px */
  --radius-xl: var(--r-2xl);   /* 24px */

  /* Кольца/обводки акцента. Базируются на семантическом --lp-accent,
     который синий в ОБЕИХ темах (в отличие от --b-gold: синий только
     в light, золотой в dark) — это держит единый акцент везде. */
  --ring-accent:     0 0 0 1px color-mix(in srgb, var(--lp-accent, #3b82f6) 35%, transparent);
  --ring-accent-hi:  0 0 0 2px color-mix(in srgb, var(--lp-accent, #3b82f6) 55%, transparent);

  /* Акцентные градиенты (единый синий акцент в обеих темах). */
  --grad-accent: linear-gradient(135deg,
      var(--lp-accent, #3b82f6) 0%,
      var(--lp-accent-light, #60a5fa) 100%);
  --grad-accent-text: linear-gradient(120deg,
      var(--lp-accent, #3b82f6) 0%,
      var(--lp-accent-light, #60a5fa) 100%);
  --elev-accent: 0 18px 48px -18px color-mix(in srgb, var(--lp-accent, #3b82f6) 45%, transparent);

  /* Easing для микроинтеракций редизайна. */
  --t-lift: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}



/* ── tokens/themes.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Themes & Color Contexts
   Версия: 1.0.0

   LAYER 2 — семантические токены и переключение тем.
   Все значения ссылаются на --b-* из brand.css.

   СТРАТЕГИИ:
   1. [data-theme="dark"|"light"] на <html> — глобальная тема (тёмная по умолчанию)
   2. [data-color="sky|indigo|violet|emerald|amber|pink"] — цветовой контекст

      <section data-color="emerald">
        <div class="card">...</div>     ← станет изумрудным
        <button class="btn">...</button> ← станет изумрудным
      </section>

   Явные модификаторы (.btn--amber) имеют приоритет над контекстом.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Глобальные дефолты на <html> ─────────────────────────────────── */
:root {
  color-scheme: light;
  word-wrap: anywhere;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* ═══════════════════════════════════════════════════════════════════
   DARK THEME (default) — тёмная сине-чёрная палитра
   Активируется по умолчанию или при [data-theme="dark"].
   ═══════════════════════════════════════════════════════════════════ */
/* Legacy dark selector: FAI HUB — только светлая тема; dark-алиас не применяется к :root. */
[data-theme="dark"] {
  /* Семантические алиасы */
  --color-primary:    #3b82f6;
  --color-secondary:  #94a3b8;
  --color-accent:     #60a5fa;
  --color-background: #1e293b;
  --color-surface:    #334155;
  --color-text:       var(--b-slate-1);
  --color-error:      var(--b-error-light);
  --color-success:    var(--b-success-light);
  --color-warning:    var(--b-warn-light);

  --gradient-primary: var(--b-grad-blue);
  --border-color:     var(--b-line-dk);
  --shadow-color:     rgba(0,0,0,0.3);
  --footer-text:      var(--b-slate-4);
  --mobile-border:    rgba(112, 144, 176, 0.15);

  --c-text-1: var(--b-slate-2);
  --c-text-2: var(--b-slate-3);
  --c-text-3: var(--b-slate-4);

  --chat-message-color:    var(--color-primary);
  --chat-message-bg-color: var(--color-background);

  --page-bg:  #0b0f1e;
  --page-dot: rgba(148,163,184,0.06);   /* виден только при классе .page--dots */

  /* Glass — стекло на тёмном */
  --glass-border: rgba(255,255,255,0.08);
  --glass-bg:     var(--glass-bg-dark);

  /* Landing page */
  --lp-bg:             #060a16;
  --lp-heading:        var(--b-slate-2);
  --lp-text:           rgba(148,163,184,0.8);
  --lp-text-muted:     rgba(148,163,184,0.6);
  --lp-accent:         #3b82f6;
  --lp-accent-light:   #60a5fa;
  --lp-section-bg:     transparent;
  --lp-section-bg-alt: transparent;
  --lp-card-bg:        rgba(15,22,41,0.45);
  --lp-card-border:    var(--b-line-dk);
  --lp-card-hover-border: rgba(99,130,246,0.3);
  --lp-card-hover-shadow: rgba(59,130,246,0.15);
  --lp-divider:        var(--b-line-dk-soft);
  --lp-icon-bg-blue:   rgba(59,130,246,0.12);
  --lp-icon-bg-indigo: rgba(99,102,241,0.12);
  --lp-icon-bg-green:  rgba(34,197,94,0.12);
  --lp-icon-bg-amber:  rgba(245,158,11,0.12);
  --lp-icon-bg-purple: rgba(139,92,246,0.12);
  --lp-icon-blue:      #60a5fa;
  --lp-icon-indigo:    #818cf8;
  --lp-icon-green:     #4ade80;
  --lp-icon-amber:     #fbbf24;
  --lp-icon-purple:    #a78bfa;
  --lp-tab-bg:         rgba(15,22,41,0.6);
  --lp-tab-border:     rgba(255,255,255,0.1);
  --lp-tab-active-bg:  linear-gradient(135deg, rgba(59,130,246,0.3), rgba(99,102,241,0.3));
  --lp-badge-bg:       rgba(59,130,246,0.15);
  --lp-badge-border:   rgba(59,130,246,0.3);
  --lp-badge-text:     #93c5fd;
  --lp-btn-primary-bg: var(--b-grad-blue);
  --lp-btn-outline-text:   rgba(226,232,240,0.9);
  --lp-btn-outline-border: rgba(255,255,255,0.15);
  --lp-canvas-opacity: 1.0;

  /* Header */
  --hdr-glass-bg:       rgba(10,16,32,0.65);
  --hdr-glass-blur:     blur(24px) saturate(1.6);
  --hdr-border-alpha:   0.08;
  --hdr-nav-text:       rgba(203,213,225,0.8);
  --hdr-nav-hover-text: var(--b-slate-2);
  --hdr-nav-hover-bg:   rgba(255,255,255,0.06);
  --hdr-nav-active-text:#ffffff;
  --hdr-nav-active-bg:  rgba(59,130,246,0.15);
  --hdr-pill-bg:        rgba(255,255,255,0.06);
  --hdr-pill-border:    rgba(255,255,255,0.1);
  --hdr-pill-name:      var(--b-slate-2);
  --hdr-menu-bg:        rgba(15,22,41,0.95);
  --hdr-menu-border:    rgba(255,255,255,0.08);
  --hdr-menu-item-text: #cbd5e1;
  --hdr-menu-divider:   rgba(255,255,255,0.06);
  --hdr-auth-ghost:     rgba(203,213,225,0.8);
  --hdr-auth-btn-bg:    var(--b-grad-blue);
  --hdr-auth-btn-text:  #ffffff;
  --hdr-inset-shadow:   0 0 0 0.5px rgba(255,255,255,0.08) inset;

  /* Catalog */
  --cat-page-bg:           transparent;
  --cat-hero-bg:           rgba(12,16,30,0.5);
  --cat-hero-blob1:        rgba(59,130,246,0.12);
  --cat-hero-blob2:        rgba(139,92,246,0.08);
  --cat-hero-title:        #f1f5f9;
  --cat-hero-accent:       #60a5fa;
  --cat-hero-search-bg:    rgba(20,28,50,0.65);
  --cat-hero-search-border:rgba(255,255,255,0.1);
  --cat-hero-search-text:  #f1f5f9;
  --cat-hero-search-ph:    rgba(148,163,184,0.55);
  --cat-hero-search-focus: rgba(59,130,246,0.45);
  --cat-sidebar-bg:        rgba(15,20,38,0.55);
  --cat-sidebar-border:    rgba(255,255,255,0.06);
  --cat-sidebar-label:     rgba(148,163,184,0.65);
  --cat-sidebar-blur:      blur(20px);
  --cat-panel-bg:          rgba(15,20,38,0.5);
  --cat-panel-border:      rgba(255,255,255,0.06);
  --cat-card-bg:           rgba(18,24,46,0.6);
  --cat-card-border:       rgba(255,255,255,0.06);
  --cat-card-hover-border: rgba(99,130,246,0.3);
  --cat-card-hover-shadow: rgba(59,130,246,0.1);
  --cat-card-name:         #f1f5f9;
  --cat-card-desc:         rgba(168,180,200,0.8);
  --cat-card-creator:      rgba(148,163,184,0.55);
  --cat-card-price:        #f1f5f9;
  --cat-card-price-sub:    rgba(148,163,184,0.55);
  --cat-card-free:         #4ade80;
  --cat-card-before-opacity: 0.12;
  --cat-card-tag-bg:       rgba(59,130,246,0.08);
  --cat-card-tag-text:     rgba(160,175,195,0.75);
  --cat-card-tag-border:   rgba(255,255,255,0.05);
  --cat-card-rating:       #f1f5f9;
  --cat-card-rating-count: rgba(148,163,184,0.55);
  --cat-card-stat:         rgba(148,163,184,0.55);
  --cat-pill-bg:           rgba(255,255,255,0.04);
  --cat-pill-border:       rgba(255,255,255,0.08);
  --cat-pill-text:         rgba(203,213,225,0.75);
  --cat-pill-hover-bg:     rgba(255,255,255,0.07);
  --cat-pill-chat-bg:      rgba(59,130,246,0.1);
  --cat-pill-chat-border:  rgba(59,130,246,0.22);
  --cat-pill-chat-text:    #60a5fa;
  --cat-pill-fav-bg:       rgba(239,68,68,0.08);
  --cat-pill-fav-border:   rgba(239,68,68,0.22);
  --cat-pill-fav-text:     #f87171;
  --cat-chip-bg:           rgba(20,28,50,0.5);
  --cat-chip-border:       rgba(255,255,255,0.08);
  --cat-chip-text:         rgba(203,213,225,0.75);
  --cat-chip-hover-bg:     rgba(59,130,246,0.08);
  --cat-chip-active-bg:    var(--b-grad-blue);
  --cat-chip-count-bg:     rgba(255,255,255,0.06);
  --cat-chip-count-text:   rgba(148,163,184,0.55);
  --cat-filter-text:       rgba(210,220,235,0.85);
  --cat-filter-hover-bg:   rgba(59,130,246,0.06);
  --cat-filter-active-bg:  rgba(59,130,246,0.12);
  --cat-filter-active-text:#93c5fd;
  --cat-filter-check-bg:   #3b82f6;
  --cat-filter-divider:    rgba(255,255,255,0.04);
  --cat-input-bg:          rgba(20,28,50,0.5);
  --cat-input-border:      rgba(255,255,255,0.08);
  --cat-input-text:        #f1f5f9;
  --cat-input-ph:          rgba(148,163,184,0.4);
  --cat-input-focus:       rgba(59,130,246,0.35);
  --cat-select-bg:         rgba(20,28,50,0.5);
  --cat-select-border:     rgba(255,255,255,0.08);
  --cat-select-text:       #f1f5f9;
  --cat-result-count:      rgba(160,175,195,0.6);
  --cat-sort-text:         rgba(160,175,195,0.6);
  --cat-type-btn-bg:       rgba(20,28,50,0.45);
  --cat-type-btn-border:   rgba(255,255,255,0.06);
  --cat-type-btn-text:     rgba(210,220,235,0.75);
  --cat-type-btn-hover-bg: rgba(59,130,246,0.07);
  --cat-type-btn-on-bg:    var(--b-grad-blue);
  --cat-page-btn-bg:       rgba(20,28,50,0.45);
  --cat-page-btn-border:   rgba(255,255,255,0.08);
  --cat-page-btn-text:     rgba(210,220,235,0.75);
  --cat-page-active-bg:    var(--b-grad-blue);
  --cat-empty-text:        rgba(148,163,184,0.55);
  --cat-loading-text:      rgba(148,163,184,0.55);
  --cat-reset-text:        #f87171;
  --cat-reset-hover-bg:    rgba(239,68,68,0.08);
  --cat-more-summary:      rgba(160,175,195,0.6);
  --cat-more-border:       rgba(255,255,255,0.04);
  --cat-badge-bg:          rgba(59,130,246,0.1);
  --cat-badge-text:        #93c5fd;
  --cat-mcp-bg:            rgba(139,92,246,0.1);
  --cat-mcp-text:          #c4b5fd;
  --cat-tool-badge-bg:     rgba(59,130,246,0.1);
  --cat-tool-badge-text:   #93c5fd;

  /* Detail page */
  --det-card-bg:           rgba(18,24,46,0.92);
  --det-card-border:       rgba(100,140,255,0.10);
  --det-card-shadow:       rgba(0,0,0,0.3);
  --det-main-bg:           #0f1426;
  --det-main-border:       rgba(100,140,255,0.08);
  --det-hero-bg:           linear-gradient(180deg, #141c32 0%, #0f1426 55%);
  --det-hero-border:       rgba(100,140,255,0.06);
  --det-title:             #f1f5f9;
  --det-subtitle:          #a8b4c8;
  --det-text:              #b4c0d2;
  --det-text-muted:        #94a3b8;
  --det-label:             #94a3b8;
  --det-accent:            #60a5fa;
  --det-divider:           rgba(100,140,255,0.06);
  --det-breadcrumb-bg:     rgba(18,24,46,0.85);
  --det-breadcrumb-border: rgba(100,140,255,0.10);
  --det-breadcrumb-text:   #94a3b8;
  --det-info-bg:           rgba(20,28,50,0.7);
  --det-info-border:       rgba(100,140,255,0.06);
  --det-usecase-bg:        rgba(59,130,246,0.08);
  --det-usecase-border:    rgba(59,130,246,0.18);
  --det-tag-bg:            rgba(59,130,246,0.12);
  --det-tag-text:          #93c5fd;
  --det-tag-border:        rgba(59,130,246,0.22);
  --det-badge-bg:          rgba(59,130,246,0.12);
  --det-badge-text:        #60a5fa;
  --det-rep-track:         rgba(100,140,255,0.08);
  --det-cap-bg:            rgba(34,197,94,0.08);
  --det-cap-text:          #4ade80;
  --det-cap-border:        rgba(34,197,94,0.2);
  --det-pricing-bg:        rgba(20,28,50,0.85);
  --det-pricing-border:    rgba(100,140,255,0.08);
  --det-price:             #f1f5f9;
  --det-dot:               #3b82f6;

  /* Chat */
  --ch-page-bg:            #0b0f1e;
  --ch-card-bg:            rgba(18,24,46,0.7);
  --ch-card-border:        rgba(255,255,255,0.07);
  --ch-card-shadow:        0 4px 24px rgba(0,0,0,0.25);
  --ch-card-glow-start:    rgba(9,134,249,0.06);
  --ch-card-glow-end:      rgba(6,182,212,0.08);
  --ch-title:              #f1f5f9;
  --ch-text:               rgba(180,192,210,0.85);
  --ch-text-muted:         rgba(148,163,184,0.6);
  --ch-accent:             #3b82f6;
  --ch-accent2:            #0590d0;
  --ch-divider:            rgba(255,255,255,0.06);
  --ch-session-bg:         rgba(20,28,50,0.6);
  --ch-session-border:     rgba(255,255,255,0.07);
  --ch-session-hover-bg:   rgba(30,40,65,0.8);
  --ch-session-hover-border: rgba(59,130,246,0.25);
  --ch-session-active-bg:  rgba(59,130,246,0.12);
  --ch-session-active-border: rgba(59,130,246,0.4);
  --ch-session-title:      #e2e8f0;
  --ch-session-date:       rgba(148,163,184,0.55);
  --ch-llm-model-bg:       rgba(20,28,50,0.6);
  --ch-llm-model-border:   rgba(255,255,255,0.07);
  --ch-llm-model-hover-bg: rgba(30,40,65,0.9);
  --ch-llm-model-name:     #e2e8f0;
  --ch-llm-headline:       #f1f5f9;
  --ch-llm-desc:           rgba(148,163,184,0.7);
  --ch-msg-user-bg:        linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
  --ch-msg-user-text:      #ffffff;
  --ch-msg-ai-bg:          rgba(20,28,50,0.55);
  --ch-msg-ai-border:      rgba(255,255,255,0.06);
  --ch-msg-ai-text:        rgba(210,220,235,0.9);
  --ch-input-bg:           rgba(18,24,46,0.7);
  --ch-input-border:       rgba(255,255,255,0.08);
  --ch-input-text:         #f1f5f9;
  --ch-input-ph:           rgba(148,163,184,0.5);
  --ch-voice-panel-bg:     rgba(9,134,249,0.08);
  --ch-voice-panel-border: rgba(9,134,249,0.15);
  --ch-voice-toggle-text:  #e2e8f0;
  --ch-voice-hint:         rgba(148,163,184,0.6);
  --ch-voice-page-bg:      linear-gradient(180deg, #060c1a 0%, #0a1020 50%, #0b0f1e 100%);
  --ch-voice-win-bg:       rgba(15,22,42,0.85);
  --ch-voice-win-border:   rgba(255,255,255,0.08);
  --ch-voice-win-title-bg: rgba(10,16,34,0.9);
  --ch-voice-win-title-border: rgba(255,255,255,0.05);
  --ch-voice-win-body-bg:  linear-gradient(165deg, rgba(10,20,50,0.6) 0%, rgba(8,14,32,0.4) 100%);
  --ch-voice-win-title:    rgba(200,210,230,0.9);
  --ch-voice-status:       rgba(180,192,210,0.8);
  --ch-voice-hint-text:    rgba(148,163,184,0.55);
  --ch-stop-bg:            linear-gradient(180deg, rgba(25,35,60,0.9) 0%, rgba(18,26,48,0.95) 100%);
  --ch-stop-border:        rgba(59,130,246,0.25);
  --ch-stop-text:          #c7d8f0;
  --ch-stop-svg:           #60a5fa;
  --ch-form-bg:            rgba(18,24,46,0.75);
  --ch-form-border:        rgba(255,255,255,0.08);
  --ch-form-shadow:        0 8px 32px rgba(0,0,0,0.2);
  --ch-voice-form-bg:      rgba(10,16,34,0.85);
  --ch-voice-form-border:  rgba(59,130,246,0.2);
  --ch-depth-label:        rgba(148,163,184,0.7);
  --ch-depth-btn-bg:       rgba(20,28,50,0.5);
  --ch-depth-btn-border:   rgba(255,255,255,0.07);
  --ch-depth-btn-text:     rgba(180,192,210,0.8);
  --ch-depth-btn-active-bg: linear-gradient(135deg, #1e40af, #2563eb);
  --ch-agent-item-bg:      rgba(20,28,50,0.5);
  --ch-agent-item-border:  rgba(255,255,255,0.06);
  --ch-agent-item-text:    rgba(180,192,210,0.85);
  --ch-empty-icon:         rgba(59,130,246,0.15);
  --ch-empty-title:        rgba(200,210,230,0.7);
  --ch-empty-text:         rgba(148,163,184,0.5);

  /* ux-* — карточки/поверхности тёмного UI */
  --surface-1:        rgba(255, 255, 255, 0.04);
  --surface-2:        rgba(255, 255, 255, 0.07);
  --surface-card:     var(--b-grad-night);
  --surface-topbar:   rgba(5, 6, 16, 0.9);
  --surface-code:     rgba(3, 4, 14, 0.6);
  --border-bright:    rgba(255, 255, 255, 0.14);
  --border-accent:    rgba(99, 102, 241, 0.3);
  --border-subtle:    rgba(255, 255, 255, 0.06);

  /* ornament-* — навигационная стрипа / модал в тёмной теме */
  --ornament-stripe-bg:     var(--b-navy-mid);
  --ornament-modal-bg:      var(--b-dark-card);
  --ornament-overlay:       var(--b-overlay-dark);
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME — FAI HUB (дефолт). Также для [data-theme="dark"] —
   приложение light-only, переключатель темы убран.
   ═══════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"],
[data-theme="dark"] {
  color-scheme: light;

  /* Атомы уже заданы в brand.css (FAI HUB). Локальные уточнения: */
  --b-cream:        #eef3fb;
  --b-cream-deep:   #e3ecfa;
  --b-paper:        #ffffff;
  --b-paper-hi:     #ffffff;

  --b-coffee:       #0d1017;
  --b-coffee-mid:   #3a4250;
  --b-coffee-soft:  #626b78;
  --b-coffee-faint: #9aa3b0;
  --b-coffee-rgb:      13, 16, 23;
  --b-coffee-soft-rgb: 98, 107, 120;

  --b-gold:         #2f6aff;
  --b-gold-rgb:     47, 106, 255;
  --b-gold-dark:    #1f55e0;
  --b-gold-light:   #5b8bff;
  --b-gold-bright:  #7aa2ff;
  --b-gold-shine:   #a8c4ff;

  --b-line:         #e5e8ee;
  --b-line-hi:      #d6dbe3;
  --b-line-dash:    rgba(13, 16, 23, 0.10);
  --b-shadow-sm:    0 1px 3px rgba(20, 40, 95, 0.06), 0 2px 10px rgba(20, 40, 95, 0.04);
  --b-shadow-md:    0 14px 36px -28px rgba(20, 40, 95, 0.30);
  --b-shadow-lg:    0 28px 54px -26px rgba(20, 40, 95, 0.32);

  --b-grad-coffee:  linear-gradient(135deg, #0d1017 0%, #1a2a4a 100%);
  --b-grad-gold:    linear-gradient(135deg, #2f6aff 0%, #5b8bff 100%);

  --b-overlay-light: rgba(10, 18, 45, 0.55);

  --color-primary:    var(--b-coffee);
  --color-secondary:  var(--b-coffee-soft);
  --color-accent:     var(--b-gold);
  --color-background: #fff;
  --color-surface:    var(--b-paper);
  --color-text:       var(--b-coffee);

  --gradient-primary: var(--b-grad-coffee);
  --border-color:     var(--b-line);
  --shadow-color:     rgba(44, 36, 22, 0.08);
  --footer-text:      var(--b-coffee-soft);
  --mobile-border:    rgba(112, 144, 176, 0.15);

  --c-text-1: var(--b-coffee);
  --c-text-2: var(--b-coffee-mid);
  --c-text-3: var(--b-coffee-soft);

  --page-bg:  var(--b-cream);
  --page-dot: rgba(var(--b-coffee-rgb), 0.06);   /* виден только при классе .page--dots */

  /* Glass — стекло на светлом */
  --glass-border: var(--b-line-hi);
  --glass-bg:     var(--glass-bg-light);

  /* Landing */
  --lp-bg:             var(--b-cream);
  --lp-heading:        var(--b-coffee);
  --lp-text:           var(--b-coffee-soft);
  --lp-text-muted:     var(--b-coffee-faint);
  --lp-accent:         var(--b-gold);
  --lp-accent-light:   var(--b-gold-light);
  --lp-section-bg:     transparent;
  --lp-section-bg-alt: transparent;
  --lp-card-bg:        rgba(255, 255, 255, 0.50);
  --lp-card-border:    var(--b-line);
  --lp-card-hover-border: rgba(var(--b-gold-rgb), 0.35);
  --lp-card-hover-shadow: var(--b-shadow-md);
  --lp-divider:        var(--b-line);
  --lp-icon-bg-blue:   rgba(var(--b-gold-rgb), 0.08);
  --lp-icon-bg-indigo: rgba(var(--b-gold-rgb), 0.10);
  --lp-icon-bg-green:  rgba(107, 142, 78, 0.10);
  --lp-icon-bg-amber:  rgba(200, 154, 74, 0.12);
  --lp-icon-bg-purple: rgba(138, 153, 173, 0.14);
  --lp-icon-blue:      var(--b-gold);
  --lp-icon-indigo:    var(--b-gold-dark);
  --lp-icon-green:     var(--b-success);
  --lp-icon-amber:     var(--b-warn);
  --lp-icon-purple:    var(--b-coffee-mid);
  --lp-tab-bg:         var(--b-paper);
  --lp-tab-border:     var(--b-line);
  --lp-tab-active-bg:  var(--b-grad-coffee);
  --lp-badge-bg:       rgba(var(--b-gold-rgb), 0.12);
  --lp-badge-border:   rgba(var(--b-gold-rgb), 0.25);
  --lp-badge-text:     var(--b-gold-dark);
  --lp-btn-primary-bg: var(--b-grad-coffee);
  --lp-btn-outline-text:   var(--b-coffee);
  --lp-btn-outline-border: var(--b-line-hi);
  --lp-canvas-opacity: 0.12;

  /* Header — FAI HUB glass */
  --hdr-glass-bg:       rgba(238, 243, 251, 0.85);
  --hdr-glass-blur:     blur(16px) saturate(1.4);
  --hdr-border-alpha:   1;
  --hdr-nav-text:       #3a4250;
  --hdr-nav-hover-text: #0d1017;
  --hdr-nav-hover-bg:   rgba(47, 106, 255, 0.06);
  --hdr-nav-active-text:#2f6aff;
  --hdr-nav-active-bg:  transparent;
  --hdr-pill-bg:        rgba(13, 16, 23, 0.04);
  --hdr-pill-border:    var(--b-line);
  --hdr-pill-name:      var(--b-coffee);
  --hdr-menu-bg:        var(--b-paper);
  --hdr-menu-border:    var(--b-line);
  --hdr-menu-item-text: var(--b-coffee-mid);
  --hdr-menu-divider:   #eef0f4;
  --hdr-auth-ghost:     #3a4250;
  --hdr-auth-btn-bg:    #2f6aff;
  --hdr-auth-btn-text:  #ffffff;
  --hdr-inset-shadow:   none;

  /* Catalog */
  --cat-page-bg:           transparent;
  --cat-hero-bg:           rgba(244, 246, 248, 0.75);
  --cat-hero-blob1:        rgba(var(--b-gold-rgb), 0.16);
  --cat-hero-blob2:        rgba(138, 153, 173, 0.18);
  --cat-hero-title:        var(--b-coffee);
  --cat-hero-accent:       var(--b-gold-dark);
  --cat-hero-search-bg:    var(--b-paper);
  --cat-hero-search-border:var(--b-line);
  --cat-hero-search-text:  var(--b-coffee);
  --cat-hero-search-ph:    var(--b-coffee-faint);
  --cat-hero-search-focus: rgba(var(--b-gold-rgb), 0.45);
  --cat-sidebar-bg:        rgba(255, 255, 255, 0.65);
  --cat-sidebar-border:    var(--b-line);
  --cat-sidebar-label:     var(--b-coffee-soft);
  --cat-sidebar-blur:      blur(20px);
  --cat-panel-bg:          rgba(255, 255, 255, 0.62);
  --cat-panel-border:      var(--b-line);
  --cat-card-bg:           rgba(255, 255, 255, 0.70);
  --cat-card-border:       var(--b-line);
  --cat-card-hover-border: rgba(var(--b-gold-rgb), 0.35);
  --cat-card-hover-shadow: var(--b-shadow-md);
  --cat-card-name:         var(--b-coffee);
  --cat-card-desc:         var(--b-coffee-soft);
  --cat-card-creator:      var(--b-coffee-faint);
  --cat-card-price:        var(--b-coffee);
  --cat-card-price-sub:    var(--b-coffee-faint);
  --cat-card-free:         var(--b-success);
  --cat-card-before-opacity: 0.18;
  --cat-card-tag-bg:       rgba(var(--b-coffee-rgb), 0.04);
  --cat-card-tag-text:     var(--b-coffee-soft);
  --cat-card-tag-border:   transparent;
  --cat-card-rating:       var(--b-coffee);
  --cat-card-rating-count: var(--b-coffee-faint);
  --cat-card-stat:         var(--b-coffee-faint);
  --cat-pill-bg:           transparent;
  --cat-pill-border:       var(--b-line);
  --cat-pill-text:         var(--b-coffee-soft);
  --cat-pill-hover-bg:     rgba(var(--b-coffee-rgb), 0.04);
  --cat-pill-chat-bg:      rgba(var(--b-gold-rgb), 0.10);
  --cat-pill-chat-border:  rgba(var(--b-gold-rgb), 0.30);
  --cat-pill-chat-text:    var(--b-gold-dark);
  --cat-pill-fav-bg:       rgba(var(--b-terra-rgb), 0.08);
  --cat-pill-fav-border:   rgba(var(--b-terra-rgb), 0.30);
  --cat-pill-fav-text:     var(--b-terra);
  --cat-chip-bg:           var(--b-paper);
  --cat-chip-border:       var(--b-line);
  --cat-chip-text:         var(--b-coffee-soft);
  --cat-chip-hover-bg:     rgba(var(--b-gold-rgb), 0.08);
  --cat-chip-active-bg:    var(--b-grad-gold);
  --cat-chip-count-bg:     rgba(var(--b-coffee-rgb), 0.05);
  --cat-chip-count-text:   var(--b-coffee-faint);
  --cat-filter-text:       var(--b-coffee-mid);
  --cat-filter-hover-bg:   rgba(var(--b-gold-rgb), 0.06);
  --cat-filter-active-bg:  rgba(var(--b-gold-rgb), 0.12);
  --cat-filter-active-text:var(--b-coffee);
  --cat-filter-check-bg:   var(--b-coffee);
  --cat-filter-divider:    var(--b-line);
  --cat-input-bg:          var(--b-paper);
  --cat-input-border:      var(--b-line);
  --cat-input-text:        var(--b-coffee);
  --cat-input-ph:          var(--b-coffee-faint);
  --cat-input-focus:       rgba(var(--b-gold-rgb), 0.35);
  --cat-select-bg:         var(--b-paper);
  --cat-select-border:     var(--b-line);
  --cat-select-text:       var(--b-coffee-mid);
  --cat-result-count:      var(--b-coffee-faint);
  --cat-sort-text:         var(--b-coffee-soft);
  --cat-type-btn-bg:       var(--b-paper);
  --cat-type-btn-border:   var(--b-line);
  --cat-type-btn-text:     var(--b-coffee-soft);
  --cat-type-btn-hover-bg: rgba(var(--b-gold-rgb), 0.05);
  --cat-type-btn-on-bg:    var(--b-grad-coffee);
  --cat-page-btn-bg:       var(--b-paper);
  --cat-page-btn-border:   var(--b-line);
  --cat-page-btn-text:     var(--b-coffee-soft);
  --cat-page-active-bg:    var(--b-grad-gold);
  --cat-empty-text:        var(--b-coffee-faint);
  --cat-loading-text:      var(--b-coffee-faint);
  --cat-reset-text:        var(--b-terra);
  --cat-reset-hover-bg:    rgba(var(--b-terra-rgb), 0.06);
  --cat-more-summary:      var(--b-coffee-soft);
  --cat-more-border:       var(--b-line);
  --cat-badge-bg:          rgba(var(--b-coffee-rgb), 0.08);
  --cat-badge-text:        var(--b-coffee);
  --cat-mcp-bg:            rgba(138, 153, 173, 0.14);
  --cat-mcp-text:          var(--b-coffee-mid);
  --cat-tool-badge-bg:     rgba(var(--b-gold-rgb), 0.14);
  --cat-tool-badge-text:   var(--b-gold-dark);

  /* Detail */
  --det-card-bg:           var(--b-paper);
  --det-card-border:       var(--b-line);
  --det-card-shadow:       rgba(var(--b-coffee-rgb), 0.06);
  --det-main-bg:           var(--b-paper);
  --det-main-border:       var(--b-line);
  --det-hero-bg:           linear-gradient(180deg, var(--b-cream) 0%, var(--b-paper) 55%);
  --det-hero-border:       var(--b-line);
  --det-title:             var(--b-coffee);
  --det-subtitle:          var(--b-coffee-soft);
  --det-text:              var(--b-coffee-mid);
  --det-text-muted:        var(--b-coffee-faint);
  --det-label:             var(--b-coffee-faint);
  --det-accent:            var(--b-gold-dark);
  --det-divider:           var(--b-line);
  --det-breadcrumb-bg:     var(--b-paper);
  --det-breadcrumb-border: var(--b-line);
  --det-breadcrumb-text:   var(--b-coffee-soft);
  --det-info-bg:           rgba(var(--b-coffee-rgb), 0.025);
  --det-info-border:       var(--b-line);
  --det-usecase-bg:        linear-gradient(135deg, rgba(var(--b-gold-rgb), 0.10) 0%, var(--b-paper) 100%);
  --det-usecase-border:    rgba(var(--b-gold-rgb), 0.25);
  --det-tag-bg:            rgba(var(--b-gold-rgb), 0.12);
  --det-tag-text:          var(--b-gold-dark);
  --det-tag-border:        rgba(var(--b-gold-rgb), 0.20);
  --det-badge-bg:          rgba(var(--b-gold-rgb), 0.12);
  --det-badge-text:        var(--b-gold-dark);
  --det-rep-track:         rgba(var(--b-coffee-rgb), 0.05);
  --det-cap-bg:            rgba(107, 142, 78, 0.10);
  --det-cap-text:          var(--b-success);
  --det-cap-border:        rgba(107, 142, 78, 0.25);
  --det-pricing-bg:        rgba(var(--b-coffee-rgb), 0.025);
  --det-pricing-border:    var(--b-line);
  --det-price:             var(--b-coffee);
  --det-dot:               var(--b-gold);

  /* Chat */
  --ch-page-bg:            var(--b-cream);
  --ch-card-bg:            linear-gradient(145deg, var(--b-paper) 0%, rgba(var(--b-gold-rgb), 0.06) 100%);
  --ch-card-border:        rgba(var(--b-gold-rgb), 0.18);
  --ch-card-shadow:        var(--b-shadow-md);
  --ch-card-glow-start:    rgba(var(--b-gold-rgb), 0.05);
  --ch-card-glow-end:      rgba(0, 82, 255, 0.05);
  --ch-title:              var(--b-coffee);
  --ch-text:               var(--b-coffee-mid);
  --ch-text-muted:         var(--b-coffee-soft);
  --ch-accent:             var(--b-gold-dark);
  --ch-accent2:            var(--b-gold);
  --ch-divider:            var(--b-line);
  --ch-session-bg:         rgba(255, 255, 255, 0.7);
  --ch-session-border:     var(--b-line);
  --ch-session-hover-bg:   var(--b-paper);
  --ch-session-hover-border: rgba(var(--b-gold-rgb), 0.25);
  --ch-session-active-bg:  rgba(var(--b-gold-rgb), 0.12);
  --ch-session-active-border: rgba(var(--b-gold-rgb), 0.40);
  --ch-session-title:      var(--b-coffee);
  --ch-session-date:       var(--b-coffee-faint);
  --ch-llm-model-bg:       rgba(255, 255, 255, 0.78);
  --ch-llm-model-border:   var(--b-line);
  --ch-llm-model-hover-bg: var(--b-paper);
  --ch-llm-model-name:     var(--b-coffee);
  --ch-llm-headline:       var(--b-coffee);
  --ch-llm-desc:           var(--b-coffee-soft);
  --ch-msg-user-bg:        var(--b-grad-coffee);
  --ch-msg-user-text:      var(--b-cream);
  --ch-msg-ai-bg:          var(--b-paper);
  --ch-msg-ai-border:      var(--b-line);
  --ch-msg-ai-text:        var(--b-coffee-mid);
  --ch-input-bg:           var(--b-paper);
  --ch-input-border:       var(--b-line);
  --ch-input-text:         var(--b-coffee);
  --ch-input-ph:           var(--b-coffee-faint);
  --ch-voice-panel-bg:     rgba(var(--b-gold-rgb), 0.06);
  --ch-voice-panel-border: rgba(var(--b-gold-rgb), 0.15);
  --ch-voice-toggle-text:  var(--b-coffee);
  --ch-voice-hint:         var(--b-coffee-soft);
  --ch-voice-page-bg:      linear-gradient(180deg, var(--b-cream-deep) 0%, var(--b-cream) 50%, var(--b-paper) 100%);
  --ch-voice-win-bg:       rgba(255, 255, 255, 0.78);
  --ch-voice-win-border:   var(--b-line-hi);
  --ch-voice-win-title-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(244, 246, 248, 0.5) 100%);
  --ch-voice-win-title-border: rgba(var(--b-gold-rgb), 0.25);
  --ch-voice-win-body-bg:  linear-gradient(165deg, var(--b-cream) 0%, var(--b-paper) 38%, #ffffff 100%);
  --ch-voice-win-title:    var(--b-coffee-mid);
  --ch-voice-status:       var(--b-coffee-mid);
  --ch-voice-hint-text:    var(--b-coffee-faint);
  --ch-stop-bg:            linear-gradient(180deg, var(--b-paper) 0%, var(--b-cream) 100%);
  --ch-stop-border:        rgba(var(--b-gold-rgb), 0.40);
  --ch-stop-text:          var(--b-coffee);
  --ch-stop-svg:           var(--b-gold-dark);
  --ch-form-bg:            rgba(255, 255, 255, 0.78);
  --ch-form-border:        var(--b-line);
  --ch-form-shadow:        var(--b-shadow-md);
  --ch-voice-form-bg:      rgba(255, 255, 255, 0.5);
  --ch-voice-form-border:  rgba(var(--b-gold-rgb), 0.30);
  --ch-depth-label:        var(--b-coffee-soft);
  --ch-depth-btn-bg:       rgba(255, 255, 255, 0.7);
  --ch-depth-btn-border:   var(--b-line);
  --ch-depth-btn-text:     var(--b-coffee-mid);
  --ch-depth-btn-active-bg: var(--b-grad-gold);
  --ch-agent-item-bg:      rgba(255, 255, 255, 0.7);
  --ch-agent-item-border:  var(--b-line);
  --ch-agent-item-text:    var(--b-coffee-mid);
  --ch-empty-icon:         rgba(var(--b-gold-rgb), 0.12);
  --ch-empty-title:        var(--b-coffee-mid);
  --ch-empty-text:         var(--b-coffee-faint);

  /* Поверхности — переопределение для светлой темы */
  --surface-1:        rgba(var(--b-coffee-rgb), 0.04);
  --surface-2:        rgba(var(--b-coffee-rgb), 0.07);
  --surface-card:     linear-gradient(160deg, var(--b-paper) 0%, var(--b-cream) 100%);
  --surface-topbar:   rgba(244, 246, 248, 0.92);
  --surface-code:     rgba(var(--b-coffee-rgb), 0.05);
  --border-bright:    var(--b-line-hi);
  --border-accent:    rgba(var(--b-gold-rgb), 0.30);
  --border-subtle:    var(--b-line);

  /* ornament-* — стрипа / модал в светлой теме */
  --ornament-stripe-bg:     var(--b-navy-mid);
  --ornament-modal-bg:      var(--b-paper);
  --ornament-overlay:       var(--b-overlay-light);
}

/* ═══════════════════════════════════════════════════════════════════
   ЦВЕТОВЫЕ КОНТЕКСТЫ — [data-color]
   Каждый блок переопределяет --cur-* для всего поддерева.
   ═══════════════════════════════════════════════════════════════════ */

/* Единый источник градиентов кнопок/иконок (DRY для .btn--*, .ux-btn--*, ux-color-rules) */
:root {
  --pal-btn-sky:       linear-gradient(135deg, #0284c7, #0ea5e9);
  --pal-btn-sky-sh:    rgba(14, 165, 233, 0.4);
  --pal-icon-sky:      linear-gradient(145deg, #38bdf8, #0284c7);
  --pal-icon-sky-sh:   rgba(14, 165, 233, 0.45);

  --pal-btn-indigo:    linear-gradient(135deg, #4f46e5, #6366f1);
  --pal-btn-indigo-sh: rgba(99, 102, 241, 0.4);
  --pal-icon-indigo:   linear-gradient(145deg, #6366f1, #4f46e5);
  --pal-icon-indigo-sh: rgba(99, 102, 241, 0.45);

  --pal-btn-violet:    linear-gradient(135deg, #7c3aed, #8b5cf6);
  --pal-btn-violet-sh: rgba(124, 58, 237, 0.4);
  --pal-icon-violet:   linear-gradient(145deg, #a78bfa, #7c3aed);
  --pal-icon-violet-sh: rgba(124, 58, 237, 0.45);

  --pal-btn-emerald:   linear-gradient(135deg, #059669, #10b981);
  --pal-btn-emerald-sh: rgba(5, 150, 105, 0.4);
  --pal-icon-emerald:  linear-gradient(145deg, #34d399, #059669);
  --pal-icon-emerald-sh: rgba(5, 150, 105, 0.45);

  --pal-btn-amber:     linear-gradient(135deg, #b45309, #d97706);
  --pal-btn-amber-sh:  rgba(217, 119, 6, 0.4);
  --pal-icon-amber:    linear-gradient(145deg, #fbbf24, #d97706);
  --pal-icon-amber-sh: rgba(217, 119, 6, 0.45);

  --pal-btn-pink:      linear-gradient(135deg, #be185d, #ec4899);
  --pal-btn-pink-sh:   rgba(219, 39, 119, 0.4);
  --pal-icon-pink:     linear-gradient(145deg, #f472b6, #db2777);
  --pal-icon-pink-sh:  rgba(219, 39, 119, 0.45);
}

/* Дефолтный набор --cur-* (indigo) = явный контекст [data-color="indigo"] */
:root,
[data-color="indigo"] {
  --cur:               #818cf8;
  --cur-bg:            rgba(79, 70, 229, 0.10);
  --cur-border:        rgba(79, 70, 229, 0.25);
  --cur-hover-border:  rgba(99, 102, 241, 0.35);
  --cur-hover-shadow:  rgba(99, 102, 241, 0.15);
  --cur-top-border:    rgba(79, 70, 229, 0.45);
  --cur-bar:           linear-gradient(90deg, #4f46e5, #818cf8);
  --cur-btn:           var(--pal-btn-indigo);
  --cur-btn-shadow:    var(--pal-btn-indigo-sh);
  --cur-icon:          var(--pal-icon-indigo);
  --cur-icon-shadow:   var(--pal-icon-indigo-sh);
  --cur-topbar-border: rgba(79, 70, 229, 0.25);
  --cur-choice-active: linear-gradient(150deg, rgba(99, 102, 241, 0.95), rgba(67, 56, 202, 0.95));
}

[data-color="sky"] {
  --cur:               #38bdf8;
  --cur-bg:            rgba(14, 165, 233, 0.10);
  --cur-border:        rgba(14, 165, 233, 0.22);
  --cur-hover-border:  rgba(14, 165, 233, 0.35);
  --cur-hover-shadow:  rgba(14, 165, 233, 0.15);
  --cur-top-border:    rgba(14, 165, 233, 0.45);
  --cur-bar:           linear-gradient(90deg, #0ea5e9, #22d3ee);
  --cur-btn:           var(--pal-btn-sky);
  --cur-btn-shadow:    var(--pal-btn-sky-sh);
  --cur-icon:          var(--pal-icon-sky);
  --cur-icon-shadow:   var(--pal-icon-sky-sh);
  --cur-topbar-border: rgba(14, 165, 233, 0.20);
  --cur-choice-active: linear-gradient(150deg, rgba(14, 165, 233, 0.95), rgba(2, 132, 199, 0.95));
}

[data-color="violet"] {
  --cur:               #a78bfa;
  --cur-bg:            rgba(124, 58, 237, 0.10);
  --cur-border:        rgba(124, 58, 237, 0.25);
  --cur-hover-border:  rgba(124, 58, 237, 0.35);
  --cur-hover-shadow:  rgba(124, 58, 237, 0.15);
  --cur-top-border:    rgba(124, 58, 237, 0.45);
  --cur-bar:           linear-gradient(90deg, #7c3aed, #a78bfa);
  --cur-btn:           var(--pal-btn-violet);
  --cur-btn-shadow:    var(--pal-btn-violet-sh);
  --cur-icon:          var(--pal-icon-violet);
  --cur-icon-shadow:   var(--pal-icon-violet-sh);
  --cur-topbar-border: rgba(124, 58, 237, 0.20);
  --cur-choice-active: linear-gradient(150deg, rgba(139, 92, 246, 0.95), rgba(109, 40, 217, 0.95));
}

[data-color="emerald"] {
  --cur:               #34d399;
  --cur-bg:            rgba(5, 150, 105, 0.10);
  --cur-border:        rgba(5, 150, 105, 0.22);
  --cur-hover-border:  rgba(5, 150, 105, 0.35);
  --cur-hover-shadow:  rgba(5, 150, 105, 0.15);
  --cur-top-border:    rgba(5, 150, 105, 0.45);
  --cur-bar:           linear-gradient(90deg, #059669, #34d399);
  --cur-btn:           var(--pal-btn-emerald);
  --cur-btn-shadow:    var(--pal-btn-emerald-sh);
  --cur-icon:          var(--pal-icon-emerald);
  --cur-icon-shadow:   var(--pal-icon-emerald-sh);
  --cur-topbar-border: rgba(5, 150, 105, 0.20);
  --cur-choice-active: linear-gradient(150deg, rgba(16, 185, 129, 0.95), rgba(4, 120, 87, 0.95));
}

[data-color="amber"] {
  --cur:               #fbbf24;
  --cur-bg:            rgba(217, 119, 6, 0.10);
  --cur-border:        rgba(217, 119, 6, 0.25);
  --cur-hover-border:  rgba(217, 119, 6, 0.35);
  --cur-hover-shadow:  rgba(217, 119, 6, 0.15);
  --cur-top-border:    rgba(217, 119, 6, 0.45);
  --cur-bar:           linear-gradient(90deg, #d97706, #fbbf24);
  --cur-btn:           var(--pal-btn-amber);
  --cur-btn-shadow:    var(--pal-btn-amber-sh);
  --cur-icon:          var(--pal-icon-amber);
  --cur-icon-shadow:   var(--pal-icon-amber-sh);
  --cur-topbar-border: rgba(217, 119, 6, 0.20);
  --cur-choice-active: linear-gradient(150deg, rgba(245, 158, 11, 0.95), rgba(180, 83, 9, 0.95));
}

[data-color="pink"] {
  --cur:               #f472b6;
  --cur-bg:            rgba(219, 39, 119, 0.10);
  --cur-border:        rgba(219, 39, 119, 0.25);
  --cur-hover-border:  rgba(219, 39, 119, 0.35);
  --cur-hover-shadow:  rgba(219, 39, 119, 0.15);
  --cur-top-border:    rgba(219, 39, 119, 0.45);
  --cur-bar:           linear-gradient(90deg, #db2777, #f472b6);
  --cur-btn:           var(--pal-btn-pink);
  --cur-btn-shadow:    var(--pal-btn-pink-sh);
  --cur-icon:          var(--pal-icon-pink);
  --cur-icon-shadow:   var(--pal-icon-pink-sh);
  --cur-topbar-border: rgba(219, 39, 119, 0.20);
  --cur-choice-active: linear-gradient(150deg, rgba(236, 72, 153, 0.95), rgba(190, 24, 93, 0.95));
}

/* ───────────── Gold (фирменный кремовый акцент) ─────────────────────── */
[data-color="gold"] {
  --cur:               var(--b-gold-light);
  --cur-bg:            rgba(var(--b-gold-rgb), 0.10);
  --cur-border:        rgba(var(--b-gold-rgb), 0.30);
  --cur-hover-border:  rgba(var(--b-gold-rgb), 0.45);
  --cur-hover-shadow:  rgba(var(--b-gold-rgb), 0.20);
  --cur-top-border:    rgba(var(--b-gold-rgb), 0.55);
  --cur-bar:           var(--b-grad-gold);
  --cur-btn:           var(--b-grad-gold);
  --cur-btn-shadow:    rgba(var(--b-gold-rgb), 0.40);
  --cur-icon:          linear-gradient(145deg, var(--b-gold-bright), var(--b-gold));
  --cur-icon-shadow:   rgba(var(--b-gold-rgb), 0.45);
  --cur-topbar-border: rgba(var(--b-gold-rgb), 0.25);
  --cur-choice-active: linear-gradient(150deg, var(--b-gold) 0%, var(--b-gold-dark) 100%);
}



/* ── tokens/compat.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Compatibility Aliases
   Версия: 1.0.0

   Файл служит «мостом» для префиксов aif (--ux-*) и
   om (--ornament-*): он мапит их на унифицированные токены
   из brand.css / themes.css.

   Подключается ПОСЛЕ themes.css, ДО компонентов.
   Благодаря этому:
   - все .ux-* / .ornament-* компоненты копируются «как есть»
   - они автоматически реагируют на [data-theme] и [data-color]
   - постепенная миграция возможна без правки исходников

   Если когда-нибудь алиасы перестанут понадобиться — просто
   удалите этот файл из импортов.
   ═══════════════════════════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ux-* — алиасы --ux-*                                   ║
   ╚══════════════════════════════════════════════════════════════════╝ */
:root {
  /* Поверхности */
  --ux-bg-void:        var(--b-void);
  --ux-bg-deep:        var(--b-deep);
  --ux-bg:             var(--b-night);
  --ux-surface-1:      var(--surface-1);
  --ux-surface-2:      var(--surface-2);
  --ux-glass:          rgba(14, 17, 35, 0.85);
  --ux-glass-strong:   rgba(10, 12, 26, 0.95);
  --ux-card-bg:        var(--surface-card);
  --ux-topbar-bg:      var(--surface-topbar);
  --ux-code-bg:        var(--surface-code);

  /* Границы */
  --ux-border:         var(--b-line-dk);
  --ux-border-bright:  var(--border-bright);
  --ux-border-accent:  var(--border-accent);
  --ux-border-subtle:  var(--border-subtle);
  --ux-border-dark:    var(--b-line-dk-soft);

  /* Акцент */
  --ux-accent:         var(--cur);
  --ux-accent-light:   var(--cur);
  --ux-accent-bright:  var(--cur);

  /* Семантика */
  --ux-error:          var(--b-error);
  --ux-error-bg:       rgba(244, 63, 94, 0.08);
  --ux-error-border:   rgba(244, 63, 94, 0.25);
  --ux-error-text:     var(--b-error-light);

  --ux-cyan:           #06b6d4;
  --ux-cyan-light:     #22d3ee;
  --ux-violet:         #7c3aed;
  --ux-emerald:        var(--b-success-br);
  --ux-amber:          var(--b-warn-br);
  --ux-pink:           #ec4899;
  --ux-rose:           #f43f5e;

  /* Модульные цвета */
  --ux-c-sky:            var(--b-c-sky);
  --ux-c-sky-bg:         var(--b-c-sky-bg);
  --ux-c-sky-border:     var(--b-c-sky-border);
  --ux-c-sky-rgb:        var(--b-c-sky-rgb);

  --ux-c-indigo:         var(--b-c-indigo);
  --ux-c-indigo-bg:      var(--b-c-indigo-bg);
  --ux-c-indigo-border:  var(--b-c-indigo-border);
  --ux-c-indigo-rgb:     var(--b-c-indigo-rgb);

  --ux-c-violet:         var(--b-c-violet);
  --ux-c-violet-bg:      var(--b-c-violet-bg);
  --ux-c-violet-border:  var(--b-c-violet-border);
  --ux-c-violet-rgb:     var(--b-c-violet-rgb);

  --ux-c-emerald:        var(--b-c-emerald);
  --ux-c-emerald-bg:     var(--b-c-emerald-bg);
  --ux-c-emerald-border: var(--b-c-emerald-border);
  --ux-c-emerald-rgb:    var(--b-c-emerald-rgb);

  --ux-c-amber:          var(--b-c-amber);
  --ux-c-amber-bg:       var(--b-c-amber-bg);
  --ux-c-amber-border:   var(--b-c-amber-border);
  --ux-c-amber-rgb:      var(--b-c-amber-rgb);

  --ux-c-pink:           var(--b-c-pink);
  --ux-c-pink-bg:        var(--b-c-pink-bg);
  --ux-c-pink-border:    var(--b-c-pink-border);
  --ux-c-pink-rgb:       var(--b-c-pink-rgb);

  /* Текст */
  --ux-text-1: var(--c-text-1);
  --ux-text-2: var(--c-text-1);
  --ux-text-3: var(--c-text-2);
  --ux-text-4: var(--c-text-3);
  --ux-text-5: var(--b-slate-5);
  --ux-text-6: var(--b-slate-6);

  /* Радиусы */
  --ux-r-xs:   var(--r-xs);
  --ux-r-sm:   var(--r-sm);
  --ux-r-md:   var(--r-md);
  --ux-r-lg:   var(--r-lg);
  --ux-r-xl:   var(--r-xl);
  --ux-r-2xl:  var(--r-2xl);
  --ux-r-card: var(--r-card);
  --ux-r-full: var(--r-full);

  /* Тени */
  --ux-shadow-xs:        0 1px 3px rgba(0, 0, 0, 0.3);
  --ux-shadow-sm:        var(--b-shadow-dk-sm);
  --ux-shadow-md:        var(--b-shadow-dk-md);
  --ux-shadow-lg:        var(--b-shadow-dk-lg);
  --ux-shadow-accent:    0 4px 24px -4px rgba(99, 102, 241, 0.4);
  --ux-shadow-accent-lg: 0 8px 48px -8px rgba(99, 102, 241, 0.35);

  /* Шрифты */
  --ux-font-sans: var(--font-ui);
  --ux-font-mono: var(--font-mono);

  /* Easing */
  --ux-ease-spring: var(--ease-spring);
  --ux-ease-out:    var(--ease-out);
  --ux-ease-std:    var(--ease-std);

  /* Layout */
  --ux-max-w-wide:    var(--max-w-wide);
  --ux-max-w-default: var(--max-w-default);
  --ux-max-w-narrow:  var(--max-w-narrow);
  --ux-header-height: 3.75rem;
  --ux-topbar-height: var(--topbar-height);
  --ux-topbar-top:    3.75rem;

  /* Z-индексы */
  --ux-z-topbar:  var(--z-topbar);
  --ux-z-header:  var(--z-header);
  --ux-z-tooltip: var(--z-tooltip);
  --ux-z-overlay: var(--z-overlay);

  /* Контекстный цвет — мап на --cur-* */
  --ux-cur:                  var(--cur);
  --ux-cur-bg:               var(--cur-bg);
  --ux-cur-border:           var(--cur-border);
  --ux-cur-hover-border:     var(--cur-hover-border);
  --ux-cur-hover-shadow:     var(--cur-hover-shadow);
  --ux-cur-top-border:       var(--cur-top-border);
  --ux-cur-bar:              var(--cur-bar);
  --ux-cur-btn:              var(--cur-btn);
  --ux-cur-btn-shadow:       var(--cur-btn-shadow);
  --ux-cur-icon:             var(--cur-icon);
  --ux-cur-icon-shadow:      var(--cur-icon-shadow);
  --ux-cur-topbar-border:    var(--cur-topbar-border);
  --ux-cur-choice-active:    var(--cur-choice-active);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ornament-* — алиасы --ornament-*                                     ║
   ╚══════════════════════════════════════════════════════════════════╝ */
:root {
  /* Фон */
  --ornament-bg:          var(--page-bg);
  --ornament-bg-alt:      var(--b-cream-deep);
  --ornament-surface:     var(--b-paper);

  /* Границы */
  --ornament-border:      var(--b-line-hi);
  --ornament-border-soft: var(--b-line);

  /* Текст */
  --ornament-ink:         var(--c-text-1);
  --ornament-ink-2:       var(--c-text-1);
  --ornament-ink-3:       var(--c-text-2);
  --ornament-ink-mute:    var(--c-text-3);

  /* Золото */
  --ornament-gold:        var(--b-gold);
  --ornament-gold-light:  var(--b-gold-light);
  --ornament-gold-dark:   var(--b-gold-dark);
  --ornament-gold-bg:     rgba(var(--b-gold-rgb), 0.09);
  --ornament-gold-border: rgba(var(--b-gold-rgb), 0.35);

  /* Navy */
  --ornament-navy:        var(--b-navy);
  --ornament-navy-soft:   var(--b-navy-soft);
  --ornament-navy-mid:    var(--b-navy-mid);

  /* Оверлей */
  --ornament-overlay:     var(--b-overlay-light);

  /* Шрифты (--font-serif из brand.css; без самоссылки) */
  --font-sans:      var(--font-ui);

  /* Радиусы OM (пиксельные алиасы; не трогаем глобальные --r-* из brand.css) */
  --ornament-r-sm:   2px;
  --ornament-r-md:   4px;
  --ornament-r-lg:   8px;
  --ornament-r-xl:   12px;
  --ornament-r-full: 999px;

  /* Тени */
  --shadow-card:   0 1px 14px -2px rgba(15, 12, 9, 0.1), 0 1px 0 rgba(15, 12, 9, 0.04);
  --shadow-hover:  0 8px 30px -6px rgba(15, 12, 9, 0.16), 0 1px 0 rgba(15, 12, 9, 0.06);
  --shadow-gold:   0 3px 16px -3px rgba(var(--b-gold-rgb), 0.28);
  --shadow-header: 0 1px 16px -3px rgba(26, 22, 18, 0.06);
}

/* В тёмной теме переопределяем тёмные значения --ornament-* */
[data-theme="dark"] {
  --ornament-bg:          var(--page-bg);
  --ornament-bg-alt:      #0a0f1c;
  --ornament-surface:     var(--b-dark-card);
  --ornament-border:      var(--b-line-dk-hi);
  --ornament-border-soft: var(--b-line-dk);
  --ornament-ink:         var(--b-slate-1);
  --ornament-ink-2:       var(--b-slate-2);
  --ornament-ink-3:       var(--b-slate-3);
  --ornament-ink-mute:    var(--b-slate-4);
  --ornament-overlay:     var(--b-overlay-dark);
}



/* ───── 2. BASE ───────────────────────────────────────────────── */

/* ── base/reset.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Base Reset
   Объединённый сброс из трёх kit. Зависит от tokens/brand.css + themes.css.
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  overflow-x: clip;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: clip;
  max-width: 100%;
  background-color: var(--page-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--t-base), color var(--t-base);
}

#app { display: block; min-height: 100vh; }

/* ─── Скроллбар ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--b-coffee-rgb), 0.18);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--b-coffee-rgb), 0.32);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(var(--rgb-white), 0.08);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--rgb-white), 0.18);
}

/* ─── Выделение текста ───────────────────────────────────────────── */
::selection {
  background: rgba(var(--b-gold-rgb), 0.25);
  color: var(--b-coffee);
}
[data-theme="dark"] ::selection {
  background: rgba(var(--rgb-indigo), 0.30);
  color: var(--b-slate-1);
}

/* ─── Заголовки — Playfair Display ────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-text);
}
h1:focus { outline: none; }

/* ─── Ссылки ─────────────────────────────────────────────────────── */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--t-base);
}
a:hover { filter: brightness(1.15); }

/* ─── Базовая страница — однородный фон ──────────────────────────── */
.page {
  min-height: 100vh;
  background-color: var(--page-bg);
  position: relative;
  z-index: 1;
}

/* Опциональный точечный паттерн (включается классом .page--dots) */
.page--dots {
  background-image: radial-gradient(circle, var(--page-dot) 1px, transparent 1px);
  background-size: 28px 28px;
}

.page--lp {
  background: transparent !important;
  background-image: none !important;
}

/* Атмосферный фон тёмной темы */
[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(var(--b-c-indigo-rgb), 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 90% 30%,  rgba(var(--b-c-sky-rgb), 0.08)  0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 5% 70%,   rgba(var(--b-c-violet-rgb), 0.07) 0%, transparent 50%);
}

/* ─── Контейнер контента ─────────────────────────────────────────── */
.content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 5.5rem 1.25rem 3rem;
}

@media (min-width: 640px) {
  .content { padding-top: 6rem; padding-left: 2rem; padding-right: 2rem; }
}

@media (min-width: 1024px) {
  .content { padding-top: 6.5rem; padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* ─── Нижняя плашка #blazor-error-ui (id для совместимости) ─────── */
/* ─── iOS zoom prevention on input focus ────────────────────────── */
@media (pointer: coarse) {
  input, textarea, select { font-size: max(16px, 1em); }
}

/* ─── Touch device: disable sticky hover effects ────────────────── */
@media (hover: none) {
  .card:hover {
    transform: none;
    border-color: var(--border-subtle);
    box-shadow: var(--b-shadow-dk-sm);
  }
  .btn:not(:disabled):hover {
    transform: none;
    background: var(--surface-1);
  }
  .btn--solid:not(:disabled):hover,
  .btn--primary:not(:disabled):hover {
    filter: none;
    transform: none;
  }
}

#blazor-error-ui {
  background: rgba(var(--b-c-amber-rgb), 0.18);
  border-top: 1px solid var(--b-warn-br);
  bottom: 0; left: 0;
  padding: .75rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 2000;
  display: none;
  font-size: var(--ts-base);
}



/* ── base/animations.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Animations (@keyframes + utilities)
   Объединение анимаций из трёх kit.
   Префикс ui- (не пересекается с auto-* / katex / hljs).
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Вращение — спиннеры ────────────────────────────────────────── */
@keyframes ui-spin {
  to { transform: rotate(360deg); }
}

/* ─── Shimmer — градиентный текст / скелетон-загрузка ─────────────── */
@keyframes ui-shimmer {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

@keyframes ui-shimmer-bar {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ─── Пульсирующая точка — индикаторы (золото) ────────────────────── */
@keyframes ui-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0   rgba(var(--b-gold-rgb), 0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(var(--b-gold-rgb), 0); }
}

/* ─── Пульсирующее кольцо — акцентный highlight (indigo) ──────────── */
@keyframes ui-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(var(--rgb-indigo), 0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--rgb-indigo), 0); }
  100% { box-shadow: 0 0 0 0   rgba(var(--rgb-indigo), 0); }
}

/* ─── Мягкое мерцание ─────────────────────────────────────────────── */
@keyframes ui-glow-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ─── Парение — Hero-портрет, логотипы ────────────────────────────── */
@keyframes ui-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes ui-float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ─── Пульсация eyebrow-метки ────────────────────────────────────── */
@keyframes ui-eyebrow-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(var(--b-gold-rgb), 0.45); }
  55%      { box-shadow: 0 0 0 5px rgba(var(--b-gold-rgb), 0); }
}

/* ─── Появление снизу — карточки, результаты ─────────────────────── */
@keyframes ui-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Появление с увеличением — модалки ─────────────────────────── */
@keyframes ui-fade-scale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   ALIASES — обратная совместимость со старыми kit
   ═══════════════════════════════════════════════════════════════════ */

@keyframes ring-spin   { to { transform: rotate(360deg); } }
@keyframes ux-spin    { to { transform: rotate(360deg); } }
@keyframes shimmer     { from { background-position: 0% center; } to { background-position: 200% center; } }
@keyframes glow-pulse  { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes subtle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes eyebrow-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(var(--b-gold-rgb), 0.45); }
  55%      { box-shadow: 0 0 0 5px rgba(var(--b-gold-rgb), 0); }
}
@keyframes ux-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(var(--rgb-indigo), 0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--rgb-indigo), 0); }
  100% { box-shadow: 0 0 0 0   rgba(var(--rgb-indigo), 0); }
}
@keyframes ux-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes ux-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ux-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════ */

.fade-up,
.ux-fade-up   { animation: ui-fade-up 0.25s ease both; }
.fade-scale    { animation: ui-fade-scale 0.25s var(--ease-out) both; }
.float         { animation: ui-float 3.5s ease-in-out infinite; }
.float-soft    { animation: ui-float-soft 4s ease-in-out infinite; }
.pulse-ring    { animation: ui-pulse-ring 2s ease-in-out infinite; }
.glow-pulse    { animation: ui-glow-pulse 2.4s ease-in-out infinite; }

/* ─── Skeleton loading ─────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--surface-1) 25%,
    var(--surface-2) 50%,
    var(--surface-1) 75%);
  background-size: 200% 100%;
  animation: ui-shimmer-bar 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
.skeleton * { visibility: hidden; }
.skeleton--circle { border-radius: 50%; }
.skeleton--text  { height: 1em; margin-bottom: 0.5em; }
.skeleton--text:last-child { width: 60%; }
.skeleton--title { height: 1.4em; margin-bottom: 0.6em; width: 40%; }
.skeleton--avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.skeleton--btn   { height: 2.75rem; width: 8rem; border-radius: var(--r-full); }
.skeleton--card  { height: 12rem; border-radius: var(--r-card); }

[data-theme="light"] .skeleton {
  background: linear-gradient(90deg,
    rgba(var(--b-coffee-rgb), 0.04) 25%,
    rgba(var(--b-coffee-rgb), 0.08) 50%,
    rgba(var(--b-coffee-rgb), 0.04) 75%);
  background-size: 200% 100%;
}



/* ── base/glass.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Glass Utilities
   Glassmorphism, адаптация под обе темы.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Base glass surface ─── */
.glass {
  background:              var(--glass-bg, var(--glass-bg-dark));
  backdrop-filter:         var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border:                  1px solid var(--glass-border);
}

[data-theme="light"] .glass {
  background:   var(--glass-bg-light);
  border-color: var(--glass-border-lt);
}

/* ─── Blur size modifiers ─── */
.glass--sm  { backdrop-filter: var(--glass-blur-sm)  var(--glass-sat);      -webkit-backdrop-filter: var(--glass-blur-sm)  var(--glass-sat); }
.glass--md  { backdrop-filter: var(--glass-blur-md)  var(--glass-sat);      -webkit-backdrop-filter: var(--glass-blur-md)  var(--glass-sat); }
.glass--lg  { backdrop-filter: var(--glass-blur-lg)  var(--glass-sat);      -webkit-backdrop-filter: var(--glass-blur-lg)  var(--glass-sat); }
.glass--xl  { backdrop-filter: var(--glass-blur-xl)  var(--glass-sat);      -webkit-backdrop-filter: var(--glass-blur-xl)  var(--glass-sat); }
.glass--xxl { backdrop-filter: var(--glass-blur-xxl) var(--glass-sat-high); -webkit-backdrop-filter: var(--glass-blur-xxl) var(--glass-sat-high); }

/* ─── Saturation modifiers ─── */
.glass--sat-low  { backdrop-filter: var(--glass-blur-md) var(--glass-sat-low);  -webkit-backdrop-filter: var(--glass-blur-md) var(--glass-sat-low); }
.glass--sat-high { backdrop-filter: var(--glass-blur-md) var(--glass-sat-high); -webkit-backdrop-filter: var(--glass-blur-md) var(--glass-sat-high); }

/* ─── Opacity variants ─── */
.glass--opaque { background: color-mix(in srgb, var(--b-dark-card) 92%, transparent); }
[data-theme="light"] .glass--opaque { background: color-mix(in srgb, var(--b-paper-hi) 95%, transparent); }

/* ─── Card variant (rounded + shadow) ─── */
.glass-card {
  background:              var(--glass-bg, var(--glass-bg-dark));
  backdrop-filter:         var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border:                  1px solid var(--glass-border);
  border-radius:           12px;
  box-shadow:              0 4px 24px rgba(0,0,0,0.18);
}

[data-theme="light"] .glass-card {
  background:   var(--glass-bg-light);
  border-color: var(--glass-border-lt);
  box-shadow:   var(--b-shadow-md);
}



/* ── base/typography.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Typography (.prose Markdown formatting)
   FAI HUB: Space Grotesk (display) + Hanken Grotesk (body).

   Применяется к контейнеру .prose для форматирования Markdown.
   Класс .ux-prose оставлен как алиас для совместимости.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Display / section headings (FAI HUB) ───────────────────────── */
.fai-display,
h1, h2, h3,
.lp-section__title,
.ui-page-title,
.cat-hero__title,
.det-hero__title {
  font-family: var(--font-display, var(--font-serif));
  letter-spacing: -0.02em;
  font-weight: 700;
}

.fai-kicker,
.lp-section__kicker,
.cat-hero__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--b-gold, #2f6aff);
  text-transform: none;
}

/* ─── Заголовки ──────────────────────────────────────────────────── */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
.ux-prose h1,
.ux-prose h2,
.ux-prose h3,
.ux-prose h4,
.ux-prose h5,
.ux-prose h6 {
  font-family: var(--font-display, var(--font-serif));
  color: var(--c-text-1);
  margin: 1.35rem 0 0.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.prose h1, .ux-prose h1 {
  font-size: var(--ts-3xl);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.35rem;
}
.prose h2, .ux-prose h2 { font-size: var(--ts-2xl); color: var(--c-text-1); }
.prose h3, .ux-prose h3 { font-size: var(--ts-lg); color: var(--c-text-2); }
.prose h4, .ux-prose h4 {
  font-family: var(--font-ui);
  font-size: var(--ts-sm);
  color: var(--cur);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── Параграфы и базовый текст ──────────────────────────────────── */
.prose p, .ux-prose p {
  font-family: var(--font-body);
  font-size: var(--ts-base);
  line-height: 1.65;
  color: var(--c-text-2);
  margin: 0 0 0.85rem;
}
.prose strong, .ux-prose strong { color: var(--c-text-1); font-weight: 700; }
.prose em,     .ux-prose em     { color: var(--c-text-2); font-style: italic; }
.prose a,      .ux-prose a {
  color: var(--cur);
  text-decoration: none;
  border-bottom: 1px dashed rgba(165, 180, 252, 0.4);
  transition: color var(--t-hover), border-color var(--t-hover);
}
.prose a:hover, .ux-prose a:hover {
  filter: brightness(1.15);
  border-bottom-color: rgba(199, 210, 254, 0.7);
}

/* ─── Inline-код ─────────────────────────────────────────────────── */
.prose code, .ux-prose code {
  font-family: var(--font-mono);
  font-size: var(--ts-xs);
  background: var(--cur-bg);
  padding: 0.1rem 0.38rem;
  border-radius: var(--r-xs);
  color: var(--cur);
  border: 1px solid var(--cur-border);
}

/* ─── Блоки кода (highlight.js совместимые) ──────────────────────── */
.prose pre, .ux-prose pre {
  background: var(--b-deep);
  border: 1px solid var(--cur-border);
  border-radius: var(--r-md);
  padding: 0;
  overflow-x: auto;
  margin: 0 0 1rem;
  box-shadow: var(--b-shadow-dk-sm);
}
[data-theme="light"] .prose pre,
[data-theme="light"] .ux-prose pre {
  background: var(--b-paper-hi);
  border-color: var(--b-line-hi);
  box-shadow: var(--b-shadow-sm);
}
.prose pre code,
.prose pre code.hljs,
.ux-prose pre code,
.ux-prose pre code.hljs {
  display: block;
  padding: 0.9rem 1rem;
  background: transparent !important;
  border: none;
  font-family: var(--font-mono);
  font-size: var(--ts-xs);
  line-height: 1.6;
  color: var(--b-slate-3);
}
[data-theme="light"] .prose pre code,
[data-theme="light"] .ux-prose pre code { color: var(--b-coffee-mid); }

/* ─── Списки ─────────────────────────────────────────────────────── */
.prose ul,
.prose ol,
.ux-prose ul,
.ux-prose ol {
  font-size: var(--ts-base);
  color: var(--c-text-2);
  padding-left: 1.35rem;
  margin: 0 0 0.85rem;
  line-height: 1.65;
}
.prose li, .ux-prose li { margin-bottom: 0.35rem; }
.prose li::marker, .ux-prose li::marker { color: var(--cur); font-weight: 700; }

/* Task lists (Markdig) */
.prose .contains-task-list,
.ux-prose .contains-task-list { list-style: none; padding-left: 0.2rem; }
.prose .task-list-item,
.ux-prose .task-list-item     { display: flex; align-items: baseline; gap: 0.5rem; }
.prose .task-list-item input[type="checkbox"],
.ux-prose .task-list-item input[type="checkbox"] {
  accent-color: var(--cur);
  flex-shrink: 0;
}

/* ─── Цитаты ─────────────────────────────────────────────────────── */
.prose blockquote, .ux-prose blockquote {
  margin: 0 0 1rem;
  padding: 0.65rem 1rem;
  border-left: 3px solid var(--cur);
  background: var(--cur-bg);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--c-text-2);
  font-size: var(--ts-md);
  line-height: 1.65;
  font-style: italic;
}
.prose blockquote p:last-child,
.ux-prose blockquote p:last-child { margin-bottom: 0; }

/* ─── Таблицы ────────────────────────────────────────────────────── */
.prose table, .ux-prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 0 1rem;
  font-size: var(--ts-base);
  border: 1px solid var(--cur-border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-code);
}
.prose thead, .ux-prose thead { background: var(--cur-bg); }
.prose th, .ux-prose th {
  padding: 0.55rem 0.85rem;
  text-align: left;
  color: var(--c-text-1);
  font-weight: 700;
  font-size: var(--ts-xs);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--cur-border);
}
.prose td, .ux-prose td {
  padding: 0.5rem 0.85rem;
  color: var(--c-text-2);
  line-height: 1.55;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.prose tbody tr:last-child td,
.ux-prose tbody tr:last-child td { border-bottom: none; }
.prose tbody tr:hover,
.ux-prose tbody tr:hover { background: var(--cur-bg); }

/* ─── Горизонтальный разделитель ─────────────────────────────────── */
.prose hr, .ux-prose hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cur-border), transparent);
  margin: 1.4rem 0;
}

/* ─── Изображения ────────────────────────────────────────────────── */
.prose img, .ux-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  margin: 0.5rem 0;
}

/* ─── KaTeX — математика ─────────────────────────────────────────── */
.prose .math.math-display,
.prose .katex-display,
.ux-prose .math.math-display,
.ux-prose .katex-display {
  margin: 0.85rem 0;
  padding: 0.65rem 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--cur-bg);
  border-left: 3px solid var(--cur-border);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.prose .katex,
.ux-prose .katex { font-size: 1.02em; color: var(--c-text-1); }
.prose .katex-display > .katex,
.ux-prose .katex-display > .katex { font-size: 1.08em; }

/* ─── Сноски ─────────────────────────────────────────────────────── */
.prose .footnotes,
.ux-prose .footnotes {
  font-size: var(--ts-xs);
  color: var(--c-text-3);
  border-top: 1px solid var(--border-subtle);
  margin-top: 1.5rem;
  padding-top: 0.85rem;
}
.prose .footnotes ol,
.ux-prose .footnotes ol { padding-left: 1.1rem; }

/* ─── Placeholder ────────────────────────────────────────────────── */
.prose .th-placeholder,
.ux-prose .th-placeholder {
  color: var(--c-text-3);
  font-style: italic;
}



/* ───── 3. UNIFIED COMPONENTS (no-prefix, canonical) ──────────── */

/* ── components/badge.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Badge (no-prefix, canonical)
   Универсальный бейдж: реагирует на [data-color] контекст
   и поддерживает явные модификаторы.

   Использование:
     <span class="badge">Default</span>
     <span class="badge badge--mono">AI.NeuralNetworks</span>
     <span class="badge badge--version">v3.0</span>
     <span class="badge badge--chip">Apache-2.0</span>
     <a    class="badge badge--chip badge--link" href="...">GitHub →</a>
     <span class="badge badge--success">Готово</span>

   В контексте:
     <section data-color="emerald">
       <span class="badge">Live</span>   ← станет emerald
     </section>
   ═══════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-ui);
  font-size: var(--ts-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cur);
  background: var(--cur-bg);
  border: 1px solid var(--cur-border);
  border-radius: var(--r-md);
  padding: 0.22rem 0.55rem;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
}

/* ─── Mono — для API-классов, кода ──────────────────────────────── */
.badge--mono {
  font-family: var(--font-mono);
  font-size: var(--ts-2xs);
  padding: 0.12rem 0.45rem;
  border-radius: var(--r-xs);
  border: none;
}

/* ─── Pill — без рамки, плотный фон ─────────────────────────────── */
.badge--pill {
  border-radius: var(--r-full);
  padding: 0.25rem 0.7rem;
}

/* ─── Solid — заливка цветом ─────────────────────────────────────── */
.badge--solid {
  background: var(--cur);
  color: #fff;
  border-color: transparent;
}

/* ─── Version — фиолетовый градиент-фирма ───────────────────────── */
.badge--version {
  display: inline-block;
  font-size: var(--ts-3xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--cur-btn);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  padding: 0.22rem 0.48rem;
  line-height: 1;
  box-shadow: 0 2px 8px -2px var(--cur-btn-shadow);
  text-transform: uppercase;
}

/* Floating вариант — поверх логотипа */
.badge--float {
  position: absolute;
  bottom: -0.3rem;
  right: -0.9rem;
  transform: rotate(-4deg);
  box-shadow: 0 4px 14px -3px var(--cur-btn-shadow);
}

/* ─── Chip — мета-информация (нейтральный) ──────────────────────── */
.badge--chip {
  font-size: var(--ts-xs);
  color: var(--c-text-2);
  background: var(--surface-1);
  border-color: var(--border-subtle);
  border-radius: var(--r-md);
  padding: 0.35rem 0.7rem;
}

.badge--chip.badge--link {
  color: var(--cur);
  text-decoration: none;
  transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.badge--chip.badge--link:hover {
  color: var(--c-text-1);
  border-color: var(--cur-border);
  background: var(--cur-bg);
  filter: brightness(1.2);
}

/* ─── Семантические варианты ─────────────────────────────────────── */
.badge--success {
  color: var(--b-success-light);
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.25);
}
.badge--warning {
  color: var(--b-warn-light);
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.25);
}
.badge--error {
  color: var(--b-error-light);
  background: rgba(244, 63, 94, 0.10);
  border-color: rgba(244, 63, 94, 0.25);
}
.badge--info {
  color: var(--b-info-light);
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(59, 130, 246, 0.25);
}

[data-theme="light"] .badge--success { background: rgba(107, 142, 78, 0.10); border-color: rgba(107, 142, 78, 0.25); color: var(--b-success); }
[data-theme="light"] .badge--warning { background: rgba(200, 154, 74, 0.10); border-color: rgba(200, 154, 74, 0.25); color: var(--b-warn); }
[data-theme="light"] .badge--error   { background: rgba(var(--b-terra-rgb), 0.08); border-color: rgba(var(--b-terra-rgb), 0.25); color: var(--b-terra); }
[data-theme="light"] .badge--info    { background: rgba(94, 122, 155, 0.10); border-color: rgba(94, 122, 155, 0.25); color: var(--b-info); }

/* ─── Размеры ────────────────────────────────────────────────────── */
.badge--sm { font-size: var(--ts-2xs); padding: 0.15rem 0.4rem; }
.badge--lg { font-size: var(--ts-base); padding: 0.35rem 0.85rem; }

/* ─── Gradient text — для героев ────────────────────────────────── */
.gradient-text {
  background: var(--cur-bar);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .gradient-text {
  background: var(--b-grad-coffee);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}



/* ── components/button.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Button (no-prefix, canonical)
   Объединяет:
   - .ux-btn — пилюлевидная, цветовые модификаторы
   - .btn-primary (ornament-паттерн) — shimmer-эффект на hover
   - .ui-btn — простая утилитарная

   Использование:
     <button class="btn">Default</button>
     <button class="btn btn--primary">Primary</button>     ← с shimmer
     <button class="btn btn--ghost">Ghost</button>
     <button class="btn btn--solid">Solid (uses --cur)</button>
     <button class="btn btn--lg btn--emerald">Emerald large</button>

   Цветовой контекст:
     <section data-color="violet">
       <button class="btn btn--solid">Violet (auto)</button>
     </section>

   Доступность:
     - Иконочные кнопки ДОЛЖНЫ иметь aria-label:
       <button class="btn btn--solid" aria-label="Отправить">
         <svg>...</svg>
       </button>
     - Кнопки с состоянием загрузки — aria-busy="true":
       <button class="btn btn--solid" aria-busy="true">
         <span class="btn-spinner"></span> Загрузка…
       </button>
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Базовая кнопка (нейтральная) ───────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 1.2rem;
  font-family: var(--font-ui);
  font-size: var(--ts-base);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--r-full);
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  color: var(--c-text-1);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: filter var(--t-base), transform 0.15s var(--ease-spring),
              background var(--t-base), border-color var(--t-base), color var(--t-base);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}

.btn:not(:disabled):hover {
  background: var(--surface-2);
  border-color: var(--border-bright);
  transform: translateY(-1px);
}

.btn:not(:disabled):active { transform: translateY(0); }

.btn:focus-visible {
  outline: 2px solid var(--cur);
  outline-offset: 2px;
}

/* ─── Размеры ────────────────────────────────────────────────────── */
.btn--sm { padding: 0.4rem 0.85rem; font-size: var(--ts-xs); min-height: 2.75rem; }
.btn--lg { padding: 0.78rem 1.85rem; font-size: var(--ts-lg); font-weight: 700; }
.btn--xl { padding: 0.95rem 2.5rem;  font-size: var(--ts-lg); font-weight: 700; }

/* ─── Forma ─────────────────────────────────────────────────────── */
.btn--square { border-radius: var(--r-md); }
.btn--block  { display: flex; width: 100%; }

/* ─── Solid — основная кнопка действия (использует --cur) ────────── */
.btn--solid {
  color: #fff;
  border: none;
  background: var(--cur-btn);
  box-shadow: 0 4px 20px -4px var(--cur-btn-shadow);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn--solid:not(:disabled):hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  background: var(--cur-btn);
  border: none;
}

/* Shimmer-эффект (sheen) */
.btn--solid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  z-index: 1;
}
.btn--solid:not(:disabled):hover::after { transform: translateX(100%); }
.btn--solid > * { position: relative; z-index: 2; }

/* ─── Primary — главная CTA (kept for legacy code) ──────────────── */
.btn--primary {
  color: var(--b-cream);
  border: none;
  background: var(--b-grad-coffee);
  box-shadow: var(--b-shadow-md);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

[data-theme="dark"] .btn--primary {
  color: #fff;
  background: var(--b-grad-blue);
  box-shadow: 0 4px 20px -4px rgba(59, 130, 246, 0.45);
}

.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.20) 50%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  z-index: 1;
}
.btn--primary:not(:disabled):hover::after { transform: translateX(100%); }
.btn--primary > * { position: relative; z-index: 2; }

.btn--primary:not(:disabled):hover { filter: brightness(1.08); transform: translateY(-2px); }

/* ─── Ghost — второстепенная ────────────────────────────────────── */
.btn--ghost {
  border-color: var(--border-subtle);
  background: transparent;
  color: var(--c-text-2);
}
.btn--ghost:not(:disabled):hover {
  background: var(--surface-1);
  border-color: var(--cur-border);
  color: var(--c-text-1);
}

/* ─── Outline — обводка цветом контекста ─────────────────────────── */
.btn--outline {
  border-color: var(--cur-border);
  color: var(--cur);
  background: transparent;
}
.btn--outline:not(:disabled):hover {
  background: var(--cur-bg);
  border-color: var(--cur-hover-border);
  transform: translateY(-1px);
}

/* ─── Link — текстовая ──────────────────────────────────────────── */
.btn--link {
  background: transparent;
  border: none;
  color: var(--cur);
  padding: 0.25rem 0.5rem;
  min-height: 2.75rem;
}
.btn--link:not(:disabled):hover {
  background: transparent;
  filter: brightness(1.2);
  transform: none;
}

/* ─── Цветовые модификаторы (явные; градиенты из themes.css --pal-*) ─ */
.btn--sky     { --cur-btn: var(--pal-btn-sky); --cur-btn-shadow: var(--pal-btn-sky-sh); color: #fff; border: none; background: var(--cur-btn); box-shadow: 0 4px 20px -4px var(--cur-btn-shadow); }
.btn--indigo  { --cur-btn: var(--pal-btn-indigo); --cur-btn-shadow: var(--pal-btn-indigo-sh); color: #fff; border: none; background: var(--cur-btn); box-shadow: 0 4px 20px -4px var(--cur-btn-shadow); }
.btn--violet  { --cur-btn: var(--pal-btn-violet); --cur-btn-shadow: var(--pal-btn-violet-sh); color: #fff; border: none; background: var(--cur-btn); box-shadow: 0 4px 20px -4px var(--cur-btn-shadow); }
.btn--emerald { --cur-btn: var(--pal-btn-emerald); --cur-btn-shadow: var(--pal-btn-emerald-sh); color: #fff; border: none; background: var(--cur-btn); box-shadow: 0 4px 20px -4px var(--cur-btn-shadow); }
.btn--amber   { --cur-btn: var(--pal-btn-amber); --cur-btn-shadow: var(--pal-btn-amber-sh); color: #fff; border: none; background: var(--cur-btn); box-shadow: 0 4px 20px -4px var(--cur-btn-shadow); }
.btn--pink    { --cur-btn: var(--pal-btn-pink); --cur-btn-shadow: var(--pal-btn-pink-sh); color: #fff; border: none; background: var(--cur-btn); box-shadow: 0 4px 20px -4px var(--cur-btn-shadow); }
.btn--gold    { background: var(--b-grad-gold); color: var(--b-coffee); border: none; box-shadow: 0 4px 20px -4px rgba(var(--b-gold-rgb), 0.4); }
.btn--coffee  { background: var(--b-grad-coffee); color: var(--b-cream); border: none; }

.btn--sky:not(:disabled):hover,
.btn--indigo:not(:disabled):hover,
.btn--violet:not(:disabled):hover,
.btn--emerald:not(:disabled):hover,
.btn--amber:not(:disabled):hover,
.btn--pink:not(:disabled):hover,
.btn--gold:not(:disabled):hover,
.btn--coffee:not(:disabled):hover {
  filter: brightness(1.10);
  transform: translateY(-2px);
}

/* ─── Спиннер внутри кнопки ──────────────────────────────────────── */
.btn-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: ui-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ─── Сегментированный переключатель ────────────────────────────── */
.seg {
  display: inline-flex;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  background: var(--surface-1);
  position: relative;
}
.seg__indicator {
  position: absolute;
  top: 0;
  left: var(--seg-offset, 0);
  width: var(--seg-width, 0);
  height: 100%;
  background: var(--cur-bg);
  border-radius: inherit;
  transition: left 0.2s var(--ease-std), width 0.2s var(--ease-std);
  z-index: 0;
  pointer-events: none;
}
.seg-btn {
  padding: 0.32rem 0.85rem;
  min-height: 2.75rem;
  font-family: var(--font-ui);
  font-size: var(--ts-xs);
  font-weight: 600;
  color: var(--c-text-3);
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--t-hover), color var(--t-hover);
  position: relative;
  z-index: 1;
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover {
  background: var(--cur-bg);
  color: var(--c-text-1);
}
.seg-btn--on {
  background: var(--cur-bg) !important;
  color: var(--cur) !important;
}

/* ─── Кнопка закрытия (overlay, modal) ──────────────────────────── */
.close-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  color: var(--c-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.close-btn:hover {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.4);
  color: var(--b-error-light);
}

/* ─── Кнопка-аккордеон ──────────────────────────────────────────── */
.accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.7rem 1rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--c-text-2);
  font-family: var(--font-ui);
  font-size: var(--ts-base);
  font-weight: 600;
  transition: background var(--t-hover);
}
.accordion-toggle:hover { background: var(--surface-1); }
.accordion-arrow {
  transition: transform var(--t-smooth);
  color: var(--c-text-3);
}
.accordion-arrow--open { transform: rotate(180deg); }

/* ─── Ряд кнопок ────────────────────────────────────────────────── */
.btn-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}



/* ── components/card.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Card (no-prefix, canonical)
   Объединяет:
   - .ux-card — accent-top, цветовые модификаторы
   - .ornament-card (ornament-паттерн) — gold-вариант, glass
   - .ui-card — top-glare, action-row

   Использование:
     <article class="card">...</article>
     <article class="card card--sm">Compact</article>
     <a       class="card card--link">Clickable</a>
     <article class="card card--accent-top" data-color="emerald">...</article>
     <article class="card card--glass">Glass effect</article>
   ═══════════════════════════════════════════════════════════════════ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.4rem;
  border-radius: var(--r-card);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--b-shadow-dk-sm);
  transition: border-color var(--t-smooth),
              box-shadow   var(--t-smooth),
              transform    0.2s var(--ease-spring),
              background   var(--t-smooth);
  overflow: hidden;
  isolation: isolate;
}
[data-theme="light"] .card {
  background: var(--b-paper-hi);
  border-color: rgba(44, 36, 22, 0.10);
  box-shadow: 0 1px 4px rgba(44, 36, 22, 0.06), 0 4px 16px rgba(44, 36, 22, 0.04);
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--cur-hover-border);
  box-shadow: 0 8px 32px -8px var(--cur-hover-shadow);
}
[data-theme="light"] .card:hover {
  border-color: rgba(44, 36, 22, 0.16);
  box-shadow: 0 2px 6px rgba(44, 36, 22, 0.08), 0 8px 28px rgba(44, 36, 22, 0.07);
}

/* ─── Размеры ────────────────────────────────────────────────────── */
.card--sm {
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-xl);
  gap: 0.75rem;
}
.card--sm:hover { transform: translateY(-2px); }

.card--lg { padding: 2rem 2.15rem; border-radius: var(--r-2xl); }

/* ─── Кликабельная карточка-ссылка ──────────────────────────────── */
.card--link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.card--link:focus-visible {
  outline: 2px solid var(--cur);
  outline-offset: 2px;
}

/* ─── Статичная (без hover-эффекта) ──────────────────────────────── */
.card--static { transition: none; }
.card--static:hover {
  transform: none;
  box-shadow: var(--b-shadow-dk-sm);
  border-color: var(--border-subtle);
}

/* ─── Glass-вариант ──────────────────────────────────────────────── */
.card--glass {
  background: var(--glass-bg, var(--glass-bg-dark));
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border-color: var(--glass-border);
}
[data-theme="light"] .card--glass {
  background: var(--glass-bg-light);
  border-color: var(--glass-border-lt);
}

/* ─── Top-glare (подсветка сверху) ─────────────────────────────── */
.card--glare::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 40% at 50% -10%,
    rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .card--glare::before {
  background: linear-gradient(135deg,
    rgba(99, 102, 241, 0.06) 0%, transparent 60%);
}
.card--glare > * { position: relative; z-index: 1; }

/* ─── Accent top — 2px цветная полоса сверху ─────────────────────── */
.card--accent-top {
  border-top-width: 2px;
  border-top-color: var(--cur-top-border);
  border-radius: var(--r-xl);
}

/* Полоска-stripe — отдельный элемент */
.card__stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--cur-bar);
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.card__stripe--gold {
  background: linear-gradient(90deg, var(--b-gold-dark), var(--b-gold), var(--b-gold-light));
}

/* ─── Цветовые модификаторы (явные) ──────────────────────────────── */
.card--sky:hover     { border-color: rgba(14,165,233,0.35);  box-shadow: 0 8px 32px -8px rgba(14,165,233,0.15); }
.card--indigo:hover  { border-color: rgba(99,102,241,0.35);  box-shadow: 0 8px 32px -8px rgba(99,102,241,0.15); }
.card--violet:hover  { border-color: rgba(124,58,237,0.35);  box-shadow: 0 8px 32px -8px rgba(124,58,237,0.15); }
.card--emerald:hover { border-color: rgba(5,150,105,0.35);   box-shadow: 0 8px 32px -8px rgba(5,150,105,0.15); }
.card--amber:hover   { border-color: rgba(217,119,6,0.35);   box-shadow: 0 8px 32px -8px rgba(217,119,6,0.15); }
.card--pink:hover    { border-color: rgba(219,39,119,0.35);  box-shadow: 0 8px 32px -8px rgba(219,39,119,0.15); }
.card--gold {
  border-color: rgba(var(--b-gold-rgb), 0.30);
  background: linear-gradient(135deg, var(--surface-card) 0%, rgba(var(--b-gold-rgb), 0.04) 100%);
}
.card--gold:hover {
  border-color: var(--b-gold);
  box-shadow: 0 6px 30px -8px rgba(var(--b-gold-rgb), 0.30);
}

.card--accent-top.card--sky     { border-top-color: rgba(14,165,233,0.45); }
.card--accent-top.card--indigo  { border-top-color: rgba(99,102,241,0.45); }
.card--accent-top.card--violet  { border-top-color: rgba(124,58,237,0.45); }
.card--accent-top.card--emerald { border-top-color: rgba(5,150,105,0.45); }
.card--accent-top.card--amber   { border-top-color: rgba(217,119,6,0.45); }
.card--accent-top.card--pink    { border-top-color: rgba(219,39,119,0.45); }
.card--accent-top.card--gold    { border-top-color: rgba(var(--b-gold-rgb), 0.55); }

/* ─── Внутренние элементы ────────────────────────────────────────── */
.card__title {
  font-family: var(--font-serif);
  font-size: var(--ts-lg);
  font-weight: 700;
  color: var(--c-text-1);
  margin: 0 0 0.4rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.card__title--sm { font-size: var(--ts-md); }
.card__title--lg { font-size: var(--ts-2xl); }

.card__subtitle {
  font-family: var(--font-ui);
  font-size: var(--ts-xs);
  color: var(--c-text-3);
  line-height: 1.5;
  margin: 0 0 0.7rem;
}

.card__desc {
  font-family: var(--font-body);
  font-size: var(--ts-base);
  color: var(--c-text-2);
  line-height: 1.6;
  margin: 0 0 0.6rem;
  flex: 1;
}

.card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--ts-xs);
  color: var(--c-text-3);
  font-weight: 500;
}
.card__meta-sep { color: var(--border-subtle); }

.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.65rem;
  margin-top: 0.7rem;
  border-top: 1px solid var(--border-subtle);
}

/* ─── Стрелка (нав. индикатор) ──────────────────────────────────── */
.card__arrow {
  color: var(--c-text-3);
  flex-shrink: 0;
  transition: color var(--t-base), transform var(--t-base);
}
.card:hover .card__arrow {
  color: var(--cur);
  transform: translateX(4px);
}

/* ─── Grid-контейнеры ────────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  container-type: inline-size;
}
.cards-grid--sm  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.cards-grid--xs  { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.85rem; }
.cards-grid--lg  { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1.5rem; }

@container (max-width: 400px) {
  .cards-grid,
  .cards-grid--sm,
  .cards-grid--xs,
  .cards-grid--lg { grid-template-columns: 1fr; }
}
@container (min-width: 401px) and (max-width: 700px) {
  .cards-grid,
  .cards-grid--lg { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}



/* ── components/modal.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Modal & Overlay (no-prefix, canonical)
   Объединяет:
   - .modal-overlay / .modal-box (ornament-паттерн)
   - .ux-overlay / .ux-overlay-box

   Использование:
     <div class="modal-overlay is-open">
       <div class="modal-box">
         <div class="modal-stripe"></div>
         <button class="modal-close">✕</button>
         <div class="modal-inner">
           <h2 class="modal-title">Заголовок</h2>
           ...
         </div>
       </div>
     </div>
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Оверлей ────────────────────────────────────────────────────── */
.modal-overlay,
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--ornament-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow);
}

.modal-overlay.is-open,
.overlay.is-open,
.modal-overlay--open {
  opacity: 1;
  pointer-events: all;
}

/* Анимированное появление (alternate) */
.overlay--fade { animation: ui-fade-up 0.18s ease both; }

/* ─── Окно ───────────────────────────────────────────────────────── */
.modal-box,
.overlay-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  border-radius: var(--r-2xl);
  background: var(--surface-card);
  border: 1px solid var(--border-bright);
  box-shadow: 0 32px 80px -20px rgba(0, 0, 0, 0.45),
              0 0 0 1px var(--border-subtle);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s var(--ease-spring);
  scrollbar-width: thin;
}
[data-theme="light"] .modal-box,
[data-theme="light"] .overlay-box {
  background: var(--b-paper);
  border-color: var(--b-line-hi);
  box-shadow: 0 32px 80px -20px rgba(44, 36, 22, 0.30),
              0 0 0 1px var(--b-line);
}

.modal-overlay.is-open .modal-box,
.overlay.is-open .overlay-box,
.modal-overlay--open .modal-box {
  transform: none;
}

.modal-box--lg, .overlay-box--lg { max-width: min(94vw, 72rem); max-height: 92vh; }
.modal-box--md, .overlay-box--md { max-width: 800px; }
.modal-box--sm, .overlay-box--sm { max-width: 460px; }

@media (max-width: 639px) {
  .modal-overlay, .overlay {
    padding: 10px 10px max(10px, env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
  }
  .modal-box, .overlay-box {
    max-height: min(100dvh - 20px, 100%);
    max-width: 100%;
    border-radius: var(--r-xl) var(--r-xl) var(--r-md) var(--r-md);
  }
  .modal-inner { padding: 22px 18px max(24px, env(safe-area-inset-bottom, 24px)); }
  .modal-close { top: 12px; right: 12px; width: 44px; height: 44px; }
}

/* ─── Полоска-акцент (орнамент) ─────────────────────────────────── */
.modal-stripe {
  height: 2px;
  background: var(--cur-bar);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
}
.modal-stripe--gold {
  background: linear-gradient(90deg, var(--b-gold-dark), var(--b-gold), var(--b-gold-light));
}
.modal-stripe--navy {
  background: linear-gradient(90deg, var(--b-navy), var(--b-navy-mid), var(--b-navy));
}

/* ─── Хедер модала (компактный) ─────────────────────────── */
.modal-header,
.overlay-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.modal-title,
.overlay-title {
  font-family: var(--font-serif);
  font-size: var(--ts-lg);
  font-weight: 700;
  color: var(--c-text-1);
  margin: 0;
  line-height: 1.3;
}

/* ─── Контент ────────────────────────────────────────────────────── */
.modal-inner { padding: 28px 28px 32px; }

/* ─── Кнопка закрытия ───────────────────────────────────────────── */
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  color: var(--c-text-3);
  cursor: pointer;
  transition: color var(--t-smooth), background var(--t-smooth), border-color var(--t-smooth);
  z-index: 1;
}
.modal-close:hover {
  color: var(--c-text-1);
  background: var(--surface-2);
  border-color: var(--border-bright);
}

/* ─── Метка секции внутри модала ─────────────────────────────────── */
.modal-section-label {
  font-family: var(--font-ui);
  font-size: var(--ts-3xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: 14px;
  margin-top: 4px;
}

/* ─── Hero-блок документа внутри модала ──────────────────────────── */
.modal-doc-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.35rem;
  padding: 1.25rem 1rem;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
}
.modal-doc-hero img {
  max-height: 7rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ─── Ряд бейджей в модале ────────────────────────────────────────── */
.modal-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-top: 0.5rem;
}
.modal-badges-row img {
  height: 1.25rem;
  width: auto;
  border-radius: var(--r-sm);
  opacity: 0.85;
}

/* ─── Список фичей ──────────────────────────────────────────────── */
.modal-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
}

/* ─── Заметка (золотой блок) ─────────────────────────────────────── */
.modal-note {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--cur-bg);
  border: 1px solid var(--cur-border);
}

/* ─── Тело контента (для overlay-box--lg) ────────────────────────── */
.overlay-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: var(--surface-code);
}



/* ── components/divider.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Divider / Rule (no-prefix, canonical)
   Разделители, в т.ч. алиас `.ornament-rule`, под обе темы.

   Использование:
     <hr  class="rule">
     <hr  class="rule rule--gold">
     <div class="rule rule--ornament"></div>
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Базовая линия ──────────────────────────────────────────────── */
.rule,
.divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--border-subtle) 20%,
    var(--border-subtle) 80%,
    transparent);
  margin: 0;
  pointer-events: none;
}

/* ─── Золотой вариант ────────────────────────────────────────────── */
.rule--gold,
.divider--gold {
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--b-gold-rgb), 0.35) 30%,
    rgba(var(--b-gold-rgb), 0.35) 70%,
    transparent);
}

/* ─── Контекстный (использует --cur) ──────────────────────────────── */
.rule--accent,
.divider--accent {
  background: linear-gradient(90deg,
    transparent,
    var(--cur-border) 30%,
    var(--cur-border) 70%,
    transparent);
}

/* ─── С декоративным ромбом посередине ───────────────────────────── */
.rule--ornament {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  background: transparent;
}
.rule--ornament::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--b-gold-rgb), 0.35) 30%,
    rgba(var(--b-gold-rgb), 0.35) 70%,
    transparent);
  transform: translateY(-50%);
}
.rule--ornament::after {
  content: '◆';
  position: relative;
  z-index: 1;
  font-size: var(--ts-3xs);
  color: rgba(var(--b-gold-rgb), 0.55);
  background: var(--page-bg);
  padding: 0 0.5rem;
  line-height: 1;
}

/* ─── Вертикальный разделитель ───────────────────────────────────── */
.rule--vertical {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg,
    transparent,
    var(--border-subtle) 20%,
    var(--border-subtle) 80%,
    transparent);
}



/* ── components/section-label.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Section Label / Eyebrow (no-prefix, canonical)
   На основе ornament-паттерна, адаптация под обе темы и
   контексты [data-color].

   Использование:
     <span class="section-label">Заголовок секции</span>
     <span class="section-label section-label--plain">Без линий</span>
     <span class="section-label section-label--lg">
       <span class="section-label__dot"></span>
       Live
     </span>
   ═══════════════════════════════════════════════════════════════════ */

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: var(--ts-3xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cur);
  line-height: 1.4;
}

[data-theme="light"] .section-label {
  color: var(--b-gold);
}

/* ─── С боковыми линиями ─────────────────────────────────────────── */
.section-label::before,
.section-label::after {
  content: '';
  display: block;
  height: 1px;
  width: 28px;
  background: linear-gradient(90deg, var(--cur-border), transparent);
  flex-shrink: 0;
}
.section-label::after {
  background: linear-gradient(90deg, transparent, var(--cur-border));
}

/* ─── Без боковых линий ──────────────────────────────────────────── */
.section-label--plain::before,
.section-label--plain::after { display: none; }

/* ─── Размеры ────────────────────────────────────────────────────── */
.section-label--sm { font-size: var(--ts-3xs); letter-spacing: 0.14em; color: var(--c-text-3); }
.section-label--lg { font-size: var(--ts-2xs); letter-spacing: 0.22em; }

/* ─── Цветовые модификаторы ──────────────────────────────────────── */
.section-label--gold { color: var(--b-gold); }
.section-label--gold::before { background: linear-gradient(90deg, rgba(var(--b-gold-rgb), 0.40), transparent); }
.section-label--gold::after  { background: linear-gradient(90deg, transparent, rgba(var(--b-gold-rgb), 0.40)); }

.section-label--neutral { color: var(--c-text-2); }
.section-label--neutral::before { background: linear-gradient(90deg, var(--border-subtle), transparent); }
.section-label--neutral::after  { background: linear-gradient(90deg, transparent, var(--border-subtle)); }

/* ─── С пульсирующей точкой ──────────────────────────────────────── */
.section-label__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: ui-pulse-dot 2.5s ease-in-out infinite;
}



/* ── components/pill-nav.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Pill Nav Link (no-prefix, canonical)
   Универсальная «пилюля»-ссылка для навигации.
   На основе ornament-паттерна, адаптация под обе темы и
   контексты [data-color].

   Использование:
     <a class="pill-link">Пункт</a>
     <a class="pill-link is-active">Активный</a>
     <a class="pill-link pill-link--gold">Золотой стиль</a>
     <nav class="pill-nav">
       <a class="pill-link">A</a>
       <a class="pill-link">B</a>
     </nav>
   ═══════════════════════════════════════════════════════════════════ */

.pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--ts-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-2);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  padding: 7px 14px;
  min-height: 44px;
  border-radius: var(--r-full);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.pill-link:hover {
  background: var(--cur-bg);
  border-color: var(--cur-border);
  color: var(--cur);
  box-shadow: 0 2px 12px -2px var(--cur-hover-shadow);
}

.pill-link.is-active,
.pill-link--active {
  background: var(--cur-btn);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 12px -2px var(--cur-btn-shadow);
}

/* ─── Variants ───────────────────────────────────────────────────── */
.pill-link--ghost {
  background: transparent;
  border: 1.5px solid var(--border-subtle);
  color: var(--c-text-3);
}
.pill-link--ghost:hover {
  background: var(--cur-bg);
  border-color: var(--cur-border);
  color: var(--cur);
}

/* Золотой вариант */
.pill-link--gold {
  color: var(--c-text-3);
  background: transparent;
  border: 1.5px solid var(--border-subtle);
}
.pill-link--gold:hover,
.pill-link--gold.is-active {
  background: rgba(var(--b-gold-rgb), 0.10);
  border-color: var(--b-gold);
  color: var(--b-gold);
  box-shadow: none;
}

/* Navy вариант */
.pill-link--navy {
  color: var(--b-navy);
  background: var(--b-navy-soft);
  border-color: rgba(26, 32, 56, 0.20);
}
[data-theme="dark"] .pill-link--navy {
  color: var(--b-slate-2);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
.pill-link--navy:hover,
.pill-link--navy.is-active {
  background: var(--b-navy);
  border-color: var(--b-navy);
  color: var(--b-gold-light);
}

/* ─── Большой mobile-вариант ────────────────────────────────────── */
.pill-link--lg {
  display: block;
  text-align: center;
  font-size: var(--ts-xs);
  padding: 12px 16px;
  letter-spacing: 0.1em;
}

/* ─── Контейнер ─────────────────────────────────────────────────── */
.pill-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.pill-nav--center { justify-content: center; }
.pill-nav--column { flex-direction: column; align-items: stretch; }



/* ── components/cta.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — CTA Card (no-prefix, canonical)
   CTA-блок, расширен под обе темы и `[data-color]`.

   Использование:
     <section class="cta">
       <div class="cta__content">
         <h2>Заголовок</h2>
         <p>Описание...</p>
         <a class="btn btn--solid">Действие</a>
       </div>
     </section>

     <section class="cta cta--gold" data-color="amber">...</section>
   ═══════════════════════════════════════════════════════════════════ */

.cta {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  padding: 4rem 2.5rem;
  text-align: center;
  background: var(--b-navy);
  border: 1px solid rgba(var(--b-gold-rgb), 0.15);
  isolation: isolate;
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(var(--b-gold-rgb), 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(var(--b-gold-rgb), 0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.cta__content {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin: 0 auto;
}

.cta__content h2,
.cta__title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.cta__sub {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.65;
  max-width: 44rem;
  margin: 0 auto 2rem;
}

/* ─── Gold-вариант ──────────────────────────────────────────────── */
.cta--gold {
  background: var(--b-grad-coffee);
}
.cta--gold::before {
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%,
      rgba(var(--b-gold-rgb), 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 100%,
      rgba(var(--b-gold-rgb), 0.18) 0%, transparent 60%);
}

/* ─── Контекстный (--cur-* через [data-color]) ──────────────────── */
.cta--accent {
  background: var(--cur-btn);
}
.cta--accent::before {
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(255,255,255,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(255,255,255,0.10) 0%, transparent 60%);
}

/* ─── Sizing ────────────────────────────────────────────────────── */
.cta--sm { padding: 2.5rem 1.85rem; }
.cta--lg { padding: 6rem 3rem; }

@media (max-width: 639px) {
  .cta { padding: 3rem 1.5rem; }
  .cta--lg { padding: 4rem 1.5rem; }
}



/* ── components/reveal.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Reveal on Scroll (no-prefix, canonical)
   Скролл-анимация, совместима с `utils/reveal.js`.

   IntersectionObserver-анимация появления при скролле.
   JS-часть: utils/reveal.js — вешает body.reveal-anim при загрузке
             и .is-visible на элементы при появлении в viewport.

   Использование:
     <div class="reveal">...</div>
     <div class="reveal" style="--delay: 0.1s">...</div>
     <div class="reveal reveal--up">slide up</div>
     <div class="reveal reveal--scale">scale in</div>

   По умолчанию opacity: 1 — fallback при выключенном JS.
   ═══════════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity   0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  transition-delay: var(--delay, 0s);
}

body.reveal-anim .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
}

body.reveal-anim .reveal.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ─── Варианты направлений ───────────────────────────────────────── */
body.reveal-anim .reveal--up:not(.is-visible)    { transform: translateY(40px); }
body.reveal-anim .reveal--down:not(.is-visible)  { transform: translateY(-40px); }
body.reveal-anim .reveal--left:not(.is-visible)  { transform: translateX(40px); }
body.reveal-anim .reveal--right:not(.is-visible) { transform: translateX(-40px); }
body.reveal-anim .reveal--scale:not(.is-visible) {
  opacity: 0;
  transform: scale(0.92);
}
body.reveal-anim .reveal--fade:not(.is-visible)  {
  opacity: 0;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* ── components/alpha.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — Alpha (альфа-функциональность)
   Маркировка экспериментальных элементов интерфейса. Видна только тем,
   кому компонент <AlphaOnly> отрисовал содержимое (альфа-тестеры),
   поэтому это «пометка для своих», а не способ что-то скрыть.

   Использование:
     <span class="alpha-badge">ALPHA</span>            ← <AlphaBadge />
     <span class="alpha-mark">…содержимое… </span>     ← <AlphaOnly Mark="true">
   ═══════════════════════════════════════════════════════════════════ */

.alpha-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--ts-3xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--b-c-amber);
  background: var(--b-c-amber-bg);
  border: 1px solid var(--b-c-amber-border);
  border-radius: var(--r-full);
  padding: 0.1rem 0.4rem;
  line-height: 1.3;
  white-space: nowrap;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ─── Рамка вокруг альфа-элемента ───────────────────────────────── */
.alpha-mark {
  position: relative;
  display: inline-block;
  border: 1px dashed var(--b-c-amber-border);
  border-radius: var(--r-md);
  padding: 0.35rem;
}

/* Бейдж внутри рамки прижимается к её правому верхнему углу. */
.alpha-mark > .alpha-badge {
  position: absolute;
  top: -0.6rem;
  right: 0.4rem;
  background: var(--page-bg, #0b0f1e);
  z-index: 1;
}

/* Блочный вариант — для секций и панелей во всю ширину. */
.alpha-mark--block {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   Разметка «по указанию» (alpha-marks.js)

   Классы вешает скрипт, а не разметка продукта: элемент помечают мышью,
   и он может быть каким угодно. Отсюда !important — попасть надо и в
   чужие правила, включая инлайновые стили MudBlazor.
   ═══════════════════════════════════════════════════════════════════ */

.alpha-hidden {
  display: none !important;
}

/* Помеченный элемент обводится ТОЛЬКО outline: он рисуется вне потока и
   не сдвигает ни сам элемент, ни соседей. Ни border, ни padding, ни
   position здесь появиться не должны — пометка обязана быть безвредной
   для вёрстки чужого экрана. */
.alpha-badged {
  outline: 1px dashed rgba(196, 128, 14, 0.55);
  outline-offset: 2px;
}

/* Слой с буквами «α» поверх страницы. Отдельно от помеченных элементов,
   потому что псевдоэлементу нужен контекст позиционирования, а ставить
   помеченному узлу position: relative нельзя: это меняет содержащий блок
   для всех его абсолютных потомков, и поповеры с модалками внутри такого
   элемента разъезжаются в тот же миг. */
.alpha-layer {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  pointer-events: none;
}

.alpha-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  border: 1px solid rgba(196, 128, 14, 0.5);
  background: #fff5e0;
  color: #8a5a00;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

/* ─── Режим разметки ────────────────────────────────────────────── */

/* Перекрестие — только пока зажат Ctrl (класс ставит скрипт). Просто
   включённый режим курсор не меняет: обычный клик в нём остаётся обычным,
   и обещать перекрестием пометку было бы враньём. */
body.alpha-armed,
body.alpha-armed * {
  cursor: crosshair !important;
}

/* Курсор в панели режима — обычный: по ней кликают как по панели. */
body.alpha-armed .alpha-bar,
body.alpha-armed .alpha-bar * {
  cursor: default !important;
}

body.alpha-armed .alpha-bar button {
  cursor: pointer !important;
}

.alpha-pick-hover {
  outline: 2px solid #2456e2 !important;
  outline-offset: 1px;
  background-color: rgba(36, 86, 226, 0.06) !important;
}

/* Панель режима: поверх всего, но не мешает смотреть на страницу. */
.alpha-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 720px);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(20, 40, 90, 0.14);
  background: #ffffff;
  box-shadow: 0 18px 44px -18px rgba(18, 45, 120, 0.45);
  font-family: inherit;
  font-size: 13px;
  color: #152036;
}

.alpha-bar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2456e2;
  box-shadow: 0 0 0 4px rgba(36, 86, 226, 0.18);
  flex: none;
}

.alpha-bar__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alpha-bar__hint {
  color: #8493ad;
}

.alpha-bar__problem {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b3400c;
  font-weight: 600;
}

.alpha-bar button {
  flex: none;
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #eaeff8;
  color: #44526e;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.alpha-bar button:hover {
  background: #dfe7f5;
}

@media (max-width: 560px) {
  .alpha-bar { left: 12px; right: 12px; transform: none; max-width: none; }
  .alpha-bar__hint { display: none; }
}



/* ───── 4. PREFIX ux-* (набор стилей) ─────────────────────── */

/* ── components/ux-topbar.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ux-*) — Topbar Component
   Sticky-топбар, в т.ч. широкий вариант (`--ux-max-w-wide`).

   Использование:
     <nav class="ux-topbar ux-topbar--indigo">
       <div class="ux-topbar-inner">
         <a class="ux-topbar-back" href="/">← Назад</a>
         <span class="ux-topbar-sep">›</span>
         <span class="ux-topbar-name">Название раздела</span>
       </div>
     </nav>
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Базовый топбар ─────────────────────────────────────────────── */
.ux-topbar {
  position: sticky;
  top: var(--ux-topbar-top);
  z-index: var(--ux-z-topbar);
  background: var(--ux-topbar-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ─── Цветовые вариации нижней границы ──────────────────────────── */
.ux-topbar--sky     { border-bottom-color: rgba(14, 165, 233, 0.2); }
.ux-topbar--indigo  { border-bottom-color: rgba(79, 70, 229, 0.25); }
.ux-topbar--violet  { border-bottom-color: rgba(124, 58, 237, 0.2); }
.ux-topbar--emerald { border-bottom-color: rgba(5, 150, 105, 0.2); }
.ux-topbar--amber   { border-bottom-color: rgba(217, 119, 6, 0.2); }
.ux-topbar--pink    { border-bottom-color: rgba(219, 39, 119, 0.2); }

/* ─── Внутренний контейнер ───────────────────────────────────────── */
.ux-topbar-inner {
  max-width: var(--ux-max-w-default);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: var(--ux-topbar-height);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  overflow: hidden;
}

/* Широкий вариант (крупный max-width) */
.ux-topbar--wide .ux-topbar-inner {
  max-width: var(--ux-max-w-wide);
}

/* ─── Ссылка «Назад» ─────────────────────────────────────────────── */
.ux-topbar-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--ts-sm);
  font-weight: 500;
  color: var(--ux-text-4);
  text-decoration: none;
  transition: color var(--t-base);
  flex-shrink: 0;
}
.ux-topbar-back:hover { color: var(--ux-text-2); }

/* ─── Разделитель хлебных крошек ─────────────────────────────────── */
.ux-topbar-sep {
  color: rgba(255, 255, 255, 0.15);
  font-size: var(--ts-sm);
  flex-shrink: 0;
}

/* ─── Название текущего раздела ──────────────────────────────────── */
.ux-topbar-name {
  font-size: var(--ts-base);
  font-weight: 700;
  color: var(--ux-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* ─── Полоска цвета под теорией (3px accent bar) ─────────────────── */
.ux-theory-bar {
  height: 3px;
}
.ux-theory-bar--sky     { background: linear-gradient(90deg, #0ea5e9, #22d3ee); }
.ux-theory-bar--indigo  { background: linear-gradient(90deg, #4f46e5, #818cf8); }
.ux-theory-bar--violet  { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.ux-theory-bar--emerald { background: linear-gradient(90deg, #059669, #34d399); }
.ux-theory-bar--amber   { background: linear-gradient(90deg, #d97706, #fbbf24); }
.ux-theory-bar--pink    { background: linear-gradient(90deg, #db2777, #f472b6); }

/* ─── Header приложения (корневой layout) ─────────────────────── */
.ux-header {
  position: sticky;
  top: 0;
  z-index: var(--ux-z-header);
  background: rgba(5, 6, 14, 0.82);
  backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(99, 102, 241, 0.1), 0 4px 24px -8px rgba(0, 0, 0, 0.5);
}
.ux-header-inner {
  max-width: var(--ux-max-w-default);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: var(--ux-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ─── Brand (логотип в хедере) ───────────────────────────────────── */
.ux-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  transition: opacity var(--t-base);
}
.ux-brand:hover { opacity: 0.85; }
.ux-brand-logo {
  width: 2.1rem;
  height: 2.1rem;
  object-fit: contain;
  border-radius: 0.45rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.35));
}
.ux-brand-text {
  font-size: var(--ts-lg);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ux-text-1);
  line-height: 1;
}
.ux-brand-prefix { color: var(--ux-accent-light); }

/* ─── Footer ─────────────────────────────────────────────────────── */
.ux-footer {
  margin-top: auto;
  border-top: 1px solid var(--ux-border);
  background: rgba(5, 6, 14, 0.92);
  padding: 1.25rem 1.5rem 1.5rem;
}
.ux-footer-inner {
  max-width: var(--ux-max-w-default);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
  font-size: var(--ts-xs);
  color: var(--ux-text-5);
  letter-spacing: 0.02em;
}
.ux-footer-sep {
  color: #1e293b;
  user-select: none;
}
.ux-footer-link {
  color: var(--ux-text-4);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--t-hover);
}
.ux-footer-link:hover { color: var(--ux-accent-bright); }

/* ─── GitHub-кнопка в хедере ─────────────────────────────────────── */
.ux-gh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  color: #cbd5e1;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  transition: color var(--t-base), border-color var(--t-base), background var(--t-base), transform var(--t-base);
  text-decoration: none;
  font-size: var(--ts-xs);
  font-weight: 600;
}
.ux-gh-btn:hover {
  color: var(--ux-text-1);
  border-color: rgba(129, 140, 248, 0.4);
  background: rgba(99, 102, 241, 0.12);
  transform: translateY(-1px);
}



/* ── components/ux-overlay.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ux-*) — Overlay (Modal) Component

   Полноэкранный overlay с тёмным backdrop и blur-эффектом.
   Используется для просмотра графика в увеличенном виде.

   Использование:
     <div class="ux-overlay" onclick="close()">
       <div class="ux-overlay-box" onclick="event.stopPropagation()">
         <div class="ux-overlay-header">
           <div>
             <h2 class="ux-overlay-title">Название</h2>
             <code class="ux-mono-badge">API.Class</code>
           </div>
           <button class="ux-close-btn">✕</button>
         </div>
         <div class="ux-overlay-img-wrap">
           <img class="ux-overlay-img" src="..." />
         </div>
       </div>
     </div>
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Фон overlay ────────────────────────────────────────────────── */
.ux-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--ux-z-overlay);
  background: rgba(2, 3, 12, 0.88);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: ux-fade-up 0.18s ease both;
}

/* ─── Контейнер содержимого ──────────────────────────────────────── */
.ux-overlay-box {
  display: flex;
  flex-direction: column;
  max-width: min(94vw, 72rem);
  max-height: 92vh;
  width: 100%;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(160deg, rgba(14, 17, 38, 0.98) 0%, rgba(8, 10, 24, 0.98) 100%);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

/* ─── Хедер overlay ──────────────────────────────────────────────── */
.ux-overlay-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ux-border);
  flex-shrink: 0;
}
.ux-overlay-title {
  font-size: var(--ts-md);
  font-weight: 700;
  color: var(--ux-text-1);
  margin: 0 0 0.2rem;
}

/* ─── Область изображения ────────────────────────────────────────── */
.ux-overlay-img-wrap {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(3, 4, 14, 0.5);
}
.ux-overlay-img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 7rem);
  border-radius: 0.75rem;
  box-shadow: 0 20px 60px -16px rgba(0, 0, 0, 0.7);
}

/* ─── Chart — отображение результата ────────────────────────────── */
.ux-chart-wrap {
  position: relative;
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid var(--ux-border);
  background: #03040c;
  cursor: zoom-in;
  transition: border-color var(--t-smooth);
  animation: ux-fade-up 0.25s ease both;
}
.ux-chart-wrap:hover { border-color: rgba(99, 102, 241, 0.2); }
.ux-chart-img { display: block; width: 100%; height: auto; }

/* Иконка «развернуть» */
.ux-chart-expand {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ux-accent-bright);
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
}
.ux-chart-wrap:hover .ux-chart-expand { opacity: 1; }

/* ─── Текстовый результат (текстовый вывод вместо графика) ──────── */
.ux-text-result {
  border-radius: 1.1rem;
  border: 1px solid var(--ux-border);
  background: var(--ux-code-bg);
  padding: 1rem 1.25rem;
  animation: ux-fade-up 0.25s ease both;
}
.ux-text-result pre {
  margin: 0;
  font-family: var(--ux-font-mono);
  font-size: var(--ts-sm);
  color: var(--ux-text-3);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Форматирование вывода скриптов */
.ux-text-result .so-cmd    { color: var(--ux-text-4); }
.ux-text-result .so-result { color: #a5f3fc; font-weight: 600; }
.ux-text-result .so-error  { color: #f87171; font-weight: 600; }



/* ── components/ux-empty-state.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ux-*) — Empty State Component
   Пустой экран, 404, «ожидание действия» (dashed), блок ошибки.

   Использование:
     <!-- Страница не найдена -->
     <div class="ux-empty">
       <p>Алгоритм не найден.</p>
       <a href="/">← Главная</a>
     </div>

     <!-- Ожидание запуска демо -->
     <div class="ux-empty ux-empty--dashed">
       <svg><!-- play icon --></svg>
       <p>Нажмите «Запустить» для выполнения</p>
     </div>
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Базовый пустой экран ───────────────────────────────────────── */
.ux-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 5rem 1rem;
  color: var(--ux-text-4);
  font-size: var(--ts-md);
  text-align: center;
}
.ux-empty a {
  font-size: var(--ts-base);
  font-weight: 600;
  color: var(--ux-accent-light);
  text-decoration: none;
}
.ux-empty a:hover { color: var(--ux-accent-bright); }

/* ─── Вариант «ожидание действия» (с пунктирной рамкой) ─────────── */
.ux-empty--dashed {
  padding: 4rem 1rem;
  color: rgba(255, 255, 255, 0.1);
  border-radius: 1.1rem;
  border: 1px dashed rgba(255, 255, 255, 0.07);
}
.ux-empty--dashed p {
  font-size: var(--ts-sm);
  color: var(--ux-text-5);
  margin: 0;
}

/* ─── Блок ошибки выполнения ─────────────────────────────────────── */
.ux-error-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.7rem;
  background: var(--ux-error-bg);
  border: 1px solid var(--ux-error-border);
  font-size: var(--ts-sm);
  color: var(--ux-error-text);
}

/* ─── 404 страница ───────────────────────────────────────────────── */
.ux-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 0.75rem;
  padding: 2rem;
  text-align: center;
}
.ux-404-code {
  font-size: var(--ts-5xl);
  font-weight: 900;
  color: rgba(99, 102, 241, 0.2);
  letter-spacing: -0.04em;
  line-height: 1;
}
.ux-404-title {
  font-size: var(--ts-xl);
  font-weight: 700;
  color: var(--ux-text-3);
  margin: 0;
}
.ux-404-link {
  font-size: var(--ts-base);
  font-weight: 600;
  color: var(--ux-accent-light);
  text-decoration: none;
  margin-top: 0.5rem;
}
.ux-404-link:hover { color: var(--ux-accent-bright); }

/* ═══════════════════════════════════════════════════════════════════
   Брендовое системное состояние (404, ошибка, пустой экран с айдентикой)
   Маскот FAI + код/иконка + действия. Тема-зависимо через --lp-* токены.
   ═══════════════════════════════════════════════════════════════════ */
.ux-brand-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  min-height: 64vh;
  padding: 4rem 1.5rem;
  text-align: center;
}
.ux-brand-state__art {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 0.25rem;
}
.ux-brand-state__mascot {
  width: clamp(120px, 22vw, 184px);
  height: auto;
  display: block;
  filter: drop-shadow(0 22px 40px rgba(7, 104, 197, 0.28));
  animation: ux-brand-float 5.5s ease-in-out infinite;
}
.ux-brand-state__code {
  position: absolute;
  right: -0.35em;
  bottom: -0.15em;
  font-family: var(--font-ui);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #0768C5, #3D81DB);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ux-brand-state__logo { margin-bottom: 0.5rem; }
.ux-brand-state__title {
  font-family: var(--font-ui);
  font-size: var(--ds-4, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lp-heading, var(--b-coffee));
  margin: 0;
}
.ux-brand-state__desc {
  font-size: var(--ts-md);
  line-height: 1.6;
  color: var(--lp-text, var(--b-coffee-soft));
  margin: 0;
  max-width: 30rem;
}
.ux-brand-state__req {
  font-size: var(--ts-xs);
  color: var(--lp-text-muted, var(--b-coffee-faint));
  margin: 0.25rem 0 0;
}
.ux-brand-state__req code {
  font-family: var(--font-mono);
  font-size: var(--ts-2xs);
  padding: 0.1rem 0.4rem;
  border-radius: var(--r-sm);
  background: rgba(7, 104, 197, 0.08);
  color: #0768C5;
}
.ux-brand-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.6rem;
}
.ux-brand-state__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--r-full);
  font-family: var(--font-ui);
  font-size: var(--ts-md);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--lp-card-border, var(--b-line));
  color: var(--lp-heading, var(--b-coffee));
  background: var(--lp-card-bg, rgba(255,255,255,0.6));
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.ux-brand-state__btn:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 104, 197, 0.4);
  box-shadow: var(--b-shadow-md);
}
.ux-brand-state__btn--primary {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #0768C5, #3D81DB);
  box-shadow: 0 10px 26px -10px rgba(7, 104, 197, 0.6);
}
.ux-brand-state__btn--primary:hover {
  border-color: transparent;
  box-shadow: 0 16px 34px -12px rgba(7, 104, 197, 0.7);
}

@keyframes ux-brand-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ux-brand-state__mascot { animation: none; }
}

/* ─── Экран ошибки (full-page) ─────────────────────────────────── */
.ux-error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}
.ux-error-page-icon  { color: var(--ux-error); opacity: 0.6; }
.ux-error-page-title { font-size: var(--ts-2xl); font-weight: 800; color: var(--ux-text-1); margin: 0; }
.ux-error-page-msg   { font-size: var(--ts-md); color: var(--ux-text-4); margin: 0; max-width: 28rem; }
.ux-error-page-link  { font-size: var(--ts-base); font-weight: 600; color: var(--ux-accent-light); text-decoration: none; }
.ux-error-page-link:hover { color: var(--ux-accent-bright); }



/* ── components/ux-error-banner.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ux-*) — Error Banner Component
   Нижняя плашка и граница ошибки. Селекторы #blazor-error-ui и
   .blazor-error-boundary — для совместимости с host-шаблонами.
   Канонична тёмно-красная плашка.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Нижняя плашка системной ошибки (#blazor-error-ui) ───────────── */
#blazor-error-ui {
  color-scheme: dark;
  background: #431407;
  color: #ffedd5;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.75rem 1.5rem;
  position: fixed;
  width: 100%;
  z-index: calc(var(--ux-z-overlay) + 100);
  font-size: var(--ts-base);
  font-family: var(--ux-font-sans);
}
#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 1rem;
  top: 0.6rem;
  opacity: 0.7;
}
#blazor-error-ui .dismiss:hover { opacity: 1; }
#blazor-error-ui .reload {
  color: #fdba74;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ─── Error boundary (красная рамка, .blazor-error-boundary) ──── */
.blazor-error-boundary {
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid var(--ux-error-border);
  color: var(--ux-error-text);
  padding: 1rem 1.25rem;
  margin: 0;
  font-size: var(--ts-base);
  border-radius: var(--ux-r-md);
  font-family: var(--ux-font-sans);
}
.blazor-error-boundary::after {
  content: "Произошла ошибка при отображении компонента.";
}



/* ── components/ux-reconnect-modal.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ux-*) — Reconnect Modal Component
   Модальное окно переподключения при обрыве канала (ID #components-reconnect-modal).
   Стили приведены к тёмной палитре и токенам --ux-*.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Скрытие состояний по умолчанию ───────────────────────────── */
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
  display: none;
}

/* ─── Показ по состоянию ────────────────────────────────────────── */
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
  display: block;
}

/* ─── Само модальное окно ───────────────────────────────────────── */
#components-reconnect-modal {
  background: linear-gradient(160deg, rgba(14, 17, 38, 0.98) 0%, rgba(8, 10, 24, 0.98) 100%);
  border: 1px solid var(--ux-border-bright);
  color: var(--ux-text-2);
  width: 22rem;
  margin: 20vh auto;
  padding: 2rem;
  border-radius: 1.25rem;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(99, 102, 241, 0.15);
  font-family: var(--ux-font-sans);
  opacity: 0;
  transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
  animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
}

#components-reconnect-modal[open] {
  animation:
    components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s,
    components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
  animation-fill-mode: both;
}

#components-reconnect-modal::backdrop {
  background: rgba(2, 3, 12, 0.75);
  backdrop-filter: blur(8px);
  animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
  opacity: 1;
}

/* ─── Анимации ──────────────────────────────────────────────────── */
@keyframes components-reconnect-modal-slideUp {
  0%   { transform: translateY(30px) scale(0.95); }
  100% { transform: translateY(0); }
}
@keyframes components-reconnect-modal-fadeInOpacity {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes components-reconnect-modal-fadeOutOpacity {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── Внутренние элементы ───────────────────────────────────────── */
.components-reconnect-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
#components-reconnect-modal p {
  margin: 0;
  text-align: center;
  font-size: var(--ts-base);
  color: var(--ux-text-3);
  line-height: 1.55;
}

/* ─── Кнопка повтора ────────────────────────────────────────────── */
#components-reconnect-modal button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.5rem;
  border: none;
  border-radius: var(--ux-r-full);
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  font-size: var(--ts-sm);
  font-weight: 700;
  font-family: var(--ux-font-sans);
  cursor: pointer;
  box-shadow: 0 4px 16px -4px rgba(99, 102, 241, 0.45);
  transition: filter var(--t-base), transform var(--t-base);
}
#components-reconnect-modal button:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
#components-reconnect-modal button:active {
  filter: brightness(0.95);
  transform: none;
}

/* ─── Анимированные кольца (индикатор подключения) ─────────────── */
.components-rejoining-animation {
  position: relative;
  width: 64px;
  height: 64px;
}
.components-rejoining-animation div {
  position: absolute;
  border: 2px solid var(--ux-accent-light);
  opacity: 1;
  border-radius: 50%;
  animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes components-rejoining-animation {
  0%    { top: 32px; left: 32px; width: 0;    height: 0;    opacity: 0; }
  4.9%  { top: 32px; left: 32px; width: 0;    height: 0;    opacity: 0; }
  5%    { top: 32px; left: 32px; width: 0;    height: 0;    opacity: 1; }
  100%  { top:  0px; left:  0px; width: 64px; height: 64px; opacity: 0; }
}



/* ───── 5. PREFIX ornament-* (набор стилей) ─────────────────────── */

/* ── components/ornament-divider.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ornament-*) — Dividers
   Объединяет 6 вариантов горизонтальных линий:
     .ornament-rule           (base.css:47)
     .ornament-rule--gold     (base.css:55)
     .section-divider   (personal.css:38)
     .section-divider--gold (personal.css:43)
     + ornament-вариант с ◆

   Использование:
     <hr class="ornament-rule">
     <hr class="ornament-rule ornament-rule--gold">
     <div class="ornament-rule ornament-rule--ornament"></div>
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Базовая линия ──────────────────────────────────────────────── */
.ornament-rule {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ornament-border) 20%, var(--ornament-border) 80%, transparent);
  margin: 0;
  pointer-events: none;
}

/* ─── Золотой вариант ────────────────────────────────────────────── */
.ornament-rule--gold {
  background: linear-gradient(90deg, transparent, var(--ornament-gold-border) 30%, var(--ornament-gold-border) 70%, transparent);
}

/* ─── С декоративным ромбом посередине ───────────────────────────── */
.ornament-rule--ornament {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ornament-rule--ornament::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ornament-gold-border) 30%, var(--ornament-gold-border) 70%, transparent);
  transform: translateY(-50%);
}
.ornament-rule--ornament::after {
  content: '◆';
  position: relative;
  z-index: 1;
  font-size: var(--ts-3xs);
  color: var(--ornament-gold-border);
  background: var(--ornament-bg);
  padding: 0 0.5rem;
  line-height: 1;
}

/* ─── Алиасы обратной совместимости ─────────────────────────────── */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ornament-border) 20%, var(--ornament-border) 80%, transparent);
  pointer-events: none;
}
.section-divider--gold {
  background: linear-gradient(90deg, transparent, var(--ornament-gold-border) 30%, var(--ornament-gold-border) 70%, transparent);
}



/* ── components/ornament-stripe.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ornament-*) — Stripe (цветная полоска-акцент)
   Объединяет 2 дословных дубля:
     .project-card__stripe  (projects.css:24)
     .modal-stripe          (modal.css:59)

   Использование:
     <div class="ornament-stripe"></div>       — золотой
     <div class="ornament-stripe ornament-stripe--sky"></div>  — синий (navy)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Базовая полоска (золото) ───────────────────────────────────── */
.ornament-stripe {
  height: 2px;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--ornament-gold-dark), var(--ornament-gold), var(--ornament-gold-light));
}

/* ─── Sky-вариант (navy) ─────────────────────────────────────────── */
.ornament-stripe--sky {
  background: linear-gradient(90deg, var(--ornament-navy), var(--ornament-navy-mid), var(--ornament-navy));
}

/* ─── Сверху карточки (border-radius) ───────────────────────────── */
.ornament-stripe--top {
  border-radius: var(--ornament-r-xl) var(--ornament-r-xl) 0 0;
}



/* ── components/ornament-section-label.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ornament-*) — Section Labels (Eyebrow Typography)
   Объединяет 4 варианта надписей-eyebrow:
     .section-label       (components.css:68)  — с боковыми линиями
     .hero-eyebrow        (hero.css:151)        — большое письмо
     .page-hero__eyebrow  (library.css:7)       — страницы библиотеки
     .modal-section-label (modal.css:91)        — внутри модала

   Новое имя: .ornament-section-label + модификаторы

   Оригинальные классы в проекте остаются как есть (backward compat).
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Базовая метка секции ───────────────────────────────────────── */
.ornament-section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: var(--ts-3xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ornament-gold);
  line-height: 1.4;
}

/* ─── С боковыми линиями-акцентами ──────────────────────────────── */
.ornament-section-label::before,
.ornament-section-label::after {
  content: '';
  display: block;
  height: 1px;
  width: 28px;
  background: linear-gradient(90deg, var(--ornament-gold-border), transparent);
  flex-shrink: 0;
}
.ornament-section-label::after {
  background: linear-gradient(90deg, transparent, var(--ornament-gold-border));
}

/* ─── Без боковых линий ──────────────────────────────────────────── */
.ornament-section-label--plain::before,
.ornament-section-label--plain::after {
  display: none;
}

/* ─── Уменьшенный размер (modal-label) ──────────────────────────── */
.ornament-section-label--sm {
  font-size: var(--ts-3xs);
  letter-spacing: 0.14em;
  color: var(--ornament-ink-mute);
}

/* ─── Крупный hero-вариант ───────────────────────────────────────── */
.ornament-section-label--lg {
  font-size: var(--ts-2xs);
  letter-spacing: 0.22em;
}

/* ─── С пульсирующей точкой ──────────────────────────────────────── */
.ornament-section-label__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ornament-gold);
  flex-shrink: 0;
  animation: ui-pulse-dot 2.5s ease-in-out infinite;
}



/* ── components/ornament-pill-nav.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ornament-*) — Pill Navigation Links
   Объединяет 3 варианта «пилюли»-ссылки:
     .header-cta-pill      (header.css:110) — desktop, малый
     .mobile-nav-link--pill (header.css:145) — mobile, большой
     .lib-subnav__link     (library.css:45) — sub-navigation

   Новое имя: .ornament-pill-link, .ornament-pill-link--active

   Оригинальные классы остаются в header.css / library.css (backward compat).
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Базовая «пилюля» ───────────────────────────────────────────── */
.ornament-pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--ts-3xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ornament-navy);
  background: var(--ornament-navy-soft);
  border: 1px solid rgba(26, 32, 56, 0.2);
  text-decoration: none;
  padding: 6px 14px;
  min-height: 44px;
  border-radius: var(--ornament-r-full);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.ornament-pill-link:hover {
  background: var(--ornament-navy);
  border-color: var(--ornament-navy);
  color: var(--ornament-gold-light);
  box-shadow: 0 2px 12px -2px rgba(26, 32, 56, 0.25);
}

/* ─── Активный вариант ───────────────────────────────────────────── */
.ornament-pill-link--active,
.ornament-pill-link.is-active {
  background: var(--ornament-navy);
  border-color: var(--ornament-navy);
  color: var(--ornament-gold-light);
  box-shadow: 0 0 0 1px var(--ornament-gold-border);
}

/* ─── Вариант «библиотека» (золото на hover) ─────────────────────── */
.ornament-pill-link--gold {
  color: var(--ornament-ink-mute);
  background: transparent;
  border-color: var(--ornament-border-soft);
  border-width: 1.5px;
}
.ornament-pill-link--gold:hover,
.ornament-pill-link--gold.ornament-pill-link--active,
.ornament-pill-link--gold.is-active {
  background: var(--ornament-gold-bg);
  border-color: var(--ornament-gold);
  color: var(--ornament-gold);
  box-shadow: none;
}

/* ─── Большой mobile-вариант ─────────────────────────────────────── */
.ornament-pill-link--lg {
  display: block;
  text-align: center;
  font-size: var(--ts-2xs);
  padding: 12px 16px;
  margin: 0 12px 8px;
}



/* ── components/ornament-badge.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ornament-*) — Badges & Tags
   Объединяет 7 дублирующихся вариантов:
     .pub-tag         (components.css:477)
     .card-v3-badge   (components.css:733)
     .tech-pill       (components.css:120)
     .lib-card__tag   (library.css:127)
     .media-card__tag (components.css:833)
     .tag             (projects.css:73)
     .hf-type-pill--data (components.css:398)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Базовый бейдж ───────────────────────────────────────────────── */
.ornament-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  font-family: var(--font-sans);
  font-size: var(--ts-3xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--ornament-r-sm);
  color: var(--ornament-ink-3);
  background: var(--ornament-bg-alt);
  border: 1px solid var(--ornament-border);
  white-space: nowrap;
  line-height: 1.4;
}

/* ─── Золотой вариант ────────────────────────────────────────────── */
.ornament-badge--gold {
  color: var(--ornament-gold-dark);
  background: var(--ornament-gold-bg);
  border-color: var(--ornament-gold-border);
}

/* ─── Нейтральный navy-вариант ───────────────────────────────────── */
.ornament-badge--navy {
  color: var(--ornament-navy);
  background: var(--ornament-navy-soft);
  border-color: rgba(26, 32, 56, 0.2);
}

/* ─── Pill-форма (скругление 999px) ──────────────────────────────── */
.ornament-badge--pill {
  border-radius: var(--ornament-r-full);
  padding: 4px 12px;
}

/* ─── Hover-интерактивность (если нужна) ─────────────────────────── */
.ornament-badge--interactive {
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.ornament-badge--interactive:hover {
  background: var(--ornament-gold-bg);
  border-color: var(--ornament-gold-border);
  color: var(--ornament-gold-dark);
}

/* ─── Обратная совместимость — алиасы ────────────────────────────── */
/* Используй .ornament-badge --gold вместо этих классов в новом коде */
.pub-tag,
.card-v3-badge,
.media-card__tag,
.hf-type-pill--data {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--ts-3xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--ornament-r-sm);
  color: var(--ornament-gold-dark);
  background: var(--ornament-gold-bg);
  border: 1px solid var(--ornament-gold-border);
}

.tech-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--ornament-r-sm);
  background: var(--ornament-navy-soft);
  border: 1px solid rgba(28, 35, 64, 0.12);
  font-size: var(--ts-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ornament-ink-2);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.tech-pill:hover {
  background: var(--ornament-gold-bg);
  border-color: var(--ornament-gold-border);
  color: var(--ornament-gold-dark);
}



/* ── components/ornament-button.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ornament-*) — Buttons
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Primary: тёмный navy с золотым текстом ─────────────────────── */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  border-radius: var(--ornament-r-sm);
  background: var(--ornament-navy);
  color: var(--ornament-gold-light);
  font-family: var(--font-sans);
  font-size: var(--ts-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.22s ease, box-shadow 0.22s ease, transform var(--t-smooth);
  box-shadow: 0 2px 12px -2px rgba(28, 35, 64, 0.28);
}
.btn-primary:hover {
  background: var(--ornament-gold-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.08) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.55s ease;
}
.btn-primary:hover::after { transform: translateX(100%); }

/* ─── Ghost: рамка, прозрачный фон ───────────────────────────────── */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--ornament-r-sm);
  background: transparent;
  border: 1px solid var(--ornament-border);
  color: var(--ornament-ink-2);
  font-family: var(--font-sans);
  font-size: var(--ts-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-smooth), border-color var(--t-smooth), color var(--t-smooth), transform var(--t-smooth);
}
.btn-ghost:hover {
  background: var(--ornament-navy-soft);
  border-color: var(--ornament-navy);
  color: var(--ornament-navy);
  transform: translateY(-1px);
}

/* ─── Card Button: полноширинная кнопка внутри карточки ──────────── */
.card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 0;
  border-radius: var(--ornament-r-md);
  font-family: var(--font-sans);
  font-size: var(--ts-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform var(--t-smooth), box-shadow 0.22s, background var(--t-smooth);
}
.card-btn:hover { transform: translateY(-1px); }

/* Вариант primary / indigo (navy фон) */
.card-btn--primary,
.card-btn--indigo {
  background: var(--ornament-navy);
  color: var(--ornament-gold-light);
  box-shadow: 0 3px 14px -3px rgba(28, 35, 64, 0.3);
}
.card-btn--primary:hover,
.card-btn--indigo:hover {
  background: var(--ornament-gold-dark);
  color: #fff;
  box-shadow: var(--shadow-gold);
}

/* Вариант sky (золотой фон) */
.card-btn--sky {
  background: var(--ornament-gold);
  color: var(--ornament-ink);
  box-shadow: var(--shadow-gold);
}
.card-btn--sky:hover {
  background: var(--ornament-gold-dark);
  color: #fff;
}

/* Вариант ghost (светлый) */
.card-btn--ghost {
  background: var(--ornament-bg-alt);
  border: 1px solid var(--ornament-border);
  color: var(--ornament-ink-2);
}
.card-btn--ghost:hover {
  background: var(--ornament-navy-soft);
  border-color: var(--ornament-navy);
  color: var(--ornament-navy);
}



/* ── components/ornament-modal.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ornament-*) — Modal Component (OM namespace only)
   Не переопределяет канонические .modal-* из modal.css.
   JS: utils/modal.js — для OM используйте те же id/class паттерны или отдельный init.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Оверлей ────────────────────────────────────────────────────── */
.ornament-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--ornament-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow);
}
.ornament-modal-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ─── Окно ───────────────────────────────────────────────────────── */
.ornament-modal-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  border-radius: var(--ornament-r-xl);
  background: var(--ornament-surface);
  border: 1px solid var(--ornament-border);
  box-shadow: 0 32px 80px -20px rgba(26, 22, 18, 0.3), 0 0 0 1px var(--ornament-border);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  scrollbar-width: thin;
  scrollbar-color: var(--ornament-border) transparent;
}
.ornament-modal-overlay.is-open .ornament-modal-box { transform: none; }

/* ─── Адаптив ────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .ornament-modal-overlay {
    padding: 10px 10px max(10px, env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
  }
  .ornament-modal-box {
    max-height: min(100dvh - 20px, 100%);
    max-width: 100%;
    border-radius: var(--ornament-r-xl) var(--ornament-r-xl) var(--ornament-r-lg) var(--ornament-r-lg);
  }
  .ornament-modal-inner {
    padding: 22px 18px max(24px, env(safe-area-inset-bottom, 24px));
  }
  .ornament-modal-close {
    top: 12px; right: 12px;
    width: 44px; height: 44px;
  }
}

/* ─── Полоска-акцент (используй .ornament-stripe вместо нового кода) ───── */
.ornament-modal-stripe {
  height: 2px;
  background: linear-gradient(90deg, var(--ornament-gold-dark), var(--ornament-gold), var(--ornament-gold-light));
  border-radius: var(--ornament-r-xl) var(--ornament-r-xl) 0 0;
}
.ornament-modal-stripe--sky {
  background: linear-gradient(90deg, var(--ornament-navy), var(--ornament-navy-mid), var(--ornament-navy));
}

/* ─── Контент ────────────────────────────────────────────────────── */
.ornament-modal-inner { padding: 28px 28px 32px; }

.ornament-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--ornament-r-md);
  border: 1px solid var(--ornament-border);
  background: var(--ornament-bg-alt);
  color: var(--ornament-ink-mute);
  cursor: pointer;
  transition: color var(--t-smooth), background var(--t-smooth), border-color var(--t-smooth);
  z-index: 1;
}
.ornament-modal-close:hover {
  color: var(--ornament-ink);
  background: var(--ornament-border-soft);
  border-color: var(--ornament-border);
}

/* ─── Метка секции внутри модала ─────────────────────────────────── */
.ornament-modal-section-label {
  font-family: var(--font-sans);
  font-size: var(--ts-3xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ornament-ink-mute);
  margin-bottom: 14px;
  margin-top: 4px;
}

/* ─── Hero-блок документа внутри модала ─────────────────────────── */
.ornament-modal-doc-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.35rem;
  padding: 1.25rem 1rem;
  border-radius: var(--ornament-r-lg);
  background: var(--ornament-bg-alt);
  border: 1px solid var(--ornament-border-soft);
}
.ornament-modal-doc-hero img {
  max-height: 7rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ─── Ряд бейджей ────────────────────────────────────────────────── */
.ornament-modal-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-top: 0.5rem;
}
.ornament-modal-badges-row img {
  height: 1.25rem;
  width: auto;
  border-radius: var(--ornament-r-sm);
  opacity: 0.85;
}

/* ─── Список фичей ───────────────────────────────────────────────── */
.ornament-modal-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 480px) {
  .ornament-modal-features { gap: 14px; }
}
.ornament-modal-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--ornament-r-lg);
  background: var(--ornament-bg-alt);
  border: 1px solid var(--ornament-border-soft);
}
.ornament-modal-feature-item .text-sm { line-height: 1.45; }
.ornament-modal-feature-item .text-xs {
  line-height: 1.55;
  margin-top: 0.2rem;
  color: var(--ornament-ink-3);
}

/* ─── Заметка (золотой блок) ─────────────────────────────────────── */
.ornament-modal-v3-note {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--ornament-r-lg);
  background: var(--ornament-gold-bg);
  border: 1px solid var(--ornament-gold-border);
}



/* ── components/ornament-header.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ornament-*) — Header Component
   JS: utils/ornament-header.js
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Шапка страницы ───────────────────────────────────────────── */
.site-header {
  background: rgba(243, 237, 227, 0.9);
  border-bottom: 1px solid var(--ornament-border-soft);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background 0.4s, box-shadow 0.4s;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-top: env(safe-area-inset-top, 0px);
}
.site-header.is-scrolled {
  background: rgba(243, 237, 227, 0.97) !important;
  box-shadow: var(--shadow-header);
}

/* ─── Аватар в шапке ─────────────────────────────────────────────── */
.header-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--ornament-gold);
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--ornament-bg), 0 0 0 3.5px var(--ornament-gold-border);
  transition: box-shadow 0.25s ease;
}
.header-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
  transform: scale(1.14);
  transform-origin: 50% 22%;
  transition: transform var(--t-slow);
}
a.group:hover .header-monogram {
  box-shadow: 0 0 0 2px var(--ornament-bg), 0 0 0 3.5px var(--ornament-gold);
}
a.group:hover .header-logo-img {
  transform: scale(1.22);
}

/* ─── Имя ────────────────────────────────────────────────────────── */
.header-name {
  font-family: var(--font-serif);
  font-size: var(--ts-md);
  font-weight: 600;
  color: var(--ornament-ink);
  letter-spacing: 0.02em;
}

/* ─── Навигация ──────────────────────────────────────────────────── */
.header-nav-link {
  font-family: var(--font-sans);
  font-size: var(--ts-3xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ornament-ink-mute);
  text-decoration: none;
  padding: 6px 10px;
  min-height: 44px;
  transition: color var(--t-smooth);
}
.header-nav-link:hover,
.header-nav-link--active {
  color: var(--ornament-gold);
}
.header-nav-link--active {
  font-weight: 700;
}

/* ─── Правый блок навигации ──────────────────────────────────────── */
.header-nav-cluster {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem 0.75rem;
}
@media (min-width: 1024px) {
  .header-nav-cluster {
    display: flex;
  }
}
.header-nav-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.125rem;
}
.header-nav-divider {
  width: 1px;
  height: 1.125rem;
  background: var(--ornament-border-soft);
  flex-shrink: 0;
}
.header-nav-secondary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* ─── Пилюли навигации (desktop) ────────────────────────────────── */
.header-cta-pill {
  font-family: var(--font-sans);
  font-size: var(--ts-3xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ornament-navy);
  background: var(--ornament-navy-soft);
  border: 1px solid rgba(26, 32, 56, 0.22);
  text-decoration: none;
  padding: 7px 12px;
  min-height: 44px;
  border-radius: var(--ornament-r-full);
  white-space: nowrap;
  transition: background var(--t-smooth), border-color var(--t-smooth), color var(--t-smooth), box-shadow var(--t-smooth);
}
.header-cta-pill:hover {
  background: var(--ornament-navy);
  border-color: var(--ornament-navy);
  color: var(--ornament-gold-light);
  box-shadow: 0 2px 12px -2px rgba(26, 32, 56, 0.25);
}
.header-cta-pill--active {
  background: var(--ornament-navy);
  border-color: var(--ornament-navy);
  color: var(--ornament-gold-light);
  box-shadow: 0 0 0 1px var(--ornament-gold-border);
}

/* ─── Мобильные разделитель ──────────────────────────────────────── */
.mobile-nav-divider {
  height: 1px;
  margin: 0.35rem 0 0.5rem;
  background: linear-gradient(90deg, transparent, var(--ornament-border-soft), transparent);
  border: none;
}

/* ─── Пилюли навигации (mobile) ──────────────────────────────────── */
.mobile-nav-link--pill {
  display: block;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--ts-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ornament-navy);
  background: var(--ornament-navy-soft);
  border: 1px solid rgba(26, 32, 56, 0.2);
  text-decoration: none;
  padding: 12px 16px;
  margin: 0 12px 8px;
  border-radius: var(--ornament-r-full);
  transition: background var(--t-smooth), color var(--t-smooth), border-color var(--t-smooth);
}
.mobile-nav-link--pill:hover {
  background: var(--ornament-navy);
  color: var(--ornament-gold-light);
  border-color: var(--ornament-navy);
}
.mobile-nav-link--pill.is-active {
  background: var(--ornament-navy);
  color: var(--ornament-gold-light);
  border-color: var(--ornament-navy);
}

/* ─── Кнопка «Бургер» ────────────────────────────────────────────── */
.menu-btn {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ornament-border);
  background: transparent;
  color: var(--ornament-ink-3);
  cursor: pointer;
  transition: border-color var(--t-smooth), color var(--t-smooth);
}
.menu-btn:hover {
  border-color: var(--ornament-gold);
  color: var(--ornament-gold);
}

/* ─── Переключатель языка ────────────────────────────────────────── */
.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 0.625rem;
  font-family: var(--font-sans);
  font-size: var(--ts-3xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ornament-gold-dark);
  background: transparent;
  border: 1px solid var(--ornament-gold-border);
  border-radius: var(--ornament-r-md);
  cursor: pointer;
  transition: background var(--t-smooth), color var(--t-smooth), border-color var(--t-smooth);
}
.header-nav-secondary .lang-btn {
  margin-left: 0.125rem;
}
.lang-btn:hover {
  background: var(--ornament-gold-bg);
  border-color: var(--ornament-gold);
  color: var(--ornament-gold-dark);
}

/* ─── Мобильная панель ───────────────────────────────────────────── */
.mobile-panel {
  background: var(--ornament-surface);
  border-top: 1px solid var(--ornament-border-soft);
}
.mobile-nav-link {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--ts-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ornament-ink-2);
  text-decoration: none;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ornament-border-soft);
  transition: color var(--t-smooth);
}
.mobile-nav-link:last-child { border-bottom: none; }
.mobile-nav-link:hover { color: var(--ornament-gold); }



/* ── components/ornament-reveal.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ornament-*) — Reveal on Scroll
   Анимация появления при скролле (IntersectionObserver).
   JS: utils/reveal.js

   Использование:
     <div class="reveal">...</div>
     <!-- опционально с задержкой: -->
     <div class="reveal" style="--delay: 0.1s">...</div>

   По умолчанию элементы видны (opacity: 1) — скрытие активируется
   только после того, как JS добавит класс body.reveal-anim.
   Защита от пустой страницы при ошибке загрузки скриптов.
   ═══════════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity   0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0s);
}

body.reveal-anim .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
}

body.reveal-anim .reveal.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}



/* ───── 6. СТРАНИЧНЫЕ МОДУЛИ (свои префиксы по разделам) ──── */

/* ── components/ui-base.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit (ui-*) — Agent / Catalog Base Layer
   Версия: 1.0.0

   Содержит:
   • .ui-page / .ui-content      — страничная подложка с дотами
   • .ui-btn (--pill / --primary / --lg / --hero)
   • .ui-grid                       — респонсивная сетка карточек
   • .ui-card (+ __icon, __name, __creator, __desc, __tags, __footer,
                   __rating, __price, __pill, __action-btn)
                                     — карточка-персонаж AI-агента
   • .ui-catalog-hero               — большой hero-баннер каталога
   • .ui-catalog-layout             — sidebar + main
   • .ui-sidebar (+ -group, -item)
   • .ui-hero / .ui-section-title / .ui-section-sub
   • .ui-info-block / .ui-code

   Глобальный сброс (html/body/*) НЕ переносим — он живёт в base/reset.css.
   #blazor-error-ui — host-специфичный, обработан в .blazor-error-boundary
   через ux-error-banner.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── UIKit audit (P1): локальные токены → brand.css ───────────────── */
:root {
  --ui-audit-cream: var(--b-cream);
  --ui-audit-paper: var(--b-paper-hi);
  --ui-audit-line:  var(--b-line-hi);
}

/* ─── Фоновый паттерн страницы ─────────────────────────────────────── */
.ui-page {
    min-height: 100vh;
    background-color: var(--page-bg);
    transition: background-color 0.15s;
    position: relative;
    z-index: 1;
}

/* ─── Контент (sticky header — без большого верхнего отступа) ─────── */
.ui-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.ui-page--lp {
    background: transparent !important;
    background-image: none !important;
}
.ui-lp-main {
    padding-top: 0; /* sticky header — без компенсирующего отступа */
    min-height: 100vh;
}

@media (min-width: 640px) {
    .ui-content { padding-top: 1.75rem; padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1024px) {
    .ui-content { padding-top: 2rem; padding-left: 2.5rem; padding-right: 2.5rem; }
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  BUTTONS (.ui-btn)                                             ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ts-base);
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
}
.ui-btn--pill { border-radius: 9999px; padding: .5rem 1.25rem; }
.ui-btn--primary {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .35);
}
.ui-btn--primary:hover { background: #1d4ed8; }
.ui-btn--lg {
    font-size: var(--ts-lg);
    font-weight: 600;
    padding: .75rem 2.25rem;
    border-radius: 9999px;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  FILTER BAR                                                      ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.ui-filter-bar {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    margin-bottom: 2rem;
}
@media (min-width: 640px) {
    .ui-filter-bar { flex-direction: row; align-items: center; flex-wrap: wrap; }
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  CARD GRID                                                       ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.ui-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 480px)  { .ui-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .ui-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .ui-grid { grid-template-columns: repeat(4, 1fr); } }


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  AGENT CARD (.ui-card) — карточка-персонаж агента              ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.ui-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e3e8f0;
    text-decoration: none;
    color: inherit;
    transition: transform .28s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow .28s ease,
                border-color .28s ease;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ui-card::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 46%;
    background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--card-accent, #2f6aff) 15%, transparent), transparent);
    transform: translateX(-180%) skewX(-16deg);
    transition: transform .65s ease;
    pointer-events: none;
    z-index: 0;
}
.ui-card:hover::before {
    transform: translateX(240%) skewX(-16deg);
}
.ui-card > * { position: relative; z-index: 1; }

.ui-card:hover {
    box-shadow: 0 28px 54px -26px color-mix(in srgb, var(--card-accent, #2f6aff) 40%, transparent);
    transform: translateY(-7px) scale(1.018);
    border-color: var(--card-accent, #2f6aff);
}
.ui-card--clickable { cursor: pointer; outline: none; }
.ui-card--clickable:focus-visible { outline: 2px solid var(--b-gold, #2f6aff); outline-offset: 2px; }
.ui-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent, #2f6aff);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
    z-index: 2;
}
.ui-card:hover::after { transform: scaleX(1); }

/* Type badge */
.ui-card__type-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .3125rem .5625rem;
    border-radius: 7px;
    white-space: nowrap;
    line-height: 1;
}
.ui-card:not(.ui-card--tool) .ui-card__type-badge {
    color: var(--b-type-agent, #7c5cff);
    background: var(--b-type-agent-soft, #efeaff);
}
.ui-card--tool .ui-card__type-badge {
    color: var(--b-type-tool, #2f6aff);
    background: var(--b-type-tool-soft, #eaf0ff);
}

/* ─── Иконка — 6 цветовых пресетов персонажей ────────────────────── */
.ui-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}
.ui-card:hover .ui-card__icon {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 12px 22px -8px var(--card-accent, #2f6aff);
}

.ui-card--0 { --card-accent: #0fa389; --card-soft: #e3f6f1; }
.ui-card--1 { --card-accent: #2f6aff; --card-soft: #eaf0ff; }
.ui-card--2 { --card-accent: #c2476f; --card-soft: #fbe7ee; }
.ui-card--3 { --card-accent: #7c5cff; --card-soft: #efeaff; }
.ui-card--4 { --card-accent: #d98324; --card-soft: #fbf0e0; }
.ui-card--5 { --card-accent: #0e8fd0; --card-soft: #e2f1fb; }

.ui-card--0 .ui-card__icon { background: var(--card-soft); color: var(--card-accent); }
.ui-card--1 .ui-card__icon { background: var(--card-soft); color: var(--card-accent); }
.ui-card--2 .ui-card__icon { background: var(--card-soft); color: var(--card-accent); }
.ui-card--3 .ui-card__icon { background: var(--card-soft); color: var(--card-accent); }
.ui-card--4 .ui-card__icon { background: var(--card-soft); color: var(--card-accent); }
.ui-card--5 .ui-card__icon { background: var(--card-soft); color: var(--card-accent); }

/* ─── Имя / автор / описание ─────────────────────────────────────── */
.ui-card__name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--b-coffee, #0d1017);
    margin: .9375rem 0 0;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    line-height: 1.25;
    letter-spacing: -.01em;
}
.ui-card__creator {
    font-size: var(--ts-sm);
    color: var(--b-coffee-faint, #9aa3b0);
    margin: .2rem 0 0;
    line-height: 1.3;
}
.ui-card__creator-label { color: inherit; }
.ui-card__desc {
    font-size: var(--ts-md);
    color: #56617a;
    line-height: 1.5;
    flex: 1;
    margin: .7rem 0 0;
    font-family: var(--font-body);
}

/* ─── Подвал, рейтинг, цена ──────────────────────────────────────── */
.ui-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .8125rem;
    margin-top: .9375rem;
    border-top: 1px solid #eef1f6;
}
.ui-card__rating {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: var(--ts-md);
    font-weight: 700;
    color: #1a2a4a;
}
.ui-card__rating-count { font-weight: 400; color: var(--b-coffee-faint, #9aa3b0); }

.ui-card__price       { font-size: var(--ts-md); font-weight: 700; color: #1a2a4a; }
.ui-card__price small { font-size: var(--ts-2xs); font-weight: 400; color: var(--b-coffee-faint, #9aa3b0); }
.ui-card__price--free { font-size: var(--ts-md); font-weight: 700; color: var(--b-type-assembly, #0fa389); }

/* ─── Теги ────────────────────────────────────────────────────────── */
.ui-card__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin: .8125rem 0 0; }
.ui-card__tag {
    font-family: var(--font-mono);
    font-size: var(--ts-xs);
    font-weight: 500;
    padding: .25rem .5625rem;
    border-radius: 6px;
    background: #f2f5f9;
    border: none;
    color: #5b6470;
    white-space: nowrap;
}

/* ─── Действия (Чат / Подробнее / Избранное) ─────────────────────── */
.ui-card__actions-row { display: flex; gap: .5625rem; margin-top: 1rem; }
.ui-card__pill {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    height: 42px;
    font-size: var(--ts-md);
    font-weight: 600;
    font-family: var(--font-body);
    padding: 0 .875rem;
    border-radius: 11px;
    border: 1px solid #dde5f0;
    background: #fff;
    color: #3a4250;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}
.ui-card__pill:hover { border-color: var(--b-gold, #2f6aff); }
.ui-card__pill--chat {
    color: var(--b-gold, #2f6aff);
    border: none;
    background: var(--b-type-tool-soft, #eaf0ff);
}
.ui-card__pill--chat:hover {
    background: var(--b-gold, #2f6aff);
    color: #fff;
}
.ui-card__pill--fav-on {
    background: #fff;
    border-color: var(--b-gold, #2f6aff);
    color: var(--b-gold, #2f6aff);
}
.ui-card__pill--fav-on:hover { border-color: var(--b-gold, #2f6aff); }
.ui-card--tool .ui-card__pill--chat {
    color: var(--b-gold, #2f6aff);
    background: var(--b-type-tool-soft, #eaf0ff);
}

.ui-card__actions { display: flex; gap: .375rem; }
.ui-card__action-btn {
    width: 2.75rem; height: 2.75rem;
    border-radius: 9999px;
    background: #2563eb;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s, transform .15s;
    color: #fff; text-decoration: none; flex-shrink: 0;
}
.ui-card__action-btn:hover { background: #1d4ed8; transform: scale(1.08); }
.ui-card__action-btn--outline { background: transparent; border: 1.5px solid #2563eb; color: #2563eb; }
.ui-card__action-btn--outline:hover { background: #eff6ff; }


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  CATALOG HERO BANNER                                             ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.ui-catalog-hero {
    margin: -5.5rem -1.25rem 2.5rem;
    padding: 5.5rem 1.25rem 2.75rem;
    background: linear-gradient(135deg, #0d1b55 0%, #0e2d8a 35%, #1554c7 65%, #1976d2 100%);
    position: relative;
    overflow: hidden;
    border-radius: 0;
}
@media (min-width: 640px) {
    .ui-catalog-hero {
        margin-top: -6rem; margin-left: -2rem; margin-right: -2rem;
        padding-top: 6rem; padding-left: 2rem; padding-right: 2rem;
    }
}
@media (min-width: 1024px) {
    .ui-catalog-hero {
        margin-top: -6.5rem; margin-left: -2.5rem; margin-right: -2.5rem;
        padding-top: 6.5rem; padding-left: 2.5rem; padding-right: 2.5rem;
    }
}

.ui-catalog-hero::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(139, 92, 246, .25) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 100% 10%, rgba(99, 102, 241, .2) 0%, transparent 60%);
    pointer-events: none;
}
.ui-catalog-hero::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.ui-catalog-hero__inner { position: relative; z-index: 1; max-width: 56rem; }
.ui-catalog-hero__title {
    font-size: var(--ts-4xl);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 .875rem;
    font-family: inherit;
    letter-spacing: -.02em;
}
@media (min-width: 640px)  { .ui-catalog-hero__title { font-size: var(--ts-5xl); } }
@media (min-width: 1024px) { .ui-catalog-hero__title { font-size: var(--ts-5xl); } }

.ui-catalog-hero__sub {
    font-size: var(--ts-lg);
    color: rgba(255, 255, 255, .8);
    line-height: 1.65;
    max-width: 44rem;
    margin: 0 0 2rem;
}

.ui-btn--hero {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--ts-base);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 9999px;
    padding: .75rem 2rem;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s ease;
}
.ui-btn--hero:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  CATALOG LAYOUT (sidebar + main)                                 ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.ui-catalog-layout { display: flex; gap: 2rem; align-items: flex-start; }
.ui-sidebar { flex-shrink: 0; width: 220px; display: none; }
@media (min-width: 1024px) { .ui-sidebar { display: block; } }

.ui-sidebar-group { margin-bottom: 1.5rem; }
.ui-sidebar-group__title {
    font-size: var(--ts-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #475569;
    margin: 0 0 .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #f1f5f9;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: .375rem;
    cursor: pointer;
    user-select: none;
}
.ui-sidebar-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0;
    font-size: var(--ts-base);
    color: #64748b;
    cursor: pointer;
    transition: color .15s;
}
.ui-sidebar-item:hover { color: #2563eb; }
.ui-sidebar-item input[type="checkbox"] {
    width: 1rem; height: 1rem;
    border-radius: .25rem;
    accent-color: #2563eb;
    cursor: pointer;
    flex-shrink: 0;
}
.ui-sidebar-item--active { color: #2563eb; font-weight: 600; }
.ui-catalog-main { flex: 1; min-width: 0; }


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  HERO (главная)                                                  ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.ui-hero { padding-bottom: 2.5rem; }
.ui-hero__title {
    font-size: var(--ts-5xl);
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0 0 1rem;
    font-family: inherit;
}
@media (min-width: 640px) { .ui-hero__title { font-size: var(--ts-5xl); } }

.ui-hero__sub {
    font-size: var(--ts-lg);
    color: #64748b;
    line-height: 1.7;
    max-width: 44rem;
    margin: 0 0 2rem;
}
.ui-hero__cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  SECTION HEADING                                                 ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.ui-section-title {
    font-size: var(--ts-3xl);
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1.25rem;
    font-family: inherit;
}
.ui-section-sub {
    font-size: var(--ts-md);
    color: #64748b;
    margin: -.75rem 0 1.5rem;
    line-height: 1.6;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  INFO BLOCK (API info)                                           ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.ui-info-block {
    margin-top: 3rem;
    padding: 1.5rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
}
.ui-info-block__title {
    font-size: var(--ts-md);
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 .375rem;
    font-family: inherit;
}
.ui-info-block p {
    font-size: var(--ts-base);
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}
.ui-code {
    font-size: var(--ts-sm);
    background: #f1f5f9;
    color: #be185d;
    padding: .1rem .4rem;
    border-radius: .25rem;
    font-family: ui-monospace, monospace;
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  DARK THEME OVERRIDES                                            ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="dark"] .ui-card {
    background: rgba(15, 22, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}
[data-theme="dark"] .ui-card::before {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, transparent 60%);
}
[data-theme="dark"] .ui-card:hover {
    box-shadow: 0 6px 24px rgba(59, 130, 246, .15), 0 2px 8px rgba(0, 0, 0, .2);
    border-color: rgba(147, 197, 253, .3);
}
[data-theme="dark"] .ui-card__name           { color: #e2e8f0; }
[data-theme="dark"] .ui-card__creator        { color: #64748b; }
[data-theme="dark"] .ui-card__creator-label  { color: #94a3b8; }
[data-theme="dark"] .ui-card__desc           { color: #94a3b8; }
[data-theme="dark"] .ui-card__price          { color: #e2e8f0; }
[data-theme="dark"] .ui-card__rating         { color: #fbbf24; }
[data-theme="dark"] .ui-card__tag {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .ui-card__pill {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}
[data-theme="dark"] .ui-card__pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}
[data-theme="dark"] .ui-card__pill--chat {
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.3);
    background: rgba(59, 130, 246, 0.1);
}
[data-theme="dark"] .ui-card__pill--chat:hover {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(96, 165, 250, 0.5);
}
[data-theme="dark"] .ui-card__pill--fav-on {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

[data-theme="dark"] .ui-section-title { color: #e2e8f0; }
[data-theme="dark"] .ui-section-sub   { color: #94a3b8; }

[data-theme="dark"] .ui-hero__title { color: #f1f5f9; }
[data-theme="dark"] .ui-hero__sub   { color: #94a3b8; }

[data-theme="dark"] .ui-info-block {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .ui-info-block__title { color: #e2e8f0; }
[data-theme="dark"] .ui-info-block p      { color: #94a3b8; }
[data-theme="dark"] .ui-code              { background: rgba(255, 255, 255, 0.06); color: #60a5fa; }

[data-theme="dark"] .ui-sidebar-group__title { color: #94a3b8; }
[data-theme="dark"] .ui-sidebar-item         { color: #94a3b8; }
[data-theme="dark"] .ui-sidebar-item:hover   { color: #60a5fa; }
[data-theme="dark"] .ui-sidebar-item--active { color: #60a5fa; }

[data-theme="dark"] .ui-filter-bar {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .ui-catalog-hero { border-color: rgba(255, 255, 255, 0.08); }



/* ── components/header.css ── */
/* ============================================
   HEADER — Aurora Glass v2 (exact port from React Header.scss)
   ============================================ */

/* ── UIKit audit (P1): локальные токены → brand.css ───────────────── */
:root {
  --hdr-audit-glass: var(--glass-bg-dark);
  --hdr-audit-line:  var(--b-line-dk);
}

/* CSS custom properties for animations */
@property --aurora-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@property --glow-opacity {
    syntax: '<number>';
    initial-value: 0.06;
    inherits: false;
}

/* Outer wrapper — FAI HUB sticky glass bar */
.ui-header-wrap {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    padding: 0;
    background: var(--hdr-glass-bg);
    backdrop-filter: var(--hdr-glass-blur);
    -webkit-backdrop-filter: var(--hdr-glass-blur);
    border-bottom: 1px solid #e5e8ee;
}

/* Inner bar */
.ui-header {
    height: 64px;
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    border-radius: 0;
    overflow: visible;
    isolation: isolate;
    background: transparent;
    box-shadow: none;
    padding: 0 32px;
}

.ui-header::before,
.ui-header::after { display: none; }

@media (min-width: 1280px) {
    .ui-header-wrap { padding: 0; display: block; }
    .ui-header {
        height: 66px;
        width: auto;
        max-width: 1240px;
        border-radius: 0;
        padding: 0 32px;
    }
}

/* ── Logo ── */
.fractal-logo-img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.ui-header__logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    flex-shrink: 0;
    height: 100%;
    padding: 4px 0;
    line-height: 1.2;
    z-index: 3;
}

/* Logo text — two spans: brand (semibold) + product (regular) */
.ui-logo-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #0d1017;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    line-height: 1.2;
    transition: color var(--t-base);
}
.ui-logo-text:hover { color: #2f6aff; }
.ui-logo-brand   { font-weight: 700; }
.ui-logo-brand-light { font-weight: 400; }

/* ── Desktop nav ── */
.ui-header__nav {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 22px;
    margin-left: 0;
    flex: 1;
    justify-content: flex-start;
    z-index: 3;
}

.ui-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 0;
    font-size: 14.5px;
    font-weight: 500;
    color: #3a4250;
    text-decoration: none;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    z-index: 3;
    border-radius: 0;
    background: transparent;
    transition: color var(--t-base);
}
.ui-nav-link:hover {
    color: #0d1017;
    background: transparent;
}
.ui-nav-link--active,
.ui-nav-link.active {
    color: #2f6aff !important;
    background: transparent !important;
    font-weight: 600;
}

/* Gift link — subtle colored badge */
.ui-nav-link--gift {
    color: var(--lp-accent);
    background: var(--lp-icon-bg-blue);
    font-weight: 600;
    font-size: var(--ts-base);
}
.ui-nav-link--gift:hover {
    background: rgba(59,130,246,0.14);
    color: var(--lp-accent-light);
}
.ui-nav-link--gift svg {
    flex-shrink: 0;
    opacity: 0.85;
}

.ui-nav-link--dim { opacity: .4; cursor: not-allowed; }

/* Ссылка на документацию API (/docs) */
.ui-nav-link--docs::after {
    content: "↗";
    font-size: var(--ts-2xs);
    line-height: 1;
    margin-left: 3px;
    opacity: 0.5;
}

/* ── Каталог — дропдаун (details/summary) ── */
.ui-nav-dropdown {
    position: relative;
    list-style: none;
}
.ui-nav-dropdown > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.ui-nav-dropdown > summary::-webkit-details-marker { display: none; }

.ui-nav-link--has-chevron {
    gap: 4px;
}
.ui-nav-chev {
    flex-shrink: 0;
    opacity: 0.6;
    transition: transform var(--t-smooth), opacity var(--t-base);
}
.ui-nav-dropdown[open] .ui-nav-chev {
    transform: rotate(180deg);
    opacity: 1;
}

.ui-nav-dropdown__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    padding: 5px;
    background: var(--hdr-menu-bg);
    border: 1px solid var(--hdr-menu-border);
    border-radius: 14px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 4px 6px rgba(0,0,0,.06),
        0 16px 40px rgba(0,0,0,.14);
    z-index: 200;
    animation: hdr-menu-in .12s ease both;
}

.ui-nav-dropdown__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: var(--ts-base);
    font-weight: 500;
    color: var(--hdr-menu-item-text);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
    white-space: nowrap;
}
.ui-nav-dropdown__item svg {
    flex-shrink: 0;
    opacity: .55;
    transition: opacity var(--t-fast);
}
.ui-nav-dropdown__item:hover {
    background: rgba(99,102,241,.08);
    color: var(--hdr-menu-item-text);
}
.ui-nav-dropdown__item:hover svg { opacity: 1; }

/* Mobile nav collapse */
@media (max-width: 1279px) {
    .ui-header__nav { display: none; }
}

/* ── Hamburger button ── */
.ui-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background var(--t-base);
    margin-left: auto;
    margin-right: 4px;
}
.ui-header__burger:hover { background: rgba(255,255,255,.06); }
[data-theme="light"] .ui-header__burger:hover { background: rgba(0,0,0,.06); }
.ui-header__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--hdr-text, #e2e8f0);
    border-radius: 2px;
    transition: transform .25s var(--ease-std), opacity var(--t-smooth), width var(--t-smooth);
    transform-origin: center;
}
[data-theme="light"] .ui-header__burger span { background: #1e293b; }
.ui-header__burger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ui-header__burger--open span:nth-child(2) { opacity: 0; width: 0; }
.ui-header__burger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1279px) {
    .ui-header__burger { display: flex; }
    .ui-header__actions .ui-btn--auth,
    .ui-header__actions .ui-btn--auth-ghost,
    .ui-header__actions .ui-user-menu { display: none; }
}
@media (max-width: 480px) {
    .ui-header__actions .ui-theme-toggle { display: none; }
}

/* ── Mobile nav overlay ── */
.ui-mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
    animation: ui-mob-fade .2s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
@keyframes ui-mob-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Mobile nav drawer ── */
.ui-mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 90vw);
    z-index: 1000;
    background: var(--hdr-bg, #0d1225);
    border-left: 1px solid var(--hdr-border, rgba(255,255,255,.08));
    box-shadow: -8px 0 32px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s var(--ease-std);
    overflow-y: auto;
}
[data-theme="light"] .ui-mobile-nav {
    background: #fff;
    border-left-color: #e2e8f0;
    box-shadow: -8px 0 32px rgba(15,23,42,.12);
}
.ui-mobile-nav--open { transform: translateX(0); }

/* Header of drawer */
.ui-mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--hdr-border, rgba(255,255,255,.08));
    flex-shrink: 0;
}
[data-theme="light"] .ui-mobile-nav__header { border-bottom-color: #f1f5f9; }

.ui-mobile-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    color: var(--hdr-text, #94a3b8);
    transition: background var(--t-base), color var(--t-base);
}
.ui-mobile-nav__close:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}
[data-theme="light"] .ui-mobile-nav__close { color: #64748b; }
[data-theme="light"] .ui-mobile-nav__close:hover { background: #f1f5f9; color: #0f172a; }

/* Nav links */
.ui-mobile-nav__links {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
    flex: 1;
}
.ui-mobile-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.75rem 1.5rem;
    font-size: var(--ts-md);
    font-weight: 500;
    color: var(--hdr-text, #cbd5e1);
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base);
}
.ui-mobile-nav__link svg { opacity: .6; flex-shrink: 0; transition: opacity var(--t-base); }
.ui-mobile-nav__link:hover,
.ui-mobile-nav__link--active {
    background: rgba(99,102,241,.1);
    color: #818cf8;
}
.ui-mobile-nav__link:hover svg,
.ui-mobile-nav__link--active svg { opacity: 1; }
[data-theme="light"] .ui-mobile-nav__link { color: #334155; }
[data-theme="light"] .ui-mobile-nav__link:hover,
[data-theme="light"] .ui-mobile-nav__link--active { background: rgba(99,102,241,.07); color: #4f46e5; }

/* Footer of drawer */
.ui-mobile-nav__footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.25rem 1.5rem;
    border-top: 1px solid var(--hdr-border, rgba(255,255,255,.08));
    flex-shrink: 0;
}
[data-theme="light"] .ui-mobile-nav__footer { border-top-color: #f1f5f9; }

.ui-mobile-nav__theme-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: var(--hdr-text, #94a3b8);
    font-size: var(--ts-base);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base);
    margin-bottom: 0.25rem;
    font-family: inherit;
}
.ui-mobile-nav__theme-btn:hover { background: rgba(255,255,255,.08); color: #e2e8f0; }
[data-theme="light"] .ui-mobile-nav__theme-btn {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #475569;
}
[data-theme="light"] .ui-mobile-nav__theme-btn:hover { background: #f1f5f9; color: #0f172a; }

.ui-mobile-nav__auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    border: none;
    font-size: var(--ts-md);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-base), transform var(--t-fast);
    font-family: inherit;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
}
.ui-mobile-nav__auth-btn:hover { transform: translateY(-1px); }
.ui-mobile-nav__auth-btn--outline {
    background: transparent;
    border: 1px solid rgba(99,102,241,.4);
    color: #818cf8;
}
[data-theme="light"] .ui-mobile-nav__auth-btn--outline { color: #4f46e5; border-color: rgba(99,102,241,.3); }

/* ── Actions area (theme toggle + auth) ── */
.ui-header__actions,
.ui-header__auth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: clamp(6px, 1vw, 20px);
    height: 100%;
    padding-right: 0.25rem;
    z-index: 3;
    overflow: visible;
    position: relative;
}

/* User pill (logged in) */
.ui-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 10px 0 5px;
    border-radius: 999px;
    background: var(--hdr-pill-bg);
    border: 1px solid var(--hdr-pill-border);
    text-decoration: none;
    transition: background var(--t-slow), border-color var(--t-slow);
    cursor: pointer;
}
.ui-user-pill:hover {
    background: var(--hdr-nav-hover-bg);
    border-color: var(--hdr-card-hover-border, rgba(99,130,246,0.2));
}
.ui-user-pill__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a2147 0%, #3b82f6 100%);
    color: #fff;
    font-size: var(--ts-2xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.ui-user-pill__name {
    font-size: var(--ts-base);
    font-weight: 500;
    color: var(--hdr-pill-name);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-user-pill__chev {
    flex-shrink: 0;
    color: var(--hdr-nav-text);
    opacity: 0.85;
    transition: transform var(--t-smooth);
}
.ui-user-menu[open] .ui-user-pill__chev {
    transform: rotate(180deg);
}
.ui-user-menu[open] > .ui-user-pill {
    background: rgba(26, 33, 71, 0.12);
    border-color: rgba(26, 33, 71, 0.2);
}

/* Выпадающее меню аккаунта */
.ui-user-menu {
    position: relative;
    z-index: 60;
    list-style: none;
}
.ui-user-menu > summary {
    list-style: none;
}
.ui-user-menu > summary::-webkit-details-marker {
    display: none;
}
.ui-user-pill--menu {
    user-select: none;
}

.ui-user-menu__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 260px;
    padding: 6px;
    background: var(--hdr-menu-bg);
    border-radius: 16px;
    border: 1px solid var(--hdr-menu-border);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
        0 4px 6px rgba(0,0,0,.06),
        0 20px 50px rgba(0,0,0,.18);
    z-index: 200;
    animation: hdr-menu-in .12s ease both;
}

@keyframes hdr-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ui-user-menu__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 10px;
}

.ui-user-menu__avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-size: var(--ts-md);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ui-user-menu__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ui-user-menu__name {
    font-size: var(--ts-base);
    font-weight: 700;
    color: var(--hdr-menu-item-text);
    line-height: 1.2;
}

.ui-user-menu__email {
    font-size: var(--ts-2xs);
    color: var(--hdr-menu-item-text);
    opacity: .55;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-user-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: var(--ts-base);
    font-weight: 500;
    color: var(--hdr-menu-item-text);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}

.ui-user-menu__item svg {
    flex-shrink: 0;
    opacity: .6;
    transition: opacity var(--t-fast);
}

.ui-user-menu__item:hover {
    background: rgba(99,102,241,.10);
    color: var(--hdr-menu-item-text);
}
.ui-user-menu__item:hover svg {
    opacity: 1;
}

.ui-user-menu__divider {
    height: 1px;
    margin: 4px 8px;
    background: var(--hdr-menu-divider);
}

.ui-user-menu__item--logout {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: #ef4444;
}
.ui-user-menu__item--logout:hover {
    background: rgba(239,68,68,.10);
    color: #dc2626;
}
.ui-user-menu__item--logout svg {
    opacity: .7;
}

/* Exit icon button */
.ui-btn--exit {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(26,33,71,0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    cursor: pointer;
    transition: background var(--t-smooth), color var(--t-smooth), border-color var(--t-smooth);
    flex-shrink: 0;
}
.ui-btn--exit:hover {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.25);
    color: #ef4444;
}

/* Auth buttons (not logged in) */
.ui-btn--auth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    height: 38px;
    min-height: 38px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    /* Тот же объём, что у кнопок чата: верхний блик + мягкое брендовое свечение. */
    background: linear-gradient(180deg, #4d85ff 0%, #2f6aff 52%, #2159e4 100%);
    border: 1px solid #1f4ecb;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: filter var(--t-smooth), transform var(--t-smooth), box-shadow var(--t-smooth);
    text-shadow: 0 1px 1px rgba(12, 34, 84, .30);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .30) inset,
        0 1px 2px rgba(16, 38, 90, .18),
        0 6px 16px -7px rgba(47, 106, 255, .70);
}
.ui-btn--auth:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .34) inset,
        0 2px 4px rgba(16, 38, 90, .16),
        0 12px 24px -8px rgba(47, 106, 255, .78);
}
.ui-btn--auth:active {
    transform: translateY(1px);
    filter: brightness(.98);
    box-shadow:
        0 2px 5px rgba(16, 38, 90, .28) inset,
        0 1px 2px rgba(16, 38, 90, .16);
}
.ui-btn--auth:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 106, 255, .38);
}

/* «Войти» — тихая кнопка рядом с основной. Раньше hover менял только цвет текста
   на 1 тон, то есть визуально не отвечал; теперь появляется подложка-пилюля. */
.ui-btn--auth-ghost {
    background: transparent;
    color: #3a4250;
    box-shadow: none;
    border: 1px solid transparent;
    text-shadow: none;
    font-weight: 500;
    padding: 0 14px;
}
.ui-btn--auth-ghost:hover {
    background: rgba(47, 106, 255, .09);
    color: #2159e4;
    border-color: rgba(47, 106, 255, .22);
    filter: none;
    box-shadow: none;
    transform: translateY(-1px);
}
.ui-btn--auth-ghost:active {
    background: rgba(47, 106, 255, .16);
    transform: translateY(1px);
    box-shadow: none;
}

/* Theme toggle — скрыт (FAI HUB light-only) */
.ui-theme-toggle { display: none !important; }

/* Keep old button styles for backward compat */
.ui-btn--ghost {
    background: transparent;
    color: #64748b;
    padding: .5rem .75rem;
    border-radius: 9999px;
    font-size: var(--ts-base);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: color var(--t-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.ui-btn--ghost:hover { color: #1e293b; }




/* ── components/auth.css ── */
/* ============================================
   AUTH PAGE — FAI HUB Light Design
   Login / Register / Forgot / Reset / Verify
   ============================================ */

.auth-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef3fb;
    color: #0d1017;
    font-family: var(--font-ui, 'Hanken Grotesk', -apple-system, sans-serif);
    overflow: hidden;
    padding: 2rem 1rem;
    -webkit-font-smoothing: antialiased;
}

.auth-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.auth-bg__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .14;
    animation: auth-orb-float 12s ease-in-out infinite;
}
.auth-bg__orb--1 {
    width: 480px; height: 480px;
    top: -12%; left: -8%;
    background: radial-gradient(circle, #7aa8ff, #2f6aff);
    animation-duration: 14s;
}
.auth-bg__orb--2 {
    width: 360px; height: 360px;
    bottom: -8%; right: -6%;
    background: radial-gradient(circle, #a8c4ff, #5b8bff);
    animation-duration: 18s;
    animation-delay: -5s;
    opacity: .1;
}
.auth-bg__orb--3 {
    width: 280px; height: 280px;
    top: 42%; left: 58%;
    background: radial-gradient(circle, #c8d8ff, #9ab8ff);
    animation-duration: 22s;
    animation-delay: -9s;
    opacity: .08;
}
@keyframes auth-orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(30px, -40px) scale(1.08); }
    66%       { transform: translate(-20px, 25px) scale(0.95); }
}
.auth-bg__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(100, 116, 139, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 116, 139, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
}

.auth-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
}

.auth-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e8ee;
    border-radius: 20px;
    padding: 2.5rem 2.25rem;
    box-shadow:
        0 8px 32px rgba(20, 40, 95, 0.08),
        0 24px 64px rgba(20, 40, 95, 0.06);
    animation: auth-card-in .55s cubic-bezier(.22,1,.36,1) both;
    overflow: hidden;
}
@keyframes auth-card-in {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-card__glow {
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 106, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
}
.auth-brand__icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: #2f6aff;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(47, 106, 255, 0.65);
    flex-shrink: 0;
}
.auth-brand__name {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: var(--ts-lg);
    font-weight: 700;
    letter-spacing: -.02em;
    color: #0d1017;
}

.auth-header { margin-bottom: 1.75rem; }
.auth-title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: var(--ts-3xl);
    font-weight: 700;
    color: #0d1017;
    margin: 0 0 .35rem;
    letter-spacing: -.025em;
    line-height: 1.2;
}
.auth-subtitle {
    font-size: var(--ts-md);
    color: #626b78;
    margin: 0;
    line-height: 1.5;
}

.auth-form { display: flex; flex-direction: column; gap: 0; }
.auth-field { margin-bottom: 1rem; }
.auth-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.auth-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ts-xs);
    font-weight: 600;
    color: #626b78;
    margin-bottom: .45rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.auth-label svg { opacity: .7; flex-shrink: 0; }

.auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: .75rem 1rem;
    font-size: var(--ts-md);
    font-family: inherit;
    border: 1px solid #cdd6e2;
    border-radius: 11px;
    background: #dde5f0;
    color: #0d1017;
    outline: none;
    transition: border-color var(--t-smooth), box-shadow var(--t-smooth), background var(--t-smooth);
}
.auth-input::placeholder { color: #9aa3b0; }
.auth-input:focus {
    border-color: #2f6aff;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 106, 255, 0.14);
}

/* Поле пароля с кнопкой-глазом (показать/скрыть введённый пароль) */
.auth-input-wrap { position: relative; }
.auth-input-wrap .auth-input { padding-right: 2.75rem; }
.auth-eye {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #626b78;
    cursor: pointer;
    transition: color var(--t-smooth), background var(--t-smooth);
}
.auth-eye:hover { color: #0d1017; background: rgba(13, 16, 23, 0.07); }
.auth-eye .auth-eye__off { display: none; }
.auth-eye.is-on .auth-eye__on { display: none; }
.auth-eye.is-on .auth-eye__off { display: block; }

.auth-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .65rem 1rem;
    margin-bottom: 1rem;
    border-radius: 11px;
    background: rgba(224, 83, 61, 0.08);
    border: 1px solid rgba(224, 83, 61, 0.22);
    color: #c2473f;
    font-size: var(--ts-base);
    font-weight: 500;
    animation: auth-card-in .3s ease;
}

.auth-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .65rem 1rem;
    margin-bottom: 1rem;
    border-radius: 11px;
    background: rgba(15, 163, 137, 0.08);
    border: 1px solid rgba(15, 163, 137, 0.22);
    color: #0a8a72;
    font-size: var(--ts-base);
    font-weight: 500;
    animation: auth-card-in .3s ease;
}
.auth-info code {
    background: #f2f5fa;
    border: 1px solid #e5e8ee;
    border-radius: 6px;
    padding: 1px 6px;
    font-size: var(--ts-sm);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.auth-aside {
    margin: .75rem 0 0;
    text-align: center;
    font-size: var(--ts-base);
    color: #626b78;
}

.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: .5rem;
    padding: .85rem 1.5rem;
    font-size: var(--ts-md);
    font-weight: 700;
    font-family: inherit;
    letter-spacing: -.01em;
    color: #fff;
    background: #2f6aff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform var(--t-base), box-shadow var(--t-smooth), filter var(--t-base);
    box-shadow: 0 10px 22px -12px rgba(47, 106, 255, 0.9);
}
.auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px rgba(47, 106, 255, 0.95);
    filter: brightness(1.06);
}
.auth-submit:active { transform: translateY(0); }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1.5rem 0 1.25rem;
    color: #9aa3b0;
    font-size: var(--ts-sm);
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e8ee;
}

.auth-demo__label {
    font-size: var(--ts-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9aa3b0;
    margin: 0 0 .6rem;
    text-align: center;
}
.auth-demo__chips {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.auth-demo__chip {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    border-radius: 11px;
    background: #f8fafc;
    border: 1px solid #e5e8ee;
    flex-wrap: wrap;
}
.auth-demo__chip-role {
    font-size: var(--ts-xs);
    font-weight: 700;
    color: #2f6aff;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
    min-width: 72px;
}
.auth-demo__chip code {
    font-size: var(--ts-xs);
    color: #626b78;
    background: #eef3fb;
    padding: .15rem .45rem;
    border-radius: 6px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.auth-footer {
    font-size: var(--ts-base);
    color: #626b78;
    margin: 1.5rem 0 0;
    text-align: center;
}
.auth-link {
    color: #2f6aff;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--t-base);
}
.auth-link:hover { color: #2558e6; text-decoration: underline; }

@media (max-width: 480px) {
    .auth-page {
        padding: 1rem 0;
        align-items: flex-start;
        padding-top: 1.5rem;
    }
    .auth-wrap { max-width: 100%; padding: 0; }
    .auth-card {
        border-radius: 0;
        padding: 1.75rem 1.25rem;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }
    .auth-brand { margin-bottom: 1.5rem; justify-content: center; }
    .auth-title { font-size: var(--ts-3xl); text-align: center; }
    .auth-subtitle { text-align: center; }
    .auth-header { margin-bottom: 1.25rem; }
    .auth-fields-row { grid-template-columns: 1fr; gap: 0; }
    .auth-submit { padding: 0.9rem 1rem; }
}

@media (max-width: 360px) {
    .auth-card { padding: 1.5rem 1rem; }
    .auth-title { font-size: var(--ts-2xl); }
    .auth-demo__chips { gap: .35rem; }
    .auth-demo__chip-role { min-width: 60px; font-size: var(--ts-2xs); }
}

/* Legacy compat */
.ui-auth-wrap, .ui-auth-card, .ui-auth-title, .ui-auth-hint,
.ui-auth-form, .ui-auth-label, .ui-auth-input, .ui-auth-submit,
.ui-auth-footer, .ui-auth-link, .ui-demo-hint { display: none; }



/* ── components/cabinet.css ── */
/* ============================================
   CABINET SHELL — FAI HUB Light Design
   Light-only; tokens aligned with dashboard mockup
   ============================================ */

.cab-shell {
    /* FAI HUB core */
    --fai-accent:       #2f6aff;
    --fai-accent-soft:  #eaf0ff;
    --fai-bg:           #eef3fb;
    --fai-ink:          #0d1017;
    --fai-muted:        #626b78;
    --fai-muted-soft:   #9aa3b0;
    --fai-border:       #e5e8ee;
    --fai-border-hi:    #e3e8f0;
    --fai-input-bg:     #dde5f0;
    --fai-shadow:       0 18px 40px -30px rgba(20, 40, 95, 0.28);
    --fai-shadow-sm:    0 8px 24px -16px rgba(20, 40, 95, 0.14);

    /* Sidebar — light */
    --cab-sidebar-bg:           #ffffff;
    --cab-sidebar-border:       var(--fai-border);
    --cab-sidebar-text:         var(--fai-muted);
    --cab-sidebar-hover:        #f2f5fa;
    --cab-sidebar-active:       linear-gradient(90deg, #2f6aff, #3f7bff);
    --cab-sidebar-active-text:  #ffffff;
    --cab-main-bg:              var(--fai-bg);
    --cab-topbar-bg:            rgba(238, 243, 251, 0.86);
    --cab-topbar-border:        var(--fai-border-hi);
    --cab-topbar-icon-bg:       #ffffff;
    --cab-topbar-icon-border:   var(--fai-border-hi);
    --cab-topbar-icon-color:    #56617a;
    --cab-topbar-icon-hover:    #f8fafc;
    --cab-search-bg:            #ffffff;
    --cab-search-border:        var(--fai-border-hi);
    --cab-search-text:          #1a2a4a;
    --cab-search-ph:            #9aa8bd;
    --cab-user-name:            #1a2a4a;
    --cab-user-email:           var(--fai-muted-soft);
    --cab-create-primary:       #2f6aff;
    --cab-create-secondary:     #ffffff;
    --cab-create-sec-text:      var(--fai-ink);
    --cab-create-sec-border:    var(--fai-border-hi);
    --cab-nav-label:            var(--fai-muted-soft);

    /* Dashboard tokens */
    --dash-page-bg:        var(--fai-bg);
    --dash-card-bg:        #ffffff;
    --dash-card-border:    var(--fai-border-hi);
    --dash-card-shadow:    var(--fai-shadow-sm);
    --dash-card-title:     var(--fai-ink);
    --dash-card-text:      var(--fai-muted);
    --dash-badge-bg:       var(--fai-accent-soft);
    --dash-badge-text:     var(--fai-accent);
    --dash-hero-bg:        linear-gradient(120deg, #1b46b0, #2f6aff 55%, #3f7bff);
    --dash-hero-border:    transparent;
    --dash-hero-title:     #ffffff;
    --dash-hero-sub:       rgba(255, 255, 255, 0.82);
    --dash-kpi-bg:         #ffffff;
    --dash-kpi-border:     var(--fai-border-hi);
    --dash-kpi-val:        var(--fai-ink);
    --dash-kpi-lbl:        #56617a;
    --dash-listing-bg:     #ffffff;
    --dash-listing-border: #e8ecf2;
    --dash-listing-hover:  #f8fafc;
    --dash-listing-name:   var(--fai-ink);
    --dash-listing-meta:   var(--fai-muted-soft);
    --dash-empty-icon:     #f2f5fa;
    --dash-empty-title:    var(--fai-ink);
    --dash-empty-sub:      var(--fai-muted-soft);
    --dash-bar-bg:         #f2f5fa;
    --dash-bar-filled:     rgba(47, 106, 255, 0.45);
    --dash-bar-current:    var(--fai-accent);
    --dash-bar-label:      var(--fai-muted-soft);
    --dash-toggle-color:   var(--fai-muted-soft);
    --dash-toggle-hover:   #f2f5fa;
    --dash-input-bg:       var(--fai-input-bg);
    --dash-input-border:   #cdd6e2;
    --dash-input-text:     var(--fai-ink);
    --dash-input-ph:       var(--fai-muted-soft);
    --dash-input-focus-bg: #ffffff;
    --dash-input-arrow:    var(--fai-muted-soft);

    display: flex;
    min-height: 100vh;
    width: 100%;
    position: relative;
    background: var(--dash-page-bg);
    color: var(--fai-ink);
    font-family: var(--font-ui, 'Hanken Grotesk', -apple-system, sans-serif);
    -webkit-font-smoothing: antialiased;
}

/* ── Sidebar ─────────────────────────────── */
.cab-sidebar {
    width: 250px;
    min-width: 250px;
    flex-shrink: 0;
    background: var(--cab-sidebar-bg);
    border-right: 1px solid var(--cab-sidebar-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 50;
    align-self: flex-start;
    transition: background .4s, border-color .4s;
}
.cab-sidebar__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem 0.875rem 1.25rem;
}

/* Brand */
.cab-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--fai-ink);
    text-decoration: none;
    padding: 0.375rem 0.5rem;
    border-radius: 10px;
    margin-bottom: 1.125rem;
    transition: background var(--t-base);
}
.cab-sidebar__brand:hover { background: var(--cab-sidebar-hover); }
.cab-brand-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--fai-accent);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(47, 106, 255, 0.65);
    flex-shrink: 0;
}
.cab-brand-name {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.cab-brand-main { color: var(--fai-ink); }
.cab-brand-dim  { color: var(--fai-accent); }

/* Create CTA group */
.cab-create-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 1.25rem;
}
.cab-create-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 0.9375rem;
    border-radius: 11px;
    font-size: var(--ts-base);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--t-smooth);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}
.cab-create-btn--primary {
    background: var(--cab-create-primary);
    color: #ffffff;
    box-shadow: 0 10px 22px -12px rgba(47, 106, 255, 0.9);
}
.cab-create-btn--primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -10px rgba(47, 106, 255, 0.95);
}
.cab-create-btn--secondary {
    background: var(--cab-create-secondary);
    color: var(--cab-create-sec-text);
    border: 1px solid var(--cab-create-sec-border);
}
.cab-create-btn--secondary:hover {
    border-color: var(--fai-accent);
    color: var(--fai-accent);
    background: var(--fai-accent-soft);
}

/* Nav label */
.cab-nav-label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cab-nav-label);
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
}

/* Nav */
.cab-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.cab-nav__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 40px;
    padding: 0 0.75rem;
    border-radius: 10px;
    color: var(--cab-sidebar-text);
    text-decoration: none;
    font-size: var(--ts-base);
    font-weight: 500;
    transition: background var(--t-base), color var(--t-base);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    line-height: 1;
}
.cab-nav__item svg { flex-shrink: 0; opacity: .7; transition: opacity var(--t-base); }
.cab-nav__item:hover {
    background: var(--cab-sidebar-hover);
    color: var(--cab-sidebar-active-text);
}
.cab-nav__item:hover svg { opacity: 1; }
.cab-nav__item--active,
.cab-nav__item.active {
    background: var(--cab-sidebar-active);
    color: var(--cab-sidebar-active-text);
    font-weight: 600;
    box-shadow: 0 8px 20px -12px rgba(47, 106, 255, 0.55);
}
.cab-nav__item--active svg,
.cab-nav__item.active svg { opacity: 1; color: #fff; }

/* Sidebar bottom */
.cab-sidebar__bottom {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--cab-sidebar-border);
}
.cab-sidebar__logout {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 42px;
    width: 100%;
    padding: 0 0.75rem;
    border: 1px solid var(--fai-border-hi);
    border-radius: 10px;
    color: var(--fai-ink);
    background: #f8fafc;
    font-size: var(--ts-base);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
    font-family: inherit;
}
.cab-sidebar__logout:hover {
    background: #fff0ee;
    color: #c2473f;
    border-color: #f0c4be;
}

/* ── Main area ───────────────────────────── */
.cab-main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--dash-page-bg);
    transition: background .4s;
}

/* ── Top Bar ─────────────────────────────── */
.cab-topbar {
    height: 66px;
    background: var(--cab-topbar-bg);
    border-bottom: 1px solid var(--cab-topbar-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background .4s, border-color .4s;
}
.cab-topbar__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}
.cab-topbar__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.cab-mobile-menu-btn {
    display: none;
    width: 44px; height: 44px;
    border-radius: 9px;
    background: var(--cab-topbar-icon-bg);
    border: 1px solid var(--cab-topbar-icon-border);
    color: var(--cab-topbar-icon-color);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--t-base);
}
.cab-mobile-menu-btn:hover { background: var(--cab-topbar-icon-hover); }

/* Search */
.cab-topbar__search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--cab-search-bg);
    border: 1px solid var(--cab-search-border);
    border-radius: 11px;
    padding: 0 14px;
    height: 42px;
    max-width: 320px;
    width: 100%;
    color: var(--cab-search-ph);
    transition: border-color var(--t-smooth), background .4s;
}
.cab-topbar__search:focus-within {
    border-color: rgba(47, 106, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(47, 106, 255, 0.1);
}
.cab-topbar__search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: var(--ts-base);
    color: var(--cab-search-text);
    font-family: inherit;
}
.cab-topbar__search-input::placeholder { color: var(--cab-search-ph); }

/* Icon buttons */
.cab-tb-icon-btn {
    position: relative;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: var(--cab-topbar-icon-bg);
    border: 1px solid var(--cab-topbar-icon-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cab-topbar-icon-color);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base);
    flex-shrink: 0;
}
.cab-tb-icon-btn:hover { background: var(--cab-topbar-icon-hover); }

.cab-shell .cab-theme-toggle { display: none; }

/* Bell badge */
.cab-tb-badge {
    position: absolute;
    top: 9px; right: 10px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #e0533d;
    border: 1.5px solid var(--cab-topbar-bg);
    pointer-events: none;
    animation: cab-badge-pulse 2s ease-in-out infinite;
}
@keyframes cab-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
    50%       { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

/* User info */
.cab-tb-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--t-base);
}
.cab-tb-user:hover { background: var(--cab-topbar-icon-hover); }
.cab-tb-user__avatar {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #2f6aff, #7c5cff);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: var(--ts-md);
    font-weight: 700;
    flex-shrink: 0;
}
.cab-tb-user__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cab-tb-user__name {
    font-size: var(--ts-base);
    font-weight: 600;
    color: var(--cab-user-name);
    line-height: 1.2;
    white-space: nowrap;
    transition: color .4s;
}
.cab-tb-user__email {
    font-size: var(--ts-2xs);
    color: var(--cab-user-email);
    line-height: 1.2;
    white-space: nowrap;
    transition: color .4s;
}

/* ── Content area ────────────────────────── */
.cab-content {
    flex: 1;
    padding: 0;
    background: var(--dash-page-bg);
    transition: background .4s;
}

/* Mobile overlay */
.cab-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 200;
    backdrop-filter: blur(4px);
}
.cab-mobile-sidebar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    background: var(--cab-sidebar-bg);
    padding: 1.5rem 1rem;
    overflow-y: auto;
    animation: cab-slide-in .25s ease;
}
@keyframes cab-slide-in {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* ── Responsive ─────────────────────────── */
@media (max-width: 1100px) {
    .cab-sidebar { width: 68px; min-width: 68px; }
    .cab-sidebar__inner { padding: 1rem 0.5rem; align-items: center; }
    .cab-brand-name, .cab-nav-label { display: none; }
    .cab-nav__item span { display: none; }
    .cab-sidebar__brand { justify-content: center; gap: 0; padding: 0.5rem; }
    .cab-nav__item { justify-content: center; gap: 0; padding: 0.625rem; }
    .cab-sidebar__logout span { display: none; }
    .cab-sidebar__logout { width: 38px; height: 38px; border-radius: 50%; padding: 0; justify-content: center; gap: 0; }
    .cab-create-group { display: none; }
    .cab-content { padding: 0; }
}
@media (max-width: 768px) {
    .cab-topbar__search { max-width: 200px; }
}
@media (max-width: 600px) {
    .cab-sidebar { display: none; }
    .cab-main  { min-width: 100%; }
    .cab-mobile-menu-btn { display: inline-flex; }
    .cab-topbar__search { display: none; }
    .cab-tb-user__info { display: none; }
}

/* ============================================
   DASHBOARD — Cabinet page (dash- prefix)
   Full dark/light theme via cab-shell tokens
   ============================================ */

/* ── Dashboard page ─────────────────────── */
.dash-page {
    min-height: 100%;
    background: var(--dash-page-bg);
    transition: background .4s;
}

/* ── Hero section ────────────────────────── */
.dash-hero {
    position: relative;
    overflow: hidden;
    margin: 24px 28px 18px;
    padding: 28px 30px;
    border-radius: 20px;
    background: var(--dash-hero-bg);
    border: none;
    margin-bottom: 0;
    transition: background .4s, border-color .4s;
}
.dash-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.dash-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .15;
    animation: dash-orb-float 12s ease-in-out infinite;
}
.dash-hero__orb--1 {
    width: 300px; height: 300px;
    top: -50%; right: 5%;
    background: radial-gradient(circle, #3b82f6, #1d4ed8);
    animation-duration: 16s;
}
.dash-hero__orb--2 {
    width: 200px; height: 200px;
    bottom: -30%; left: 30%;
    background: radial-gradient(circle, #06b6d4, #0ea5e9);
    animation-duration: 20s;
    animation-delay: -6s;
}
@keyframes dash-orb-float {
    0%, 100% { transform: translate(0,0) scale(1); }
    50%       { transform: translate(20px,-30px) scale(1.1); }
}
.dash-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}
.dash-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    max-width: 1200px;
}
.dash-hero__greeting {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.dash-hero__avatar {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
@keyframes dash-avatar-in {
    from { opacity: 0; transform: scale(.8); }
    to   { opacity: 1; transform: scale(1); }
}
.dash-hero__title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--dash-hero-title);
    margin: 0 0 .25rem;
    letter-spacing: -.025em;
    line-height: 1.2;
    animation: dash-hero-in .5s cubic-bezier(.22,1,.36,1) .05s both;
    transition: color .4s;
}
.dash-hero__sub {
    font-size: var(--ts-base);
    color: var(--dash-hero-sub);
    margin: 0;
    line-height: 1.5;
    animation: dash-hero-in .5s cubic-bezier(.22,1,.36,1) .1s both;
    transition: color .4s;
}
.dash-hero__pw-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .5rem;
    padding: .25rem .55rem;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.72);
    font-size: var(--ts-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.dash-hero__pw-link:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.3);
    color: #fff;
}
@keyframes dash-hero-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hero quick-create actions */
.dash-hero__actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    animation: dash-hero-in .5s cubic-bezier(.22,1,.36,1) .15s both;
}
.dash-hero__action {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 1.125rem;
    border-radius: 14px;
    text-decoration: none;
    transition: transform var(--t-smooth), box-shadow var(--t-smooth), filter var(--t-base);
    min-width: 220px;
    position: relative;
    overflow: hidden;
}
.dash-hero__action::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, transparent 60%);
    pointer-events: none;
}
.dash-hero__action:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}
.dash-hero__action--primary {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: none;
}
.dash-hero__action--secondary {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
}
.dash-hero__action:hover { box-shadow: 0 10px 32px rgba(37,99,235,.5); }
.dash-hero__action--secondary:hover { background: rgba(255,255,255,.15); box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.dash-hero__action-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.dash-hero__action-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.dash-hero__action-title {
    font-size: var(--ts-md);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.dash-hero__action-desc {
    font-size: var(--ts-xs);
    color: rgba(255,255,255,.7);
    line-height: 1.3;
}
.dash-hero__action-arrow {
    color: rgba(255,255,255,.7);
    flex-shrink: 0;
    transition: transform var(--t-smooth), color var(--t-smooth);
}
.dash-hero__action:hover .dash-hero__action-arrow {
    transform: translateX(3px);
    color: #fff;
}

/* ── KPI Stats Row ───────────────────────── */
.dash-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 1.5rem;
    padding: 0 28px;
}
@media (max-width: 900px) { .dash-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dash-kpi-row { gap: .75rem; padding: 0 1rem; } }

.dash-kpi-card {
    position: relative;
    background: var(--dash-kpi-bg);
    border: 1px solid var(--dash-kpi-border);
    border-radius: 15px;
    padding: 1.125rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .875rem;
    transition: transform var(--t-smooth), box-shadow var(--t-smooth), background .4s, border-color .4s;
    cursor: pointer;
    overflow: hidden;
    animation: dash-kpi-in .45s cubic-bezier(.22,1,.36,1) both;
}
.dash-kpi-card:nth-child(1) { animation-delay: .05s; }
.dash-kpi-card:nth-child(2) { animation-delay: .1s; }
.dash-kpi-card:nth-child(3) { animation-delay: .15s; }
.dash-kpi-card:nth-child(4) { animation-delay: .2s; }
@keyframes dash-kpi-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dash-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--fai-shadow);
}
.dash-kpi-card__glow {
    position: absolute;
    top: -20px; right: -20px;
    width: 80px; height: 80px;
    border-radius: 50%;
    opacity: .15;
    pointer-events: none;
    filter: blur(20px);
}
.dash-kpi-card--blue .dash-kpi-card__glow   { background: #3b82f6; }
.dash-kpi-card--teal .dash-kpi-card__glow   { background: #06b6d4; }
.dash-kpi-card--amber .dash-kpi-card__glow  { background: #f59e0b; }
.dash-kpi-card--purple .dash-kpi-card__glow { background: #8b5cf6; }

.dash-kpi-card__icon {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dash-kpi-card--blue .dash-kpi-card__icon   { background: #eaf0ff; color: #2f6aff; }
.dash-kpi-card--teal .dash-kpi-card__icon   { background: #e3f6f1; color: #0fa389; }
.dash-kpi-card--amber .dash-kpi-card__icon  { background: #fbf0e0; color: #d98324; }
.dash-kpi-card--purple .dash-kpi-card__icon { background: #efeaff; color: #7c5cff; }
.dash-kpi-card--cyan .dash-kpi-card__icon   { background: #e2f1fb; color: #0e8fd0; }
.dash-kpi-card--green .dash-kpi-card__icon  { background: #e3f6f1; color: #0fa389; }

.dash-kpi-card__body { flex: 1; min-width: 0; }
.dash-kpi-card__val {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--dash-kpi-val);
    line-height: 1;
    margin-bottom: .25rem;
    letter-spacing: -.03em;
    white-space: nowrap;
    transition: color .4s;
}
.dash-kpi-card__lbl {
    font-size: var(--ts-xs);
    color: var(--dash-kpi-lbl);
    font-weight: 500;
    white-space: nowrap;
    transition: color .4s;
}
.dash-kpi-card__trend {
    color: var(--dash-kpi-lbl);
    opacity: .5;
    transition: opacity var(--t-smooth), transform var(--t-smooth);
}
.dash-kpi-card:hover .dash-kpi-card__trend { opacity: 1; transform: translateX(2px); }

/* ── Main grid ───────────────────────────── */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 18px;
    padding: 0 28px 40px;
}
/* Порядок по бизнес-модели: сначала «Мои листинги» (источник дохода),
   затем аналитика (активность/контент/категории). */
.dash-card--listings { grid-column: 1 / 4; order: -1; }
.dash-card--chart    { grid-column: 1 / 3; order: 1; }
.dash-card--donut    { grid-column: 3 / 4; order: 2; }
.dash-card--categories { order: 3; }
@media (max-width: 1100px) {
    .dash-grid { grid-template-columns: 1fr 1fr; }
    .dash-card--chart    { grid-column: 1 / 3; }
    .dash-card--donut    { grid-column: 1 / 3; }
    .dash-card--listings { grid-column: 1 / 3; }
}
@media (max-width: 640px) {
    .dash-grid { grid-template-columns: 1fr; padding: 0 1rem 2rem; }
    .dash-card--chart, .dash-card--donut, .dash-card--listings { grid-column: 1; }
}

/* ── Card base ───────────────────────────── */
.dash-card {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-card-border);
    border-radius: 18px;
    box-shadow: var(--dash-card-shadow);
    overflow: hidden;
    transition: box-shadow var(--t-smooth), transform var(--t-smooth), background .4s, border-color .4s;
    animation: dash-card-in .5s cubic-bezier(.22,1,.36,1) .2s both;
}
@keyframes dash-card-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dash-card:hover { box-shadow: var(--fai-shadow); }

.dash-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--dash-card-border);
    transition: border-color .4s;
}
.dash-card__head-left {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex: 1;
    min-width: 0;
}
.dash-card__head-right {
    display: flex;
    align-items: center;
    gap: .375rem;
}
.dash-card__icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dash-card__icon--blue   { background: #eaf0ff; color: #2f6aff; }
.dash-card__icon--teal   { background: #e3f6f1; color: #0fa389; }
.dash-card__icon--purple { background: #efeaff; color: #7c5cff; }

.dash-card__title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: var(--ts-md);
    font-weight: 700;
    color: var(--dash-card-title);
    margin: 0;
    letter-spacing: -.01em;
    transition: color .4s;
}
.dash-card__badge {
    display: inline-flex;
    align-items: center;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: var(--ts-2xs);
    font-weight: 700;
    background: var(--dash-badge-bg);
    color: var(--dash-badge-text);
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background .4s, color .4s;
}
.dash-card__badge--count {
    background: var(--fai-accent-soft);
    color: var(--fai-accent);
    font-size: var(--ts-xs);
    padding: .15rem .55rem;
    text-transform: none;
    letter-spacing: 0;
}

.dash-card__toggle {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--dash-toggle-color);
    transition: background var(--t-base), color var(--t-base);
    flex-shrink: 0;
}
.dash-card__toggle:hover { background: var(--dash-toggle-hover); color: var(--dash-card-title); }

.dash-card__add-btn {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--fai-accent-soft);
    border: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--fai-accent);
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base), transform var(--t-base);
    flex-shrink: 0;
}
.dash-card__add-btn:hover { background: var(--fai-accent); color: #fff; transform: scale(1.05); }

.dash-card__body {
    padding: 1.25rem;
    transition: background .4s;
}

/* ── Bar Chart ───────────────────────────── */
.dash-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    height: 140px;
    padding: 1.5rem .25rem 0;
}
.dash-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    height: 100%;
}
.dash-bar-col__bar-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    width: 100%;
}
.dash-bar-col__bar {
    width: 100%;
    background: var(--dash-bar-bg);
    border-radius: 5px 5px 0 0;
    min-height: 4px;
    position: relative;
    transition: background var(--t-smooth);
}
.dash-bar-col__bar--filled  { background: linear-gradient(180deg, #5b8bff, #2f6aff); }
.dash-bar-col__bar--current { background: linear-gradient(180deg, #5b8bff, #2f6aff); }
.dash-bar-col__bar:hover { background: #3f7bff; }
.dash-bar-col__count {
    position: absolute;
    top: -1.375rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--ts-2xs);
    font-weight: 700;
    color: var(--dash-card-title);
    white-space: nowrap;
    transition: color .4s;
}
.dash-bar-col__label {
    font-size: var(--ts-2xs);
    color: var(--dash-bar-label);
    white-space: nowrap;
    font-weight: 500;
    transition: color .4s;
}
.dash-chart-legend {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.dash-chart-legend__item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--ts-xs);
    color: var(--dash-card-text);
    font-weight: 500;
    transition: color .4s;
}
.dash-chart-legend__dot {
    width: 10px; height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.dash-chart-legend__dot--navy   { background: var(--dash-bar-filled); }
.dash-chart-legend__dot--accent { background: var(--dash-bar-current); }

/* ── Donut ───────────────────────────────── */
.dash-donut-wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.dash-donut-ring {
    width: 130px; height: 130px;
    border-radius: 50%;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.dash-donut-hole {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: var(--dash-card-bg);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    transition: background .4s;
}
.dash-donut-val {
    font-size: var(--ts-2xl);
    font-weight: 800;
    color: var(--dash-kpi-val);
    line-height: 1.1;
    transition: color .4s;
}
.dash-donut-lbl {
    font-size: var(--ts-3xs);
    color: var(--dash-kpi-lbl);
    line-height: 1.2;
    transition: color .4s;
}
.dash-donut-legend {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    flex: 1;
}
.dash-donut-legend__item {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.dash-donut-legend__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dash-donut-legend__label {
    flex: 1;
    font-size: var(--ts-sm);
    color: var(--dash-card-text);
    transition: color .4s;
}
.dash-donut-legend__val {
    font-size: var(--ts-base);
    font-weight: 700;
    color: var(--dash-card-title);
    transition: color .4s;
}

/* ── Empty state ─────────────────────────── */
.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 2.5rem 1rem;
    text-align: center;
}
.dash-empty__icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: var(--dash-empty-icon);
    display: flex; align-items: center; justify-content: center;
    color: #aab6c9;
}
.dash-empty__title {
    font-size: var(--ts-md);
    font-weight: 700;
    color: var(--dash-empty-title);
    margin: 0;
    transition: color .4s;
}
.dash-empty__sub {
    font-size: var(--ts-sm);
    color: var(--dash-empty-sub);
    margin: 0;
    transition: color .4s;
}
.dash-empty__actions {
    display: flex;
    gap: .625rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: .25rem;
}
.dash-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 0 1rem;
    font-size: var(--ts-sm);
    font-weight: 600;
    border-radius: 9px;
    text-decoration: none;
    transition: filter var(--t-base), transform var(--t-base);
}
.dash-empty__btn--primary {
    background: #2f6aff;
    color: #fff;
    border-radius: 11px;
    box-shadow: 0 10px 22px -12px rgba(47, 106, 255, 0.85);
}
.dash-empty__btn--secondary {
    background: #fff;
    color: #0fa389;
    border: 1px solid #b9e6da;
    border-radius: 11px;
}
.dash-empty__btn--secondary:hover { background: #e3f6f1; }
.dash-empty__btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ── Listings ────────────────────────────── */
.dash-listing-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-listing-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    border-radius: 10px;
    background: var(--dash-listing-bg);
    border: 1px solid var(--dash-listing-border);
    text-decoration: none;
    transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.dash-listing-item:hover {
    background: var(--dash-listing-hover);
    border-color: rgba(59,130,246,.2);
    transform: translateX(2px);
}
.dash-listing-item__icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: var(--ts-base);
    font-weight: 700;
    color: #fff;
}
.dash-listing-item__icon--agent { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.dash-listing-item__icon--tool  { background: linear-gradient(135deg, #0d9488, #10b981); }
.dash-listing-item__info { flex: 1; min-width: 0; }
.dash-listing-item__name {
    font-size: var(--ts-base);
    font-weight: 600;
    color: var(--dash-listing-name);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .4s;
}
.dash-listing-item__meta {
    font-size: var(--ts-xs);
    color: var(--dash-listing-meta);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: .375rem;
    transition: color .4s;
}
.dash-listing-item__type-badge {
    display: inline-flex;
    align-items: center;
    padding: .1rem .4rem;
    border-radius: 4px;
    font-size: var(--ts-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.dash-listing-item__type-badge--agent { background: #eaf0ff; color: #2f6aff; }
.dash-listing-item__type-badge--tool  { background: #fbf0e0; color: #d98324; }

.dash-listing-item__score {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: var(--ts-xs);
    font-weight: 700;
    color: var(--dash-listing-name);
    background: var(--dash-listing-bg);
    border: 1px solid var(--dash-listing-border);
    padding: .2rem .5rem;
    border-radius: 999px;
    flex-shrink: 0;
    transition: color .4s, background .4s;
}

/* Buttons */
.dash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: 0.5rem;
    font-size: var(--ts-base);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: background var(--t-base), box-shadow var(--t-base), color var(--t-base);
    text-decoration: none;
    white-space: nowrap;
}
.dash-btn--primary {
    background: #2f6aff;
    color: #ffffff;
    border-radius: 11px;
}
.dash-btn--primary:hover { background: #2558e6; }
.dash-btn--ghost {
    background: #f2f5fa;
    color: var(--fai-muted);
    border-radius: 11px;
}
.dash-btn--ghost:hover { background: #e8ecf2; color: var(--fai-ink); }
.dash-btn--outline {
    background: transparent;
    color: var(--fai-ink);
    border: 1.5px solid var(--fai-border);
    border-radius: 11px;
}
.dash-btn--outline:hover { border-color: var(--fai-accent); background: var(--fai-accent-soft); }

/* API Key */
.dash-api-wrap {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.dash-api-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 0.875rem;
    background: #f8fafc;
    border: 1.5px solid #e5e7eb;
    border-radius: 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--ts-sm);
    color: #1a2147;
    outline: none;
}
.dash-api-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}
.dash-api-btn {
    width: 44px;
    height: 44px;
    border-radius: 0.5rem;
    background: #f1f5f9;
    border: 1.5px solid #e5e7eb;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.dash-api-btn:hover {
    background: #1a2147;
    color: #ffffff;
    border-color: #1a2147;
}

/* Settings links */
.dash-settings-links {
    display: flex;
    gap: 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}
.dash-settings-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    font-size: var(--ts-sm);
    font-weight: 500;
    color: #5c6375;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color var(--t-base);
}
.dash-settings-link:hover { color: #1a2147; }
.dash-settings-link--danger { color: #ef4444; }
.dash-settings-link--danger:hover { color: #dc2626; }

/* ── 360px very small screens ── */
@media (max-width: 360px) {
    .cab-topbar { padding: 0 0.625rem; }
    .cab-topbar__title { font-size: var(--ts-base); }
    .cab-tb-user__avatar { width: 30px; height: 30px; font-size: var(--ts-xs); }
    .dash-hero { padding: 1.5rem 1rem 1.25rem; }
    .dash-hero__title { font-size: var(--ts-xl); }
    .dash-kpi-row { gap: 0.5rem; }
    .dash-kpi-card { padding: 0.875rem; }
    .dash-kpi-val { font-size: var(--ts-2xl); }
    .dash-grid { padding: 0 0.625rem 1.5rem; gap: 0.75rem; }
}

/* ══════════════════════════════════════════════
   NEW: 6-column KPI row
   ══════════════════════════════════════════════ */
.dash-kpi-row--6 {
    grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1280px) { .dash-kpi-row--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .dash-kpi-row--6 { grid-template-columns: repeat(2, 1fr); } }

.dash-kpi-row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .dash-kpi-row--3 { grid-template-columns: 1fr; } }

/* KPI sub-label */
.dash-kpi-card__sub {
    font-size: 0.7rem;
    color: var(--dash-kpi-lbl);
    line-height: 1.2;
    margin-top: 0.1rem;
    opacity: 0.75;
}

/* New KPI colour variants */
.dash-kpi-card--cyan  { --kpi-accent: #06b6d4; }
.dash-kpi-card--green { --kpi-accent: #10b981; }
.dash-kpi-card--cyan  .dash-kpi-card__glow  { background: radial-gradient(ellipse at 80% 20%, rgba(6,182,212,.18) 0%, transparent 70%); }
.dash-kpi-card--green .dash-kpi-card__glow  { background: radial-gradient(ellipse at 80% 20%, rgba(16,185,129,.18) 0%, transparent 70%); }
.dash-kpi-card--cyan  .dash-kpi-card__icon  { color: #06b6d4; }
.dash-kpi-card--green .dash-kpi-card__icon  { color: #10b981; }
.dash-kpi-card--cyan  .dash-kpi-card__val,
.dash-kpi-card--green .dash-kpi-card__val   { color: var(--dash-kpi-val); }

/* ══════════════════════════════════════════════
   Переключатель периода
   ══════════════════════════════════════════════ */
.dash-card__head-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dash-period-selector {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: #f2f5fa;
    border: none;
    border-radius: 9px;
    padding: 3px;
}
.dash-period-btn {
    background: none;
    border: none;
    color: var(--fai-muted-soft);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    padding: 6px 13px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.5;
}
.dash-period-btn:hover {
    background: #fff;
    color: var(--fai-ink);
}
.dash-period-btn--active {
    background: #fff;
    color: var(--fai-accent);
    box-shadow: 0 1px 4px rgba(20, 40, 95, 0.08);
}

/* ══════════════════════════════════════════════
   NEW: Category distribution chart
   ══════════════════════════════════════════════ */
.dash-card--categories {
    grid-column: span 1;
}
.dash-cat-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.dash-cat-row {
    display: grid;
    grid-template-columns: 10rem 1fr 2rem;
    align-items: center;
    gap: 0.6rem;
}
@media (max-width: 900px) { .dash-cat-row { grid-template-columns: 7rem 1fr 2rem; } }
.dash-cat-row__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow: hidden;
}
.dash-cat-row__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dash-cat-row__name {
    font-size: 0.75rem;
    color: var(--dash-card-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.85;
}
.dash-cat-row__bar-wrap {
    height: 6px;
    background: #f2f5fa;
    border-radius: 3px;
    overflow: hidden;
}
.dash-cat-row__bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    opacity: 0.8;
}
.dash-cat-row__count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dash-card-title);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════
   NEW: MCP badge in listing items
   ══════════════════════════════════════════════ */
.dash-listing-item__mcp-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: #e2f1fb;
    color: #0e8fd0;
    border: 1px solid #c5e3f5;
    line-height: 1.4;
}

/* Listing stats block (rating + rep side by side) */
.dash-listing-item__stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
}
.dash-listing-item__score {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #f59e0b;
}
.dash-listing-item__rep {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    color: #a78bfa;
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════
   Cabinet form controls (theme-aware)
   Inputs/selects/labels + buttons consistent with dash tokens
   ══════════════════════════════════════════════ */
.dash-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}
.dash-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-width: 180px;
}
.dash-field--end { align-self: flex-end; flex: 0 0 auto; min-width: 0; }
.dash-label {
    font-size: var(--ts-xs);
    font-weight: 600;
    color: var(--dash-card-text);
    transition: color .4s;
}
.dash-input {
    width: 100%;
    height: 42px;
    padding: 0 0.875rem;
    background: var(--dash-input-bg);
    border: 1px solid var(--dash-input-border);
    border-radius: 11px;
    color: var(--dash-input-text);
    font-size: var(--ts-base);
    font-family: inherit;
    outline: none;
    transition: border-color var(--t-base), background .4s, color .4s;
}
.dash-input::placeholder { color: var(--dash-input-ph); }
.dash-input:focus {
    border-color: #2f6aff;
    background: var(--dash-input-focus-bg);
    box-shadow: 0 0 0 3px rgba(47, 106, 255, 0.12);
}
select.dash-input {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--dash-input-arrow) 50%),
                      linear-gradient(135deg, var(--dash-input-arrow) 50%, transparent 50%);
    background-position: calc(100% - 16px) center, calc(100% - 11px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
select.dash-input option { color: #1e293b; }
.dash-input--sm {
    height: 34px;
    padding: 0 0.65rem;
    font-size: var(--ts-sm);
    border-radius: 8px;
    width: auto;
}
select.dash-input--sm { padding-right: 1.8rem; }
.dash-error {
    color: #f87171;
    font-size: var(--ts-sm);
    margin: 0.6rem 0 0;
}

/* Buttons (token-based variants) */
.dash-btn--sm {
    min-height: 36px;
    padding: 0 0.85rem;
    font-size: var(--ts-sm);
    border-radius: 8px;
}
.dash-btn--accent {
    background: #2f6aff;
    color: #ffffff;
    border-radius: 11px;
    box-shadow: 0 10px 22px -12px rgba(47, 106, 255, 0.85);
}
.dash-btn--accent:hover { filter: brightness(1.07); transform: translateY(-1px); }
.dash-btn--soft {
    background: var(--dash-listing-bg);
    border: 1px solid var(--dash-listing-border);
    color: var(--dash-card-title);
}
.dash-btn--soft:hover { background: var(--dash-listing-hover); border-color: rgba(47, 106, 255, 0.28); }
.dash-btn--accent:disabled,
.dash-btn--soft:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

/* One-time secret reveal block */
.dash-secret {
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0.5rem 0 0.75rem;
    padding: 0.75rem 0.875rem;
    background: var(--dash-input-bg);
    border: 1px solid var(--dash-input-border);
    border-radius: 10px;
    color: var(--dash-input-text);
    font-family: var(--font-mono, monospace);
    font-size: var(--ts-sm);
}

/* Small muted sub-label under listing stats */
.dash-listing-item__sub {
    font-size: var(--ts-2xs);
    color: var(--dash-listing-meta);
    text-align: right;
    transition: color .4s;
}

/* ══════════════════════════════════════════════
   ADMIN PANEL — adm-* (FAI HUB light)
   ══════════════════════════════════════════════ */
.adm-page {
    padding: 24px 28px 40px;
    max-width: 1320px;
}

.adm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.adm-header__title { display: flex; align-items: center; gap: 0.875rem; }
.adm-header__icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--fai-accent-soft);
    color: var(--fai-accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.adm-header__h1 {
    margin: 0;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--fai-ink);
    letter-spacing: -0.01em;
}
.adm-header__sub {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--fai-muted);
}
.adm-header__actions { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }

.adm-refresh-btn {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid var(--fai-border-hi);
    color: var(--fai-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.adm-refresh-btn:hover { border-color: var(--fai-accent); color: var(--fai-accent); }
.adm-refresh-btn--spin svg { animation: adm-spin 0.9s linear infinite; }
@keyframes adm-spin { to { transform: rotate(360deg); } }

.adm-section-label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fai-muted-soft);
    margin: 1.25rem 0 0.75rem;
}

.adm-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 2.5rem;
    color: var(--fai-muted);
    font-size: 0.875rem;
}
.adm-loader__spinner {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--fai-border);
    border-top-color: var(--fai-accent);
    animation: adm-spin 0.8s linear infinite;
}

.adm-sys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.875rem;
}
.adm-sys-card {
    background: #fff;
    border: 1px solid var(--fai-border-hi);
    border-radius: 15px;
    padding: 1rem 1.125rem;
    box-shadow: var(--fai-shadow-sm);
}
.adm-sys-card__lbl {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fai-muted-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.adm-sys-card__val {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fai-ink);
    margin: 0.35rem 0;
}
.adm-sys-card__foot {
    font-size: 0.75rem;
    color: var(--fai-muted-soft);
    line-height: 1.4;
}
.adm-unit { font-size: 0.875rem; font-weight: 600; color: var(--fai-muted); }

.adm-gauge {
    height: 6px;
    background: #f2f5fa;
    border-radius: 3px;
    overflow: hidden;
    margin: 0.5rem 0;
}
.adm-gauge__fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #5b8bff, #2f6aff);
    transition: width 0.4s ease;
}
.adm-gauge__fill--warn { background: linear-gradient(90deg, #f5c26b, #d98324); }
.adm-gauge__fill--danger { background: linear-gradient(90deg, #f08a7e, #e0533d); }

.adm-hostbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin: 0.875rem 0 0.25rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid var(--fai-border-hi);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--fai-muted);
}
.adm-hostbar__sep { opacity: 0.5; }

.adm-checks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.adm-check {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0.625rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid var(--fai-border-hi);
    border-radius: 12px;
    font-size: 0.8125rem;
}
.adm-check--pending { color: var(--fai-muted-soft); }
.adm-check__name { font-weight: 600; color: var(--fai-ink); }
.adm-check__status { font-size: 0.75rem; font-weight: 600; }
.adm-check__status--healthy { color: #0fa389; }
.adm-check__status--degraded { color: #d98324; }
.adm-check__status--unhealthy { color: #e0533d; }
.adm-check__status--not_configured { color: var(--fai-muted-soft); }
.adm-check__latency { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.7rem; color: var(--fai-muted-soft); }
.adm-check__detail { grid-column: 2 / -1; font-size: 0.75rem; color: var(--fai-muted); }
.adm-check__detail--err { color: #e0533d; }

.adm-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.adm-dot--ok { background: #0fa389; }
.adm-dot--warn { background: #d98324; }
.adm-dot--err { background: #e0533d; }
.adm-dot--muted, .adm-dot--pending { background: #cdd6e2; }

.adm-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
}
.adm-mini {
    padding: 0.75rem;
    background: #f8fafc;
    border: 1px solid var(--fai-border-hi);
    border-radius: 11px;
    text-align: center;
}
.adm-mini__v {
    display: block;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fai-ink);
}
.adm-mini__l {
    display: block;
    font-size: 0.7rem;
    color: var(--fai-muted-soft);
    margin-top: 0.15rem;
}

.adm-authors { display: flex; flex-direction: column; gap: 0.35rem; }
.adm-author {
    display: grid;
    grid-template-columns: 2rem 1fr auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.625rem;
    border-radius: 10px;
    background: #f8fafc;
}
.adm-author__rank {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--fai-muted-soft);
    text-align: center;
}
.adm-author__rank--top { color: var(--fai-accent); }
.adm-author__name { font-weight: 600; color: var(--fai-ink); font-size: 0.875rem; }
.adm-author__rating { font-size: 0.75rem; color: #d98324; font-weight: 600; }
.adm-author__count {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.75rem;
    color: var(--fai-muted);
}

.adm-audit-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--fai-muted);
}
.adm-audit-foot__item--ok { color: #0fa389; font-weight: 600; }
.adm-audit-foot__item--err { color: #e0533d; font-weight: 600; }

@media (max-width: 720px) {
    .adm-page { padding: 20px 16px 36px; }
    .adm-mini-grid { grid-template-columns: repeat(2, 1fr); }
}




/* ── components/landing.css ── */
/* ============================================
   LANDING — общая база (lp- prefix)
   Используется ОБОИМИ лендингами: маркетплейс (Home.razor) и MAS
   (MasLanding.razor, через проксируемый UIKit). Здесь только то, что
   нужно обеим страницам: сетка-колонка, заголовки, кнопки, базовый hero,
   фон/орбы/canvas, секции .lp-cta и .lp-footer, scroll-reveal.

   • Секции, специфичные для маркетплейса → fai-landing.css (+ fai/*).
   • Секции, специфичные для MAS         → mas-landing.css.
   • Светлая тема общей базы             → landing-light.css.
   ============================================ */

/* ── Сетка лендинга: единая ширина колонки контента + адаптивный «желоб».
      Все секции центрируются по --lp-content, чтобы их левый/правый края
      строго совпадали (источник правды — только здесь). ── */
:root {
    --lp-content: 1240px;
    --lp-gutter:  2rem;
}
@media (min-width: 768px)  { :root { --lp-gutter: 2rem; } }
@media (min-width: 1280px) { :root { --lp-gutter: 2.5rem; } }
@media (max-width: 480px)  { :root { --lp-gutter: 1rem; } }
@media (max-width: 360px)  { :root { --lp-gutter: 0.75rem; } }

/* ── Базовая колонка секции (fallback-модель без .ui-page--lp).
   Строгую сетку маркетплейса задаёт fai/grid.css. ── */
.lp-section {
    position: relative;
    padding: 4.5rem 0;
}
@media (min-width: 768px)  { .lp-section { padding: 5.5rem 0; } }
@media (min-width: 1280px) { .lp-section { padding: 6rem 0; } }
.lp-section > * {
    width: 100%;
    max-width: var(--lp-content, 1100px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--lp-gutter, 1.5rem);
    padding-right: var(--lp-gutter, 1.5rem);
    box-sizing: border-box;
    min-width: 0;
}

.lp-section__title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--lp-heading);
    margin: 0 0 2rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.lp-section__title--center { text-align: center; }
@media (min-width: 768px) { .lp-section__title { font-size: var(--ts-3xl); } }
@media (max-width: 480px)  { .lp-section__title { font-size: var(--ts-2xl); } }
@media (max-width: 360px)  { .lp-section__title { font-size: var(--ts-2xl); } }

.lp-section__subtitle {
    text-align: center;
    font-size: var(--ts-lg);
    color: var(--lp-text-muted);
    line-height: 1.6;
    max-width: 640px;
    margin: -1rem auto 2.75rem;
}

/* ── Buttons ── */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 1.75rem;
    border-radius: 10px;
    font-size: var(--ts-md);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    transition: filter var(--t-smooth), transform var(--t-smooth), box-shadow var(--t-smooth);
}
.lp-btn--primary {
    background: var(--lp-accent, #2f6aff);
    color: #ffffff;
    box-shadow: 0 8px 18px -6px rgba(47, 106, 255, 0.45);
}
.lp-btn--primary:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(47, 106, 255, 0.55);
}
.lp-btn--outline {
    background: transparent;
    color: var(--lp-btn-outline-text);
    border: 1.5px solid var(--lp-btn-outline-border);
}
.lp-btn--outline:hover {
    border-color: var(--lp-accent, #2f6aff);
    background: rgba(47, 106, 255, 0.06);
    color: var(--lp-accent, #2f6aff);
}
.lp-btn--glow {
    position: relative;
    gap: 0.5rem;
    background: var(--lp-accent, #2f6aff);
    box-shadow: 0 8px 18px -6px rgba(47, 106, 255, 0.45);
    border: none;
}
.lp-btn--glow:hover {
    box-shadow: 0 10px 24px -6px rgba(47, 106, 255, 0.55);
    transform: translateY(-1px);
    filter: brightness(1.07);
}
.lp-btn__arrow {
    font-family: var(--font-mono);
    font-size: 0.95em;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   REDESIGN 2.0 — современные примитивы (визуальные апгрейды в .ui-page--lp)
   Крупная флюидная типографика, bento-сетки, hover-lift, акцент-градиент.
   Универсальные хелперы (.lp-accent-text, .u-lift, .lp-bento) безопасны
   и переиспользуются на публичных страницах.
   ═══════════════════════════════════════════════════════════════════ */

/* Крупный display-заголовок и лид — только на лендинге маркетплейса. */
.ui-page--lp .lp-section__title,
.ui-page--lp .lp-hero__title,
.ui-page--lp .lp-hero__title--gradient,
.ui-page--lp .lp-section__subtitle,
.ui-page--lp .lp-hero__sub {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
}
.ui-page--lp .lp-section__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--lp-heading);
    background: none;
    -webkit-text-fill-color: unset;
}
.ui-page--lp .lp-section__subtitle {
    font-size: 17px;
    max-width: 46rem;
    margin-top: 0.625rem;
    color: var(--lp-text-muted);
}

.lp-btn--sm { min-height: 44px; padding: 0 1.25rem; font-size: var(--ts-base); }
.lp-btn--lg { min-height: 52px; padding: 0 2rem; font-size: var(--ts-lg); }
.lp-btn--outline { gap: 0.5rem; }

/* Акцентный текст в заголовках. */
.lp-accent-text {
    color: var(--lp-accent, #2f6aff);
    background: none;
    -webkit-text-fill-color: unset;
}

/* Eyebrow-пилюля современного вида. */
.lp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--r-full);
    font-size: var(--ts-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-badge-text);
    background: var(--lp-badge-bg);
    border: 1px solid var(--lp-badge-border);
}
.lp-kicker__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgb(var(--b-gold-rgb));
    box-shadow: 0 0 0 4px rgba(var(--b-gold-rgb), 0.18);
}

/* Hover-lift — мягкий подъём карточек с цветной тенью. */
.u-lift {
    transition: transform var(--t-lift), box-shadow var(--t-lift), border-color var(--t-lift);
    will-change: transform;
}
.u-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--elev-3);
}

/* Bento-сетка: ячейки разного веса (6-колоночная база). */
.lp-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.1rem;
}
.lp-bento__cell        { grid-column: span 3; min-width: 0; }
.lp-bento__cell--wide  { grid-column: span 4; }
.lp-bento__cell--full  { grid-column: span 6; }
.lp-bento__cell--third { grid-column: span 2; }
.lp-bento__cell--half  { grid-column: span 3; }
@media (max-width: 860px) {
    .lp-bento { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
    .lp-bento__cell, .lp-bento__cell--wide, .lp-bento__cell--full,
    .lp-bento__cell--third, .lp-bento__cell--half { grid-column: span 2; }
}
@media (max-width: 520px) {
    .lp-bento { grid-template-columns: 1fr; }
    .lp-bento__cell, .lp-bento__cell--wide, .lp-bento__cell--full,
    .lp-bento__cell--third, .lp-bento__cell--half { grid-column: span 1; }
}

/* Современная «card-surface» — стеклянная карточка редизайна. */
.lp-surface {
    background: var(--lp-card-glass-bg, rgba(255,255,255,0.72));
    border: 1px solid var(--lp-card-glass-bd, var(--b-line-hi));
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-1);
    -webkit-backdrop-filter: var(--glass-blur-sm) var(--glass-sat-low);
            backdrop-filter: var(--glass-blur-sm) var(--glass-sat-low);
}
.lp-surface--accent {
    border-color: var(--lp-card-glass-bd-hi, rgba(var(--b-gold-rgb), 0.4));
    box-shadow: var(--elev-2);
}

/* Анимированные счётчики hero — крупнее и контрастнее. */
.lp-count { font-variant-numeric: tabular-nums; }

/* ── Современная типографика лендинга ──────────────────────────────────
   Бренд глобально использует serif (Playfair) для h1–h4. На лендинге это
   читается «книжно»; для современного SaaS-вида переводим display-заголовки
   на гротеск (Inter, --font-ui) с плотным трекингом. Scoped под .ui-page--lp,
   чтобы не трогать остальной сайт (кабинет, документация и т. п.). */
.ui-page--lp .lp-hero__title,
.ui-page--lp .lp-hero__title--gradient,
.ui-page--lp .lp-section__title,
.ui-page--lp .lp-section__subtitle,
.ui-page--lp .lp-hero__sub {
    font-family: var(--font-ui);
}

/* ── Hero редизайна: крупный display-заголовок + стеклянная карта статов ── */
.ui-page--lp .lp-hero__title,
.ui-page--lp .lp-hero__title--gradient {
    font-size: var(--ds-1);
    line-height: 1.0;
    letter-spacing: -0.04em;
    font-weight: 800;
    text-wrap: balance;
}
.ui-page--lp .lp-hero__sub {
    font-size: var(--ds-lead);
    line-height: 1.65;
    letter-spacing: -0.011em;
    color: var(--lp-text-muted, var(--lp-text));
}

/* Заголовки секций — тот же современный гротеск, плотнее трекинг. */
.ui-page--lp .lp-section__title {
    letter-spacing: -0.03em;
    font-weight: 800;
}

/* Карта статистики hero — bento-якорь: стекло, мягкая тень. */
.lp-stats--card {
    padding: 1.35rem clamp(1.5rem, 4vw, 2.5rem);
    margin: 0.5rem auto 0;
    gap: 0.75rem clamp(1rem, 3vw, 2rem);
    width: fit-content;
    max-width: min(100%, 720px);
    border-radius: var(--radius-xl);
}
@media (max-width: 520px) {
    .lp-stats--card { width: 100%; padding: 1.25rem 1rem; }
}

/* ── Hero (общий каркас) ── */
.lp-hero {
    background: transparent;
    padding: 0 0 2rem;
    overflow: hidden;
    position: relative;
}
/* Мягкое акцентное свечение за заголовком — глубина без рамки. */
.ui-page--lp .lp-hero::before {
    content: "";
    position: absolute;
    top: clamp(-120px, -8vw, -40px);
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 92%);
    height: 520px;
    background:
        radial-gradient(60% 60% at 50% 40%,
            color-mix(in srgb, var(--lp-accent) 16%, transparent) 0%,
            transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .ui-page--lp .lp-hero::before { animation: lp-hero-glow 9s ease-in-out infinite; }
}
@keyframes lp-hero-glow {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.06); }
}
.lp-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 6rem 1.5rem 3.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}
@media (min-width: 900px) {
    .lp-hero__inner {
        grid-template-columns: 1fr 1fr;
        padding: 7rem 2rem 4.5rem;
    }
}
@media (min-width: 1280px) {
    .lp-hero__inner {
        grid-template-columns: 55fr 45fr;
        padding: 7.5rem 2.5rem 5rem;
    }
}

/* Hero v2: центрированная раскладка */
.lp-hero__inner--hero2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: var(--lp-content, 1200px);
    margin: 0 auto;
    padding: 3rem var(--lp-gutter, 1.5rem);
    position: relative;
    z-index: 1;
    gap: 0;
}
@media (min-width: 768px) {
    .lp-hero__inner--hero2 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}
.lp-hero__inner--hero2 .lp-hero__sub--hero2 {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.lp-hero__cta--hero2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    justify-content: center;
    margin-bottom: 2.5rem;
}

/* Trust strip */
.lp-hero__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.6rem;
    font-size: var(--ts-sm);
    color: var(--lp-text-muted, rgba(148,163,184,0.6));
}
.lp-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.lp-hero__trust-item svg {
    color: #22c55e;
    flex-shrink: 0;
}
.lp-hero__trust-divider {
    width: 1px;
    height: 14px;
    background: currentColor;
    opacity: 0.2;
}
@media (max-width: 639px) {
    .lp-hero__trust { flex-direction: column; gap: 0.4rem; }
    .lp-hero__trust-divider { display: none; }
}

.lp-hero__title {
    font-size: var(--ts-4xl);
    font-weight: 800;
    color: var(--lp-heading);
    line-height: 1.18;
    letter-spacing: -0.03em;
    margin: 0 0 1.25rem;
}
@media (min-width: 640px)  { .lp-hero__title { font-size: var(--ts-5xl); } }
@media (min-width: 1024px) { .lp-hero__title { font-size: var(--ts-6xl); } }

.lp-br-desktop { display: none; }
@media (min-width: 900px) { .lp-br-desktop { display: block; } }

.lp-hero__sub {
    font-size: var(--ts-lg);
    color: var(--lp-text);
    line-height: 1.75;
    max-width: 38rem;
    margin: 0 0 2rem;
}
.lp-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    align-items: center;
}

/* ══════════════════════════════════════════
   ФОН ЛЕНДИНГА — canvas сети, орбы, частицы
   ══════════════════════════════════════════ */
/* Снимаем ограничения, которые могут обрезать position:fixed */
.mud-main-content:has(.ui-canvas),
.mud-layout:has(.ui-canvas),
.mud-main-content:has(.lp-bg),
.mud-layout:has(.lp-bg) {
    background: transparent !important;
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
}
body:has(.ui-canvas),
body:has(.lp-bg) {
    background-color: var(--lp-bg) !important;
}

/* ── Статичный фон лендинга ────────────────────────────────────────────
   Заменяет живой WebGL-граф. Чтобы растр не «мылил» при апскейле и не лез
   узлами под контент, фон собран слоями:
     • основа .lp-bg          — векторный градиент в палитре иллюстрации
                                (масштабируется без потери качества);
     • .lp-bg::before         — сама иллюстрация: мягкая, слегка размытая
                                подложка только сверху, растворяется к низу;
     • .lp-bg::after          — финальный фейд в фон страницы под контентом.
   Слой фиксированный, на всю вьюху; контент лендинга идёт над ним (z-index:1). */
.lp-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #eef3fb;
}
.lp-bg::before {
    content: "";
    position: absolute;
    top: 6%;
    left: -8%;
    width: 46vw;
    height: 46vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 106, 255, 0.20), transparent 60%);
    filter: blur(72px);
    animation: lp-mas-float-a 24s ease-in-out infinite;
}
.lp-bg::after {
    content: "";
    position: absolute;
    top: 40%;
    right: -12%;
    width: 52vw;
    height: 52vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.16), transparent 60%);
    filter: blur(84px);
    animation: lp-mas-float-b 30s ease-in-out infinite;
}
[data-theme="dark"] .lp-bg {
    background: #eef3fb;
}


@keyframes lp-mas-float-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(46px, -34px) scale(1.18); }
}
@keyframes lp-mas-float-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-54px, 26px) scale(1.12); }
}
@keyframes lp-mas-grid {
    from { background-position: 0 0; }
    to   { background-position: 46px 46px; }
}

/* 2D canvas — скрыт, пока активен WebGL; показывается как fallback. */
.ui-canvas { display: none; }
.ui-canvas--fallback {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 0;
    pointer-events: none;
}

/* 3D mount: на весь экран позади контента. */
#ui-3d-mount {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 0;
    pointer-events: auto;
    cursor: default;
}
#ui-3d-mount canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Header всегда кликабелен независимо от родителей. */
.ui-header-wrap,
.ui-header-wrap * {
    pointer-events: auto !important;
}

/* Ambient floating orbs. */
.lp-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.lp-ambient__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    will-change: transform, opacity;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.lp-ambient__orb--1 {
    width: 500px; height: 500px;
    top: -5%; left: -8%;
    background: radial-gradient(circle, rgba(99,102,241,0.18) 0%, rgba(59,130,246,0.08) 50%, transparent 70%);
    animation: lp-orb-drift-1 22s ease-in-out infinite alternate;
}
.lp-ambient__orb--2 {
    width: 400px; height: 400px;
    top: 25%; right: -6%;
    background: radial-gradient(circle, rgba(196,160,80,0.14) 0%, rgba(180,140,60,0.06) 50%, transparent 70%);
    animation: lp-orb-drift-2 28s ease-in-out infinite alternate;
}
.lp-ambient__orb--3 {
    width: 350px; height: 350px;
    top: 55%; left: 10%;
    background: radial-gradient(circle, rgba(34,197,94,0.12) 0%, rgba(16,185,129,0.05) 50%, transparent 70%);
    animation: lp-orb-drift-3 25s ease-in-out infinite alternate;
}
.lp-ambient__orb--4 {
    width: 450px; height: 450px;
    top: 75%; right: 5%;
    background: radial-gradient(circle, rgba(139,92,246,0.14) 0%, rgba(99,102,241,0.06) 50%, transparent 70%);
    animation: lp-orb-drift-4 30s ease-in-out infinite alternate;
}
.lp-ambient__orb--5 {
    width: 300px; height: 300px;
    top: 40%; left: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.10) 0%, rgba(6,182,212,0.05) 50%, transparent 70%);
    animation: lp-orb-drift-5 20s ease-in-out infinite alternate;
}
@keyframes lp-orb-drift-1 {
    0%   { transform: translate(0, 0) scale(1);       opacity: 0.5; }
    33%  { transform: translate(60px, 80px) scale(1.1); opacity: 0.7; }
    66%  { transform: translate(-30px, 120px) scale(0.95); opacity: 0.4; }
    100% { transform: translate(40px, 50px) scale(1.05); opacity: 0.6; }
}
@keyframes lp-orb-drift-2 {
    0%   { transform: translate(0, 0) scale(1);        opacity: 0.4; }
    50%  { transform: translate(-70px, 60px) scale(1.15); opacity: 0.65; }
    100% { transform: translate(-30px, -40px) scale(0.9); opacity: 0.45; }
}
@keyframes lp-orb-drift-3 {
    0%   { transform: translate(0, 0) scale(1);       opacity: 0.35; }
    50%  { transform: translate(50px, -50px) scale(1.1); opacity: 0.55; }
    100% { transform: translate(-40px, 30px) scale(0.95); opacity: 0.4; }
}
@keyframes lp-orb-drift-4 {
    0%   { transform: translate(0, 0) scale(1);       opacity: 0.4; }
    50%  { transform: translate(-50px, -60px) scale(1.08); opacity: 0.6; }
    100% { transform: translate(30px, 40px) scale(0.92); opacity: 0.35; }
}
@keyframes lp-orb-drift-5 {
    0%   { transform: translate(0, 0) scale(1);       opacity: 0.3; }
    50%  { transform: translate(40px, 50px) scale(1.2); opacity: 0.5; }
    100% { transform: translate(-60px, -30px) scale(0.85); opacity: 0.35; }
}
@media (max-width: 767px) {
    .lp-ambient__orb { filter: blur(60px); }
    .lp-ambient__orb--1 { width: 300px; height: 300px; }
    .lp-ambient__orb--2 { width: 250px; height: 250px; }
    .lp-ambient__orb--3 { width: 200px; height: 200px; }
    .lp-ambient__orb--4 { width: 280px; height: 280px; }
    .lp-ambient__orb--5 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-ambient__orb { animation: none !important; opacity: 0.3; }
}

/* Floating particles CSS fallback (tiny dots). */
.lp-ambient::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(196,160,80,0.3) 50%, transparent 50%),
        radial-gradient(1px 1px at 30% 60%, rgba(99,102,241,0.2) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 70% 35%, rgba(196,160,80,0.25) 50%, transparent 50%),
        radial-gradient(1px 1px at 85% 75%, rgba(34,197,94,0.2) 50%, transparent 50%),
        radial-gradient(1px 1px at 50% 90%, rgba(139,92,246,0.2) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 20% 85%, rgba(196,160,80,0.2) 50%, transparent 50%);
    background-size: 100% 100%;
    animation: lp-micro-drift 40s linear infinite;
    pointer-events: none;
}
@keyframes lp-micro-drift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-10px, -15px); }
    50%  { transform: translate(5px, -25px); }
    75%  { transform: translate(-5px, -10px); }
    100% { transform: translate(0, 0); }
}

/* ── Hover tooltip for graph nodes (создаётся hero-three.js) ── */
.hero-tooltip {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    transform: translate(-50%, -100%);
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    background: rgba(10, 14, 28, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.1);
    white-space: nowrap;
    transition: opacity 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 240px;
}
.hero-tooltip__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 5px;
    border: 1px solid;
    line-height: 1.3;
    width: fit-content;
}
.hero-tooltip__badge svg { flex-shrink: 0; width: 10px; height: 10px; }
.hero-tooltip__name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    line-height: 1.3;
}
.hero-tooltip__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.hero-tooltip__rating {
    font-size: 11px;
    color: #f59e0b;
    font-weight: 600;
}
.hero-tooltip__cat {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
}

/* ── For Users — базовый фон секции (раскладку задают лендинги) ── */
.lp-users {
    background: transparent;
    border-top: none;
    border-bottom: none;
}

/* ══════════════════════════════════════════
   CTA section (общая для обоих лендингов)
   ══════════════════════════════════════════ */
.lp-cta {
    text-align: center;
    padding: 5rem 0;
}
.lp-cta__inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 3.5rem 2rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(124,58,237,0.08));
    border: 1px solid rgba(59,130,246,0.15);
    position: relative;
    overflow: hidden;
}
.lp-cta__title {
    font-size: var(--ts-2xl);
    font-weight: 700;
    color: var(--lp-heading);
    margin: 0 0 0.75rem;
}
@media (min-width: 768px) { .lp-cta__title { font-size: var(--ts-3xl); } }
.lp-cta__sub {
    font-size: var(--ts-lg);
    color: var(--lp-muted);
    margin: 0 0 2rem;
}
.lp-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
/* Shimmer-полоса по CTA-блоку. */
.lp-cta__inner::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.04) 40%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 60%,
        transparent);
    animation: lp-shimmer-sweep 8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes lp-shimmer-sweep {
    0%   { left: -100%; }
    40%  { left: 200%; }
    100% { left: 200%; }
}

/* ══════════════════════════════════════════
   SHOWCASE SHOT — лайфстайл-кадр продукта
   ══════════════════════════════════════════ */
.lp-shot {
    padding-top: 5.5rem;
}
.lp-shot .lp-section__subtitle {
    margin-bottom: 2.625rem;
}
.lp-shot__stage {
    position: relative;
    max-width: 1040px;
    margin: 2.625rem auto 0;
    isolation: isolate;
}
.lp-shot__stage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -36px;
    transform: translateX(-50%);
    width: 78%;
    height: 122%;
    background: radial-gradient(50% 46% at 50% 0%, #cfe0ff, transparent 72%);
    filter: blur(12px);
    pointer-events: none;
    z-index: -1;
}
.lp-shot__frame {
    position: relative;
    margin: 0;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #d8e2f2;
    background: #fff;
    box-shadow:
        0 60px 110px -50px rgba(18, 40, 95, 0.5),
        0 14px 34px -20px rgba(18, 40, 95, 0.22);
    line-height: 0;
    transition: transform var(--t-lift), box-shadow var(--t-lift);
}
.lp-shot__frame:hover {
    transform: none;
}
.lp-shot__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    animation: lp-shot-zoom 20s ease-in-out infinite alternate;
}
@keyframes lp-shot-zoom {
    from { transform: scale(1.001); }
    to   { transform: scale(1.04); }
}
.lp-shot__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(10, 18, 45, 0.30), rgba(10, 18, 45, 0) 44%, rgba(47, 106, 255, 0.12));
    pointer-events: none;
}
.lp-shot__hints {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.375rem;
    font-size: 13.5px;
    color: #5a6478;
}
.lp-shot__hints span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.lp-shot__hint-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lp-accent, #2f6aff);
    flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
    .lp-shot__img { animation: none; }
    .lp-bg::before,
    .lp-bg::after { animation: none; }
}

/* ══════════════════════════════════════════
   FOOTER (общий для обоих лендингов)
   ══════════════════════════════════════════ */
/* FAI HUB footer — светлый */
.lp-footer {
    position: relative;
    margin-top: 84px;
    border-top: 1px solid #e5e8ee;
    background: #fff;
}
.lp-footer--solid {
    margin-top: 84px;
    background: #fff;
    border-top: 1px solid #e5e8ee;
}
.lp-footer::before { display: none; }
.lp-footer__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}
.lp-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 52px 0 36px;
}
@media (min-width: 768px) {
    .lp-footer__top {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 40px;
        align-items: start;
    }
}
.fai-footer__grid.lp-footer__top {
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .fai-footer__grid.lp-footer__top {
        grid-template-columns: 1.5fr 3fr;
        gap: 40px;
    }
}
.lp-footer__brand-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lp-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}
.fai-footer__logo {
    display: block;
    border-radius: 8px;
    width: 28px;
    height: 28px;
}
.lp-footer__logo-img {
    width: 28px; height: 28px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    border-radius: 8px;
}
.lp-footer__brand-name,
.fai-footer__brand-name {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 19px;
    font-weight: 700;
    color: #0d1017;
    letter-spacing: -0.01em;
    line-height: 1;
}
.lp-footer__brand-accent { color: #2f6aff; }
.lp-footer__tagline {
    font-size: 14px;
    color: #626b78;
    line-height: 1.55;
    margin: 0;
    max-width: 300px;
}
.fai-footer__protocols {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #9aa3b0;
    margin-top: 2px;
}
.lp-footer__social { display: none; }
.lp-footer__social-btn { display: none; }
.lp-footer__nav,
.fai-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.lp-footer__nav-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 110px;
}
.lp-footer__nav-heading {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9aa3b0;
    margin-bottom: 4px;
}
.lp-footer__link {
    font-size: 14px;
    color: #3a4250;
    text-decoration: none;
    transition: color var(--t-base);
    display: inline-block;
}
.lp-footer__link:hover {
    color: #2f6aff;
    transform: none;
}
.lp-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 18px 0 36px;
    border-top: 1px solid #eef0f4;
}
.lp-footer__copy {
    font-size: 13px;
    color: #9aa3b0;
}
.lp-footer__bottom-links {
    display: flex;
    align-items: center;
    gap: 20px;
}
.lp-footer__bottom-link {
    font-size: 13px;
    color: #9aa3b0;
    text-decoration: none;
    transition: color var(--t-base);
}
.lp-footer__bottom-link:hover { color: #2f6aff; }
.lp-footer__bottom-dot {
    display: none;
}

/* ══════════════════════════════════════════
   Scroll-reveal (lp-alive.js добавляет классы)
   ══════════════════════════════════════════ */
.lp-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}
.lp-reveal--visible {
    opacity: 1;
    /* ВАЖНО: после появления убираем transform ПОЛНОСТЬЮ (none, а не
       translateY(0)). Любое значение transform ≠ none делает секцию
       containing-block для position:fixed потомков — из-за чего модалки
       интеграций (.lp-integ-modal, inset:0) позиционировались внутри
       коробки секции, а не вьюпорта: бэкдроп не накрывал всю страницу и
       клики «проходили сквозь» карточки. Переход length→none браузер
       интерполирует как identity, поэтому анимация сохраняется. */
    transform: none;
}

/* Ambient glow pulse на верхней кромке секции. */
.lp-section::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(99, 102, 241, 0.25) 20%,
        rgba(99, 102, 241, 0.4) 50%,
        rgba(99, 102, 241, 0.25) 80%,
        transparent);
    opacity: 0;
    animation: lp-divider-pulse 6s ease-in-out infinite;
}
.lp-section:first-of-type::before { display: none; }
@keyframes lp-divider-pulse {
    0%, 100% { opacity: 0; transform: scaleX(0.6); }
    50%      { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .lp-reveal { opacity: 1; transform: none; transition: none; }
    .lp-section::before { animation: none; opacity: 0.3; }
    .lp-cta__inner::before { animation: none; display: none; }
    .lp-ambient::after { animation: none; }
}



/* ── components/landing-light.css ── */
/* ===================================================
   LANDING — LIGHT THEME OVERRIDE (общая база)
   Кремово-золотая палитра (--b-*) для общих элементов лендинга:
   hero (eyebrow/заголовок/кнопки/trust), орбы, CTA, footer, tooltip.
   Используется обоими лендингами.

   • Светлая тема маркетплейсных секций → fai-landing-light.css.
   =================================================== */

/* Локальные семантические токены лендинга (используются и маркетплейсными
   секциями в fai-landing-light.css). Скоуп .ui-page--lp = только маркетплейс,
   поэтому на MAS не влияют. */
[data-theme="light"] .ui-page--lp {
    --lp-hero-glass-bg:    rgba(255, 255, 255, 0.85);
    --lp-hero-glass-bd:    rgba(var(--b-gold-rgb), 0.18);
    --lp-section-glass-bg: rgba(255, 255, 255, 0.72);
    --lp-section-glass-bd: rgba(var(--b-gold-rgb), 0.14);
    --lp-card-glass-bg:    rgba(255, 255, 255, 0.72);
    --lp-card-glass-bd:    var(--b-line-hi);
    --lp-card-glass-bd-hi: rgba(var(--b-gold-rgb), 0.40);
    --lp-card-glow:        rgba(var(--b-gold-rgb), 0.18);
    --lp-on-coffee:        var(--b-cream);
}

/* ══════════════════════════════════════════
   HERO — eyebrow, gradient заголовок, кнопки (общий каркас, обе темы)
   ══════════════════════════════════════════ */
.lp-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.2rem;
    border-radius: 100px;
    background: rgba(59, 130, 246, 0.10);
    border: 1px solid rgba(96, 165, 250, 0.18);
    font-size: var(--ts-sm);
    font-weight: 600;
    color: rgba(148, 180, 255, 0.9);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 2rem;
}
.lp-hero__eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 0 8px #3b82f6;
    animation: lp-pulse-dot 2s ease-in-out infinite;
}
@keyframes lp-pulse-dot {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

.lp-hero__title--gradient {
    font-size: var(--ts-6xl);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
    margin: 0 0 1.5rem;
    background: linear-gradient(135deg, #e0e7ff 0%, #fff 25%, #93b4fc 60%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.lp-hero__accent {
    background: linear-gradient(90deg, #60a5fa, #818cf8, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ══════════════════════════════════════════
   LIGHT THEME (data-theme="light") — кремово-золото
   ══════════════════════════════════════════ */

/* ── Ambient orbs — холодная палитра ── */
[data-theme="light"] .lp-ambient__orb--1 {
    background: radial-gradient(circle, rgba(0,82,255,0.10) 0%, rgba(0,82,255,0.03) 50%, transparent 70%);
}
[data-theme="light"] .lp-ambient__orb--2 {
    background: radial-gradient(circle, rgba(138,153,173,0.12) 0%, rgba(138,153,173,0.04) 50%, transparent 70%);
}
[data-theme="light"] .lp-ambient__orb--3 {
    background: radial-gradient(circle, rgba(0,82,255,0.07) 0%, rgba(0,82,255,0.02) 50%, transparent 70%);
}
[data-theme="light"] .lp-ambient__orb--4 {
    background: radial-gradient(circle, rgba(138,153,173,0.10) 0%, rgba(138,153,173,0.03) 50%, transparent 70%);
}
[data-theme="light"] .lp-ambient__orb--5 {
    background: radial-gradient(circle, rgba(0,82,255,0.08) 0%, rgba(138,153,173,0.03) 50%, transparent 70%);
}
[data-theme="light"] .lp-ambient::after {
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(0,82,255,0.22) 50%, transparent 50%),
        radial-gradient(1px 1px at 30% 60%, rgba(138,153,173,0.20) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 70% 35%, rgba(0,82,255,0.18) 50%, transparent 50%),
        radial-gradient(1px 1px at 85% 75%, rgba(138,153,173,0.16) 50%, transparent 50%),
        radial-gradient(1px 1px at 50% 90%, rgba(0,82,255,0.14) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 20% 85%, rgba(138,153,173,0.16) 50%, transparent 50%);
}

/* ── Hero: eyebrow / заголовок / trust (light) ── */
[data-theme="light"] .ui-page--lp .lp-hero__eyebrow {
    background: transparent;
    border-color: #1b2747;
    color: #9aa4b2;
}
[data-theme="light"] .ui-page--lp .lp-hero__eyebrow-dot {
    background: #2f6aff;
    box-shadow: 0 0 10px 1px #2f6aff;
}
[data-theme="light"] .ui-page--lp .lp-hero__title--gradient {
    background: none;
    -webkit-text-fill-color: unset;
    color: #f4f6fa;
}
[data-theme="light"] .ui-page--lp .lp-hero__accent {
    background:    var(--b-grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Кнопки primary/glow/outline (light) ── */
[data-theme="light"] .lp-btn--primary {
    background:    var(--b-grad-coffee);
    color:         var(--lp-on-coffee, var(--b-cream));
    box-shadow:    0 4px 18px rgba(var(--b-coffee-rgb), 0.20);
}
[data-theme="light"] .lp-btn--primary:hover {
    box-shadow:    0 6px 26px rgba(var(--b-coffee-rgb), 0.30);
}
[data-theme="light"] .lp-btn--glow {
    background:    var(--b-grad-coffee);
    color:         var(--b-cream);
    border:        1px solid rgba(var(--b-gold-rgb), 0.40);
    box-shadow:    0 0 22px rgba(var(--b-gold-rgb), 0.18),
                   0 4px 16px rgba(var(--b-coffee-rgb), 0.18);
}
[data-theme="light"] .lp-btn--glow:hover {
    box-shadow:    0 0 36px rgba(var(--b-gold-rgb), 0.28),
                   0 6px 22px rgba(var(--b-coffee-rgb), 0.28);
}
[data-theme="light"] .lp-btn--outline {
    color:         var(--b-coffee);
    border-color:  var(--b-line-hi);
}
[data-theme="light"] .lp-btn--outline:hover {
    border-color:  rgba(var(--b-gold-rgb), 0.55);
    background:    rgba(var(--b-gold-rgb), 0.08);
    color:         var(--b-gold-dark);
}

/* ── Footer (light) ── */
[data-theme="light"] .lp-footer {
    border-top-color: var(--b-line);
    background:    linear-gradient(to bottom, transparent 0%, rgba(var(--b-coffee-rgb), 0.04) 100%);
}
[data-theme="light"] .lp-footer__brand-name   { color: var(--b-coffee); }
[data-theme="light"] .lp-footer__brand-accent { color: var(--b-gold-dark); }
[data-theme="light"] .lp-footer__tagline      { color: var(--b-coffee-soft); }
[data-theme="light"] .lp-footer__nav-heading  { color: var(--b-coffee-faint); }
[data-theme="light"] .lp-footer__link         { color: var(--b-coffee-mid); }
[data-theme="light"] .lp-footer__link:hover   { color: var(--b-gold-dark); }
[data-theme="light"] .lp-footer__copy         { color: var(--b-coffee-faint); }
[data-theme="light"] .lp-footer__bottom-link  { color: var(--b-coffee-faint); }
[data-theme="light"] .lp-footer__bottom-link:hover { color: var(--b-gold-dark); }
[data-theme="light"] .lp-footer__bottom-dot   { color: var(--b-coffee-faint); }
[data-theme="light"] .lp-footer__bottom       { border-top-color: var(--b-line); }
[data-theme="light"] .lp-footer__social-btn {
    background:    rgba(var(--b-coffee-rgb), 0.05);
    border-color:  var(--b-line-hi);
    color:         var(--b-coffee-soft);
}
[data-theme="light"] .lp-footer__social-btn:hover {
    background:    rgba(var(--b-gold-rgb), 0.10);
    color:         var(--b-gold-dark);
    border-color:  rgba(var(--b-gold-rgb), 0.40);
}

/* ── Hover tooltip (light) ── */
[data-theme="light"] .hero-tooltip {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04);
}
[data-theme="light"] .hero-tooltip__name { color: var(--b-coffee, #3d2b1f); }
[data-theme="light"] .hero-tooltip__cat { color: var(--b-coffee-soft, #6b5b4a); }
[data-theme="light"] .hero-tooltip__rating { color: #b8860b; }

/* ── CTA (light) ── */
[data-theme="light"] .lp-cta__inner {
    background: linear-gradient(135deg, rgba(0,82,255,0.06), rgba(138,153,173,0.05));
    border-color: rgba(var(--b-gold-rgb), 0.15);
}
[data-theme="light"] .lp-cta__title { color: var(--b-text); }
[data-theme="light"] .lp-cta__sub { color: var(--b-coffee); }
[data-theme="light"] .lp-cta__inner::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--b-gold-rgb), 0.04) 40%,
        rgba(var(--b-gold-rgb), 0.08) 50%,
        rgba(var(--b-gold-rgb), 0.04) 60%,
        transparent);
}

/* ── Animated dividers (light) ── */
[data-theme="light"] .lp-section::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--b-gold-rgb), 0.2) 20%,
        rgba(var(--b-gold-rgb), 0.35) 50%,
        rgba(var(--b-gold-rgb), 0.2) 80%,
        transparent);
}



/* ── components/catalog.css ── */
/* ============================================
   AGENT DETAIL
   ============================================ */

/* ── UIKit audit (P1): локальные токены → brand.css ───────────────── */
:root {
  --cat-audit-paper: var(--b-paper-hi);
  --cat-audit-line:  var(--b-line);
}

.ui-detail-panel {
    background: var(--cat-audit-paper);
    border: 1px solid var(--cat-audit-line);
    border-radius: 1.125rem;
    padding: 1.75rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.ui-detail-sticky {
    position: sticky;
    top: 6rem;
    background: var(--cat-audit-paper);
    border: 1px solid var(--cat-audit-line);
    border-radius: 1.125rem;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

/* ============================================
   STATUS / EMPTY
   ============================================ */

.ui-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 1rem;
    color: #94a3b8;
    font-size: var(--ts-md);
}

/* ============================================
   STAR ICON COLOR (override library default)
   ============================================ */

.ui-star { color: #f5a623 !important; }

/* ============================================
   UPDATED AGENT CARD (new structure)
   ============================================ */

/* Header row: icon + type badge */
.ui-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0;
}

.ui-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}

/* Type badge: Агент / Инструмент */
.ui-card__badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
}

.ui-card__type-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .3125rem .5625rem;
    border-radius: 7px;
    white-space: nowrap;
    line-height: 1;
    align-self: flex-start;
}
.ui-card:not(.ui-card--tool) .ui-card__type-badge {
    color: var(--b-type-agent, #7c5cff);
    background: var(--b-type-agent-soft, #efeaff);
}

.ui-card__mcp-badge {
    font-size: var(--ts-2xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .2rem .45rem;
    border-radius: .35rem;
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    color: #fff;
    line-height: 1;
}

.ui-card--tool .ui-card__type-badge {
    color: var(--b-type-tool, #2f6aff);
    background: var(--b-type-tool-soft, #eaf0ff);
}

/* Tags row */
.ui-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: .8125rem 0 0;
}

.ui-card__tag {
    font-family: var(--font-mono);
    font-size: var(--ts-xs);
    padding: .25rem .5625rem;
    border-radius: 6px;
    background: #f2f5f9;
    border: none;
    color: #5b6470;
    white-space: nowrap;
}

/* Footer: rating + price */
.ui-card__price {
    font-size: var(--ts-md);
    font-weight: 700;
    color: #1a2a4a;
}

.ui-card__price small {
    font-size: var(--ts-2xs);
    font-weight: 400;
    color: var(--b-coffee-faint, #9aa3b0);
}

.ui-card__price--free {
    font-size: var(--ts-md);
    font-weight: 700;
    color: var(--b-type-assembly, #0fa389);
}

/* Нижний ряд: Чат + Избранное */
.ui-card__actions-row {
    display: flex;
    gap: .5625rem;
    margin-top: 1rem;
}

.ui-card__pill {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    height: 42px;
    border-radius: 11px;
    font-size: var(--ts-md);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #dde5f0;
    background: #fff;
    color: #3a4250;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    font-family: var(--font-body);
    line-height: 1.2;
    white-space: nowrap;
}

.ui-card__pill:hover { border-color: var(--b-gold, #2f6aff); }

.ui-card__pill--chat {
    border: none;
    background: var(--b-type-tool-soft, #eaf0ff);
    color: var(--b-gold, #2f6aff);
}

.ui-card__pill--chat:hover {
    background: var(--b-gold, #2f6aff);
    color: #fff;
}

.ui-card__pill--fav-on {
    background: #fff;
    border-color: var(--b-gold, #2f6aff);
    color: var(--b-gold, #2f6aff);
}

.ui-card__pill--fav-on:hover { border-color: var(--b-gold, #2f6aff); }

.ui-card--tool .ui-card__pill--chat {
    background: var(--b-type-tool-soft, #eaf0ff);
    color: var(--b-gold, #2f6aff);
}

.ui-card--tool .ui-card__pill--chat:hover {
    background: var(--b-gold, #2f6aff);
    color: #fff;
}

/* ============================================
   CATALOG HERO (new, replaces ui-catalog-hero)
   ============================================ */

/* ============================================
   CATALOG PAGE — layout (React Profile / Cabinet)
   ============================================ */

.cat-page {
    width: 100%;
}

.cat-page--mock {
    background: var(--page-bg, #eef3fb);
    position: relative;
}

@keyframes cat-ag-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(36px, -26px) scale(1.14); }
}

/* ── Catalog reveal animations ── */
.cat-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.3s cubic-bezier(.22,1,.36,1),
                transform 0.3s cubic-bezier(.22,1,.36,1);
}
.cat-reveal[data-cat-reveal="sidebar"] {
    transform: translateX(-24px);
    transition-delay: 0.12s;
}
.cat-reveal.cat-revealed {
    opacity: 1;
    transform: translate(0);
}

/* Card staggered entrance */
.cat-card-anim {
    opacity: 0;
    transform: translateY(32px) scale(0.97);
    transition: opacity 0.18s ease(.16,1,.3,1),
                transform 0.25s ease-bezier(.16,1,.3,1);
}
.cat-card-anim.cat-card-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Card 3D tilt + glow cursor tracking */
.cat-grid .ui-card {
    transform-style: preserve-3d;
    will-change: transform;
}
.cat-grid .ui-card .cat-card-glow {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--t-base);
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle 200px at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(59,130,246,0.1), transparent 70%);
}
.cat-grid .ui-card:hover .cat-card-glow {
    opacity: 1;
}

/* Hero content stagger */
.cat-hero__left {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.25s 0.05s cubic-bezier(.22,1,.36,1),
                transform 0.3s 0.05s cubic-bezier(.22,1,.36,1);
}
.cat-revealed .cat-hero__left {
    opacity: 1;
    transform: translateY(0);
}
.cat-hero__art {
    opacity: 0;
    transform: translateX(24px) scale(0.9);
    transition: opacity 0.3s 0.05s cubic-bezier(.22,1,.36,1),
                transform 0.3s 0.05s cubic-bezier(.22,1,.36,1);
}
.cat-revealed .cat-hero__art {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Stat number count-up glow */
.cat-hero__stat-num {
    transition: color var(--t-slow);
}
.cat-hero__stat-num.cat-counting {
    text-shadow: 0 0 12px rgba(96,165,250,0.4);
}

/* Chip press animation */
.cat-chip:active {
    transform: scale(0.94);
}
.cat-chip {
    transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s, transform var(--t-hover);
}
.cat-chip--active {
    box-shadow: 0 2px 12px rgba(59,130,246,0.2);
}

/* Filter item micro-animation */
.cat-filter-item {
    transition: background var(--t-base), color var(--t-base), transform var(--t-hover);
}
.cat-filter-item:active {
    transform: scale(0.97);
}

/* Search input focus ring */
.cat-hero__search--mock {
    transition: box-shadow var(--t-slow), border-color var(--t-slow), transform var(--t-slow);
}
.cat-hero__search--mock:focus-within {
    box-shadow: 0 0 0 3px var(--cat-hero-search-focus), 0 4px 16px rgba(59,130,246,0.1);
    transform: scale(1.01);
}

/* Aurora blobs — полноэкранные цветовые пятна поверх canvas */
.cat-aurora {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.cat-aurora__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: var(--cat-aurora-opacity, 0.18);
    animation: cat-orb-drift 18s ease-in-out infinite alternate;
    will-change: transform;
}

.cat-aurora__orb--1 {
    width: 600px;
    height: 600px;
    top: -150px;
    left: -100px;
    background: radial-gradient(circle, rgba(59,130,246,0.5) 0%, rgba(99,102,241,0.2) 60%, transparent 100%);
    animation-duration: 20s;
    animation-delay: 0s;
}

.cat-aurora__orb--2 {
    width: 500px;
    height: 500px;
    top: 30%;
    right: -80px;
    background: radial-gradient(circle, rgba(139,92,246,0.45) 0%, rgba(59,130,246,0.15) 60%, transparent 100%);
    animation-duration: 25s;
    animation-delay: -8s;
    animation-name: cat-orb-drift-2;
}

.cat-aurora__orb--3 {
    width: 450px;
    height: 450px;
    bottom: 15%;
    left: 25%;
    background: radial-gradient(circle, rgba(6,182,212,0.3) 0%, rgba(59,130,246,0.1) 60%, transparent 100%);
    animation-duration: 22s;
    animation-delay: -14s;
    animation-name: cat-orb-drift-3;
}

@keyframes cat-orb-drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(40px, 30px) scale(1.05); }
    66%  { transform: translate(-20px, 50px) scale(0.97); }
    100% { transform: translate(30px, -20px) scale(1.03); }
}
@keyframes cat-orb-drift-2 {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(-50px, 20px) scale(1.08); }
    66%  { transform: translate(30px, -40px) scale(0.95); }
    100% { transform: translate(-20px, 30px) scale(1.04); }
}
@keyframes cat-orb-drift-3 {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(30px, -30px) scale(1.06); }
    66%  { transform: translate(-40px, 20px) scale(0.98); }
    100% { transform: translate(20px, 40px) scale(1.02); }
}

[data-theme="light"] .cat-aurora__orb {
    opacity: 0.08;
}

/* Баннер — как dash-react-banner / profile__header-banner */
.cat-react-banner {
    display: none;
}
@media (min-width: 640px) {
    .cat-react-banner {
        display: flex;
        width: 100%;
        max-width: 1240px;
        margin: 0 auto 1rem;
        padding: 0.75rem 1.25rem;
        background: linear-gradient(90deg, rgba(32, 75, 132, 0.9), #3775c8);
        border-radius: 16px;
        color: #ffffff;
        font-size: var(--ts-lg);
        font-weight: 700;
        font-family: var(--font-body);
        align-items: center;
        justify-content: center;
        text-align: center;
        letter-spacing: 0.3px;
        line-height: 1.35;
        box-sizing: border-box;
    }
}

/* ============================================
   CATALOG HERO — Light Glass
   ============================================ */

.cat-hero {
    margin: -5.5rem -1.25rem 0;
    padding: 7rem 1.25rem 3rem;
    position: relative;
    overflow: hidden;
    background: var(--cat-hero-bg);
    border-bottom: 1px solid var(--cat-panel-border);
    transition: background var(--t-base);
}

@media (min-width: 640px) {
    .cat-hero { margin-top: -6rem; margin-left: -2rem; margin-right: -2rem; padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1024px) {
    .cat-hero { margin-top: -6.5rem; margin-left: -2.5rem; margin-right: -2.5rem; padding-top: 8.5rem; padding-bottom: 3.5rem; padding-left: 2.5rem; padding-right: 2.5rem; }
}

.cat-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 80% at 90% 40%, var(--cat-hero-blob1) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 5%  70%, var(--cat-hero-blob2) 0%, transparent 55%),
        radial-gradient(ellipse 35% 50% at 50% 10%, var(--cat-hero-blob1) 0%, transparent 55%);
    pointer-events: none;
}

.cat-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(148,163,184,.12) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    opacity: .4;
}

.cat-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

.cat-hero__badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--ts-2xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cat-badge-text);
    background: var(--cat-badge-bg);
    border: 1px solid var(--cat-pill-chat-border);
    border-radius: 9999px;
    padding: .3rem .875rem;
    margin-bottom: 1.25rem;
}

.cat-hero__title {
    font-size: var(--ts-4xl);
    font-weight: 800;
    color: var(--cat-hero-title);
    line-height: 1.15;
    margin: 0 0 .875rem;
    font-family: var(--font-ui);
    letter-spacing: -.03em;
}
@media (min-width: 640px)  { .cat-hero__title { font-size: var(--ts-5xl); } }
@media (min-width: 1024px) { .cat-hero__title { font-size: var(--ts-6xl); } }

.cat-hero__title-accent {
    color: var(--cat-hero-accent);
}

.cat-hero__sub {
    font-size: var(--ts-lg);
    color: var(--cat-card-desc);
    line-height: 1.7;
    max-width: 40rem;
    margin: 0 0 2rem;
    font-family: var(--font-ui);
}

.cat-hero__search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 36rem;
    background: var(--cat-hero-search-bg);
    border: 1px solid var(--cat-hero-search-border);
    border-radius: 9999px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: border-color var(--t-smooth), box-shadow var(--t-smooth), background var(--t-slow);
}
.cat-hero__search:focus-within {
    border-color: var(--cat-hero-search-focus);
    box-shadow: 0 0 0 3px var(--cat-hero-search-focus), 0 4px 16px rgba(0,0,0,0.06);
}

.cat-hero__search-icon {
    position: absolute;
    left: 1.125rem;
    color: var(--cat-hero-search-ph);
    display: flex;
    pointer-events: none;
}

.cat-hero__search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: .8rem 1rem .8rem 3rem;
    font-size: var(--ts-md);
    font-family: var(--font-ui);
    color: var(--cat-hero-search-text);
    outline: none;
}
.cat-hero__search-input::placeholder { color: var(--cat-hero-search-ph); }

.cat-hero__search-btn {
    margin: .3rem .3rem .3rem 0;
    padding: .5rem 1.375rem;
    background: var(--cat-chip-active-bg);
    color: #fff;
    border: none;
    border-radius: 9999px;
    font-size: var(--ts-base);
    font-weight: 600;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all var(--t-smooth);
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(59,130,246,.25);
}
.cat-hero__search-btn:hover { opacity: 0.9; box-shadow: 0 3px 12px rgba(59,130,246,.35); }

.cat-hero.cat-hero--mock {
    margin: -5.5rem -1.25rem 0;
    padding: 3.375rem 1.25rem 2.25rem;
    background: transparent;
    border-bottom: 1px solid #e3e8f0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
@media (min-width: 640px) {
    .cat-hero.cat-hero--mock {
        margin-top: -6rem;
        margin-left: -2rem;
        margin-right: -2rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media (min-width: 1024px) {
    .cat-hero.cat-hero--mock {
        margin-top: -6.5rem;
        margin-left: -2.5rem;
        margin-right: -2.5rem;
        padding: 3.5rem 2.5rem 2.25rem;
    }
}

.cat-hero.cat-hero--mock::before {
    content: "";
    position: absolute;
    top: -140px;
    left: -60px;
    width: 42vw;
    height: 42vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 106, 255, .14), transparent 62%);
    filter: blur(70px);
    animation: cat-ag-float 26s ease-in-out infinite;
    pointer-events: none;
}

.cat-hero.cat-hero--mock::after {
    display: none;
}

/* Gradient glowing bottom border */
.cat-hero__search.cat-hero__search--mock {
    position: relative;
}
.cat-hero__search.cat-hero__search--mock::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 9999px;
    padding: 1px;
    background: linear-gradient(90deg, rgba(59,130,246,0.3), rgba(139,92,246,0.3), rgba(6,182,212,0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--t-slow);
}
.cat-hero__search.cat-hero__search--mock:focus-within::after {
    opacity: 1;
}

.cat-hero__inner--mock {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 900px) {
    .cat-hero__inner--mock {
        grid-template-columns: 1fr minmax(200px, 34%);
        gap: 2rem;
    }
}

.cat-hero__kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--b-gold, #2f6aff);
    margin-bottom: .6875rem;
}

.cat-hero__h1-mock {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: clamp(2.375rem, 4.8vw, 3.625rem);
    font-weight: 700;
    color: var(--b-coffee, #0d1017);
    line-height: 1.02;
    margin: 0 0 0;
    letter-spacing: -.03em;
}

.cat-hero.cat-hero--mock .cat-hero__title-accent {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--b-gold, #2f6aff);
}

.cat-hero__subtitle {
    font-size: 1.1rem;
    color: #48526a;
    line-height: 1.55;
    margin: .9375rem 0 0;
    font-family: var(--font-body);
    max-width: 32.5rem;
    opacity: 1;
}

.cat-hero__stats {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
    margin-top: 1.5rem;
}
.cat-hero__stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .125rem;
}
.cat-hero__stat-num {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--b-gold, #2f6aff);
    line-height: 1;
    letter-spacing: -.02em;
}
.cat-hero__stat-lbl {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #7e8aa0;
}
.cat-hero__stat-sep { display: none; }

.cat-hero__search.cat-hero__search--mock {
    max-width: 38.75rem;
    width: 100%;
    margin-top: 1.5rem;
    background: #fff;
    border: 1px solid #dde5f0;
    border-radius: 14px;
    box-shadow: 0 18px 40px -28px rgba(20, 40, 95, .3);
    overflow: hidden;
}
.cat-hero__search.cat-hero__search--mock::after { display: none; }
.cat-hero__search.cat-hero__search--mock:focus-within {
    border-color: var(--b-gold, #2f6aff);
    box-shadow: 0 18px 40px -28px rgba(20, 40, 95, .3), 0 0 0 3px rgba(47, 106, 255, .12);
    transform: none;
}

.cat-hero__search-go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: auto;
    align-self: stretch;
    flex-shrink: 0;
    border: none;
    border-radius: 0;
    background: var(--b-gold, #2f6aff);
    color: #fff;
    cursor: pointer;
    margin: 0;
    transition: opacity .15s ease;
}
.cat-hero__search-go:hover {
    opacity: .92;
    transform: none;
}

.cat-hero__search-input--mock {
    padding: .9375rem 1rem .9375rem 3rem;
    font-size: .96875rem;
    color: #1a2a4a;
}
.cat-hero__search-input--mock::placeholder {
    color: #9aa8bd;
}
.cat-hero__search-icon {
    left: 1rem;
    color: #9aa8bd;
}

.cat-hero__art {
    display: none;
    justify-content: center;
    align-items: center;
    overflow: visible;
    pointer-events: none;
}

@media (min-width: 900px) {
    .cat-hero__art { display: flex; }
}

/* Тот же анимированный шар, что в чате (ChatBotSphereInner) */
.cat-hero-sphere {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 170px;
    padding: 0.75rem 0 1.25rem;
    transform: scale(2.05);
    transform-origin: center center;
    filter: drop-shadow(0 18px 36px rgba(59,130,246,0.2));
}

@media (min-width: 1100px) {
    .cat-hero-sphere {
        transform: scale(2.35);
        min-height: 190px;
    }
}

.cat-body--mock {
    padding-top: 1.75rem;
    position: relative;
    z-index: 1;
}

.cat-sidebar--mock {
    width: 262px;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 16px;
    box-shadow: 0 18px 44px -36px rgba(20, 40, 95, .3);
    backdrop-filter: none;
    top: 5.25rem;
}

@media (min-width: 1024px) {
    .cat-sidebar--mock { width: 262px; }
}

.cat-sec__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--b-coffee-faint, #9aa3b0);
    margin-bottom: .6875rem;
}
.cat-sec__label svg { display: none; }

.cat-side-type {
    gap: .4375rem;
}

.cat-side-type__btn {
    justify-content: space-between;
    padding: .625rem .8125rem;
    font-size: var(--ts-md);
    font-weight: 600;
    color: #3a4250;
    background: #f6f8fc;
    border: 1px solid #eef1f6;
    border-radius: 11px;
    font-family: var(--font-body);
}
.cat-side-type__btn svg { display: none; }
.cat-side-type__btn:hover {
    background: #f0f4fa;
}

.cat-side-type__btn--on {
    color: #fff;
    background: #0d1226;
    border-color: #0d1226;
    box-shadow: none;
}

.cat-side-type__btn--on .cat-chip-count {
    background: transparent;
    color: inherit;
    opacity: .85;
}

.cat-chip-count {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    opacity: .85;
}

.cat-input-num {
    padding: .5625rem .6875rem;
    font-size: var(--ts-md);
    border: 1px solid #dde5f0;
    border-radius: 9px;
    color: #1a2a4a;
    background: #fff;
}
.cat-input-num:focus {
    border-color: var(--b-gold, #2f6aff);
    box-shadow: none;
}

.cat-select {
    padding: .625rem .6875rem;
    font-size: var(--ts-md);
    border: 1px solid #dde5f0;
    border-radius: 9px;
    color: #1a2a4a;
    background: #fff;
}
.cat-select:focus {
    border-color: var(--b-gold, #2f6aff);
    box-shadow: none;
}

.cat-price-sep { color: #c2ccda; }

.cat-sidebar--mock > :first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.cat-sec { margin-bottom: 0; }
.cat-filter-group {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.cat-filter-group + .cat-sec,
.cat-sec + .cat-sec,
.cat-sec + .cat-filter-group,
.cat-filter-group + .cat-filter-group {
    margin-top: 0;
    padding-top: 1.125rem;
    border-top: 1px solid #eef1f6;
}

.cat-filter-group__toggle {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    color: var(--b-coffee-faint, #9aa3b0);
    margin-bottom: .6875rem;
}
.cat-filter-group__toggle svg { display: none; }

.cat-filter-item {
    padding: .4375rem .375rem;
    border-radius: 8px;
    font-size: var(--ts-md);
    color: #3a4250;
    gap: .625rem;
}
.cat-filter-item:hover { background: #f5f8fd; }
.cat-filter-item--on {
    color: #3a4250;
    font-weight: 400;
    background: transparent;
}

.cat-filter-item__check {
    width: 17px;
    height: 17px;
    border: 1.6px solid #cdd6e2;
    border-radius: 5px;
    background: #fff;
}
.cat-filter-item--on .cat-filter-item__check {
    background: var(--b-gold, #2f6aff);
    border-color: var(--b-gold, #2f6aff);
}

.cat-sidebar__reset {
    display: block;
    width: 100%;
    margin-top: 1.125rem;
    padding: 0;
    text-align: center;
    font-size: var(--ts-md);
    font-weight: 600;
    color: var(--b-gold, #2f6aff);
    background: none;
    border: none;
    border-radius: 0;
}
.cat-sidebar__reset:hover {
    background: none;
    text-decoration: underline;
}
.cat-sidebar__reset svg { display: none; }

.cat-sidebar__more {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cat-more-border);
}

.cat-sidebar__more summary {
    font-size: var(--ts-xs);
    font-weight: 600;
    color: var(--cat-more-summary);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-ui);
}

.cat-sidebar__more summary::-webkit-details-marker {
    display: none;
}

.cat-filter-group--nested {
    margin-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.cat-chips-row {
    margin-bottom: 1.125rem;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 14px;
    padding: 9px;
    box-shadow: 0 14px 36px -34px rgba(20, 40, 95, .3);
}

.cat-chips-row .cat-chips {
    gap: 7px;
}

.cat-chips-row .cat-chip {
    gap: .5rem;
    padding: .5625rem .9375rem;
    font-size: var(--ts-md);
    font-weight: 600;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: #56617a;
}
.cat-chips-row .cat-chip:hover {
    color: var(--b-gold, #2f6aff);
    background: transparent;
}
.cat-chips-row .cat-chip--active {
    background: var(--b-gold, #2f6aff);
    color: #fff;
    box-shadow: none;
    transform: none;
}
.cat-chips-row .cat-chip--active:hover {
    opacity: .95;
    color: #fff;
    transform: none;
}
.cat-chips-row .cat-chip--active .cat-chip-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    opacity: 1;
    padding: 1px 7px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11.5px;
}

.cat-toolbar {
    margin: 1.125rem .125rem 1rem;
    padding-bottom: 0;
    border-bottom: none;
}

.cat-result-count {
    font-size: var(--ts-md);
    color: #56617a;
}
.cat-result-count strong {
    color: var(--b-coffee, #0d1017);
    font-weight: 700;
}

.cat-select--toolbar {
    min-width: 11rem;
    font-size: var(--ts-md);
    padding: .5625rem .8125rem;
    border: 1px solid #dde5f0;
    border-radius: 10px;
    color: #1a2a4a;
    background: #fff;
}
.cat-sort-label svg { display: none; }

.cat-main-panel--mock,
.cat-main-panel {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.cat-body--mock {
    padding-top: 1.75rem;
    gap: 1.625rem;
    max-width: 1300px;
}

.cat-body {
    gap: 1.625rem;
    max-width: 1300px;
}

.cat-sidebar {
    width: 262px;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 16px;
    box-shadow: 0 18px 44px -36px rgba(20, 40, 95, .3);
    backdrop-filter: none;
    top: 5.25rem;
}
.cat-sidebar:hover {
    box-shadow: 0 18px 44px -36px rgba(20, 40, 95, .3);
}

.cat-pagination {
    gap: .5rem;
    margin-top: 2.125rem;
    padding-top: 0;
    border-top: none;
}

.cat-page-btn {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 1rem;
    font-size: var(--ts-md);
    font-weight: 600;
    color: #3a4250;
    background: #fff;
    border: 1px solid #dde5f0;
    border-radius: 10px;
    font-family: var(--font-body);
}
.cat-page-btn:hover:not(:disabled) {
    border-color: var(--b-gold, #2f6aff);
    background: #fff;
}
.cat-page-btn:disabled {
    opacity: 1;
    color: #c2ccda;
}

.cat-page-num {
    min-width: 40px;
    height: 40px;
    padding: 0 .75rem;
    font-size: var(--ts-md);
    font-weight: 600;
    color: #3a4250;
    background: #fff;
    border: 1px solid #dde5f0;
    border-radius: 10px;
}
.cat-page-num:hover {
    border-color: var(--b-gold, #2f6aff);
    color: #3a4250;
}
.cat-page-num--active {
    color: #fff;
    background: var(--b-gold, #2f6aff);
    border-color: var(--b-gold, #2f6aff);
    box-shadow: none;
}

.cat-page-ellipsis {
    padding: 0 0.25rem;
    color: var(--cat-result-count);
    font-size: var(--ts-md);
    user-select: none;
}

/* ============================================
   CATALOG TYPE TABS
   ============================================ */

/* ============================================
   CATALOG TYPE TABS — Glass style
   ============================================ */

.cat-tabs-wrap {
    position: sticky;
    top: 62px;
    z-index: 42;
    background: var(--cat-sidebar-bg);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--cat-sidebar-border);
    margin: 0 -1.25rem;
    padding: 0;
    transition: background var(--t-base);
}
@media (min-width: 640px) {
    .cat-tabs-wrap { margin-left: -2rem; margin-right: -2rem; }
}
@media (min-width: 1024px) {
    .cat-tabs-wrap { margin-left: -2.5rem; margin-right: -2.5rem; }
}
@media (min-width: 1280px) {
    .cat-tabs-wrap { top: 70px; }
}

.cat-tabs-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
@media (min-width: 640px) {
    .cat-tabs-inner { padding: 0 2rem; }
}
@media (min-width: 1024px) {
    .cat-tabs-inner { padding: 0 2.5rem; }
}

.cat-tabs {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: none;
    padding: .625rem 0 .75rem;
}
.cat-tabs::-webkit-scrollbar { display: none; }

.cat-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem 1rem;
    font-size: var(--ts-sm);
    font-weight: 500;
    color: var(--cat-chip-text);
    background: var(--cat-chip-bg);
    border: 1px solid var(--cat-chip-border);
    border-radius: 9999px;
    cursor: pointer;
    font-family: var(--font-ui);
    white-space: nowrap;
    transition: all var(--t-smooth);
}
.cat-tab:hover { color: var(--lp-accent); background: var(--cat-chip-hover-bg); }

.cat-tab--agent.cat-tab--active,
.cat-tab--tool.cat-tab--active {
    color: #fff;
    background: var(--cat-chip-active-bg);
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(59,130,246,0.25);
}
.cat-tab--agent.cat-tab--active .cat-tab__count,
.cat-tab--tool.cat-tab--active .cat-tab__count {
    background: rgba(255,255,255,.2);
    color: #fff;
}

.cat-tab__count {
    font-size: var(--ts-2xs);
    font-weight: 600;
    padding: .15rem .4rem;
    border-radius: 9999px;
    background: var(--cat-chip-count-bg);
    color: var(--cat-chip-count-text);
    line-height: 1;
}

/* ============================================
   CATALOG BODY (sidebar + grid)
   ============================================ */

/* ============================================
   CATALOG BODY + SIDEBAR — Glass style
   ============================================ */

.cat-body {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

.cat-sidebar {
    flex-shrink: 0;
    width: 228px;
    display: none;
    position: sticky;
    top: 8.5rem;
    padding: 1.125rem 1.125rem;
    background: var(--cat-sidebar-bg);
    border: 1px solid var(--cat-sidebar-border);
    border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    backdrop-filter: var(--cat-sidebar-blur);
    transition: box-shadow var(--t-smooth), background var(--t-base), border-color var(--t-base);
}
.cat-sidebar:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
@media (min-width: 1024px) { .cat-sidebar { display: block; } }
@media (min-width: 1280px) { .cat-sidebar { top: 9.5rem; } }

.cat-filter-group {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--cat-filter-divider);
    padding-bottom: 1rem;
}
.cat-filter-group:last-child { border-bottom: none; margin-bottom: 0; }

.cat-filter-group__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 0;
    font-size: var(--ts-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--cat-sidebar-label);
    cursor: pointer;
    font-family: var(--font-ui);
    margin-bottom: .625rem;
    transition: color var(--t-base);
}
.cat-filter-group__toggle:hover { color: var(--cat-filter-text); }
.cat-filter-group__toggle svg { transition: transform var(--t-smooth); }
.cat-filter-group__toggle svg.rotated { transform: rotate(180deg); }

.cat-filter-group__items {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.cat-filter-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .4rem;
    border-radius: 6px;
    font-size: var(--ts-xs);
    font-family: var(--font-ui);
    color: var(--cat-filter-text);
    cursor: pointer;
    transition: background var(--t-hover), color var(--t-hover);
}
.cat-filter-item:hover { background: var(--cat-filter-hover-bg); }
.cat-filter-item--on { color: var(--cat-filter-active-text); font-weight: 600; background: var(--cat-filter-active-bg); }

.cat-filter-item input[type="checkbox"] { display: none; }

.cat-filter-item__check {
    width: .9375rem;
    height: .9375rem;
    border: 1.5px solid var(--cat-chip-border);
    border-radius: 5px;
    background: var(--cat-input-bg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--t-hover), background var(--t-hover);
}
.cat-filter-item--on .cat-filter-item__check {
    background: var(--cat-filter-check-bg);
    border-color: var(--cat-filter-check-bg);
}
.cat-filter-item--on .cat-filter-item__check::after {
    content: "";
    width: .35rem;
    height: .225rem;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, 0);
    display: block;
}

/* ============================================
   CATALOG MAIN AREA
   ============================================ */

.cat-main { flex: 1; min-width: 0; }

.cat-main-panel {
    background: var(--cat-panel-bg);
    border-radius: 1rem;
    border: 1px solid var(--cat-panel-border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 1.125rem 1.25rem 1.5rem;
    min-width: 0;
    backdrop-filter: var(--cat-sidebar-blur);
    transition: background var(--t-base), border-color var(--t-base);
}
@media (min-width: 640px) {
    .cat-main-panel { padding: 1.25rem 1.375rem 1.75rem; }
}

.cat-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cat-filter-divider);
}

.cat-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: var(--ts-xs);
    font-weight: 500;
    padding: .35rem .8rem;
    border-radius: 9999px;
    border: 1px solid var(--cat-chip-border);
    background: var(--cat-chip-bg);
    color: var(--cat-chip-text);
    cursor: pointer;
    font-family: var(--font-ui);
    transition: all var(--t-smooth);
    line-height: 1;
}
.cat-chip:hover { background: var(--cat-chip-hover-bg); color: var(--lp-accent); }
.cat-chip--active {
    background: var(--cat-chip-active-bg);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 12px rgba(59,130,246,0.25);
    transform: scale(1.02);
}
.cat-chip--active:hover {
    opacity: 0.9;
    color: #fff;
    transform: scale(1.04);
}

.cat-chip--active .cat-chip-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.cat-result-count {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--ts-xs);
    color: var(--cat-result-count);
    white-space: nowrap;
    font-family: var(--font-ui);
}
.cat-result-count svg { opacity: .5; }
.cat-result-count strong { color: var(--cat-hero-accent); }

/* ============================================
   ACTIVE FILTER TAGS
   ============================================ */

.cat-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--cat-filter-divider);
}
.cat-active-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: var(--ts-xs);
    font-weight: 500;
    padding: .25rem .65rem;
    border-radius: 9999px;
    background: var(--cat-chip-hover-bg);
    color: var(--cat-hero-accent);
    border: 1px solid var(--cat-chip-border);
    font-family: var(--font-ui);
    animation: catTagIn .25s ease-out both;
}
.cat-active-tag svg { opacity: .5; }
.cat-active-tag__x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: var(--ts-base);
    line-height: 1;
    padding: 0;
    border-radius: 50%;
    opacity: .6;
    transition: opacity var(--t-base), background var(--t-base);
}
.cat-active-tag__x:hover {
    opacity: 1;
    background: rgba(239,68,68,.15);
    color: #ef4444;
}
@keyframes catTagIn {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* ============================================
   CATALOG GRID
   ============================================ */

.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
    gap: 1.125rem;
    margin-top: 0;
}

@media (min-width: 480px) { .cat-grid { gap: 1.125rem; } }
@media (min-width: 900px) { .cat-grid { gap: 1.125rem; } }

.cat-grid__cell {
    animation: catCardIn .4s cubic-bezier(.22, 1, .36, 1) calc(var(--card-i, 0) * 60ms) both;
}
@keyframes catCardIn {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cat-grid .ui-card {
    position: relative;
    background: #fff;
    border: 1px solid #e3e8f0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: 16px;
    overflow: hidden;
    padding: 1.25rem;
    transition: transform .28s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow .28s ease,
                border-color .28s ease;
}
.cat-grid .ui-card::before {
    opacity: 1;
}
.cat-grid .ui-card::after {
    height: 3px;
    background: var(--card-accent, #2f6aff);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 1;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.cat-grid .ui-card:hover {
    box-shadow: 0 28px 54px -26px color-mix(in srgb, var(--card-accent, #2f6aff) 40%, transparent);
    transform: translateY(-7px) scale(1.018);
    border-color: var(--card-accent, #2f6aff);
}
.cat-grid .ui-card:hover::after {
    transform: scaleX(1);
}
.cat-grid .ui-card:hover .ui-card__icon {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 12px 22px -8px var(--card-accent, #2f6aff);
}
.cat-grid .ui-card .ui-card__name {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--b-coffee, #0d1017);
}
.cat-grid .ui-card .ui-card__desc { color: #56617a; }
.cat-grid .ui-card .ui-card__creator { color: var(--b-coffee-faint, #9aa3b0); }
.cat-grid .ui-card .ui-card__tag {
    background: #f2f5f9;
    color: #5b6470;
    border: none;
}
.cat-grid .ui-card .ui-card__stats {
    border-top: 1px solid #eef1f6;
    margin-top: .6875rem;
    padding-top: .6875rem;
    gap: .9375rem;
}
.cat-grid .ui-card .ui-card__stat {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--b-coffee-faint, #9aa3b0);
}
.cat-grid .ui-card .ui-card__pill--chat {
    background: var(--b-type-tool-soft, #eaf0ff);
    color: var(--b-gold, #2f6aff);
    border: none;
}
.cat-grid .ui-card .ui-card__pill--chat:hover {
    background: var(--b-gold, #2f6aff);
    color: #fff;
}
.cat-grid .ui-card .ui-card__pill--fav-on {
    background: #fff;
    border-color: var(--b-gold, #2f6aff);
    color: var(--b-gold, #2f6aff);
}

/* ============================================
   LOADING STATE
   ============================================ */

.cat-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 5rem 2rem;
    color: var(--cat-loading-text);
    font-size: var(--ts-base);
    font-family: var(--font-ui);
    animation: catLoadFade .4s ease-out;
}
@keyframes catLoadFade { from { opacity: 0; } to { opacity: 1; } }

.cat-loading__spinner {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    border: 3px solid var(--cat-chip-border);
    border-top-color: var(--lp-accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.cat-loading__spinner::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 2px solid transparent;
    border-bottom-color: var(--cat-hero-accent);
    border-radius: 50%;
    animation: spin 1.2s linear infinite reverse;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================
   EMPTY STATE
   ============================================ */

.cat-empty {
    background: #fff;
    border: 1px dashed #cdd8ea;
    border-radius: 16px;
    padding: 4rem 2rem;
    gap: .5rem;
}

.cat-empty p {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--b-coffee, #0d1017);
    margin: .5rem 0 0;
}

.cat-empty span {
    font-size: var(--ts-md);
    color: #56617a;
    max-width: 24rem;
}

.cat-empty__reset {
    margin-top: 1.125rem;
    padding: 0 1.25rem;
    height: 42px;
    background: var(--b-gold, #2f6aff);
    color: #fff;
    border: none;
    border-radius: 11px;
    font-size: var(--ts-md);
    font-weight: 600;
    font-family: var(--font-body);
    box-shadow: none;
}
.cat-empty__reset:hover {
    opacity: .92;
    transform: none;
}

.ui-card__stats {
    display: flex;
    gap: .9375rem;
    margin: .6875rem 0 0;
    padding-top: .6875rem;
    border-top: 1px solid #eef1f6;
}

.ui-card__stat {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--b-coffee-faint, #9aa3b0);
}
.ui-card__stat svg { display: none; }

/* ============================================
   CATALOG SIDEBAR — reset button
   ============================================ */

.cat-sidebar__reset {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: var(--ts-xs);
    font-weight: 500;
    color: var(--cat-reset-text);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-ui);
    padding: .4rem .5rem;
    transition: all var(--t-base);
    margin-top: .375rem;
    border-radius: 8px;
}
.cat-sidebar__reset:hover { background: var(--cat-reset-hover-bg); opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   FAI HUB — каталог агентов (scoped overrides)
   ═══════════════════════════════════════════════════════════════════ */

.cat-page .cat-hero__inner--mock {
    max-width: 1300px;
    gap: 2.5rem;
}

@media (min-width: 900px) {
    .cat-page .cat-hero__inner--mock {
        grid-template-columns: 1fr 230px;
    }
}

.cat-page .cat-hero-sphere {
    transform: scale(1.85);
    filter: drop-shadow(0 28px 56px -22px rgba(20, 50, 140, .6));
}

@media (min-width: 1100px) {
    .cat-page .cat-hero-sphere {
        transform: scale(2.05);
    }
}

.cat-page .cat-aurora { display: none; }

.cat-page .cat-chip-count {
    font-family: var(--font-mono);
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .cat-hero.cat-hero--mock::before { animation: none !important; }
    .cat-grid .ui-card,
    .ui-card,
    .ui-card__icon { transition: none !important; }
}

/* ============================================



/* ── components/models.css ── */
/* ═══════════════════════════════════════════════════════════════════
   FAI HUB — Каталог Models & MCP (Models.razor, Mcp.razor)
   Light-only · accent #2f6aff · bg #eef3fb
   ═══════════════════════════════════════════════════════════════════ */

.ui-models-page {
    --fai-accent: #2f6aff;
    --fai-accent-soft: #eaf0ff;
    --fai-bg: #eef3fb;
    --fai-ink: #0d1017;
    --fai-text: #48526a;
    --fai-muted: #626b78;
    --fai-faint: #9aa3b0;
    --fai-border: #e3e8f0;
    --fai-border-soft: #dde5f0;
    --fai-card: #fff;
    --fai-search-bg: #f5f8fd;
    --fai-radius: 15px;
    --fai-radius-sm: 10px;
    --fai-shadow: 0 14px 36px -34px rgba(20, 40, 95, 0.3);
    --fai-shadow-hover: 0 22px 46px -30px rgba(20, 40, 95, 0.4);

    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 100vh;
    background: var(--fai-bg);
    color: var(--fai-ink);
    font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}

html:has(.ui-models-page),
body:has(.ui-models-page) {
    overflow-x: hidden;
}

@keyframes ui-models-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(34px, -24px) scale(1.12); }
}

@keyframes ui-models-reveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* ── Hero ── */
.ui-models-hero-wrap {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--fai-border);
}

.ui-models-hero-wrap::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -70px;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 106, 255, 0.13), transparent 62%);
    filter: blur(70px);
    animation: ui-models-float 28s ease-in-out infinite;
    pointer-events: none;
}

.ui-models-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 32px 72px;
}

.ui-models-hero {
    max-width: 1300px;
    margin: 0 auto;
    padding: 50px 32px 34px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.ui-models-hero__eyebrow {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--fai-accent);
    font-weight: 600;
    margin: 0 0 11px;
    text-transform: uppercase;
}

.ui-models-hero__title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: clamp(38px, 4.6vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0;
    color: var(--fai-ink);
}

.ui-models-hero__lead {
    font-size: 17px;
    line-height: 1.55;
    color: var(--fai-text);
    max-width: 640px;
    margin: 14px 0 0;
}

.ui-models-hero__side {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ui-models-hero__count {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 15px;
    font-weight: 600;
    color: #56617a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ui-models-refresh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--fai-border-soft);
    background: var(--fai-card);
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    color: #3a4250;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.ui-models-refresh:hover:not(:disabled) {
    border-color: var(--fai-accent);
    color: var(--fai-accent);
}

.ui-models-refresh:disabled {
    opacity: 0.55;
    cursor: default;
}

/* ── Controls ── */
.ui-models-controls {
    padding-top: 24px;
}

.ui-models-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ui-tier-pill {
    padding: 9px 17px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    color: #3a4250;
    background: var(--fai-card);
    border: 1px solid var(--fai-border-soft);
    transition: all 0.15s ease;
}

.ui-tier-pill:hover {
    border-color: #cdd8ea;
}

.ui-tier-pill--on {
    background: var(--fai-accent);
    color: #fff;
    border-color: var(--fai-accent);
}

.ui-models-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    background: var(--fai-card);
    border: 1px solid var(--fai-border);
    border-radius: 14px;
    padding: 13px 16px;
    margin-top: 16px;
    box-shadow: var(--fai-shadow);
}

.ui-models-filters__search {
    flex: 1;
    min-width: 230px;
}

.ui-models-filters__free {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #3a4250;
}

/* MudBlazor overrides inside filter bar */
.ui-models-filters .mud-input-root {
    margin: 0;
}

.ui-models-filters .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--fai-border-soft);
    border-radius: var(--fai-radius-sm);
}

.ui-models-filters .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #cdd8ea;
}

.ui-models-filters .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--fai-accent);
}

.ui-models-filters .mud-input-root .mud-input-slot {
    font-size: 13.5px;
    color: #1a2a4a;
}

.ui-models-filters .mud-input-label {
    font-size: 13px;
    color: var(--fai-muted);
}

.ui-models-filters .mud-select {
    min-width: 150px;
}

.ui-models-filters .mud-switch .mud-switch-span-medium {
    width: 38px;
    height: 22px;
}

.ui-models-filters .mud-switch-span-medium.mud-switch-span-medium {
    background: #cdd6e2;
}

.ui-models-filters .mud-switch .mud-switch-input:checked ~ .mud-switch-span-medium {
    background: var(--fai-accent);
}

.ui-models-loading {
    margin: 24px 0;
}

.ui-models-loading .mud-progress-linear {
    border-radius: 999px;
    overflow: hidden;
}

/* ── Cohort (provider / category section) ── */
.ui-models-body {
    padding-top: 14px;
}

.ui-cohort {
    margin-top: 30px;
}

.ui-cohort__head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
}

.ui-cohort__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 15px;
    color: var(--fai-accent);
    background: var(--fai-accent-soft);
    flex-shrink: 0;
}

.ui-cohort__title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fai-ink);
    margin: 0;
    text-transform: capitalize;
}

.ui-cohort__count {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 13px;
    color: var(--fai-faint);
    font-variant-numeric: tabular-nums;
}

.ui-cohort__rule {
    flex: 1;
    height: 1px;
    background: #dde4ef;
}

.ui-cohort__all {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fai-accent);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    padding: 0;
}

.ui-cohort__all:hover {
    text-decoration: underline;
}

/* ── Grid & cards ── */
.ui-models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
}

.ui-mcard {
    display: flex;
    flex-direction: column;
    background: var(--fai-card);
    border: 1px solid var(--fai-border);
    border-radius: var(--fai-radius);
    padding: 18px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    animation: ui-models-reveal 0.45s ease both;
}

.ui-mcard:hover {
    transform: translateY(-3px);
    border-color: #cdd8ea;
    box-shadow: var(--fai-shadow-hover);
}

.ui-models-grid--mcp {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.ui-mcard__header {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.ui-mcard__header--mcp {
    justify-content: space-between;
}

.ui-mcard__icon--lg {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 17px;
}

.ui-mcard__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    background: var(--fai-accent);
    flex-shrink: 0;
}

.ui-mcard__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.ui-mcard__tier {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 6px;
}

.ui-mcard__tier--flagship {
    color: #d98324;
    background: #fbf0e0;
}

.ui-mcard__tier--advanced {
    color: #7c5cff;
    background: #efeaff;
}

.ui-mcard__tier--basic,
.ui-mcard__tier--community {
    color: #5b6470;
    background: #eef1f6;
}

.ui-mcard__tier--official {
    color: #0e7a66;
    background: #e3f6f1;
}

.ui-mcard__badge {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: #5b6470;
    background: #f2f5f9;
    padding: 4px 8px;
    border-radius: 6px;
}

.ui-mcard__name {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fai-ink);
    margin: 14px 0 0;
    line-height: 1.25;
}

.ui-mcard__id {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    color: var(--fai-faint);
    word-break: break-all;
    margin: 3px 0 0;
}

.ui-mcard__desc {
    font-size: 13px;
    line-height: 1.5;
    color: #56617a;
    margin: 10px 0 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ui-mcard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef1f6;
}

.ui-mcard__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fai-ink);
}

.ui-mcard__stars { display: inline-flex; gap: 1px; }

.ui-mcard__rating strong {
    font-weight: 700;
    color: #1a2a4a;
    font-variant-numeric: tabular-nums;
}

.ui-mcard__price {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1a2a4a;
    font-variant-numeric: tabular-nums;
}

.ui-mcard__price--free {
    color: #0e7a66;
}

.ui-mcard__price--vendor {
    font-size: 12.5px;
    font-weight: 600;
    color: #56617a;
}

.ui-mcard__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.ui-mcard__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--fai-faint);
}

.ui-mcard__stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.ui-mcard__stat svg { opacity: 0.85; }

.ui-mcard__more {
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fai-accent);
}

.ui-mcard:hover .ui-mcard__more {
    text-decoration: underline;
}

/* ── Empty / alert states ── */
.ui-models-empty {
    background: var(--fai-card);
    border: 1px dashed #cdd8ea;
    border-radius: 16px;
    padding: 60px 32px;
    text-align: center;
    margin-top: 24px;
}

.ui-models-empty__title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--fai-ink);
    margin: 0;
}

.ui-models-empty__text {
    font-size: 14.5px;
    color: #56617a;
    margin: 8px 0 0;
}

.ui-models-alert {
    background: #fff7ec;
    border: 1px solid #f5e2c4;
    border-radius: 11px;
    padding: 14px 16px;
    margin-top: 24px;
    font-size: 14px;
    color: #7a5a2e;
    line-height: 1.5;
}

/* ── Details dialog (unchanged structure, FAI tokens) ── */
.ui-mdlg__title { display: flex; align-items: center; gap: 0.7rem; }

.ui-mdlg__avatar {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.7rem;
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    background: var(--fai-accent);
    flex-shrink: 0;
}

.ui-mdlg__title-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ui-mdlg__name { font-size: 1.05rem; font-weight: 800; color: var(--fai-ink); line-height: 1.2; }
.ui-mdlg__id {
    font-size: 0.76rem;
    color: var(--fai-faint);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    word-break: break-all;
}

.ui-mdlg__score {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--fai-ink);
    font-variant-numeric: tabular-nums;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--fai-accent-soft);
    flex-shrink: 0;
}

.ui-mdlg { display: flex; flex-direction: column; gap: 0.9rem; }

.ui-mdlg__hero {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

@media (max-width: 600px) {
    .ui-mdlg__hero { grid-template-columns: repeat(2, 1fr); }
}

.ui-mdlg__metric {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--fai-border);
    border-radius: 0.75rem;
    background: var(--fai-search-bg);
}

.ui-mdlg__metric-k {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fai-faint);
}

.ui-mdlg__metric-v {
    font-size: 1rem;
    font-weight: 800;
    color: var(--fai-ink);
    font-variant-numeric: tabular-nums;
}

.ui-mdlg__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ui-mdlg__panel { padding-top: 1rem; }

.ui-mchat { display: flex; flex-direction: column; gap: 0.6rem; }

.ui-mchat__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--fai-muted);
}

.ui-mchat__bal { display: inline-flex; align-items: center; gap: 0.35rem; }
.ui-mchat__bal strong { color: var(--fai-ink); font-variant-numeric: tabular-nums; }
.ui-mchat__meter { color: var(--fai-faint); }
.ui-mchat__free { color: #0e7a66; font-weight: 700; }

.ui-mchat__cost {
    font-size: 0.72rem;
    color: var(--fai-faint);
    font-variant-numeric: tabular-nums;
}

.ui-mchat__log {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 220px;
    max-height: 46vh;
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--fai-border);
    border-radius: 1rem;
    background: var(--fai-search-bg);
}

.ui-mchat__empty {
    margin: auto;
    text-align: center;
    color: var(--fai-faint);
    max-width: 38ch;
}

.ui-mchat__empty p { margin: 0.4rem 0 0; font-size: 0.9rem; }
.ui-mchat__hint { font-size: 0.8rem !important; opacity: 0.8; }

.ui-mchat__msg { display: flex; flex-direction: column; gap: 0.25rem; max-width: 85%; }
.ui-mchat__msg--user { align-self: flex-end; align-items: flex-end; }
.ui-mchat__msg--assistant { align-self: flex-start; align-items: flex-start; }

.ui-mchat__role {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fai-faint);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ui-mchat__bubble {
    padding: 0.6rem 0.85rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--fai-border);
    background: var(--fai-card);
    color: var(--fai-ink);
}

.ui-mchat__msg--user .ui-mchat__bubble {
    background: var(--fai-accent-soft);
    border-color: #cfe0ff;
}

.ui-mchat__typing { display: inline-flex; gap: 0.25rem; padding: 0.15rem 0; }

.ui-mchat__typing span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--fai-faint);
    animation: ui-mchat-bounce 1.2s infinite ease-in-out;
}

.ui-mchat__typing span:nth-child(2) { animation-delay: 0.15s; }
.ui-mchat__typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ui-mchat-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-0.3rem); opacity: 1; }
}

.ui-mchat__input { display: flex; align-items: flex-end; gap: 0.6rem; }
.ui-mchat__field { flex: 1; }

.ui-mchat__clear {
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fai-faint);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.ui-mchat__clear:hover:not(:disabled) { color: var(--fai-ink); text-decoration: underline; }
.ui-mchat__clear:disabled { opacity: 0.5; cursor: default; }

.ui-model-dlg__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }

.ui-model-dlg__desc {
    color: var(--fai-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 0.5rem;
}

.ui-model-dlg__h {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fai-accent);
    margin: 0.9rem 0 0.35rem;
}

.ui-model-dlg__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem 0.75rem;
}

@media (max-width: 560px) {
    .ui-model-dlg__grid { grid-template-columns: 1fr; }
}

.ui-model-dlg__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.3rem 0;
    border-bottom: 1px dashed var(--fai-border);
}

.ui-model-dlg__row-k { font-size: 0.82rem; color: var(--fai-faint); }
.ui-model-dlg__row-v {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fai-ink);
    text-align: right;
    word-break: break-word;
}

.ui-model-dlg__params { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ── Responsive ── */
@media (max-width: 960px) {
    .ui-models-inner,
    .ui-models-hero { padding-left: 20px; padding-right: 20px; }
    .ui-models-filters .mud-select { min-width: 130px; }
}

@media (max-width: 640px) {
    .ui-models-hero { padding-top: 36px; }
    .ui-models-hero__side { width: 100%; justify-content: space-between; }
    .ui-models-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-models-hero-wrap::before,
    .ui-mcard { animation: none !important; }
}



/* ── components/assembly-listing.css ── */
/* ══════════════════════════════════════════════════════════════════
   FAI HUB — страница /assemblies (Assemblies.razor)
   Light-only · accent #2f6aff · bg #eef3fb
   ══════════════════════════════════════════════════════════════════ */

.asmx {
    --asmx-accent: #2f6aff;
    --asmx-accent-soft: #eaf0ff;
    --asmx-bg: #eef3fb;
    --asmx-ink: #0d1017;
    --asmx-text: #48526a;
    --asmx-muted: #626b78;
    --asmx-faint: #9aa3b0;
    --asmx-border: #e3e8f0;
    --asmx-border-soft: #dde4ef;
    --asmx-card: #fff;
    --asmx-success: #0e7a66;
    --asmx-success-soft: #e3f6f1;
    --asmx-break: #c79a3a;
    --asmx-break-rgb: 199, 154, 58;
    --asmx-primary: #0fa389;
    --asmx-primary-rgb: 15, 163, 137;
    --asmx-shadow: 0 26px 56px -40px rgba(20, 40, 95, 0.4);
    --asmx-shadow-hover: 0 22px 46px -30px rgba(20, 40, 95, 0.4);

    position: relative;
    min-height: 100vh;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--asmx-bg);
    color: var(--asmx-text);
    padding: 0 max(24px, calc((100vw - 1240px) / 2)) 96px;
    overflow-x: hidden;
    font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}

html:has(.asmx),
body:has(.asmx) {
    overflow-x: hidden;
}

@keyframes asmx-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(34px, -24px) scale(1.12); }
}

@keyframes asmx-reveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes asmx-tok {
    0%   { left: 0; }
    45%  { left: calc(100% - 14px); }
    55%  { left: calc(100% - 14px); }
    100% { left: 0; opacity: 0; }
}

@keyframes asmxBreakPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(47, 106, 255, 0.4); }
    55%      { box-shadow: 0 0 0 8px rgba(47, 106, 255, 0); }
}

/* ── Background ── */
.asmx__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.asmx__bg-grid { display: none; }

.asmx__bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    pointer-events: none;
}

.asmx__bg-glow--a {
    top: -150px;
    left: -70px;
    width: 42vw;
    height: 42vw;
    background: radial-gradient(circle, rgba(47, 106, 255, 0.12), transparent 62%);
    animation: asmx-float 28s ease-in-out infinite;
}

.asmx__bg-glow--b { display: none; }

.asmx > *:not(.asmx__bg) { position: relative; z-index: 1; }

/* ── Hero ── */
.asmx__hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--asmx-border);
    padding: 54px 0 14px;
}

.asmx__hero-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: center;
    margin-top: 24px;
}

.asmx__hero-visual {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #d8e2f2;
    box-shadow: 0 30px 60px -36px rgba(20, 40, 95, 0.4);
    background: linear-gradient(145deg, #eaf0ff 0%, #f5f8fd 100%);
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asmx__hero-visual .agent-sphere-wrap,
.asmx__hero-visual canvas {
    transform: scale(1.15);
}

.asmx__hero-caption {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: #8a98b2;
    margin-top: 12px;
    line-height: 1.5;
}

.asmx__hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--asmx-accent);
    font-weight: 600;
    margin-bottom: 0;
}

.asmx__hero-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--asmx-accent);
    box-shadow: 0 0 10px 1px var(--asmx-accent);
}

.asmx__hero-title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--asmx-ink);
}

.asmx__hero-title em {
    font-style: normal;
    color: var(--asmx-accent);
}

.asmx__hero-sub {
    font-size: 18px;
    line-height: 1.55;
    color: var(--asmx-text);
    max-width: 540px;
    margin: 18px 0 0;
}

.asmx__hero-sub b {
    color: #1a2a4a;
    font-weight: 600;
}

/* Legacy hero num — hidden in FAI layout */
.asmx__hero-num { display: none; }

/* ── Manifest benefits strip ── */
.asmx__manifest {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    margin-top: 40px;
    border-top: 1px solid var(--asmx-border-soft);
}

.asmx__manifest-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 24px 8px;
    border-right: 1px solid var(--asmx-border-soft);
}

.asmx__manifest-item:last-child {
    border-right: none;
}

.asmx__manifest-stat {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 34px;
    font-weight: 700;
    color: var(--asmx-accent);
    line-height: 1;
    min-width: auto;
}

.asmx__manifest-item--ctx .asmx__manifest-stat,
.asmx__manifest-item--miss .asmx__manifest-stat,
.asmx__manifest-item--slow .asmx__manifest-stat {
    color: var(--asmx-accent);
}

.asmx__manifest-text {
    font-size: 14px;
    line-height: 1.45;
    color: #56617a;
}

.asmx__manifest-text b {
    color: #1a2a4a;
    font-weight: 600;
}

.asmx__manifest-divider { display: none; }

/* ── Rails list ── */
.asmx__rails {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
}

.asmx__rail {
    background: var(--asmx-card);
    border: 1px solid var(--asmx-border);
    border-radius: 20px;
    padding: 30px 34px;
    box-shadow: var(--asmx-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    animation: asmx-reveal 0.45s ease both;
}

.asmx__rail::before { display: none; }

.asmx__rail:hover {
    transform: translateY(-3px);
    border-color: #cdd8ea;
    box-shadow: var(--asmx-shadow-hover);
}

.asmx__rail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 0;
    border-bottom: none;
}

.asmx__rail-idx { display: none; }

.asmx__rail-cat {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7c5cff;
    margin-bottom: 7px;
}

.asmx__rail-name {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 7px;
    color: var(--asmx-ink);
}

.asmx__rail-desc {
    font-size: 14.5px;
    line-height: 1.55;
    color: #56617a;
    margin: 0;
    max-width: 660px;
}

.asmx__rail-price {
    text-align: right;
    line-height: 1;
    flex-shrink: 0;
}

.asmx__rail-price-vs {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--asmx-faint);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.asmx__rail-price-vs s {
    color: var(--asmx-faint);
    text-decoration: line-through;
}

.asmx__rail-price-mas {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--asmx-ink);
    margin-bottom: 8px;
}

.asmx__rail-price-cur {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin-right: 0;
    vertical-align: baseline;
}

.asmx__rail-price-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--asmx-success);
    background: var(--asmx-success-soft);
    border: none;
    border-radius: 999px;
    padding: 5px 11px;
}

.asmx__rail-divider {
    height: 1px;
    background: #eef1f6;
    margin: 0 0 24px;
}

/* ── Pipeline rows ── */
.asmx__pipe {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 0;
}

.asmx__pipe-row {
    display: grid;
    grid-template-columns: 96px 1fr 150px;
    gap: 18px;
    align-items: center;
    min-height: 44px;
}

.asmx__pipe-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 13px;
    border-radius: 8px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.asmx__pipe-tag--mas {
    color: var(--asmx-accent);
    background: var(--asmx-accent-soft);
    border: 1px solid #cfe0ff;
}

.asmx__pipe-tag--rival {
    color: #7e8aa0;
    background: var(--asmx-card);
    border: 1px solid var(--asmx-border-soft);
}

.asmx__pipe-track {
    position: relative;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.asmx__pipe-line {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #0fa389, var(--asmx-accent), #7c5cff);
    border-radius: 2px;
    z-index: 0;
}

.asmx__pipe-line--rival {
    background: #e3e8f0;
}

.asmx__pipe-node {
    position: relative;
    z-index: 1;
    transform: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    cursor: help;
    transition: transform 0.15s ease;
}

.asmx__pipe-node:hover { transform: scale(1.12); }

.asmx__pipe-node--ok {
    color: #fff;
    background: var(--node-clr, var(--asmx-primary));
    border: 2px solid var(--node-clr, var(--asmx-primary));
    box-shadow: 0 4px 10px -3px var(--node-clr, var(--asmx-primary));
}

.asmx__pipe-node-num { text-shadow: none; }

.asmx__pipe-node--rival-ok {
    width: 30px;
    height: 30px;
    background: #c9d2df;
    border: 2px solid #c9d2df;
    box-shadow: none;
}

.asmx__pipe-node--break {
    width: 30px;
    height: 30px;
    background: var(--asmx-card);
    color: var(--asmx-break);
    border: 2px solid #e0c060;
    box-shadow: 0 0 0 4px rgba(217, 163, 30, 0.12);
    animation: none;
}

.asmx__pipe-node--break svg { color: var(--asmx-break); }

.asmx__pipe-node--lost {
    width: 30px;
    height: 30px;
    background: var(--asmx-card);
    border: 2px solid #e3e8f0;
    opacity: 0.7;
}

.asmx__pipe-end {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    padding-left: 0;
}

.asmx__pipe-end--ok {
    color: var(--asmx-success);
    text-transform: none;
    letter-spacing: normal;
    font-size: 13.5px;
}

.asmx__pipe-end--rival {
    color: #9a7b2e;
    font-weight: 600;
}

/* ── Tiers footer ── */
.asmx__tiers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding-top: 20px;
    margin-top: 24px;
    border-top: 1px solid #eef1f6;
}

.asmx__tier {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--asmx-muted);
    padding: 5px 12px;
    background: #f2f5f9;
    border: none;
    border-radius: 999px;
}

.asmx__tier-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tier-clr, var(--asmx-accent));
    box-shadow: none;
}

.asmx__tier-sep { flex: 1; }

.asmx__tier-meta {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11.5px;
    color: var(--asmx-faint);
    font-variant-numeric: tabular-nums;
}

.asmx__tier-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: var(--asmx-accent);
    border: 1px solid #cfe0ff;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.asmx__tier-cta:hover {
    background: var(--asmx-accent);
    border-color: var(--asmx-accent);
    color: #fff;
    transform: none;
}

/* ── CTA add block ── */
.asmx__add {
    margin-top: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 24px 32px;
    background: var(--asmx-card);
    border: 1px solid var(--asmx-border);
    border-radius: 16px;
    box-shadow: var(--asmx-shadow);
}

.asmx__add-l { display: flex; align-items: center; gap: 18px; }

.asmx__add-plus {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 300;
    color: var(--asmx-accent);
    background: var(--asmx-accent-soft);
    border: 1px solid #cfe0ff;
}

.asmx__add-title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--asmx-ink);
    margin-bottom: 3px;
}

.asmx__add-sub {
    font-size: 14px;
    line-height: 1.55;
    color: #56617a;
    max-width: 640px;
}

.asmx__add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--asmx-accent);
    color: #fff;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    transition: filter 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.asmx__add-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    color: #fff;
    box-shadow: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .asmx__hero-grid { grid-template-columns: 1fr; }
    .asmx__hero-visual { min-height: 180px; }
    .asmx__manifest { grid-template-columns: 1fr; }
    .asmx__manifest-item { border-right: none; border-bottom: 1px solid var(--asmx-border-soft); }
    .asmx__manifest-item:last-child { border-bottom: none; }
    .asmx__pipe-row { grid-template-columns: 80px 1fr; }
    .asmx__pipe-end { display: none; }
}

@media (max-width: 720px) {
    .asmx { padding-left: 16px; padding-right: 16px; padding-bottom: 64px; }
    .asmx__rail { padding: 22px 20px; }
    .asmx__rail-head { flex-direction: column; }
    .asmx__rail-price { text-align: left; }
    .asmx__rail-name { font-size: 22px; }
    .asmx__add { flex-direction: column; align-items: stretch; text-align: center; }
    .asmx__add-l { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .asmx__bg-glow--a,
    .asmx__rail { animation: none !important; }
}



/* ── components/assembly-detail.css ── */
/* ===================================================
   FEATURE 18: ASSEMBLY DETAIL — /assemblies/{slug}
   asm-not-found / asm-detail / asm-pipeline / asm-compare
   Светлая тема по умолчанию, [data-theme=dark] — тёмный вариант.
   =================================================== */
/* ══════════════════════════════════════════════════════════════════
   ФИЧА 18: Сборки агентов (Assemblies)
   ──────────────────────────────────────────────────────────────────
   Раньше тут жил блок .asm-page / .asm-aurora / .asm-hero / .asm-grid /
   .asm-card / .asm-add-cta — старая dark-only витрина. Заменена на
   .asmx («гонка пайплайнов», см. ниже) ещё на этапе v2 редизайна.
   Класс .asm-page в актуальной разметке больше не используется, поэтому
   мёртвый код удалён, чтобы не висеть лишним грузом и не зашумлять
   поиск по фирменной палитре.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   DETAIL PAGE — двухтемная страница /assemblies/{slug}.

   Использует семантические --asmd-* токены, привязанные к brand atomic
   (--b-* в _tokens.css). Дефолт = light (кремово-золото),
   [data-theme="dark"] .asm-detail = аэро-вариант.
   Это даёт автоматическое следование глобальной теме.
   ══════════════════════════════════════════════════════════════════ */

/* ══ DETAIL PAGE — FAI HUB light ══ */
.asm-detail {
    --asmd-bg:           #eef3fb;
    --asmd-surface:      #fff;
    --asmd-surface-hi:   #fff;
    --asmd-text-strong:  #0d1017;
    --asmd-text:         #33425e;
    --asmd-muted:        #626b78;
    --asmd-faint:        #9aa3b0;
    --asmd-border:       #e5e8ee;
    --asmd-border-hi:    #e3e8f0;
    --asmd-accent:       #2f6aff;
    --asmd-accent-rgb:   47, 106, 255;
    --asmd-accent-hover: #2558d9;
    --asmd-accent-soft:  #eaf0ff;
    --asmd-success:      #0fa389;
    --asmd-success-rgb:  15, 163, 137;
    --asmd-success-soft: #e8f7f2;
    --asmd-warn:         #f5a623;
    --asmd-warn-rgb:     245, 166, 35;
    --asmd-error:        #e5484d;
    --asmd-error-rgb:    229, 72, 77;
    --asmd-on-accent:    #fff;
    --asmd-card-shadow:  0 20px 48px -40px rgba(20, 40, 95, 0.35);
    --asmd-font-display: 'Space Grotesk', system-ui, sans-serif;
    --asmd-font-body:    'Hanken Grotesk', system-ui, sans-serif;
    --asmd-font-mono:    'JetBrains Mono', ui-monospace, monospace;

    max-width: 1240px;
    margin: 0 auto;
    padding: 18px 32px 96px;
    min-height: 100vh;
    background: var(--asmd-bg);
    box-shadow: 0 0 0 100vmax var(--asmd-bg);
    clip-path: inset(0 -100vmax);
    color: var(--asmd-text);
    font-family: var(--asmd-font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.asm-not-found {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--asmd-muted);
    background: #eef3fb;
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

.asm-not-found a { color: #2f6aff; text-decoration: none; font-weight: 600; }

.asm-detail__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-family: var(--asmd-font-mono);
    font-size: 12.5px;
}
.asm-detail__back {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #8a98b2;
    text-decoration: none;
    transition: color 0.15s;
}
.asm-detail__back:hover { color: var(--asmd-accent); }

.asm-detail__cat-pill {
    background: var(--asmd-accent-soft);
    border: 1px solid color-mix(in srgb, var(--cat-clr, var(--asmd-accent)) 25%, transparent);
    color: var(--cat-clr, var(--asmd-accent));
    border-radius: 8px;
    padding: 5px 11px;
    font-family: var(--asmd-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.asm-detail__h1 {
    font-family: var(--asmd-font-display);
    font-size: clamp(36px, 4.2vw, 50px);
    font-weight: 700;
    color: var(--asmd-text-strong);
    margin: 0 0 10px;
    line-height: 1.06;
    letter-spacing: -0.035em;
}
.asm-detail__sub {
    font-size: 19px;
    color: #1a2a4a;
    line-height: 1.45;
    font-weight: 500;
    margin: 0 0 28px;
    max-width: 660px;
}

/* Stats row */
.asm-detail__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}
.asm-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--asmd-surface);
    border: 1px solid var(--asmd-border-hi);
    border-radius: 18px;
    padding: 14px 18px;
    min-width: 90px;
    gap: 2px;
    box-shadow: var(--asmd-card-shadow);
}
.asm-stat--accent {
    background: var(--asmd-accent-soft);
    border-color: color-mix(in srgb, var(--asmd-accent) 22%, transparent);
}
.asm-stat--save {
    background: var(--asmd-success-soft);
    border-color: color-mix(in srgb, var(--asmd-success) 22%, transparent);
}
.asm-stat__val {
    font-family: var(--asmd-font-display);
    font-size: 23px;
    font-weight: 700;
    color: var(--asmd-text-strong);
    white-space: nowrap;
    letter-spacing: -0.02em;
}
.asm-stat--accent .asm-stat__val { color: var(--asmd-accent); }
.asm-stat--save .asm-stat__val   { color: var(--asmd-success); }
.asm-stat__label {
    font-family: var(--asmd-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--asmd-faint);
    text-align: center;
}

.asm-detail__full-desc {
    font-size: 15.5px;
    color: #56617a;
    line-height: 1.65;
    margin: 0 0 40px;
    max-width: 640px;
}

/* Section titles */
.asm-section-title {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--asmd-font-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--asmd-text-strong);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.asm-section-title svg {
    width: 32px;
    height: 32px;
    padding: 7px;
    border-radius: 9px;
    background: var(--asmd-accent-soft);
    color: var(--asmd-accent);
    flex-shrink: 0;
    box-sizing: border-box;
}
.asm-section-hint {
    font-size: 14.5px;
    color: #56617a;
    margin: 0 0 24px;
    line-height: 1.55;
}

/* Pipeline */
.asm-pipeline { margin-bottom: 48px; }

.asm-pipeline__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.asm-pipeline__item {
    display: flex;
    flex-direction: column;
}

.asm-pipeline__connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px 0;
    gap: 0;
}
.asm-pipeline__connector-line {
    width: 2px;
    height: 20px;
    background: rgba(var(--asmd-accent-rgb), 0.30);
}
.asm-pipeline__connector-arrow {
    color: rgba(var(--asmd-accent-rgb), 0.6);
}

.asm-pipeline__card {
    background: var(--asmd-surface);
    border: 1px solid var(--asmd-border-hi);
    border-radius: 18px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--asmd-card-shadow);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.asm-pipeline__card:hover {
    border-color: color-mix(in srgb, var(--asmd-accent) 30%, var(--asmd-border-hi));
    box-shadow: 0 24px 52px -36px rgba(20, 40, 95, 0.45);
}

.asm-pipeline__card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.asm-pipeline__step-num {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--step-clr) 15%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--step-clr) 35%, transparent);
    color: var(--step-clr);
    font-size: var(--ts-base);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.asm-pipeline__agent-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.asm-pipeline__agent-name {
    font-size: var(--ts-md);
    font-weight: 600;
    color: var(--asmd-text-strong);
}
.asm-pipeline__purpose {
    font-size: var(--ts-xs);
    color: var(--asmd-muted);
    line-height: 1.4;
}

.asm-pipeline__output-badge {
    background: var(--asmd-bg);
    border: 1px solid var(--asmd-border);
    border-radius: 6px;
    padding: 2px 8px;
    font-family: var(--asmd-font-mono);
    font-size: var(--ts-3xs);
    font-weight: 600;
    color: var(--asmd-faint);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    flex-shrink: 0;
}

.asm-pipeline__model-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.asm-pipeline__model-tier {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--ts-2xs);
    font-weight: 700;
    color: var(--tier-clr);
    background: color-mix(in srgb, var(--tier-clr) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--tier-clr) 22%, transparent);
    border-radius: 6px;
    padding: 2px 8px;
}
.asm-pipeline__tier-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tier-clr);
}
.asm-pipeline__model-name {
    font-size: var(--ts-xs);
    color: var(--asmd-muted);
    font-family: var(--asmd-font-mono);
    flex: 1;
}
.asm-pipeline__step-cost {
    font-size: var(--ts-xs);
    font-weight: 600;
    color: var(--asmd-success);
    white-space: nowrap;
}
.asm-pipeline__step-ms {
    font-size: var(--ts-xs);
    color: var(--asmd-faint);
    white-space: nowrap;
}

.asm-pipeline__rationale {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--ts-xs);
    color: var(--asmd-muted);
    line-height: 1.5;
    padding: 8px 10px;
    background: rgba(var(--asmd-accent-rgb), 0.04);
    border-radius: 7px;
    border-left: 2px solid rgba(var(--asmd-accent-rgb), 0.30);
}

/* Total cost bar */
.asm-pipeline__total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    padding: 18px 20px;
    background: #0a1226;
    border: none;
    border-radius: 18px;
    color: #eef3fc;
    position: relative;
    overflow: hidden;
}
.asm-pipeline__total-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(#16223e 1px, transparent 1px),
        linear-gradient(90deg, #16223e 1px, transparent 1px);
    background-size: 38px 38px;
    opacity: 0.4;
    mask-image: radial-gradient(ellipse 60% 100% at 85% 50%, #000, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 60% 100% at 85% 50%, #000, transparent 70%);
    pointer-events: none;
}
.asm-pipeline__total-left,
.asm-pipeline__total-right {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.asm-pipeline__total-label {
    font-family: var(--asmd-font-mono);
    font-size: 12px;
    color: #9aa4b2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.asm-pipeline__total-val {
    font-family: var(--asmd-font-display);
    font-size: 28px;
    font-weight: 700;
    color: #3ddc84;
    letter-spacing: -0.02em;
}
.asm-pipeline__total-mono {
    font-size: var(--ts-md);
    color: #9aa4b2;
    text-decoration: line-through;
}
.asm-pipeline__total-save {
    font-size: var(--ts-md);
    font-weight: 700;
    color: #3ddc84;
}

.asm-pipeline__rationale-summary {
    font-size: var(--ts-xs);
    color: var(--asmd-muted);
    line-height: 1.6;
    margin: 10px 0 0;
    padding: 0 4px;
}

/* Compare */
.asm-compare { margin-bottom: 48px; }

.asm-compare__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.asm-compare__col {
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--asmd-card-shadow);
}
.asm-compare__col--mas {
    background: var(--asmd-accent-soft);
    border: 1px solid color-mix(in srgb, var(--asmd-accent) 22%, transparent);
}
.asm-compare__col--competitor {
    background: var(--asmd-surface);
    border: 1px solid var(--asmd-border-hi);
}

.asm-compare__col-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.asm-compare__logo {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--asmd-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ts-base);
    font-weight: 700;
    color: var(--asmd-text-strong);
    flex-shrink: 0;
}
.asm-compare__logo--mas {
    background: rgba(var(--asmd-accent-rgb), 0.20);
    color: var(--asmd-accent);
    font-size: var(--ts-3xs);
    letter-spacing: .02em;
}
.asm-compare__col-name {
    font-size: var(--ts-base);
    font-weight: 600;
    color: var(--asmd-text-strong);
    line-height: 1.3;
}

.asm-compare__badge {
    border-radius: 6px;
    padding: 4px 10px;
    font-size: var(--ts-2xs);
    font-weight: 700;
    text-align: center;
}
.asm-compare__badge--ok   { background: rgba(var(--asmd-success-rgb), 0.14); color: var(--asmd-success); }
.asm-compare__badge--warn { background: rgba(var(--asmd-warn-rgb),    0.14); color: var(--asmd-warn);    }
.asm-compare__badge--fail { background: rgba(var(--asmd-error-rgb),   0.14); color: var(--asmd-error);   }

.asm-compare__facts {
    margin: 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.asm-compare__facts li {
    font-size: var(--ts-xs);
    color: var(--asmd-text);
    line-height: 1.4;
}

.asm-compare__failure {
    font-size: var(--ts-xs);
    color: var(--asmd-muted);
    line-height: 1.5;
    margin: 0;
}

.asm-compare__cost {
    font-size: var(--ts-2xl);
    font-weight: 700;
    color: var(--asmd-accent);
    margin-top: auto;
}
.asm-compare__cost span {
    font-size: var(--ts-xs);
    color: var(--asmd-faint);
    font-weight: 400;
}

.asm-compare__meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--ts-xs);
    color: var(--asmd-faint);
    margin-top: auto;
}

/* When to use */
.asm-when { margin-bottom: 48px; }

.asm-when__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.asm-when__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--asmd-text);
    line-height: 1.55;
    padding: 14px 16px;
    background: var(--asmd-success-soft);
    border: 1px solid color-mix(in srgb, var(--asmd-success) 22%, transparent);
    border-radius: 12px;
}
.asm-when__item svg { flex-shrink: 0; margin-top: 3px; stroke: var(--asmd-success); }

/* CTA */
.asm-detail__cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.asm-detail__run-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--asmd-accent);
    color: var(--asmd-on-accent);
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--asmd-font-body);
    cursor: pointer;
    box-shadow: 0 14px 28px -14px rgba(47, 106, 255, 0.7);
    transition: filter 0.15s, transform 0.15s;
}
.asm-detail__run-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}
.asm-detail__back-link {
    font-size: 14px;
    color: var(--asmd-faint);
    text-decoration: none;
    transition: color 0.15s;
}
.asm-detail__back-link:hover { color: var(--asmd-accent); }
.asm-detail__run-btn:disabled { opacity: .65; cursor: default; transform: none; filter: none; }

/* ══ RUN PANEL — inline-запуск сборки со стримом SSE ══ */
.asm-run { margin-top: 8px; }
.asm-run__input {
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0 16px;
    padding: 16px;
    border: 1px solid #dde5f0;
    border-radius: 12px;
    background: #fff;
    color: #1a2a4a;
    font: inherit;
    font-size: 14.5px;
    resize: vertical;
    transition: border-color 0.15s;
}
.asm-run__input:focus {
    outline: none;
    border-color: #7c5cff;
}
.asm-run__input:disabled { opacity: .7; }

.asm-run__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--asmd-on-accent, #fff) 40%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    animation: asm-run-spin .7s linear infinite;
}
@keyframes asm-run-spin { to { transform: rotate(360deg); } }

.asm-run__output {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.asm-run__progress {
    height: 6px;
    border-radius: 999px;
    background: var(--asmd-border);
    overflow: hidden;
}
.asm-run__progress-bar {
    height: 100%;
    background: var(--asmd-accent);
    border-radius: 999px;
    transition: width var(--t-base);
}
.asm-run__current {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--asmd-muted);
    font-size: var(--ts-base);
}
.asm-run__current .asm-run__spinner {
    border-color: color-mix(in srgb, var(--asmd-accent) 30%, transparent);
    border-top-color: var(--asmd-accent);
}

.asm-run__step {
    border: 1px solid var(--asmd-border);
    border-radius: 12px;
    background: var(--asmd-surface);
    padding: 12px 14px;
}
.asm-run__step-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--asmd-text-strong);
}
.asm-run__step-num {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: color-mix(in srgb, var(--asmd-accent) 16%, transparent);
    color: var(--asmd-accent);
    font-size: var(--ts-sm);
    font-weight: 700;
}
.asm-run__step-out,
.asm-run__result-out {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--asmd-font-mono);
    font-size: 13px;
    line-height: 1.7;
    color: #cdd6e3;
}
.asm-run__result {
    border: none;
    border-radius: 12px;
    background: #0a1226;
    padding: 16px 18px;
    color: #cdd6e3;
}
.asm-run__result-label {
    font-family: var(--asmd-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: #5f6b7c;
    margin-bottom: 8px;
}
.asm-run__error {
    border: 1px solid color-mix(in srgb, var(--asmd-warn, #b45309) 45%, var(--asmd-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--asmd-warn, #b45309) 8%, transparent);
    color: var(--asmd-warn, #b45309);
    padding: 12px 14px;
    font-size: var(--ts-base);
}

/* Бейдж NEW удалён — Сборки перенесены в дропдаун Каталога */

/* FAI HUB card polish */
.asm-detail .asm-pipeline__card,
.asm-detail .asm-compare__col,
.asm-detail .asm-templates__card,
.asm-detail .asm-run__step {
    border-radius: 18px;
}

.asm-detail .asm-detail__h1 {
    font-size: clamp(36px, 4.2vw, 50px);
    line-height: 1.06;
    letter-spacing: -0.035em;
}

/* Marketing platform templates */
.asm-templates { margin: 32px 0; }
.asm-templates__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 12px;
}
.asm-templates__card {
    border: 1px solid var(--asmd-border);
    border-radius: 12px;
    padding: 14px;
    background: var(--asmd-surface);
    border-top: 3px solid var(--tpl-clr, var(--asmd-accent));
}
.asm-templates__head { font-weight: 700; margin-bottom: 8px; }
.asm-templates__hint { font-size: var(--ts-sm); color: var(--asmd-muted); margin-bottom: 10px; }
.asm-templates__outline {
    font-size: 12px;
    white-space: pre-wrap;
    background: color-mix(in srgb, var(--asmd-bg) 60%, transparent);
    padding: 10px;
    border-radius: 8px;
    max-height: 160px;
    overflow: auto;
}
.asm-templates__upload { margin-top: 16px; }
.asm-templates__upload-label { display: block; font-size: var(--ts-sm); margin-bottom: 6px; }
.asm-templates__upload-ok { margin-left: 10px; color: #10B981; font-size: var(--ts-sm); }

/* Responsive */
@media (max-width: 640px) {
    .asm-grid { grid-template-columns: 1fr; }
    .asm-compare__grid { grid-template-columns: 1fr; }
    .asm-hero { padding: 56px 16px 40px; }
    .asm-detail { padding: 32px 16px 64px; }
    .asm-add-cta { flex-direction: column; text-align: center; }
}




/* ── components/wizard.css ── */
/* ============================================
   VISUAL MCP TOOL GENERATOR
   ============================================ */

/* ── UIKit audit (P1): локальные токены → brand.css ───────────────── */
:root {
  --wiz-audit-indigo: var(--b-c-indigo);
  --wiz-audit-violet: var(--b-c-violet);
  --wiz-audit-slate:  var(--b-slate-6);
}

/* ============================================
   CREATION WIZARD (ui-tool-gen) — modern design
   ============================================ */
.ui-tool-gen {
    --tg-accent: #2f6aff;
    --tg-accent2: #3f7bff;
    --tg-accent-soft: #eaf0ff;
    --tg-accent-glow: rgba(47, 106, 255, 0.18);
    --tg-bg: #eef3fb;
    --tg-surface: #ffffff;
    --tg-surface-solid: #ffffff;
    --tg-surface-hover: #f8fafc;
    --tg-border: #e5e8ee;
    --tg-border-accent: rgba(47, 106, 255, 0.28);
    --tg-text: #0d1017;
    --tg-text2: #626b78;
    --tg-text3: #9aa3b0;
    --tg-dot-color: rgba(47, 106, 255, 0.05);
    --tg-card-shadow: 0 8px 32px rgba(20, 40, 95, 0.08);
    --tg-glass-blur: none;
    --tg-orb1: rgba(47, 106, 255, 0.06);
    --tg-orb2: rgba(124, 92, 255, 0.05);
    --tg-input-bg: #dde5f0;
    position: relative;
    margin: -1rem -1.25rem 0;
    padding: 2rem 1.25rem 3.5rem;
    min-height: calc(100vh - 5rem);
    background: var(--tg-bg);
    color: var(--tg-text);
    font-family: var(--font-ui, 'Hanken Grotesk', -apple-system, sans-serif);
}

/* FAI HUB light — единые акценты и кнопки */
.ui-tool-gen .ui-tool-gen__hero-icon,
.ui-tool-gen .ui-tool-gen__step--active .ui-tool-gen__step-num,
.ui-tool-gen .ui-form-section__step,
.ui-tool-gen .ui-form-section__step--mcp,
.ui-tool-gen .ui-mcp-window__icon,
.ui-tool-gen .ui-mp-catalog__icon {
    background: #2f6aff;
    box-shadow: 0 4px 14px var(--tg-accent-glow);
}

.ui-tool-gen .ui-tool-gen__step-line--done {
    background: linear-gradient(90deg, #2f6aff, #5b8bff) !important;
}

.ui-tool-gen .ui-wizard-next,
.ui-tool-gen .ui-tool-gen__submit,
.ui-tool-gen .mud-button-filled.mud-button-filled-primary,
.ui-tool-gen .ui-avatar-file-label {
    background: #2f6aff !important;
    border-radius: 11px !important;
    box-shadow: 0 10px 22px -12px rgba(47, 106, 255, 0.85) !important;
}
.ui-tool-gen .ui-wizard-next:hover:not(:disabled),
.ui-tool-gen .ui-tool-gen__submit:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: 0 12px 28px -10px rgba(47, 106, 255, 0.9) !important;
}

[data-theme="light"] .ui-tool-gen .ui-tool-gen__aside-inner--clickable:hover .ui-preview-card,
.ui-tool-gen .ui-tool-gen__aside-inner--clickable:hover .ui-preview-card {
    box-shadow: 0 12px 40px var(--tg-accent-glow), var(--tg-card-shadow);
}

/* AI chat block — FAI HUB light */
.ui-ai-chat,
[data-theme="light"] .ui-ai-chat,
[data-cab-theme="light"] .ui-ai-chat {
    border-color: var(--tg-border-accent);
    background: linear-gradient(135deg, rgba(47, 106, 255, 0.06) 0%, rgba(47, 106, 255, 0.03) 100%);
    box-shadow: 0 2px 12px var(--tg-accent-glow);
}
[data-theme="light"] .ui-ai-chat::before,
[data-cab-theme="light"] .ui-ai-chat::before {
    background: linear-gradient(135deg, rgba(var(--b-gold-rgb), .07), transparent 60%);
}
[data-theme="light"] .ui-ai-chat--open,
[data-cab-theme="light"] .ui-ai-chat--open {
    border-color: rgba(var(--b-gold-rgb), .4);
    box-shadow: 0 0 0 1px var(--tg-accent-glow), 0 8px 32px var(--tg-accent-glow);
}
[data-theme="light"] .ui-ai-chat__toggle:hover,
[data-cab-theme="light"] .ui-ai-chat__toggle:hover {
    background: var(--tg-accent-soft);
}
[data-theme="light"] .ui-ai-chat__toggle svg:first-child,
[data-cab-theme="light"] .ui-ai-chat__toggle svg:first-child {
    background: var(--tg-accent-soft);
}
[data-theme="light"] .ui-ai-chat__toggle::after,
[data-cab-theme="light"] .ui-ai-chat__toggle::after {
    background: var(--b-grad-gold);
}
[data-theme="light"] .ui-ai-chat__example,
[data-cab-theme="light"] .ui-ai-chat__example {
    background: var(--tg-accent-soft);
}
[data-theme="light"] .ui-ai-chat__example:hover,
[data-cab-theme="light"] .ui-ai-chat__example:hover {
    border-color: var(--tg-border-accent);
    background: rgba(var(--b-gold-rgb), .1);
}
[data-theme="light"] .ui-ai-chat__msg-avatar,
[data-cab-theme="light"] .ui-ai-chat__msg-avatar {
    background: var(--tg-accent-soft);
}
[data-theme="light"] .ui-ai-chat__msg--user .ui-ai-chat__msg-bubble,
[data-cab-theme="light"] .ui-ai-chat__msg--user .ui-ai-chat__msg-bubble {
    background: var(--b-grad-gold);
}
[data-theme="light"] .ui-ai-chat__send,
[data-cab-theme="light"] .ui-ai-chat__send {
    background: var(--b-grad-gold);
}

/* Linked tool card hover — light */
[data-theme="light"] .ui-tool-gen .det-linked-tool-card,
[data-cab-theme="light"] .ui-tool-gen .det-linked-tool-card {
    border-color: var(--tg-border);
    background: var(--tg-surface-solid);
    color: var(--tg-text);
}
[data-theme="light"] .ui-tool-gen .det-linked-tool-card:hover,
[data-cab-theme="light"] .ui-tool-gen .det-linked-tool-card:hover {
    border-color: var(--tg-accent);
    background: var(--tg-accent-soft);
}
[data-theme="light"] .ui-tool-gen .det-linked-tool-card__go,
[data-cab-theme="light"] .ui-tool-gen .det-linked-tool-card__go {
    color: var(--tg-accent);
}

[data-theme="dark"] .ui-tool-gen,
[data-cab-theme="dark"] .ui-tool-gen {
    /* Light-only: dark overrides disabled */
}

@media (min-width: 900px) {
    .ui-tool-gen {
        margin-left: -2rem;
        margin-right: -2rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.ui-tool-gen__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: var(--tg-bg);
    background-image:
        radial-gradient(circle at 1px 1px, var(--tg-dot-color) 1px, transparent 0);
    background-size: 24px 24px;
    overflow: hidden;
}

.ui-tool-gen__ambient::before,
.ui-tool-gen__ambient::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: tg-orb-drift 14s ease-in-out infinite alternate;
}
.ui-tool-gen__ambient::before {
    width: 420px; height: 420px;
    top: -5%; left: -8%;
    background: var(--tg-orb1);
}
.ui-tool-gen__ambient::after {
    width: 350px; height: 350px;
    bottom: 5%; right: -5%;
    background: var(--tg-orb2);
    animation-delay: -7s;
    animation-direction: alternate-reverse;
}

@keyframes tg-orb-drift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, 30px) scale(1.12); }
}

.ui-tool-gen__inner {
    position: relative;
    z-index: 1;
    max-width: 72rem;
    margin: 0 auto;
}

.ui-tool-gen__breadcrumb {
    margin-bottom: 1.5rem;
}

.ui-tool-gen__layout {
    display: grid;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 1200px) {
    .ui-tool-gen__layout {
        grid-template-columns: minmax(0, 1fr) min(100%, 22rem);
        gap: 2.25rem;
    }
}

.ui-tool-gen__main {
    min-width: 0;
}

/* Hero header */
.ui-tool-gen__hero {
    display: flex;
    gap: 1.15rem;
    align-items: flex-start;
    margin-bottom: 1.75rem;
    animation: tg-fade-in .25s ease both;
}

@keyframes tg-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ui-tool-gen__hero-icon {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 1rem;
    background: #2f6aff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px var(--tg-accent-glow);
}

.ui-tool-gen__eyebrow {
    font-size: var(--ts-2xs);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tg-accent);
    margin: 0 0 .35rem;
}

.ui-tool-gen__title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: clamp(1.45rem, 2.5vw, 1.85rem);
    font-weight: 800;
    color: var(--tg-text);
    margin: 0 0 .5rem;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.ui-tool-gen__lead {
    font-size: var(--ts-md);
    color: var(--tg-text2);
    margin: 0;
    line-height: 1.65;
    max-width: 38rem;
}

/* Step indicators */
.ui-tool-gen__steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: .35rem .65rem;
    margin-bottom: 1.75rem;
    padding: .75rem 1.35rem;
    background: var(--tg-surface);
    backdrop-filter: var(--tg-glass-blur);
    -webkit-backdrop-filter: var(--tg-glass-blur);
    border: 1px solid var(--tg-border);
    border-radius: 9999px;
    box-shadow: var(--tg-card-shadow);
}

.ui-tool-gen__step {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: var(--ts-xs);
    color: var(--tg-text3);
    transition: color var(--t-hover);
}

.ui-tool-gen__step--active {
    color: var(--tg-text);
    font-weight: 600;
}

.ui-tool-gen__step-num {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: var(--tg-accent-soft);
    color: var(--tg-text2);
    font-size: var(--ts-2xs);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-base), color var(--t-base), box-shadow var(--t-base);
}

.ui-tool-gen__step--active .ui-tool-gen__step-num {
    background: #2f6aff;
    color: #fff;
    box-shadow: 0 0 12px var(--tg-accent-glow);
}

.ui-tool-gen__step-label {
    white-space: nowrap;
}

.ui-tool-gen__step-line {
    flex: 1 1 auto;
    min-width: 1rem;
    height: 2px;
    background: var(--tg-border);
    border-radius: 1px;
    transition: background var(--t-base);
}

.ui-tool-gen__step-line--done {
    background: linear-gradient(90deg, #2f6aff, #5b8bff) !important;
}

/* Aside preview */
.ui-tool-gen__aside {
    position: relative;
}

.ui-tool-gen__aside-inner {
    position: sticky;
    top: 6.5rem;
}

.ui-tool-gen__aside-inner--clickable {
    cursor: pointer;
    border-radius: 1.25rem;
    padding: .35rem;
    margin: -.35rem;
    transition: box-shadow var(--t-base), background var(--t-base);
    outline: none;
}

.ui-tool-gen__aside-inner--clickable:hover {
    background: var(--tg-accent-soft);
    box-shadow: 0 0 0 1px var(--tg-border-accent);
}

.ui-tool-gen__aside-inner--clickable:focus-visible {
    box-shadow: 0 0 0 2px var(--tg-accent);
}

.det-page--embedded-preview {
    padding: 1rem 1.25rem 1.5rem;
    max-width: 100%;
}

.det-breadcrumb--preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.det-breadcrumb__badge {
    font-size: var(--ts-2xs);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .3rem .6rem;
    border-radius: 9999px;
    background: var(--tg-accent-soft);
    color: var(--tg-accent);
}

.det-breadcrumb__hint {
    font-size: var(--ts-sm);
    color: var(--tg-text2);
}

.det-cta--preview-disabled {
    opacity: .55;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .65rem 1.25rem;
    border-radius: .65rem;
    font-weight: 600;
    background: var(--tg-accent-soft);
    color: var(--tg-text3);
}

.ui-tool-gen__preview-caption {
    font-size: var(--ts-2xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tg-text3);
    margin: 0 0 .65rem .15rem;
}

.ui-tool-gen__preview-note {
    font-size: var(--ts-xs);
    color: var(--tg-text3);
    line-height: 1.45;
    margin: 1rem 0 0;
    padding: 0 .25rem;
}

/* Preview card — glass */
.ui-preview-card {
    background: var(--tg-surface);
    backdrop-filter: var(--tg-glass-blur);
    -webkit-backdrop-filter: var(--tg-glass-blur);
    border: 1px solid var(--tg-border);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--tg-card-shadow);
    transition: transform var(--t-base), box-shadow var(--t-base);
}

.ui-tool-gen__aside-inner--clickable:hover .ui-preview-card {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(99,102,241,.12), var(--tg-card-shadow);
}

.ui-preview-card__top {
    padding: 1.25rem 1.35rem 1rem;
}

.ui-preview-card__badges {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: .75rem;
}

.ui-preview-card__type {
    font-size: var(--ts-2xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .28rem .55rem;
    border-radius: 9999px;
    background: var(--tg-accent-soft);
    color: var(--tg-accent);
}

.ui-preview-card__mcp {
    font-size: var(--ts-3xs);
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .22rem .4rem;
    border-radius: .35rem;
    background: linear-gradient(135deg, var(--tg-accent) 0%, var(--tg-accent2) 100%);
    color: #fff;
}

.ui-preview-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto .85rem;
    border-radius: .9rem;
    background: var(--tg-accent-soft);
    color: var(--tg-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ui-preview-card__icon--img {
    padding: 0;
    background: var(--tg-accent-soft);
}

.ui-preview-card__icon .listing-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ui-preview-card__name {
    font-size: var(--ts-lg);
    font-weight: 800;
    color: var(--tg-text);
    margin: 0 0 .4rem;
    line-height: 1.3;
    text-align: center;
}

.ui-preview-card__desc {
    font-size: var(--ts-sm);
    color: var(--tg-text2);
    line-height: 1.55;
    margin: 0 0 .75rem;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ui-preview-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
}

.ui-preview-card__tag {
    font-size: var(--ts-2xs);
    padding: .2rem .45rem;
    border-radius: .35rem;
    background: var(--tg-accent-soft);
    color: var(--tg-text2);
}

.ui-preview-card__stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .65rem 1.35rem;
    font-size: var(--ts-xs);
    color: var(--tg-text3);
    border-top: 1px solid var(--tg-border);
    background: var(--tg-surface-solid);
}

.ui-preview-card__footer {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem 1.35rem 1rem;
    border-top: 1px solid var(--tg-border);
}

.ui-preview-card__hint {
    font-size: var(--ts-3xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tg-accent);
}

.ui-preview-card__url {
    font-size: var(--ts-xs);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--tg-text2);
    word-break: break-all;
    line-height: 1.35;
}

.ui-tool-gen__submit-wrap {
    margin-top: .75rem;
    padding-top: .5rem;
}

.ui-tool-gen__submit {
    border-radius: 11px !important;
    padding: .75rem 2rem !important;
    font-weight: 700 !important;
    font-size: var(--ts-md) !important;
    letter-spacing: .03em;
    text-transform: none !important;
    background: #2f6aff !important;
    color: #fff !important;
    box-shadow: 0 10px 22px -12px rgba(47, 106, 255, 0.85) !important;
    transition: box-shadow var(--t-base), transform var(--t-hover), filter var(--t-hover) !important;
}

.ui-tool-gen__submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 32px var(--tg-accent-glow) !important;
    filter: brightness(1.06);
}

/* Info banner */
.ui-simple-intro {
    border-radius: 1rem !important;
    border-color: var(--tg-border-accent) !important;
    background: var(--tg-surface) !important;
    backdrop-filter: var(--tg-glass-blur);
    -webkit-backdrop-filter: var(--tg-glass-blur);
    font-size: var(--ts-md);
    line-height: 1.55;
    color: var(--tg-text2) !important;
}

.ui-simple-label {
    font-size: var(--ts-md);
    font-weight: 700;
    color: var(--tg-text);
    margin: 0 0 .25rem;
}

.ui-simple-hint {
    font-size: var(--ts-sm);
    color: var(--tg-text3);
    margin: 0;
    line-height: 1.45;
}

/* Pick grid */
.ui-pick-grid {
    display: grid;
    gap: .75rem;
    width: 100%;
}

.ui-pick-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .ui-pick-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.ui-pick-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .ui-pick-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .ui-pick-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.ui-pick-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 560px) {
    .ui-pick-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* Pick cards */
.ui-pick {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: .35rem;
    padding: 1rem 1.1rem;
    border: 1.5px solid var(--tg-border);
    border-radius: 1rem;
    background: var(--tg-surface);
    backdrop-filter: var(--tg-glass-blur);
    -webkit-backdrop-filter: var(--tg-glass-blur);
    cursor: pointer;
    transition: border-color var(--t-hover), box-shadow var(--t-hover), background var(--t-hover), transform var(--t-fast);
    font: inherit;
    color: inherit;
    position: relative;
}

.ui-pick:hover {
    border-color: var(--tg-border-accent);
    box-shadow: 0 4px 16px var(--tg-accent-glow);
    transform: translateY(-1px);
}

.ui-pick--on {
    border-color: var(--tg-accent);
    background: var(--tg-surface-hover);
    box-shadow: 0 0 0 3px var(--tg-accent-soft), 0 4px 16px var(--tg-accent-glow);
}

.ui-pick__badge {
    position: absolute;
    top: .55rem;
    right: .65rem;
    font-size: var(--ts-3xs);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tg-accent);
    background: var(--tg-accent-soft);
    padding: .18rem .45rem;
    border-radius: 9999px;
}

.ui-pick__badge--loud {
    background: linear-gradient(135deg, var(--tg-accent), var(--tg-accent2));
    color: #fff;
}

.ui-pick__ico {
    font-size: var(--ts-3xl) !important;
    color: var(--tg-accent);
    margin-bottom: .15rem;
}

.ui-pick__t {
    font-size: var(--ts-md);
    font-weight: 700;
    color: var(--tg-text);
}

.ui-pick__d {
    font-size: var(--ts-xs);
    color: var(--tg-text2);
    line-height: 1.4;
}

/* Большие карточки выбора типа агента (платформенный / owner-hosted) */
.ui-pick--tall {
    gap: .5rem;
    padding: 1.5rem 1.4rem;
    min-height: 168px;
    justify-content: center;
}
.ui-pick--tall .ui-pick__ico {
    font-size: var(--ts-4xl, 2.25rem) !important;
}
.ui-pick--tall .ui-pick__t {
    font-size: var(--ts-lg, 1.0625rem);
}

/* Avatar modes */
.ui-avatar-modes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ui-avatar-mode {
    border: 1.5px solid var(--tg-border);
    background: var(--tg-surface);
    border-radius: 9999px;
    padding: .45rem 1rem;
    font-size: var(--ts-sm);
    font-weight: 600;
    color: var(--tg-text2);
    cursor: pointer;
    transition: border-color var(--t-hover), background var(--t-hover), color var(--t-hover);
}

.ui-avatar-mode:hover {
    border-color: var(--tg-border-accent);
    color: var(--tg-accent);
}

.ui-avatar-mode--on {
    border-color: var(--tg-accent);
    background: var(--tg-accent-soft);
    color: var(--tg-accent);
}

.ui-avatar-preset-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: .5rem;
}

@media (max-width: 900px) {
    .ui-avatar-preset-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ui-avatar-preset {
    aspect-ratio: 1;
    border-radius: .85rem;
    border: 1.5px solid var(--tg-border);
    background: var(--tg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tg-accent);
    transition: border-color var(--t-hover), box-shadow var(--t-hover), transform var(--t-fast);
}

.ui-avatar-preset:hover {
    border-color: var(--tg-border-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--tg-accent-glow);
}

.ui-avatar-preset--on {
    border-color: var(--tg-accent);
    box-shadow: 0 0 0 2px var(--tg-accent-glow);
    background: var(--tg-accent-soft);
}

.ui-avatar-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.ui-avatar-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.ui-avatar-file-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1.15rem;
    border-radius: 9999px;
    font-size: var(--ts-base);
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, var(--tg-accent) 0%, #4f46e5 100%);
    color: #fff;
    border: none;
    transition: filter var(--t-hover), transform var(--t-fast);
    box-shadow: 0 4px 16px var(--tg-accent-glow);
}

.ui-avatar-file-label:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.ui-avatar-clear {
    font-size: var(--ts-sm) !important;
    text-transform: none !important;
    color: var(--tg-accent) !important;
}

.ui-card__icon--img {
    padding: 0;
    overflow: hidden;
    border-color: var(--tg-border-accent) !important;
}

.ui-card__icon .listing-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.listing-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Wizard navigation */
.ui-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: .5rem;
    flex-wrap: wrap;
}

.ui-wizard-nav .mud-button-text {
    color: var(--tg-text2) !important;
}

.ui-wizard-next {
    border-radius: 11px !important;
    padding: .6rem 1.65rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    background: #2f6aff !important;
    color: #fff !important;
    box-shadow: 0 10px 22px -12px rgba(47, 106, 255, 0.85) !important;
    transition: box-shadow var(--t-hover), transform var(--t-fast) !important;
}

.ui-wizard-next:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px var(--tg-accent-glow) !important;
}

/* ═══ AI MINI-CHAT ═══ */
.ui-ai-chat {
    margin-bottom: 1.5rem;
    border-radius: 16px;
    border: 1.5px solid rgba(99,102,241,0.3);
    background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(59,130,246,0.04) 100%);
    overflow: hidden;
    transition: box-shadow 0.25s, border-color 0.25s;
    position: relative;
    box-shadow: 0 2px 12px rgba(99,102,241,0.08);
}
.ui-ai-chat::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.ui-ai-chat--open {
    box-shadow: 0 0 0 1px rgba(99,102,241,0.15), 0 8px 40px rgba(99,102,241,0.15), 0 0 60px rgba(99,102,241,0.05);
    border-color: rgba(99,102,241,0.4);
}
[data-theme="light"] .ui-ai-chat {
    background: linear-gradient(135deg, rgba(99,102,241,0.05) 0%, rgba(59,130,246,0.03) 100%);
    border-color: rgba(99,102,241,0.2);
}
[data-theme="light"] .ui-ai-chat--open {
    border-color: rgba(99,102,241,0.35);
    box-shadow: 0 0 0 1px rgba(99,102,241,0.1), 0 8px 32px rgba(99,102,241,0.1);
}

.ui-ai-chat__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0.9rem 1.15rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tg-accent);
    font-size: var(--ts-md);
    font-weight: 700;
    transition: background var(--t-base);
    position: relative;
    z-index: 1;
}
.ui-ai-chat__toggle:hover {
    background: rgba(99,102,241,0.08);
}
.ui-ai-chat__toggle svg:first-child {
    width: 28px; height: 28px;
    padding: 5px;
    border-radius: 8px;
    background: rgba(99,102,241,0.12);
    flex-shrink: 0;
}
.ui-ai-chat__toggle span {
    letter-spacing: -0.01em;
}
.ui-ai-chat__toggle::after {
    content: 'NEW';
    font-size: var(--ts-3xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 6px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    line-height: 1.2;
    animation: ui-ai-badge-pulse 2s ease-in-out infinite;
}
@keyframes ui-ai-badge-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
    50% { opacity: 0.85; box-shadow: 0 0 0 6px rgba(99,102,241,0); }
}
.ui-ai-chat--open .ui-ai-chat__toggle::after {
    display: none;
}

.ui-ai-chat__chevron {
    margin-left: auto;
    transition: transform var(--t-smooth);
}
.ui-ai-chat--open .ui-ai-chat__chevron {
    transform: rotate(180deg);
}

.ui-ai-chat__body {
    border-top: 1px solid var(--tg-border);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.ui-ai-chat__messages {
    padding: 0.75rem 1rem;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ui-ai-chat__welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 0.5rem;
    text-align: center;
}
.ui-ai-chat__welcome p {
    font-size: var(--ts-sm);
    color: var(--tg-text2);
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
}
.ui-ai-chat__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 0.25rem;
}
.ui-ai-chat__example {
    font-size: var(--ts-xs);
    padding: 5px 12px;
    min-height: 44px;
    border-radius: 100px;
    border: 1px solid var(--tg-border);
    background: rgba(99,102,241,0.05);
    color: var(--tg-text2);
    cursor: pointer;
    transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
}
.ui-ai-chat__example:hover {
    border-color: rgba(99,102,241,0.35);
    color: var(--tg-accent);
    background: rgba(99,102,241,0.08);
}

.ui-ai-chat__msg {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    animation: ui-ai-msg-in 0.25s ease both;
}
@keyframes ui-ai-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ui-ai-chat__msg--user {
    flex-direction: row-reverse;
}
.ui-ai-chat__msg-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(99,102,241,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--tg-accent);
}
.ui-ai-chat__msg-bubble {
    padding: 0.5rem 0.85rem;
    border-radius: 12px;
    font-size: var(--ts-sm);
    line-height: 1.5;
    max-width: 80%;
    word-break: break-word;
}
.ui-ai-chat__msg--user .ui-ai-chat__msg-bubble {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ui-ai-chat__msg--ai .ui-ai-chat__msg-bubble {
    background: var(--tg-bg);
    color: var(--tg-text);
    border: 1px solid var(--tg-border);
    border-bottom-left-radius: 4px;
}

.ui-ai-chat__typing {
    display: inline-flex;
    gap: 4px;
    padding: 2px 0;
}
.ui-ai-chat__typing span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tg-accent);
    opacity: 0.4;
    animation: ui-ai-dot-bounce 1s ease-in-out infinite;
}
.ui-ai-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.ui-ai-chat__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ui-ai-dot-bounce {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-4px); }
}

.ui-ai-chat__input-row {
    display: flex;
    gap: 6px;
    padding: 0.5rem 0.75rem 0.65rem;
    border-top: 1px solid var(--tg-border);
    background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .ui-ai-chat__input-row {
    background: rgba(0,0,0,0.15);
}

.ui-ai-chat__input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--tg-border);
    background: var(--tg-surface);
    color: var(--tg-text);
    font-size: var(--ts-sm);
    outline: none;
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.ui-ai-chat__input:focus {
    border-color: var(--tg-accent);
    box-shadow: 0 0 0 3px var(--tg-accent-glow);
}
.ui-ai-chat__input::placeholder {
    color: var(--tg-text2);
    opacity: 0.6;
}

.ui-ai-chat__send {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity var(--t-base), transform var(--t-base);
}
.ui-ai-chat__send:hover:not(:disabled) {
    transform: scale(1.05);
}
.ui-ai-chat__send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Summary list */
.ui-summary {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.ui-summary li {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: .75rem;
    font-size: var(--ts-base);
    align-items: start;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--tg-border);
}

.ui-summary li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ui-summary span {
    color: var(--tg-text3);
    font-size: var(--ts-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-top: .15rem;
}

.ui-summary strong {
    font-weight: 600;
    color: var(--tg-text);
    line-height: 1.45;
}

.ui-summary__mono {
    font-family: ui-monospace, monospace;
    font-size: var(--ts-sm);
    word-break: break-all;
}

.ui-expanel.mud-expansion-panels {
    border: 1px solid var(--tg-border);
    border-radius: 1rem;
    overflow: hidden;
    background: var(--tg-surface-solid);
}

/* Form sections — glass cards */
.ui-form-section {
    background: var(--tg-surface);
    border: 1px solid var(--tg-border);
    border-radius: 1.125rem;
    padding: 1.5rem 1.5rem 1.35rem;
    margin-bottom: 1.15rem;
    box-shadow: var(--tg-card-shadow);
    animation: tg-section-in .2s ease both;
}

@keyframes tg-section-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ui-form-section--mcp {
    border-color: var(--tg-border-accent);
}

/* Form section header */
.ui-form-section__head {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.ui-form-section__step {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: .75rem;
    background: #2f6aff;
    color: #fff;
    font-size: var(--ts-base);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px var(--tg-accent-glow);
}

.ui-form-section__step--mcp {
    background: #2f6aff;
}

.ui-form-section__title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: var(--ts-xl);
    font-weight: 800;
    color: var(--tg-text);
    margin: 0 0 .25rem;
    letter-spacing: -.02em;
}

.ui-form-section__subtitle {
    font-size: var(--ts-base);
    color: var(--tg-text2);
    margin: 0;
    line-height: 1.5;
}

/* MCP window — glass */
.ui-mcp-window {
    border-radius: 1.15rem;
    border: 1px solid var(--tg-border-accent);
    background: var(--tg-surface);
    backdrop-filter: var(--tg-glass-blur);
    -webkit-backdrop-filter: var(--tg-glass-blur);
    box-shadow: var(--tg-card-shadow);
    overflow: hidden;
}

.ui-mcp-window__head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.35rem 1rem;
    background: var(--tg-accent-soft);
    border-bottom: 1px solid var(--tg-border);
}

.ui-mcp-window__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: linear-gradient(145deg, var(--tg-accent) 0%, var(--tg-accent2) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px var(--tg-accent-glow);
}

.ui-mcp-window__head-text {
    min-width: 0;
}

.ui-mcp-window__eyebrow {
    margin: 0 0 0.2rem;
    font-size: var(--ts-2xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tg-accent);
}

.ui-mcp-window__title {
    margin: 0 0 0.35rem;
    font-size: var(--ts-lg);
    font-weight: 800;
    color: var(--tg-text);
    letter-spacing: -0.02em;
}

.ui-mcp-window__lead {
    margin: 0;
    font-size: var(--ts-sm);
    color: var(--tg-text2);
    line-height: 1.55;
}

.ui-mcp-window__body {
    padding: 1.25rem 1.35rem 1.35rem;
}

.ui-mcp-settings-card {
    padding: 1rem 1.1rem 1.15rem;
    margin-bottom: 1.25rem;
    border-radius: 0.85rem;
    border: 1px solid var(--tg-border);
    background: var(--tg-surface-solid);
}

.ui-mcp-settings-card__title {
    margin: 0 0 1rem;
    font-size: var(--ts-lg);
    font-weight: 800;
    color: var(--tg-accent);
    letter-spacing: -0.02em;
}

.ui-mcp-settings-card__title--spaced {
    margin-top: 0.25rem;
}

.ui-mcp-field-label {
    margin: 0 0 0.5rem;
    font-size: var(--ts-sm);
    font-weight: 600;
    color: var(--tg-text2);
}

.ui-mcp-auth-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
}

.ui-mcp-auth-opt {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.65rem;
    border: 1.5px solid transparent;
    background: var(--tg-surface-solid);
    font-size: var(--ts-base);
    font-weight: 600;
    color: var(--tg-text2);
    cursor: pointer;
    border-radius: 9999px;
    transition: border-color var(--t-hover), background var(--t-hover), color var(--t-hover);
}

.ui-mcp-auth-opt:hover {
    border-color: var(--tg-border-accent);
    color: var(--tg-accent);
}

.ui-mcp-auth-opt--on {
    border-color: var(--tg-accent);
    color: var(--tg-accent);
    background: var(--tg-accent-soft);
}

.ui-mcp-auth-opt__dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--tg-border);
    box-sizing: border-box;
    flex-shrink: 0;
    transition: border-color var(--t-hover), background var(--t-hover);
}

.ui-mcp-auth-opt--on .ui-mcp-auth-opt__dot {
    border-color: var(--tg-accent);
    background: radial-gradient(circle, var(--tg-accent) 45%, transparent 46%);
}

.ui-mcp-check-btn {
    margin-top: 0.25rem !important;
    text-transform: none !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    background: var(--tg-surface-solid) !important;
    border: 1.5px solid var(--tg-border) !important;
    color: var(--tg-text2) !important;
    box-shadow: none !important;
    transition: border-color var(--t-hover), background var(--t-hover) !important;
}

.ui-mcp-check-btn:hover:not(:disabled) {
    border-color: var(--tg-border-accent) !important;
    color: var(--tg-accent) !important;
}

.ui-mcp-verify-msg {
    margin: 0.65rem 0 0;
    font-size: var(--ts-sm);
    line-height: 1.45;
    color: var(--tg-text3);
}

.ui-mcp-verify-msg--ok {
    color: #22c55e;
}

.ui-mcp-verify-msg--err {
    color: #ef4444;
}

/* Catalog tools bridge (agent wizard) */
.ui-tool-bridge {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ui-mp-catalog {
    border-radius: 1.15rem;
    border: 1px solid var(--tg-border-accent);
    background: var(--tg-surface);
    backdrop-filter: var(--tg-glass-blur);
    -webkit-backdrop-filter: var(--tg-glass-blur);
    box-shadow: var(--tg-card-shadow);
    overflow: hidden;
}

.ui-mp-catalog__head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.35rem 1rem;
    background: var(--tg-accent-soft);
    border-bottom: 1px solid var(--tg-border);
}

.ui-mp-catalog__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: linear-gradient(145deg, var(--tg-accent) 0%, var(--tg-accent2) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px var(--tg-accent-glow);
}

.ui-mp-catalog__eyebrow {
    margin: 0 0 0.2rem;
    font-size: var(--ts-2xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tg-accent);
}

.ui-mp-catalog__title {
    margin: 0 0 0.35rem;
    font-size: var(--ts-lg);
    font-weight: 800;
    color: var(--tg-text);
    letter-spacing: -0.02em;
}

.ui-mp-catalog__lead {
    margin: 0;
    font-size: var(--ts-sm);
    color: var(--tg-text2);
    line-height: 1.55;
}

.ui-mp-catalog__body {
    padding: 1.15rem 1.35rem 1.35rem;
}

.ui-mp-catalog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.ui-mp-tool-card {
    position: relative;
    text-align: left;
    padding: 0.85rem 0.9rem 0.75rem;
    border-radius: 1rem;
    border: 1.5px solid var(--tg-border);
    background: var(--tg-surface-solid);
    cursor: pointer;
    transition: border-color var(--t-hover), box-shadow var(--t-hover), transform var(--t-fast);
}

.ui-mp-tool-card:hover {
    border-color: var(--tg-border-accent);
    box-shadow: 0 4px 16px var(--tg-accent-glow);
    transform: translateY(-1px);
}

.ui-mp-tool-card--on {
    border-color: var(--tg-accent);
    background: var(--tg-accent-soft);
    box-shadow: 0 0 0 2px var(--tg-accent-glow);
}

.ui-mp-tool-card__check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--tg-accent);
}

.ui-mp-tool-card__name {
    display: block;
    font-weight: 700;
    font-size: var(--ts-base);
    color: var(--tg-text);
    margin-bottom: 0.35rem;
    padding-right: 1.5rem;
}

.ui-mp-tool-card__desc {
    display: block;
    font-size: var(--ts-xs);
    color: var(--tg-text2);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ui-mp-tool-card__meta {
    display: block;
    margin-top: 0.5rem;
    font-size: var(--ts-2xs);
    font-weight: 600;
    color: var(--tg-text3);
}

.ui-mp-catalog__selected-hint {
    margin: 0.85rem 0 0;
    font-size: var(--ts-sm);
    color: var(--tg-text2);
}

.ui-tool-bridge__or {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--tg-text3);
    font-size: var(--ts-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ui-tool-bridge__or::before,
.ui-tool-bridge__or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tg-border), transparent);
}

.ui-mcp-window--v2 {
    border-color: var(--tg-border-accent);
}

.ui-preview-card__badges--multi {
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ui-preview-card__badges-trail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
    max-width: 11rem;
}

.ui-preview-card__chip {
    font-size: var(--ts-3xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.22rem 0.45rem;
    border-radius: 9999px;
}

.ui-preview-card__chip--catalog {
    background: rgba(139,92,246,.12);
    color: var(--tg-accent2);
}

.ui-preview-card__chip--mcp {
    background: linear-gradient(135deg, var(--tg-accent), var(--tg-accent2));
    color: #fff;
}

.ui-preview-card__chip--llm {
    background: linear-gradient(135deg, var(--tg-accent), var(--tg-accent2));
    color: #fff;
}

/* Inputs inside wizard — theme adaptation */
.ui-tool-gen .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--tg-border) !important;
    transition: border-color var(--t-hover);
}
.ui-tool-gen .mud-input-outlined:hover .mud-input-outlined-border,
.ui-tool-gen .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--tg-accent) !important;
}
.ui-tool-gen .mud-input,
.ui-tool-gen .mud-input-label,
.ui-tool-gen .mud-input-helper-text {
    color: var(--tg-text2) !important;
}
.ui-tool-gen .mud-input > input,
.ui-tool-gen .mud-input > textarea {
    color: var(--tg-text) !important;
}
.ui-tool-gen .mud-switch .mud-switch-label {
    color: var(--tg-text) !important;
}

.det-linked-tools-intro {
    font-size: var(--ts-base);
    color: #64748b;
    margin: 0 0 1rem;
    line-height: 1.5;
}

.det-linked-tools-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.det-linked-tool-card {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.65rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    text-decoration: none;
    color: #1e293b;
    font-size: var(--ts-base);
    font-weight: 600;
    transition: border-color var(--t-base), background var(--t-base);
}

.det-linked-tool-card:hover {
    border-color: #6366f1;
    background: #f5f3ff;
}

.det-linked-tool-card__name {
    flex: 1;
}

.det-linked-tool-card__go {
    font-size: var(--ts-xs);
    font-weight: 700;
    color: #6366f1;
}

.ui-mcp-verify-msg--err {
    color: #ef4444;
}

.ui-create-tool__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem 1rem;
}

@media (min-width: 720px) {
    .ui-create-tool__fields--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .ui-field-span2 {
        grid-column: span 2;
    }

    .ui-field-full {
        grid-column: 1 / -1;
    }
}

.ui-create-tool__fields .mud-input-control {
    margin-bottom: 0;
}

/* Accent focus for inputs inside generator */
.ui-tool-gen .mud-input-outlined:focus-within {
    box-shadow: 0 0 0 3px var(--tg-accent-soft);
}

.ui-tool-gen .mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--tg-accent) !important;
    border-width: 1px !important;
}

.ui-tool-gen .mud-input-label {
    color: var(--tg-text3) !important;
}

.ui-tool-gen .label-focused {
    color: var(--tg-accent) !important;
}

/* Deep overrides for dark theme in wizard */
.ui-tool-gen .mud-select .mud-input > input {
    color: var(--tg-text) !important;
}
.ui-tool-gen .mud-select-input {
    color: var(--tg-text) !important;
}
.ui-tool-gen .mud-input-adornment svg {
    fill: var(--tg-text3) !important;
}
.ui-tool-gen .mud-alert {
    background: var(--tg-surface) !important;
    border-color: var(--tg-border) !important;
    color: var(--tg-text2) !important;
}
.ui-tool-gen .mud-alert .mud-alert-message {
    color: var(--tg-text2) !important;
}
.ui-tool-gen .mud-paper {
    background: var(--tg-surface-solid) !important;
    color: var(--tg-text) !important;
}
.ui-tool-gen .mud-expansion-panels {
    background: var(--tg-surface-solid) !important;
    border-color: var(--tg-border) !important;
}
.ui-tool-gen .mud-expand-panel {
    background: var(--tg-surface-solid) !important;
}
.ui-tool-gen .mud-expand-panel-header {
    color: var(--tg-text) !important;
}
.ui-tool-gen .mud-expand-panel-text {
    color: var(--tg-text) !important;
}
.ui-tool-gen .mud-button-filled.mud-button-filled-primary {
    background: #2f6aff !important;
    border-radius: 11px !important;
}
.ui-tool-gen .mud-button-text {
    color: var(--tg-text2) !important;
}
.ui-tool-gen .mud-button-outlined {
    border-color: var(--tg-border-accent) !important;
    color: var(--tg-accent) !important;
}
.ui-tool-gen .mud-switch {
    color: var(--tg-text) !important;
}
.ui-tool-gen .mud-switch-track {
    background: var(--tg-border) !important;
}
.ui-tool-gen .mud-checked .mud-switch-track {
    background: var(--tg-accent) !important;
}
.ui-tool-gen .mud-typography {
    color: var(--tg-text) !important;
}
.ui-tool-gen .mud-progress-circular svg circle {
    stroke: var(--tg-accent) !important;
}
.ui-tool-gen .mud-input-slot,
.ui-tool-gen .mud-input-slot input,
.ui-tool-gen .mud-input-slot textarea {
    color: var(--tg-text) !important;
    -webkit-text-fill-color: var(--tg-text) !important;
}
.ui-tool-gen .mud-input-control .mud-input-label {
    background: transparent !important;
}
.ui-tool-gen .mud-input-outlined .mud-input-slot,
.ui-tool-gen .mud-input-outlined input,
.ui-tool-gen .mud-input-outlined textarea {
    background: #dde5f0 !important;
}
.ui-tool-gen .mud-input-outlined.mud-input-focused .mud-input-slot,
.ui-tool-gen .mud-input-outlined:focus-within .mud-input-slot {
    background: #fff !important;
}
.ui-tool-gen .mud-popover {
    background: var(--tg-surface-solid) !important;
    border-color: var(--tg-border) !important;
    color: var(--tg-text) !important;
}
.ui-tool-gen .mud-list-item {
    color: var(--tg-text) !important;
}
.ui-tool-gen .mud-list-item:hover {
    background: var(--tg-accent-soft) !important;
}
.ui-tool-gen .mud-list-item-text {
    color: var(--tg-text) !important;
}

/* ============================================
   ERROR UI (нижняя плашка)
   ============================================ */

#blazor-error-ui {
    background: #fff3cd;
    border-top: 1px solid #ffc107;
    bottom: 0; left: 0;
    padding: .75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
    display: none;
    font-size: var(--ts-base);
}

/* ============================================
   CHAT — DEPRECATED (классы chatgpt__* не используются)
   ============================================ */
.chatgpt { display: none; }

/* ══ MOBILE WIZARD ══ */
@media (max-width: 640px) {
    .ui-tool-gen {
        margin: 0;
        padding: 1rem 0.75rem 6rem; /* extra bottom for fixed nav */
    }

    .ui-tool-gen__hero {
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }

    .ui-tool-gen__hero-icon {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.75rem;
    }

    .ui-tool-gen__title {
        font-size: var(--ts-2xl);
    }

    .ui-tool-gen__lead {
        font-size: var(--ts-base);
    }

    /* Compact step indicators — show only number, hide label */
    .ui-tool-gen__steps {
        gap: 0.25rem 0.5rem;
        padding: 0.5rem 0.75rem;
    }
    .ui-tool-gen__step-label { display: none; }
    .ui-tool-gen__step-line { width: 1rem; }

    /* Form sections */
    .ui-form-section {
        padding: 1rem 1rem 0.85rem;
        border-radius: 1rem;
    }

    /* Fix for auth-fields-row on small screens */
    .ui-fields-row-2,
    .ui-create-tool__fields--3 { grid-template-columns: 1fr !important; }

    /* Reasoning mode cards full width */
    .ui-pick-grid { grid-template-columns: 1fr !important; }
}

/* Fixed bottom navigation for wizard on mobile */
@media (max-width: 640px) {
    .ui-tool-gen__nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: 0.75rem 1rem;
        background: var(--tg-surface-solid, #fff);
        border-top: 1px solid var(--tg-border, rgba(0,0,0,0.1));
        box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
        display: flex;
        gap: 0.75rem;
    }
    .ui-tool-gen__nav > * { flex: 1; }
}

@media (max-width: 480px) {
    .ui-tool-gen {
        padding: 0.75rem 0.5rem 6rem;
    }
    .ui-form-section {
        padding: 0.85rem 0.75rem;
        border-radius: 0.75rem;
    }
    .ui-tool-gen__eyebrow { display: none; }
}




/* ── components/flow-editor.css ── */
/* ═══════════════════════════════════════════════════════════════════
   FLOW EDITOR — Visual Agent Pipeline Builder
   fe-* / ui-mode-* / ui-mode-tab

   All colors reference semantic --fe-* tokens defined below.
   Raw RGB channels come from brand.css (--rgb-indigo, --rgb-white, etc.)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Token layer ────────────────────────────────────────────────────
   Grouped: raw rgb → surfaces → text → borders → accent → node types
            → edges → canvas → ports → inspector → chat → mobile
   ──────────────────────────────────────────────────────────────── */
:root {
  /* ─── Raw RGB channels (flow-editor specific) ─── */
  --fe-rgb-indigo:  var(--rgb-indigo);         /* 99,102,241 */
  --fe-rgb-emerald: 16, 185, 129;
  --fe-rgb-red:     239, 68, 68;
  --fe-rgb-amber:   245, 158, 11;
  --fe-rgb-sky:     var(--b-c-sky-rgb);        /* 14,165,233 */
  --fe-rgb-violet:  168, 85, 247;
  --fe-rgb-white:   var(--rgb-white);           /* 255,255,255 */
  --fe-rgb-slate:   var(--rgb-slate-400);       /* 148,163,184 */

  /* ─── Surfaces (FAI HUB light default) ─── */
  --fe-overlay-bg:   #eef3fb;
  --fe-panel-bg:     #ffffff;
  --fe-node-bg:      #ffffff;
  --fe-canvas-bg:    #eef3fb;
  --fe-port-bg:      #f2f5fa;

  /* ─── Text ─── */
  --fe-text-1:       #0d1017;
  --fe-text-2:       #626b78;
  --fe-text-3:       #9aa3b0;
  --fe-text-4:       #9aa3b0;
  --fe-text-5:       #9aa3b0;
  --fe-text-muted:   #9aa3b0;
  --fe-text-dim:     rgba(13, 16, 23, 0.45);
  --fe-text-faint:   rgba(13, 16, 23, 0.35);
  --fe-text-ghost:   rgba(13, 16, 23, 0.25);
  --fe-text-vapor:   rgba(13, 16, 23, 0.18);
  --fe-text-slate:   rgba(98, 107, 120, 0.65);

  /* ─── Borders ─── */
  --fe-border-1:     #e5e8ee;
  --fe-border-2:     #e3e8f0;
  --fe-border-3:     #e3e8f0;
  --fe-border-4:     rgba(13, 16, 23, 0.08);
  --fe-border-5:     rgba(13, 16, 23, 0.06);
  --fe-border-hover: rgba(13, 16, 23, 0.04);

  /* ─── Surface helpers ─── */
  --fe-surface-up:     #f8fafc;
  --fe-surface-hover:  #f2f5fa;
  --fe-surface-subtle: #f8fafc;
  --fe-surface-faint:  #fafbfd;

  /* ─── Accent (FAI blue) ─── */
  --fe-accent:         #2f6aff;
  --fe-accent-light:   #5b8bff;
  --fe-accent-lighter: #7aa8ff;
  --fe-accent-dim:     #2558e6;
  --fe-accent-soft:    rgba(47, 106, 255, 0.4);

  /* ─── Node-type accent colors ─── */
  --fe-clr-trigger:   #f59e0b;
  --fe-clr-llm:       var(--fe-accent-light);
  --fe-clr-memory:    #34d399;
  --fe-clr-condition: #f87171;
  --fe-clr-tool:      #38bdf8;
  --fe-clr-output:    #c084fc;

  /* Node-type tinted backgrounds (15% opacity) */
  --fe-clr-trigger-bg:   rgba(var(--fe-rgb-amber),  0.15);
  --fe-clr-llm-bg:       rgba(var(--fe-rgb-indigo), 0.15);
  --fe-clr-memory-bg:    rgba(var(--fe-rgb-emerald),0.15);
  --fe-clr-condition-bg: rgba(var(--fe-rgb-red),    0.15);
  --fe-clr-tool-bg:      rgba(var(--fe-rgb-sky),    0.15);
  --fe-clr-output-bg:    rgba(var(--fe-rgb-violet), 0.15);

  /* Inspector badge lighter variants */
  --fe-clr-trigger-hi:   #fbbf24;
  --fe-clr-llm-hi:       var(--fe-accent-lighter);
  --fe-clr-memory-hi:    #6ee7b7;
  --fe-clr-condition-hi: #fca5a5;
  --fe-clr-tool-hi:      #7dd3fc;
  --fe-clr-output-hi:    #d8b4fe;

  /* ─── Edges ─── */
  --fe-edge-stroke:         rgba(47, 106, 255, 0.45);
  --fe-edge-true:           rgba(15, 163, 137, 0.55);
  --fe-edge-false:          rgba(224, 83, 61, 0.5);
  --fe-rgb-indigo-400: 91, 139, 255;
  --fe-edge-hover:          #2558e6;
  --fe-edge-hover-glow:     rgba(47, 106, 255, 0.25);
  --fe-edge-pending:        rgba(47, 106, 255, 0.45);
  --fe-edge-pending-glow:   rgba(47, 106, 255, 0.15);
  --fe-edge-arrow:          rgba(47, 106, 255, 0.55);
  --fe-edge-label-fill:     #0d1017;
  --fe-edge-label-bg-fill:  rgba(255, 255, 255, 0.92);
  --fe-edge-label-bg-stroke:rgba(47, 106, 255, 0.25);
  --fe-edge-label-bg-true:  rgba(var(--fe-rgb-emerald), 0.4);
  --fe-edge-label-bg-false: rgba(var(--fe-rgb-red), 0.4);

  /* ─── Canvas grid ─── */
  --fe-canvas-dot:  rgba(47, 106, 255, 0.05);
  --fe-canvas-grid: rgba(13, 16, 23, 0.04);

  /* ─── Port ─── */
  --fe-port-border:        #cdd6e2;
  --fe-port-ring:          #9aa3b0;
  --fe-port-hover-clr:     #2f6aff;
  --fe-port-hover-bg:      #eaf0ff;
  --fe-port-hover-ring:    rgba(47, 106, 255, 0.15);
  --fe-port-hover-outer:   rgba(47, 106, 255, 0.18);
  --fe-port-active-border: #2f6aff;
  --fe-port-active-bg:     #eaf0ff;

  /* ─── Port: true / false ─── */
  --fe-port-true-border:     rgba(var(--fe-rgb-emerald), 0.5);
  --fe-port-true-hover:      var(--fe-clr-memory);
  --fe-port-true-hover-bg:   rgba(var(--fe-rgb-emerald), 0.2);
  --fe-port-true-ring:       rgba(var(--fe-rgb-emerald), 0.5);
  --fe-port-false-border:    rgba(var(--fe-rgb-red), 0.5);
  --fe-port-false-hover:     var(--fe-clr-condition);
  --fe-port-false-hover-bg:  rgba(var(--fe-rgb-red), 0.2);
  --fe-port-false-ring:      rgba(var(--fe-rgb-red), 0.5);

  /* ─── Inspector ─── */
  --fe-insp-port-in:      rgba(var(--fe-rgb-indigo), 0.5);
  --fe-insp-port-out:     rgba(var(--fe-rgb-emerald), 0.5);
  --fe-insp-dot-in:       var(--fe-accent-light);
  --fe-insp-dot-out:      var(--fe-clr-memory);
  --fe-insp-del-border:   rgba(var(--fe-rgb-red), 0.25);
  --fe-insp-del-text:     rgba(var(--fe-rgb-red), 0.65);
  --fe-insp-del-hover-bg: rgba(var(--fe-rgb-red), 0.1);
  --fe-insp-del-hover-clr:var(--fe-clr-condition);
  --fe-insp-del-hover-bd: rgba(var(--fe-rgb-red), 0.5);
  --fe-badge-true-bg:     rgba(var(--fe-rgb-emerald), 0.15);
  --fe-badge-true-text:   #6ee7b7;
  --fe-badge-false-bg:    rgba(var(--fe-rgb-red), 0.15);
  --fe-badge-false-text:  #fca5a5;

  /* ─── Chat (inside FE) ─── */
  --fe-chat-example-bg:     #eaf0ff;
  --fe-chat-example-border: rgba(47, 106, 255, 0.2);
  --fe-chat-example-text:   #2f6aff;
  --fe-chat-user-bg:        #eaf0ff;
  --fe-chat-user-border:    rgba(47, 106, 255, 0.22);
  --fe-chat-avatar-bg:      #eaf0ff;
  --fe-chat-avatar-border:  rgba(47, 106, 255, 0.2);
  --fe-chat-avatar-clr:     #2f6aff;

  /* ─── Mobile warning ─── */
  --fe-warn-bg:     rgba(var(--fe-rgb-warn), 0.1);
  --fe-warn-border: rgba(var(--fe-rgb-warn), 0.3);
  --fe-warn-text:   #92400e;

  /* ─── Additional text shades ─── */
  --fe-text-white:     #fff;
  --fe-text-port:      #626b78;
  --fe-text-hover:     #0d1017;

  /* ─── Shadows ─── */
  --fe-shadow:         rgba(20, 40, 95, 0.08);
  --fe-shadow-heavy:   rgba(20, 40, 95, 0.14);
  --fe-shadow-light:   rgba(20, 40, 95, 0.06);
  --fe-code-bg:        #f2f5fa;

  /* ─── Node card states ─── */
  --fe-node-hover-bd:       rgba(47, 106, 255, 0.35);
  --fe-node-hover-glow:     rgba(47, 106, 255, 0.1);
  --fe-node-selected-glow:  rgba(47, 106, 255, 0.18);
  --fe-logo-border:         rgba(47, 106, 255, 0.25);

  /* ─── Delete icon ─── */
  --fe-del-icon-bg:    rgba(var(--fe-rgb-red), 0.12);

  /* ─── Port animation ─── */
  --fe-port-pulse-sm:  rgba(var(--fe-rgb-indigo), 0.2);
  --fe-port-pulse-md:  rgba(var(--fe-rgb-indigo), 0.25);
  --fe-port-pulse-lg:  rgba(var(--fe-rgb-indigo), 0.35);
  --fe-port-pulse-xl:  rgba(var(--fe-rgb-indigo), 0.4);
  --fe-port-connect-bd:rgba(var(--fe-rgb-indigo), 0.55);
  --fe-port-connect-bg:rgba(var(--fe-rgb-indigo), 0.08);
  --fe-port-breathe-sm:rgba(var(--fe-rgb-indigo), 0.1);
  --fe-port-breathe-md:rgba(var(--fe-rgb-indigo), 0.18);

  /* ─── Condition port glow ─── */
  --fe-port-true-glow: rgba(var(--fe-rgb-emerald), 0.12);
  --fe-port-false-glow:rgba(var(--fe-rgb-red), 0.12);

  /* ─── Input focus ─── */
  --fe-input-focus-bg: #ffffff;
  --fe-input-focus-bd: #2f6aff;

  /* ─── Scrollbar ─── */
  --fe-scrollbar: #cdd6e2;

  /* ─── Mode tabs ─── */
  --fe-tab-text:        #9aa3b0;
  --fe-tab-hover-text:  #0d1017;
  --fe-tab-hover-bg:    #f2f5fa;
  --fe-tab-active-bg:   #eaf0ff;
  --fe-tab-active-text: #2f6aff;
  --fe-tab-active-bd:   rgba(47, 106, 255, 0.28);
  --fe-tab-badge-bg:    #2f6aff;
}

/* LIGHT THEME — совпадает с :root (FAI HUB light-only) */
[data-theme="light"],
[data-cab-theme="light"] {
  /* inherits :root FAI tokens */
}

/* ── Mode tabs on CreateAgent page ─────────────────────────── */
.ui-mode-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: #f2f5fa;
    border: 1px solid #e5e8ee;
    border-radius: 11px;
    padding: 4px;
    width: fit-content;
}
.ui-mode-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--fe-tab-text);
    font-size: var(--ts-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--t-smooth);
    font-family: inherit;
}
.ui-mode-tab:hover { color: var(--fe-tab-hover-text); background: var(--fe-tab-hover-bg); }
.ui-mode-tab--active {
    background: var(--fe-tab-active-bg);
    color: var(--fe-tab-active-text);
    border: 1px solid var(--fe-tab-active-bd);
}
.ui-mode-tab__badge {
    background: var(--fe-tab-badge-bg);
    color: var(--fe-text-white);
    font-size: var(--ts-3xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 20px;
}

/* ── Overlay ────────────────────────────────────────────────── */
.fe-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay, 9000);
    display: flex;
    flex-direction: column;
    background: var(--fe-overlay-bg);
    color: var(--fe-text-1);
    font-family: inherit;
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────── */
.fe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 16px;
    background: var(--fe-panel-bg);
    border-bottom: 1px solid var(--fe-border-3);
    flex-shrink: 0;
    gap: 12px;
}
.fe-header__left { display: flex; align-items: center; gap: 10px; }
.fe-header__logo {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--fe-clr-llm-bg);
    border: 1px solid var(--fe-logo-border);
    border-radius: 7px;
    color: var(--fe-accent-light);
    flex-shrink: 0;
}
.fe-header__title { font-size: var(--ts-md); font-weight: 600; color: var(--fe-text-1); }
.fe-header__agent-name { font-size: var(--ts-base); color: var(--fe-text-muted); }
.fe-header__center { display: flex; align-items: center; gap: 16px; flex: 1; justify-content: center; }
.fe-header__stat {
    display: flex; align-items: center; gap: 5px;
    font-size: var(--ts-xs); color: var(--fe-text-muted);
}
.fe-header__right { display: flex; align-items: center; gap: 6px; }
.fe-header__divider { width: 1px; height: 20px; background: var(--fe-border-1); margin: 0 4px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.fe-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 13px;
    min-height: 44px;
    border-radius: 7px;
    border: 1px solid transparent;
    font-size: var(--ts-xs); font-weight: 500;
    cursor: pointer;
    transition: all var(--t-base);
    white-space: nowrap;
}
.fe-btn--ghost {
    background: transparent;
    border-color: var(--fe-border-1);
    color: var(--fe-text-3);
}
.fe-btn--ghost:hover { background: var(--fe-surface-up); color: var(--fe-text-1); }
.fe-btn--primary {
    background: #2f6aff;
    border-color: #2f6aff;
    color: #fff;
    border-radius: 10px;
}
.fe-btn--primary:hover:not(:disabled) { background: #2558e6; }
.fe-btn--primary:disabled { opacity: .45; cursor: not-allowed; }
.fe-btn--close {
    background: transparent;
    border: none;
    color: var(--fe-text-muted);
    padding: 6px;
    border-radius: 6px;
}
.fe-btn--close:hover { background: var(--fe-surface-up); color: var(--fe-text-1); }

/* ── Body layout ─────────────────────────────────────────────── */
.fe-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Palette ─────────────────────────────────────────────────── */
.fe-palette {
    width: 220px;
    flex-shrink: 0;
    background: var(--fe-panel-bg);
    border-right: 1px solid var(--fe-border-3);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 12px 0 16px;
}
.fe-palette__header {
    padding: 0 14px 10px;
    border-bottom: 1px solid var(--fe-border-4);
    margin-bottom: 8px;
}
.fe-palette__title { font-size: var(--ts-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fe-text-dim); }
.fe-palette__section { padding: 6px 10px; }
.fe-palette__section-label { font-size: var(--ts-3xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--fe-text-faint); display: block; padding: 4px 4px 6px; }
.fe-palette__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: grab;
    transition: background var(--t-base);
    user-select: none;
    border: 1px solid transparent;
}
.fe-palette__item:hover { background: var(--fe-surface-hover); border-color: var(--fe-border-3); }
.fe-palette__item:active { cursor: grabbing; }
.fe-palette__item-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    flex-shrink: 0;
}
.fe-palette__item-icon--trigger   { background: var(--fe-clr-trigger-bg);   color: var(--fe-clr-trigger); }
.fe-palette__item-icon--llm       { background: var(--fe-clr-llm-bg);       color: var(--fe-clr-llm); }
.fe-palette__item-icon--memory    { background: var(--fe-clr-memory-bg);    color: var(--fe-clr-memory); }
.fe-palette__item-icon--condition { background: var(--fe-clr-condition-bg); color: var(--fe-clr-condition); }
.fe-palette__item-icon--tool      { background: var(--fe-clr-tool-bg);      color: var(--fe-clr-tool); }
.fe-palette__item-icon--output    { background: var(--fe-clr-output-bg);    color: var(--fe-clr-output); }
.fe-palette__item-text { display: flex; flex-direction: column; gap: 1px; }
.fe-palette__item-label { font-size: var(--ts-xs); font-weight: 600; color: var(--fe-text-1); }
.fe-palette__item-desc { font-size: var(--ts-3xs); color: var(--fe-text-dim); }
.fe-palette__hint {
    margin-top: auto;
    padding: 12px 14px 0;
    font-size: var(--ts-3xs);
    color: var(--fe-text-ghost);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Canvas ──────────────────────────────────────────────────── */
.fe-main {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.fe-canvas {
    width: 100%; height: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--fe-canvas-bg);
    background-image:
        radial-gradient(circle at 50% 50%, var(--fe-canvas-dot) 0%, transparent 60%),
        linear-gradient(var(--fe-canvas-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--fe-canvas-grid) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px, 28px 28px;
    cursor: grab;
}
.fe-canvas:active { cursor: grabbing; }
.fe-canvas__inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform-origin: top left;
}
.fe-canvas__svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
}
.fe-canvas__svg * { pointer-events: all; }
.fe-canvas__empty {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--fe-text-ghost);
    pointer-events: none;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.fe-canvas__empty p { font-size: var(--ts-md); margin: 0; }
.fe-canvas__empty-hint { font-size: var(--ts-xs) !important; }

/* ── Edges (n8n style) ───────────────────────────────────────── */
.fe-edge {
    stroke: var(--fe-edge-stroke);
    stroke-width: 2.5;
    fill: none;
    pointer-events: none;
    transition: stroke var(--t-base), stroke-width var(--t-base);
    stroke-linecap: round;
}
.fe-edge--true  { stroke: var(--fe-edge-true); }
.fe-edge--false { stroke: var(--fe-edge-false); }
.fe-edge--hovered {
    stroke-width: 3.5;
    stroke: var(--fe-edge-hover);
    filter: drop-shadow(0 0 6px var(--fe-edge-hover-glow));
}
.fe-edge--pending {
    stroke: var(--fe-edge-pending);
    stroke-dasharray: 8 6;
    stroke-width: 2;
    animation: fe-dash-march .5s linear infinite;
    filter: drop-shadow(0 0 4px var(--fe-edge-pending-glow));
}
@keyframes fe-dash-march { to { stroke-dashoffset: -14; } }

.fe-edge__hit { cursor: pointer; pointer-events: stroke; }
.fe-edge__arrow { fill: var(--fe-edge-arrow); }
.fe-edge__label {
    font-size: var(--ts-3xs);
    font-weight: 700;
    fill: var(--fe-edge-label-fill);
    dominant-baseline: central;
    pointer-events: none;
    letter-spacing: .04em;
}

/* SVG label backgrounds — used by flow-editor-interop.js via classList */
.fe-edge__label-bg {
    fill: var(--fe-edge-label-bg-fill);
    stroke: var(--fe-edge-label-bg-stroke);
    stroke-width: 1;
}
.fe-edge__label-bg--true    { stroke: var(--fe-edge-label-bg-true); }
.fe-edge__label-bg--false   { stroke: var(--fe-edge-label-bg-false); }
.fe-edge__label-bg--default { stroke: var(--fe-edge-label-bg-stroke); }

/* ── Node card ───────────────────────────────────────────────── */
.fe-node {
    position: absolute;
    width: 220px;
    border-radius: 8px;
    background: var(--fe-node-bg);
    border: 1.5px solid var(--fe-border-2);
    cursor: grab;
    box-shadow: 0 2px 8px var(--fe-shadow), 0 0 0 0 transparent;
    user-select: none;
    transition: border-color var(--t-base), box-shadow var(--t-base), opacity var(--t-base);
}
.fe-node:hover {
    border-color: var(--fe-node-hover-bd);
    box-shadow: 0 4px 16px var(--fe-shadow-heavy), 0 0 0 2px var(--fe-node-hover-glow);
    transform: translateY(-1px);
}
.fe-node:active { cursor: grabbing; }
.fe-node--selected {
    border-color: var(--fe-accent) !important;
    box-shadow: 0 4px 20px var(--fe-shadow-heavy), 0 0 0 2px var(--fe-node-selected-glow) !important;
}
.fe-node--trigger   { border-top: 2.5px solid var(--fe-clr-trigger); }
.fe-node--llm       { border-top: 2.5px solid var(--fe-clr-llm); }
.fe-node--memory    { border-top: 2.5px solid var(--fe-clr-memory); }
.fe-node--condition { border-top: 2.5px solid var(--fe-clr-condition); }
.fe-node--tool      { border-top: 2.5px solid var(--fe-clr-tool); }
.fe-node--output    { border-top: 2.5px solid var(--fe-clr-output); }

.fe-node__inner {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 12px 12px 14px;
    position: relative;
}
.fe-node__icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; flex-shrink: 0;
}
.fe-node__icon--trigger   { background: var(--fe-clr-trigger-bg);   color: var(--fe-clr-trigger); }
.fe-node__icon--llm       { background: var(--fe-clr-llm-bg);       color: var(--fe-clr-llm); }
.fe-node__icon--memory    { background: var(--fe-clr-memory-bg);    color: var(--fe-clr-memory); }
.fe-node__icon--condition { background: var(--fe-clr-condition-bg); color: var(--fe-clr-condition); }
.fe-node__icon--tool      { background: var(--fe-clr-tool-bg);      color: var(--fe-clr-tool); }
.fe-node__icon--output    { background: var(--fe-clr-output-bg);    color: var(--fe-clr-output); }

.fe-node__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fe-node__type-label { font-size: var(--ts-3xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fe-text-slate); }
.fe-node__label { font-size: var(--ts-base); font-weight: 600; color: var(--fe-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fe-node__delete {
    background: transparent; border: none; cursor: pointer;
    color: var(--fe-text-vapor);
    padding: 4px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: color var(--t-hover), background var(--t-hover);
    opacity: 0;
}
.fe-node:hover .fe-node__delete { opacity: 1; }
.fe-node__delete:hover { color: var(--fe-clr-condition); background: var(--fe-del-icon-bg); }

/* ── Ports (n8n style) ───────────────────────────────────────── */
.fe-port {
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--fe-port-bg);
    border: 2.5px solid var(--fe-port-border);
    cursor: crosshair;
    top: 50%; transform: translateY(-50%);
    transition: border-color var(--t-hover), background var(--t-hover), box-shadow var(--t-hover), transform var(--t-hover);
    z-index: 10;
    display: flex; align-items: center; justify-content: center;
}
.fe-port__ring {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--fe-port-ring);
    transition: background var(--t-hover), transform var(--t-hover);
    pointer-events: none;
}
.fe-port:hover .fe-port__ring { background: var(--fe-port-hover-clr); transform: scale(1.3); }
.fe-port:hover {
    border-color: var(--fe-port-hover-clr);
    background: var(--fe-port-hover-bg);
    box-shadow: 0 0 0 4px var(--fe-port-hover-ring), 0 0 12px var(--fe-port-hover-outer);
    transform: translateY(-50%) scale(1.25);
}

/* Active port (during connection) */
.fe-port--active {
    border-color: var(--fe-port-active-border) !important;
    background: var(--fe-port-active-bg) !important;
    box-shadow: 0 0 0 5px var(--fe-port-pulse-sm), 0 0 14px var(--fe-port-pulse-lg) !important;
    animation: fe-port-pulse .9s ease-in-out infinite;
}
@keyframes fe-port-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--fe-port-pulse-sm), 0 0 10px var(--fe-port-pulse-md); }
    50%       { box-shadow: 0 0 0 7px var(--fe-node-hover-glow), 0 0 18px var(--fe-port-pulse-xl); }
}

/* In connecting mode, highlight all target ports */
.fe-canvas--connecting .fe-port--in {
    border-color: var(--fe-port-connect-bd);
    background: var(--fe-port-connect-bg);
    animation: fe-port-breathe 1.2s ease-in-out infinite;
}
@keyframes fe-port-breathe {
    0%, 100% { box-shadow: 0 0 0 3px var(--fe-port-breathe-sm); }
    50%       { box-shadow: 0 0 0 5px var(--fe-port-breathe-md), 0 0 12px var(--fe-port-pulse-sm); }
}
.fe-canvas--connecting .fe-port--in:hover {
    border-color: var(--fe-accent-light);
    background: var(--fe-port-hover-bg);
    transform: translateY(-50%) scale(1.5);
    box-shadow: 0 0 0 6px var(--fe-port-pulse-sm), 0 0 16px var(--fe-port-pulse-lg);
    animation: none;
}

/* In connecting mode, dim nodes that can't be targets */
.fe-canvas--connecting .fe-node { opacity: 0.7; transition: opacity var(--t-base); }
.fe-canvas--connecting .fe-node:hover { opacity: 1; }

.fe-port--in  { left: -9px; top: 50%; transform: translateY(-50%); }
.fe-port--out { right: -9px; top: 50%; transform: translateY(-50%); }

/* ── Condition ports (true/false) ────────────────────────────── */
.fe-node__cond-ports {
    display: flex; flex-direction: column;
    position: absolute; right: -52px; top: 0; height: 100%;
    justify-content: space-around; gap: 4px;
    pointer-events: none;
}
.fe-port--true,
.fe-port--false {
    position: relative;
    top: auto; transform: none; right: auto;
    width: auto; height: auto;
    border-radius: 20px;
    padding: 3px 8px 3px 4px;
    display: flex; align-items: center; gap: 5px;
    pointer-events: all;
    white-space: nowrap;
}
.fe-port--true  { border-color: var(--fe-port-true-border); }
.fe-port--false { border-color: var(--fe-port-false-border); }
.fe-port--true:hover  {
    border-color: var(--fe-port-true-hover); background: var(--fe-port-true-hover-bg);
    box-shadow: 0 0 0 4px var(--fe-port-true-glow);
    transform: scale(1.08);
}
.fe-port--false:hover {
    border-color: var(--fe-port-false-hover); background: var(--fe-port-false-hover-bg);
    box-shadow: 0 0 0 4px var(--fe-port-false-glow);
    transform: scale(1.08);
}
.fe-port--true .fe-port__ring  { background: var(--fe-port-true-ring);  width: 6px; height: 6px; }
.fe-port--false .fe-port__ring { background: var(--fe-port-false-ring); width: 6px; height: 6px; }
.fe-port--true:hover .fe-port__ring  { background: var(--fe-port-true-hover); }
.fe-port--false:hover .fe-port__ring { background: var(--fe-port-false-hover); }
.fe-port__label {
    font-size: var(--ts-3xs); font-weight: 700;
    color: var(--fe-text-5);
    white-space: nowrap;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Connecting mode - canvas cursor */
.fe-canvas--connecting { cursor: crosshair !important; }

/* ── Inspector ───────────────────────────────────────────────── */
.fe-inspector {
    width: 280px;
    flex-shrink: 0;
    background: var(--fe-panel-bg);
    border-left: 1px solid var(--fe-border-3);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: width var(--t-smooth);
}
.fe-inspector--empty { width: 240px; }
.fe-inspector__placeholder {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 24px;
    color: var(--fe-text-ghost); text-align: center; font-size: var(--ts-base);
}
.fe-inspector__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--fe-border-4);
}
.fe-inspector__node-type {
    font-size: var(--ts-3xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 20px;
}
.fe-inspector__node-type--trigger   { background: var(--fe-clr-trigger-bg);   color: var(--fe-clr-trigger-hi); }
.fe-inspector__node-type--llm       { background: var(--fe-clr-llm-bg);       color: var(--fe-clr-llm-hi); }
.fe-inspector__node-type--memory    { background: var(--fe-clr-memory-bg);    color: var(--fe-clr-memory-hi); }
.fe-inspector__node-type--condition { background: var(--fe-clr-condition-bg); color: var(--fe-clr-condition-hi); }
.fe-inspector__node-type--tool      { background: var(--fe-clr-tool-bg);      color: var(--fe-clr-tool-hi); }
.fe-inspector__node-type--output    { background: var(--fe-clr-output-bg);    color: var(--fe-clr-output-hi); }
.fe-inspector__close {
    background: transparent; border: none; cursor: pointer;
    color: var(--fe-text-faint); padding: 4px; border-radius: 4px;
    display: flex; align-items: center;
}
.fe-inspector__close:hover { color: var(--fe-text-1); background: var(--fe-surface-up); }
.fe-inspector__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.fe-inspector__field { display: flex; flex-direction: column; gap: 5px; }
.fe-inspector__label { font-size: var(--ts-2xs); font-weight: 600; color: var(--fe-text-5); }
.fe-inspector__input,
.fe-inspector__select,
.fe-inspector__textarea {
    background: #dde5f0;
    border: 1px solid #cdd6e2;
    border-radius: 7px;
    color: var(--fe-text-1);
    font-size: var(--ts-base);
    padding: 8px 10px;
    outline: none;
    transition: border-color var(--t-base);
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.fe-inspector__input:focus,
.fe-inspector__select:focus,
.fe-inspector__textarea:focus { border-color: var(--fe-accent-soft); background: var(--fe-input-focus-bg); }
.fe-inspector__select { cursor: pointer; }
.fe-inspector__textarea { resize: vertical; min-height: 80px; }
.fe-inspector__info { font-size: var(--ts-xs); color: var(--fe-text-dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fe-inspector__badge {
    font-size: var(--ts-3xs); font-weight: 700; padding: 2px 7px; border-radius: 20px;
}
.fe-inspector__badge--true  { background: var(--fe-badge-true-bg);  color: var(--fe-badge-true-text); }
.fe-inspector__badge--false { background: var(--fe-badge-false-bg); color: var(--fe-badge-false-text); }
.fe-inspector__footer {
    padding: 12px 16px;
    border-top: 1px solid var(--fe-border-4);
    margin-top: auto;
}
.fe-inspector__delete-btn {
    display: flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid var(--fe-insp-del-border);
    color: var(--fe-insp-del-text); border-radius: 7px;
    padding: 7px 12px; font-size: var(--ts-xs); cursor: pointer;
    transition: all var(--t-base);
    width: 100%; justify-content: center;
}
.fe-inspector__delete-btn:hover { background: var(--fe-insp-del-hover-bg); color: var(--fe-insp-del-hover-clr); border-color: var(--fe-insp-del-hover-bd); }

/* ── AI Chat ─────────────────────────────────────────────────── */
.fe-chat {
    position: relative;
    background: var(--fe-panel-bg);
    border-top: 1px solid var(--fe-border-3);
    flex-shrink: 0;
    max-height: 48px;
    transition: max-height .25s ease;
    overflow: hidden;
}
.fe-chat--open { max-height: 340px; }
.fe-chat__toggle-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px;
    cursor: pointer;
    user-select: none;
    height: 48px;
    box-sizing: border-box;
}
.fe-chat__toggle-left { display: flex; align-items: center; gap: 8px; font-size: var(--ts-base); font-weight: 500; color: var(--fe-text-3); }
.fe-chat__toggle-bar:hover .fe-chat__toggle-left { color: var(--fe-text-1); }
.fe-chat__chevron { color: var(--fe-text-faint); transition: transform var(--t-smooth); }
.fe-chat__chevron--up { transform: rotate(180deg); }

.fe-chat__body { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.fe-chat__messages {
    max-height: 200px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 8px;
    padding: 4px 0;
}
.fe-chat__welcome { text-align: center; color: var(--fe-text-muted); font-size: var(--ts-base); }
.fe-chat__examples { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.fe-chat__example {
    background: var(--fe-chat-example-bg); border: 1px solid var(--fe-chat-example-border);
    color: var(--fe-chat-example-text); border-radius: 20px; padding: 5px 12px; font-size: var(--ts-2xs);
    cursor: pointer; transition: all var(--t-base);
}
.fe-chat__example:hover { background: var(--fe-chat-user-bg); }
.fe-chat__msg { display: flex; gap: 8px; align-items: flex-start; }
.fe-chat__msg--user { flex-direction: row-reverse; }
.fe-chat__msg-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--fe-chat-avatar-bg); border: 1px solid var(--fe-chat-avatar-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--fe-chat-avatar-clr);
}
.fe-chat__bubble {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: var(--ts-xs);
    line-height: 1.5;
}
.fe-chat__msg--user .fe-chat__bubble {
    background: var(--fe-chat-user-bg);
    border: 1px solid var(--fe-chat-user-border);
    color: var(--fe-text-1);
}
.fe-chat__msg--ai .fe-chat__bubble {
    background: var(--fe-surface-hover);
    border: 1px solid var(--fe-border-2);
    color: var(--fe-text-2);
}
.fe-chat__typing { display: flex; align-items: center; gap: 3px; height: 14px; }
.fe-chat__typing span {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--fe-text-muted);
    animation: fe-typing 1s infinite;
}
.fe-chat__typing span:nth-child(2) { animation-delay: .2s; }
.fe-chat__typing span:nth-child(3) { animation-delay: .4s; }
@keyframes fe-typing { 0%,80%,100% { opacity:.3; transform:scale(.8); } 40% { opacity:1; transform:scale(1); } }

.fe-chat__input-row { display: flex; gap: 8px; }
.fe-chat__input {
    flex: 1;
    background: var(--fe-surface-hover);
    border: 1px solid var(--fe-border-1);
    border-radius: 8px;
    color: var(--fe-text-1); font-size: var(--ts-base); padding: 8px 12px;
    outline: none; font-family: inherit;
    transition: border-color var(--t-base);
}
.fe-chat__input:focus { border-color: var(--fe-input-focus-bd); }
.fe-chat__input:disabled { opacity: .5; }
.fe-chat__send {
    background: var(--fe-accent); border: none; border-radius: 8px;
    color: var(--fe-text-white); padding: 8px 12px; cursor: pointer;
    display: flex; align-items: center; transition: background var(--t-base);
}
.fe-chat__send:hover:not(:disabled) { background: var(--fe-accent-dim); }
.fe-chat__send:disabled { opacity: .45; cursor: not-allowed; }

/* ── Scrollbars inside editor ─────────────────────────────────── */
.fe-palette::-webkit-scrollbar,
.fe-inspector::-webkit-scrollbar,
.fe-chat__messages::-webkit-scrollbar { width: 4px; }
.fe-palette::-webkit-scrollbar-track,
.fe-inspector::-webkit-scrollbar-track,
.fe-chat__messages::-webkit-scrollbar-track { background: transparent; }
.fe-palette::-webkit-scrollbar-thumb,
.fe-inspector::-webkit-scrollbar-thumb,
.fe-chat__messages::-webkit-scrollbar-thumb { background: var(--fe-scrollbar); border-radius: 2px; }

/* ── Inspector extended elements ────────────────────────────── */
.fe-inspector__section-title {
    font-size: var(--ts-3xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fe-text-ghost);
    padding: 10px 0 4px;
    border-top: 1px solid var(--fe-border-5);
    margin-top: 6px;
}
.fe-inspector__section-title:first-child { border-top: none; margin-top: 0; }

.fe-inspector__ports-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 2px;
}
.fe-inspector__port-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--ts-2xs);
    padding: 3px 6px;
    border-radius: 5px;
    background: var(--fe-surface-faint);
}
.fe-inspector__port-row--in  { border-left: 2px solid var(--fe-insp-port-in); }
.fe-inspector__port-row--out { border-left: 2px solid var(--fe-insp-port-out); }
.fe-inspector__port-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fe-inspector__port-dot--in  { background: var(--fe-insp-dot-in); }
.fe-inspector__port-dot--out { background: var(--fe-insp-dot-out); }
.fe-inspector__port-name {
    font-weight: 600;
    color: var(--fe-text-port);
    min-width: 70px;
    font-family: 'Courier New', monospace;
    font-size: var(--ts-2xs);
}
.fe-inspector__port-type {
    color: var(--fe-text-faint);
    font-size: var(--ts-3xs);
}

.fe-inspector__hint {
    font-size: var(--ts-3xs);
    color: var(--fe-text-faint);
    margin-top: 3px;
    line-height: 1.4;
}

.fe-inspector__range {
    width: 100%;
    accent-color: var(--fe-accent);
    margin: 4px 0 2px;
}
.fe-inspector__range-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--ts-3xs);
    color: var(--fe-text-ghost);
}

.fe-inspector__toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ts-xs);
    color: var(--fe-text-3);
    padding: 4px 0;
    cursor: pointer;
    user-select: none;
}
.fe-inspector__toggle-row:hover { color: var(--fe-text-hover); }
.fe-inspector__toggle-row input[type=checkbox] {
    accent-color: var(--fe-accent);
    width: 14px; height: 14px;
    cursor: pointer;
}

.fe-inspector__textarea--code {
    font-family: 'Courier New', monospace;
    font-size: var(--ts-2xs);
    background: var(--fe-code-bg);
}

.fe-inspector__info.mt-2 { margin-top: 8px; }

/* optgroup styling in selects */
.fe-inspector__select optgroup {
    color: var(--fe-text-muted);
    font-size: var(--ts-3xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.fe-inspector__select option {
    background: var(--fe-node-bg);
    color: var(--fe-text-1);
    font-size: var(--ts-xs);
}

/* ══ MOBILE FLOW EDITOR ══ */
.fe-mobile-warning {
    display: none;
    padding: 1rem 1.25rem;
    margin: 1rem;
    background: var(--fe-warn-bg);
    border: 1px solid var(--fe-warn-border);
    border-radius: 12px;
    color: var(--fe-warn-text);
    font-size: var(--ts-base);
    line-height: 1.5;
    text-align: center;
}
.fe-mobile-warning__icon { font-size: var(--ts-3xl); margin-bottom: 0.5rem; }
.fe-mobile-warning__title { font-weight: 700; margin-bottom: 0.25rem; }

/* ═══════════════════════════════════════════════════════════════════
   n8n-СОВМЕСТИМЫЙ СЛОЙ — мульти-порты, AI-порты, статусы, вкладки,
   панель валидации, run-плашка, Copilot.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Node card: accent fallback (категории каталога) ── */
.fe-node--trigger   { border-top: 2.5px solid var(--fe-clr-trigger); }
.fe-node--llm       { border-top: 2.5px solid var(--fe-clr-llm); }
.fe-node--memory    { border-top: 2.5px solid var(--fe-clr-memory); }
.fe-node--condition { border-top: 2.5px solid var(--fe-clr-condition); }
.fe-node--tool      { border-top: 2.5px solid var(--fe-clr-tool); }

/* ── Node run statuses ── */
.fe-node--status-running {
    border-color: var(--fe-clr-trigger) !important;
    box-shadow: 0 0 0 2px var(--fe-clr-trigger-bg), 0 0 18px var(--fe-clr-trigger-bg) !important;
    animation: fe-run-pulse 1s ease-in-out infinite;
}
@keyframes fe-run-pulse {
    0%,100% { box-shadow: 0 0 0 2px var(--fe-clr-trigger-bg), 0 0 12px var(--fe-clr-trigger-bg); }
    50%     { box-shadow: 0 0 0 4px var(--fe-clr-trigger-bg), 0 0 22px var(--fe-clr-trigger-bg); }
}
.fe-node--status-done   { border-color: var(--fe-clr-memory) !important; }
.fe-node--status-failed { border-color: var(--fe-clr-condition) !important; box-shadow: 0 0 0 2px var(--fe-clr-condition-bg) !important; }
.fe-node--status-skipped { opacity: 0.5; }
.fe-node--invalid { border-color: var(--fe-clr-condition) !important; }

.fe-node__badge {
    width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.fe-node__badge--error { background: var(--fe-clr-condition); color: #fff; }
.fe-node__spinner {
    width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--fe-clr-trigger-bg);
    border-top-color: var(--fe-clr-trigger);
    animation: fe-spin .7s linear infinite;
}
@keyframes fe-spin { to { transform: rotate(360deg); } }

/* ── Multiple main output ports (stacked, branches) ── */
.fe-node__out-ports {
    position: absolute;
    right: -9px; top: 0; height: 100%;
    display: flex; flex-direction: column; justify-content: space-around;
    align-items: flex-end;
    pointer-events: none;
}
.fe-node__out-ports .fe-port {
    position: relative; right: auto; top: auto; transform: none;
    pointer-events: all; margin: 2px 0;
}
.fe-node__out-ports .fe-port:hover { transform: scale(1.25); }
.fe-port--branch {
    border-radius: 20px; width: auto; height: auto;
    padding: 2px 8px 2px 4px; gap: 5px;
}
.fe-port--branch .fe-port__label {
    font-size: var(--ts-3xs); font-weight: 700; color: var(--fe-text-5);
    text-transform: uppercase; letter-spacing: .04em;
}

/* ── AI ports (sub-узлы снизу/сверху узла) ── */
.fe-node--has-ai-in  { padding-bottom: 14px; min-height: 84px; }  /* входы агента снизу */
.fe-node--has-ai-out { padding-top: 14px; }                       /* выход sub-узла сверху */
.fe-node--has-ai-in .fe-node__inner { padding-bottom: 6px; }

.fe-port--ai-guard { border-color: var(--fe-clr-condition); }
.fe-node__ai-ports {
    position: absolute;
    left: 0; width: 100%;
    display: flex; justify-content: center; gap: 18px;
    pointer-events: none;
}
.fe-node__ai-ports--bottom { bottom: -10px; }
.fe-node__ai-ports--top    { top: -10px; }
.fe-node__ai-ports .fe-port {
    position: relative; top: auto; left: auto; right: auto; transform: none;
    pointer-events: all;
    flex-direction: column;
}
.fe-port--ai { border-style: solid; }
.fe-port--ai-languageModel { border-color: var(--fe-clr-llm); }
.fe-port--ai-memory        { border-color: var(--fe-clr-memory); }
.fe-port--ai-tool          { border-color: var(--fe-clr-tool); }
.fe-port--ai-outputParser  { border-color: var(--fe-clr-output); }

/* Подпись AI-порта — только при наведении (чтобы 4 подписи агента не накладывались). */
.fe-port--ai .fe-port__ai-label {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-size: var(--ts-3xs); color: var(--fe-text-2); white-space: nowrap;
    background: var(--fe-panel-bg); border: 1px solid var(--fe-border-3);
    padding: 1px 6px; border-radius: 5px; z-index: 6;
    opacity: 0; pointer-events: none; transition: opacity var(--t-base);
}
.fe-node__ai-ports--bottom .fe-port__ai-label { top: 18px; }
.fe-node__ai-ports--top    .fe-port__ai-label { bottom: 18px; }
.fe-port--ai:hover .fe-port__ai-label { opacity: 1; }
.fe-port--required { animation: fe-port-breathe 1.2s ease-in-out infinite; border-style: dashed; }

/* ── AI edges (dashed, colored) ── */
.fe-edge--ai { stroke-width: 2; stroke-dasharray: 5 4; }
.fe-edge--ai-languageModel { stroke: var(--fe-clr-llm); }
.fe-edge--ai-memory        { stroke: var(--fe-clr-memory); }
.fe-edge--ai-tool          { stroke: var(--fe-clr-tool); }
.fe-edge--ai-guard          { stroke: var(--fe-clr-condition); }
.fe-edge--active { stroke: var(--fe-clr-trigger) !important; stroke-width: 3.5 !important; filter: drop-shadow(0 0 6px var(--fe-clr-trigger-bg)); }

/* ── Palette search ── */
.fe-palette__search { padding: 4px 12px 8px; }
.fe-palette__search-input {
    width: 100%; box-sizing: border-box;
    background: var(--fe-surface-hover); border: 1px solid var(--fe-border-1);
    border-radius: 7px; color: var(--fe-text-1); font-size: var(--ts-xs);
    padding: 7px 10px; outline: none; font-family: inherit;
}
.fe-palette__search-input:focus { border-color: var(--fe-accent-soft); }

/* ── Inspector tabs ── */
.fe-inspector__tabs {
    display: flex; gap: 2px; padding: 6px 12px 0;
    border-bottom: 1px solid var(--fe-border-4);
}
.fe-inspector__tab {
    flex: 1; background: transparent; border: none; cursor: pointer;
    color: var(--fe-tab-text); font-size: var(--ts-2xs); font-weight: 600;
    padding: 8px 4px; border-bottom: 2px solid transparent; font-family: inherit;
}
.fe-inspector__tab:hover { color: var(--fe-tab-hover-text); }
.fe-inspector__tab--active { color: var(--fe-tab-active-text); border-bottom-color: var(--fe-accent); }

/* ── Header issues stat & run button ── */
.fe-header__stat--issues {
    background: var(--fe-clr-condition-bg); color: var(--fe-clr-condition-hi);
    border: none; border-radius: 20px; padding: 3px 10px; cursor: pointer; font-weight: 600;
}
.fe-btn--run { background: var(--fe-clr-memory); border-color: var(--fe-clr-memory); color: #06281d; font-weight: 600; }
.fe-btn--run:hover:not(:disabled) { filter: brightness(1.08); }
.fe-btn--run:disabled { opacity: .45; cursor: not-allowed; }

/* ── Validation (issues) panel ── */
.fe-issues {
    position: absolute; right: 16px; bottom: 16px; width: 340px; max-height: 50%;
    background: var(--fe-panel-bg); border: 1px solid var(--fe-border-1);
    border-radius: 10px; box-shadow: 0 8px 32px var(--fe-shadow-heavy);
    display: flex; flex-direction: column; overflow: hidden; z-index: 50;
}
.fe-issues__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid var(--fe-border-4);
}
.fe-issues__title { font-size: var(--ts-xs); font-weight: 700; color: var(--fe-text-1); display: flex; gap: 8px; align-items: center; }
.fe-issues__count { background: var(--fe-clr-condition-bg); color: var(--fe-clr-condition-hi); border-radius: 20px; padding: 1px 8px; font-size: var(--ts-3xs); }
.fe-issues__close { background: none; border: none; color: var(--fe-text-faint); cursor: pointer; }
.fe-issues__list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.fe-issues__ok { display: flex; align-items: center; gap: 8px; color: var(--fe-clr-memory); font-size: var(--ts-xs); padding: 10px; }
.fe-issues__item {
    display: flex; align-items: flex-start; gap: 8px; text-align: left;
    background: var(--fe-surface-faint); border: 1px solid var(--fe-border-4);
    border-radius: 7px; padding: 8px 10px; cursor: pointer; font-family: inherit;
    color: var(--fe-text-2); font-size: var(--ts-2xs); transition: background var(--t-base);
}
.fe-issues__item:hover:not(:disabled) { background: var(--fe-surface-hover); }
.fe-issues__item:disabled { cursor: default; }
.fe-issues__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.fe-issues__item--error .fe-issues__dot   { background: var(--fe-clr-condition); }
.fe-issues__item--warning .fe-issues__dot { background: var(--fe-clr-trigger); }
.fe-issues__item--info .fe-issues__dot     { background: var(--fe-clr-tool); }

/* ── Test panel (боковое окно теста) ── */
.fe-test {
    width: 340px;
    flex-shrink: 0;
    background: var(--fe-panel-bg);
    border-left: 1px solid var(--fe-border-3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fe-test__header {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; border-bottom: 1px solid var(--fe-border-4);
}
.fe-test__title {
    display: flex; align-items: center; gap: 7px;
    font-size: var(--ts-sm); font-weight: 700; color: var(--fe-text-1);
    flex: 1;
}
.fe-test__title svg { color: var(--fe-clr-memory); }
.fe-test__engine { font-size: var(--ts-3xs); color: var(--fe-text-faint); }
.fe-test__close {
    background: transparent; border: none; cursor: pointer;
    color: var(--fe-text-faint); padding: 4px; border-radius: 4px; display: flex;
}
.fe-test__close:hover { color: var(--fe-text-1); background: var(--fe-surface-up); }

.fe-test__input-block { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--fe-border-4); }
.fe-test__label { font-size: var(--ts-2xs); font-weight: 600; color: var(--fe-text-5); }
.fe-test__input {
    width: 100%; box-sizing: border-box; resize: vertical;
    background: var(--fe-surface-hover); border: 1px solid var(--fe-border-1);
    border-radius: 7px; color: var(--fe-text-1); font-size: var(--ts-xs);
    padding: 8px 10px; outline: none; font-family: 'Courier New', monospace;
}
.fe-test__input:focus { border-color: var(--fe-input-focus-bd); background: var(--fe-input-focus-bg); }
.fe-test__actions { display: flex; }
.fe-test__btn { flex: 1; justify-content: center; }

.fe-test__status {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px 6px;
}
.fe-test__status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fe-clr-trigger); flex-shrink: 0; }
.fe-test__status--completed .fe-test__status-dot { background: var(--fe-clr-memory); }
.fe-test__status--failed .fe-test__status-dot    { background: var(--fe-clr-condition); }
.fe-test__status--cancelled .fe-test__status-dot  { background: var(--fe-text-faint); }
.fe-test__status--idle .fe-test__status-dot       { background: var(--fe-text-ghost); }
.fe-test__status-text { font-size: var(--ts-xs); font-weight: 600; color: var(--fe-text-1); flex: 1; }
.fe-test__status-count { font-size: var(--ts-2xs); color: var(--fe-text-muted); font-family: 'Courier New', monospace; }
.fe-test__progress { height: 4px; margin: 0 14px; background: var(--fe-surface-up); border-radius: 4px; overflow: hidden; }
.fe-test__bar { height: 100%; background: var(--fe-clr-memory); transition: width var(--t-smooth); }

.fe-test__results { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.fe-test__empty { color: var(--fe-text-ghost); font-size: var(--ts-xs); text-align: center; padding: 24px 12px; line-height: 1.5; }

.fe-test__node { border: 1px solid var(--fe-border-4); border-radius: 8px; overflow: hidden; background: var(--fe-surface-faint); }
.fe-test__node--running { border-color: var(--fe-clr-trigger); }
.fe-test__node--done    { border-color: var(--fe-border-2); }
.fe-test__node--failed  { border-color: var(--fe-clr-condition); }
.fe-test__node-head {
    width: 100%; box-sizing: border-box;
    display: flex; align-items: center; gap: 8px;
    background: transparent; border: none; cursor: pointer;
    padding: 9px 11px; font-family: inherit; text-align: left;
}
.fe-test__node-head:hover { background: var(--fe-surface-hover); }
.fe-test__node-status { width: 8px; height: 8px; border-radius: 50%; background: var(--fe-text-ghost); flex-shrink: 0; }
.fe-test__node-status--running { background: var(--fe-clr-trigger); animation: fe-spin 1s linear infinite; box-shadow: 0 0 0 3px var(--fe-clr-trigger-bg); }
.fe-test__node-status--done    { background: var(--fe-clr-memory); }
.fe-test__node-status--failed  { background: var(--fe-clr-condition); }
.fe-test__node-name { flex: 1; font-size: var(--ts-xs); font-weight: 600; color: var(--fe-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-test__node-name:hover { color: var(--fe-accent-light); text-decoration: underline; }
.fe-test__node-badge { font-size: var(--ts-3xs); color: var(--fe-text-muted); }
.fe-test__node-caret { font-size: var(--ts-2xs); color: var(--fe-text-faint); }
.fe-test__node-output, .fe-test__node-error {
    margin: 0; padding: 9px 11px; border-top: 1px solid var(--fe-border-5);
    font-family: 'Courier New', monospace; font-size: var(--ts-3xs); line-height: 1.5;
    white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto;
    background: var(--fe-code-bg);
}
.fe-test__node-output { color: var(--fe-text-2); }
.fe-test__node-error  { color: var(--fe-clr-condition-hi); }

.fe-btn--run-active { box-shadow: 0 0 0 2px var(--fe-node-selected-glow); }

/* ── Copilot op selector ── */
.fe-chat__ops { display: flex; gap: 4px; flex-wrap: wrap; padding-bottom: 6px; }
.fe-chat__op {
    background: var(--fe-surface-faint); border: 1px solid var(--fe-border-4);
    color: var(--fe-text-3); border-radius: 16px; padding: 4px 12px;
    font-size: var(--ts-2xs); cursor: pointer; font-family: inherit; transition: all var(--t-base);
}
.fe-chat__op:hover { color: var(--fe-text-1); background: var(--fe-surface-hover); }
.fe-chat__op--active { background: var(--fe-tab-active-bg); color: var(--fe-tab-active-text); border-color: var(--fe-tab-active-bd); }

@media (max-width: 768px) {
    .fe-mobile-warning { display: block; }

    /* NodeInspector as bottom sheet */
    .fe-inspector {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto !important;
        width: 100% !important;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        z-index: 300;
        transform: translateY(0);
        animation: fe-sheet-up 0.25s cubic-bezier(.4,0,.2,1);
        box-shadow: 0 -8px 32px var(--fe-shadow-light);
    }
    @keyframes fe-sheet-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    .fe-inspector--empty { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   TEMPLATES GALLERY · EMPTY STATE · DRAFT BANNER · AUTOSAVE
   ═══════════════════════════════════════════════════════════════════ */

/* Autosave indicator in header */
.fe-header__stat--saved {
    color: var(--fe-clr-memory, #10b981);
    cursor: default;
    white-space: nowrap;
}

/* Small button modifier */
.fe-btn--sm { padding: 3px 8px; font-size: var(--ts-3xs); }

/* ── Draft restore banner ─────────────────────────────────────────── */
.fe-draft-banner {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; z-index: 60;
    background: var(--fe-panel-bg); border: 1px solid var(--fe-border-1);
    border-radius: 10px; padding: 8px 12px;
    box-shadow: 0 8px 32px var(--fe-shadow-heavy);
    font-size: var(--ts-2xs); color: var(--fe-text-2);
    animation: fe-fade-in .2s ease;
}
.fe-draft-banner__icon { color: var(--fe-accent); font-weight: 700; }
.fe-draft-banner__text { color: var(--fe-text-1); }

@keyframes fe-fade-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Empty state (no nodes yet) ───────────────────────────────────── */
.fe-empty {
    position: absolute; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; pointer-events: none;
}
.fe-empty__card {
    pointer-events: auto;
    width: min(760px, 92%); max-height: 86%; overflow-y: auto;
    background: rgba(var(--fe-rgb-white), 0.02);
    border: 1px solid var(--fe-border-2);
    border-radius: 16px; padding: 28px;
    backdrop-filter: blur(2px);
    text-align: center;
}
.fe-empty__title { margin: 0 0 6px; font-size: var(--ts-lg); font-weight: 700; color: var(--fe-text-1); }
.fe-empty__subtitle { margin: 0 0 20px; font-size: var(--ts-xs); color: var(--fe-text-3); line-height: 1.5; }

/* ── Templates modal ──────────────────────────────────────────────── */
.fe-tpl-overlay {
    position: absolute; inset: 0; z-index: 120;
    background: rgba(0, 0, 0, 0.45);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.fe-tpl-modal {
    width: min(820px, 94%); max-height: 88%; display: flex; flex-direction: column;
    background: var(--fe-panel-bg); border: 1px solid var(--fe-border-1);
    border-radius: 16px; box-shadow: 0 16px 48px var(--fe-shadow-heavy);
    overflow: hidden;
}
.fe-tpl-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--fe-border-4);
    font-size: var(--ts-sm); font-weight: 700; color: var(--fe-text-1);
}
.fe-tpl-modal__hint { margin: 0; padding: 12px 18px 0; font-size: var(--ts-3xs); color: var(--fe-text-4); }

/* ── Templates grid + cards (shared by modal & empty-state) ───────── */
.fe-tpl-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px; padding: 16px; overflow-y: auto;
}
.fe-empty .fe-tpl-grid { padding: 0 0 18px; }
.fe-tpl-card {
    display: flex; flex-direction: column; gap: 6px; text-align: left;
    background: var(--fe-node-bg); border: 1px solid var(--fe-border-2);
    border-radius: 12px; padding: 14px; cursor: pointer; font-family: inherit;
    transition: border-color var(--t-base), transform var(--t-base), background var(--t-base);
}
.fe-tpl-card:hover {
    border-color: var(--fe-accent); transform: translateY(-2px);
    background: rgba(var(--fe-rgb-indigo), 0.08);
}
.fe-tpl-card__cat {
    align-self: flex-start; font-size: var(--ts-3xs); font-weight: 600;
    color: var(--fe-accent-light, #818cf8);
    background: rgba(var(--fe-rgb-indigo), 0.14);
    border-radius: 20px; padding: 2px 9px; letter-spacing: .02em;
}
.fe-tpl-card__name { font-size: var(--ts-sm); font-weight: 700; color: var(--fe-text-1); }
.fe-tpl-card__desc { font-size: var(--ts-2xs); color: var(--fe-text-3); line-height: 1.45; }



/* ── components/chat-sphere.css ── */
/* ===================================================
   CHAT — GLASS SPHERE & BOT ANIMATION
   Голосовой режим: Aero-sphere, orbs, pulsing rings
   AI Bot Animation: face, eyes, mouth, particles, glow
   =================================================== */

/* ═══ Голос: Aero-холст + перелёт сферы из композера ═══ */
.ch-page:has(.ch--voice-mode) {
    background: var(--ch-voice-page-bg);
}
.ch--voice-mode.ch {
    background: transparent;
}
.ch__messages--voice-canvas {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
    border-radius: inherit;
}
.ch-voice-canvas {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: min(52vh, 480px);
    padding: 16px 12px 24px;
}
.ch-voice-canvas__target {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    opacity: 0;
    pointer-events: none;
}
.ch-voice-canvas__invite {
    margin: 0 0 12px;
    padding: 0 20px;
    text-align: center;
    font-size: var(--ts-md);
    line-height: 1.5;
    font-weight: 500;
    color: #64748b;
    max-width: 340px;
}
.ch-voice-canvas__invite--busy {
    color: #0ea5e9;
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* «Окно» голосового режима (Aero / glass) */
.ch-voice-window {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    border-radius: 24px;
    background: var(--ch-voice-win-bg);
    border: 1px solid var(--ch-voice-win-border);
    box-shadow:
        0 4px 6px rgba(0,0,0,0.08),
        0 22px 48px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.05);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    overflow: hidden;
    animation: ch-voice-win-in .45s cubic-bezier(.22,1,.36,1);
    transition: background .4s, border-color .4s;
}
@keyframes ch-voice-win-in {
    from { opacity: 0; transform: scale(.94) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ch-voice-window__titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 10px 16px;
    background: var(--ch-voice-win-title-bg);
    border-bottom: 1px solid var(--ch-voice-win-title-border);
    transition: background .4s, border-color .4s;
}
.ch-voice-window__title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ch-voice-window__phase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    transition: background var(--t-slow), box-shadow var(--t-slow);
}
.ch-voice-window--listen .ch-voice-window__phase-dot {
    background: #0ea5e9;
    box-shadow: 0 0 8px rgba(14,165,233,.5);
    animation: ch-phase-dot-blink 1.2s ease-in-out infinite;
}
.ch-voice-window--think .ch-voice-window__phase-dot {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245,158,11,.5);
    animation: ch-phase-dot-blink 2s ease-in-out infinite;
}
.ch-voice-window--speak .ch-voice-window__phase-dot {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16,185,129,.5);
    animation: ch-phase-dot-blink .8s ease-in-out infinite;
}
@keyframes ch-phase-dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}
.ch-voice-window__phase-label {
    font-size: var(--ts-2xs);
    font-weight: 500;
    color: #94a3b8;
    transition: color var(--t-slow);
}
.ch-voice-window--listen .ch-voice-window__phase-label { color: #0ea5e9; }
.ch-voice-window--think .ch-voice-window__phase-label { color: #f59e0b; }
.ch-voice-window--speak .ch-voice-window__phase-label { color: #10b981; }
.ch-voice-window__title {
    font-size: var(--ts-base);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ch-voice-win-title);
    transition: color .4s;
}
.ch-voice-window__controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ch-voice-window__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.12);
}
.ch-voice-window__dot--min {
    background: linear-gradient(180deg, #fde68a 0%, #fbbf24 100%);
}
.ch-voice-window__dot--max {
    background: linear-gradient(180deg, #86efac 0%, #4ade80 100%);
}
.ch-voice-window__close {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(180deg, #fca5a5 0%, #ef4444 100%);
    color: #450a0a;
    font-size: var(--ts-xl);
    font-weight: 700;
    line-height: 1;
    box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    transition: transform var(--t-base), filter var(--t-base);
}
.ch-voice-window__close:hover {
    filter: brightness(1.08);
    transform: scale(1.05);
}
.ch-voice-window__close:active {
    transform: scale(0.96);
}
.ch-voice-window__body {
    position: relative;
    padding: 24px 20px 28px;
    background: var(--ch-voice-win-body-bg);
    overflow: hidden;
    transition: background .4s;
}

/* Ambient gradient orbs behind the sphere */
.ch-voice-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.ch-voice-ambient__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .35;
    transition: opacity .5s, background .5s;
}
.ch-voice-ambient__orb--1 {
    width: 200px;
    height: 200px;
    top: -30%;
    left: -10%;
    background: rgba(9,134,249,.3);
    animation: ch-amb-float 6s ease-in-out infinite;
}
.ch-voice-ambient__orb--2 {
    width: 180px;
    height: 180px;
    bottom: -20%;
    right: -10%;
    background: rgba(6,182,212,.25);
    animation: ch-amb-float 8s ease-in-out infinite reverse;
}
@keyframes ch-amb-float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(15px, -20px); }
}
.ch-voice-window--listen .ch-voice-ambient__orb--1 { opacity: .5; background: rgba(14,165,233,.35); }
.ch-voice-window--listen .ch-voice-ambient__orb--2 { opacity: .45; background: rgba(56,189,248,.3); }
.ch-voice-window--think .ch-voice-ambient__orb--1  { opacity: .4; background: rgba(245,158,11,.2); }
.ch-voice-window--think .ch-voice-ambient__orb--2  { opacity: .35; background: rgba(139,92,246,.2); }
.ch-voice-window--speak .ch-voice-ambient__orb--1  { opacity: .45; background: rgba(16,185,129,.25); }
.ch-voice-window--speak .ch-voice-ambient__orb--2  { opacity: .4; background: rgba(59,130,246,.25); }

/* Pulsing rings around sphere */
.ch-voice-pulse-rings {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    pointer-events: none;
}
.ch-voice-pulse-rings__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(9,134,249,0);
    transition: border-color .4s ease;
}
.ch-voice-canvas__docked--listen .ch-voice-pulse-rings__ring,
.ch-voice-canvas__docked--speak .ch-voice-pulse-rings__ring {
    border-color: rgba(9,134,249,.15);
    animation: ch-pulse-ring 2.2s ease-out infinite;
}
.ch-voice-pulse-rings__ring--2 { animation-delay: .7s !important; }
.ch-voice-pulse-rings__ring--3 { animation-delay: 1.4s !important; }
@keyframes ch-pulse-ring {
    0%   { transform: scale(.85); opacity: .6; }
    100% { transform: scale(1.5); opacity: 0; }
}
.ch-voice-canvas__docked--speak .ch-voice-pulse-rings__ring {
    border-color: rgba(16,185,129,.15);
    animation-duration: 1.6s;
}

.ch-voice-sphere-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.ch-voice-canvas__docked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 1;
    width: 100%;
}
.ch-voice-canvas__figure {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ch-voice-canvas__hit {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: default;
    border-radius: 50%;
    line-height: 0;
}
.ch-voice-canvas__hit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ch-voice-canvas__hit--tap:not(:disabled) {
    cursor: pointer;
}
.ch-voice-canvas .ch-bot-wrap--voice {
    width: 200px;
    height: 200px;
    margin: 0;
    transform: scale(1.85);
    transform-origin: center center;
    filter: drop-shadow(0 14px 36px rgba(9, 134, 249, 0.28));
}
.ch-voice-canvas__docked--listen .ch-bot-wrap--voice .ch-glass-sphere {
    box-shadow:
        0 0 28px rgba(9, 139, 233, 0.48),
        0 0 36px rgba(4, 45, 114, 0.2),
        0 6px 12px rgba(0, 0, 0, 0.08),
        inset 0 -6px 10px rgba(4, 45, 114, 0.2),
        inset 0 6px 10px rgba(9, 139, 233, 0.15);
}
.ch-voice-canvas__status {
    margin: 0;
    text-align: center;
    font-size: var(--ts-lg);
    font-weight: 600;
    line-height: 1.55;
    color: var(--ch-voice-status);
    max-width: 320px;
    transition: color var(--t-slow);
    animation: ch-status-in .3s ease-out;
}
@keyframes ch-status-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ch-voice-canvas__docked--listen .ch-voice-canvas__status { color: #0ea5e9; }
.ch-voice-canvas__docked--think .ch-voice-canvas__status  { color: #f59e0b; }
.ch-voice-canvas__docked--speak .ch-voice-canvas__status  { color: #10b981; }
.ch-voice-canvas__hint {
    margin: 0;
    font-size: var(--ts-xs);
    line-height: 1.5;
    color: var(--ch-voice-hint-text);
    text-align: center;
    max-width: 280px;
    animation: ch-status-in .3s ease-out .1s both;
    transition: color .4s;
}

/* Эквалайзер под сферой при прослушивании / озвучке */
.ch-voice-waveform--below {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 48px;
    width: 100%;
    max-width: 320px;
    margin-top: 12px;
    padding: 0 8px;
    pointer-events: none;
}
.ch-voice-waveform__bar {
    flex: 1 1 auto;
    max-width: 5px;
    min-height: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(9,134,249,.6) 0%, rgba(56,189,248,.4) 50%, rgba(255,255,255,.8) 100%);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
    transform-origin: center bottom;
    animation: ch-voice-wave-bar 0.42s ease-in-out infinite alternate;
}
.ch-voice-canvas__docked--speak .ch-voice-waveform__bar {
    animation-duration: 0.28s;
    background: linear-gradient(180deg, rgba(16,185,129,.6) 0%, rgba(52,211,153,.4) 50%, rgba(255,255,255,.8) 100%);
    box-shadow: 0 0 8px rgba(16,185,129,.25);
}
.ch-voice-canvas__docked--listen .ch-voice-waveform__bar {
    animation-duration: 0.35s;
}
@keyframes ch-voice-wave-bar {
    0% {
        transform: scaleY(var(--bar-h, 0.2));
        opacity: 0.6;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.ch-voice-canvas__stop-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin-top: 2px;
}
.ch-voice-canvas__stop-wrap--active::before,
.ch-voice-canvas__stop-wrap--active::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px solid rgba(43, 108, 176, 0.18);
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.ch-voice-canvas__stop-wrap--active::before {
    width: 128px;
    height: 128px;
    animation: ch-voice-ripple 2.4s ease-out infinite;
}
.ch-voice-canvas__stop-wrap--active::after {
    width: 92px;
    height: 92px;
    animation: ch-voice-ripple 2.4s ease-out infinite 0.6s;
}
@keyframes ch-voice-ripple {
    0% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(0.88);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.35);
    }
}

.ch-voice-canvas__stop {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid var(--ch-stop-border);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--ts-base);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ch-stop-text);
    background: var(--ch-stop-bg);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
    transition: border-color var(--t-smooth), box-shadow var(--t-smooth), transform var(--t-base), background .4s, color .4s;
}
.ch-voice-canvas__stop svg {
    color: var(--ch-stop-svg);
}
.ch-voice-canvas__stop:hover:not(:disabled) {
    border-color: rgba(43, 108, 176, 0.45);
    box-shadow: 0 6px 22px rgba(43, 108, 176, 0.16);
    transform: translateY(-1px);
}
.ch-voice-canvas__stop:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Нижняя панель ввода — стекло в голосовом режиме */
.ch--voice-mode .ch__input-section {
    background: transparent;
}
.ch--voice-mode .ch__form-box {
    background: var(--ch-voice-form-bg);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--ch-voice-form-border);
    border-radius: 18px;
    box-shadow: var(--ch-form-shadow);
    transition: background .4s, border-color .4s;
}
.ch--voice-mode .ch-mode-trigger__label::before {
    content: "☆ ";
    opacity: 0.88;
    font-weight: 500;
}
.ch--voice-mode .ch__mic-btn:not(:disabled):not(.ch__mic-btn--listening) {
    background: linear-gradient(135deg, #2b6cb0 0%, #3182ce 100%);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(43, 108, 176, 0.35);
}
.ch--voice-mode .ch__mic-btn:not(:disabled):not(.ch__mic-btn--listening):hover {
    filter: brightness(1.06);
}
.ch--voice-mode .ch__mic-btn.ch__mic-btn--listening {
    background: linear-gradient(135deg, #1a365d 0%, #2b6cb0 100%);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.28);
}

.ch-voice-fly-clone {
    filter: drop-shadow(0 10px 28px rgba(9, 134, 249, 0.4));
}

/* Настроение ассистента (голос включён): плавнее тело + выразительнее «глаза» */
.ch.ch-voice-mood--idle .ch-bot-anim {
    animation: ch-mood-levitate-idle 5s ease-in-out infinite;
}
.ch.ch-voice-mood--listen .ch-bot-anim {
    animation: ch-mood-levitate-listen 2.4s ease-in-out infinite;
}
.ch.ch-voice-mood--think .ch-bot-anim {
    animation: ch-mood-levitate-think 4.2s ease-in-out infinite;
}
.ch.ch-voice-mood--speak .ch-bot-anim {
    animation: ch-mood-levitate-speak 0.72s ease-in-out infinite;
}

.ch.ch-voice-mood--idle .ch-glow-ring {
    animation-duration: 12s;
    opacity: 0.95;
}
.ch.ch-voice-mood--listen .ch-glow-ring {
    animation-duration: 5.5s;
    filter: blur(0.5px);
}
.ch.ch-voice-mood--think .ch-glow-ring {
    animation-duration: 18s;
    opacity: 0.75;
}
.ch.ch-voice-mood--speak .ch-glow-ring {
    animation-duration: 3.2s;
}

.ch.ch-voice-mood--listen .ch-eye {
    animation: ch-mood-eye-attentive 1.35s ease-in-out infinite;
}
.ch.ch-voice-mood--listen .ch-eye-glow {
    animation: ch-mood-eye-glow-attentive 1.1s ease-in-out infinite;
}

.ch.ch-voice-mood--think .ch-eye {
    animation: ch-mood-eye-think 2s ease-in-out infinite;
}
.ch.ch-voice-mood--think .ch-eye-glow {
    animation: ch-mood-eye-glow-think 2.2s ease-in-out infinite;
}

.ch.ch-voice-mood--speak .ch-eye {
    animation: ch-mood-eye-speak 0.58s ease-in-out infinite;
}
.ch.ch-voice-mood--speak .ch-eye-glow {
    animation: ch-mood-eye-glow-speak 0.52s ease-in-out infinite;
}

@keyframes ch-mood-levitate-idle {
    0%, 100% { transform: translateY(0) rotateZ(0deg); }
    50% { transform: translateY(-5px) rotateZ(-1.2deg); }
}
@keyframes ch-mood-levitate-listen {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.02); }
}
@keyframes ch-mood-levitate-think {
    0%, 100% { transform: translateY(-2px) rotateZ(-2deg); }
    33% { transform: translateY(-5px) rotateZ(1.5deg); }
    66% { transform: translateY(-1px) rotateZ(-0.8deg); }
}
@keyframes ch-mood-levitate-speak {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-4px); }
    70% { transform: translateY(1px); }
}

@keyframes ch-mood-eye-attentive {
    0%, 100% { transform: scale(1.05, 1.12); border-radius: 38%; }
    50% { transform: scale(1.12, 1.28); border-radius: 42%; }
}
@keyframes ch-mood-eye-glow-attentive {
    0%, 100% { opacity: 0.95; filter: blur(3px); }
    50% { opacity: 1; filter: blur(2px); transform: scale(1.15); }
}

@keyframes ch-mood-eye-think {
    0%, 100% { transform: scale(0.88, 0.52); }
    50% { transform: scale(0.92, 0.48); }
}
@keyframes ch-mood-eye-glow-think {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.75; }
}

@keyframes ch-mood-eye-speak {
    0%, 100% { transform: translateY(0) scale(1, 1.05); }
    30% { transform: translateY(-3px) scale(1.06, 1.15); }
    55% { transform: translateY(1px) scale(0.98, 1.08); }
}
@keyframes ch-mood-eye-glow-speak {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    45% { opacity: 1; transform: scale(1.18); }
}

/* После стыковки сферы в центре — миниатюра у поля скрыта */
.ch--voice-docked .ch__form-with-bot > .ch-bot-wrap {
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
.ch-bot-wrap--enter-voice,
.ch-bot-wrap--voice-launch {
    cursor: pointer;
}
.ch-bot-wrap--enter-voice:focus-visible {
    outline: 2px solid rgba(9, 134, 249, 0.45);
    outline-offset: 4px;
    border-radius: 12px;
}

/* ── AI Bot Sphere (matches React AIBotAnimation exactly) ── */
.ch-bot-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ch-bot-container {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}
.ch-bot-anim {
    position: relative;
    width: 42px;
    height: 42px;
    transform-style: preserve-3d;
    transition: transform 0.08s ease-out;
    animation: ch-levitate 4s ease-in-out infinite;
}

/* Glass sphere */
.ch-glass-sphere {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #042D72 0%, #0059D0 35%, #098BE9 65%, #0059D0 100%);
    box-shadow:
        0 0 20px rgba(9,139,233,0.4),
        0 0 30px rgba(4,45,114,0.2),
        0 6px 12px rgba(0,0,0,0.1),
        inset 0 -6px 10px rgba(4,45,114,0.2),
        inset 0 6px 10px rgba(9,139,233,0.15);
    overflow: visible;
    animation: ch-rotate-grad 8s linear infinite;
}

/* Reflections & shine */
.ch-sphere-reflect {
    position: absolute;
    top: 12%; left: 18%;
    width: 35%; height: 25%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2) 50%, transparent);
    filter: blur(1px);
    transform: rotate(-20deg);
}
.ch-sphere-reflect-sec {
    position: absolute;
    bottom: 20%; right: 12%;
    width: 20%; height: 15%;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent, rgba(9,139,233,0.3) 40%, rgba(255,255,255,0.1));
    filter: blur(0.5px);
    transform: rotate(30deg);
}
.ch-sphere-shine {
    position: absolute;
    top: 10%; left: 10%;
    width: 40%; height: 40%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), rgba(9,139,233,0.1) 50%, transparent 70%);
    filter: blur(2px);
}
.ch-sphere-shadow {
    position: absolute;
    bottom: 5%; right: 5%;
    width: 60%; height: 60%;
    border-radius: 50%;
    background: radial-gradient(circle at 70% 70%, rgba(4,45,114,0.4), transparent 60%);
    filter: blur(4px);
}

/* Eyes */
.ch-sphere-eyes {
    position: absolute;
    top: 50%; left: 50%;
    width: 21px; height: 10.5px;
    margin: -5.25px 0 0 -10.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ch-eye {
    position: relative;
    width: 5px; height: 8px;
    border-radius: 35%;
    background: linear-gradient(180deg, #fff 0%, #fafafa 30%, #f5f5f5 60%, #efefef 100%);
    box-shadow:
        0 0 8px rgba(255,255,255,1),
        0 0 16px rgba(255,255,255,0.85),
        0 2px 6px rgba(0,0,0,0.25),
        inset 0 1px 2px rgba(255,255,255,1);
}
.ch-eye-l { margin-left: 3px; }
.ch-eye-r { margin-right: 3px; }
/* Blinking state — set by JS (matches React: scaleY(0.05) + transition) */
.ch-eye.ch-eye-blinking {
    transform: scaleY(0.05);
    transition: transform 0.05s ease-out;
}
.ch-eye {
    transition: transform 0.12s ease-out;
}
.ch-eye-glow {
    position: absolute;
    top: -6px; left: -6px; right: -6px; bottom: -6px;
    border-radius: 35%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,1), rgba(255,255,255,0.7) 30%, rgba(255,255,255,0.4) 50%, transparent 75%);
    filter: blur(3px);
    animation: ch-eye-pulse 2s ease-in-out infinite;
}
.ch-eye-inner {
    position: absolute;
    top: 50%; left: 50%;
    width: 80%; height: 90%;
    margin: -45% 0 0 -40%;
    border-radius: 35%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.9) 0%, rgba(220,220,220,0.3) 60%, transparent 80%);
}
.ch-eye-hl {
    position: absolute;
    top: 1px; left: 50%;
    width: 60%; height: 30%;
    margin-left: -30%;
    border-radius: 35%;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.5) 70%, transparent);
    filter: blur(0.2px);
}

/* Mouth — lives inside .ch-sphere-eyes so it tracks with the face */
.ch-sphere-mouth {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    width: 8px;
    height: 4px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    pointer-events: none;
    transition: width var(--t-slow), height var(--t-slow);
}
.ch-mouth-inner {
    width: 100%;
    height: 100%;
    border-radius: 0 0 50% 50%;
    background: linear-gradient(180deg, rgba(2,25,70,.35) 0%, rgba(4,45,114,.5) 100%);
    box-shadow:
        0 1px 3px rgba(0,0,0,.2),
        inset 0 1px 2px rgba(255,255,255,.08);
    transition: border-radius var(--t-slow), height var(--t-slow), width var(--t-slow), background var(--t-slow);
}

/* Mouth mood states */
.ch.ch-voice-mood--idle .ch-sphere-mouth {
    width: 7px;
    height: 3px;
}
.ch.ch-voice-mood--idle .ch-mouth-inner {
    border-radius: 0 0 50% 50%;
}

.ch.ch-voice-mood--listen .ch-sphere-mouth {
    width: 6px;
    height: 5px;
}
.ch.ch-voice-mood--listen .ch-mouth-inner {
    border-radius: 40%;
    background: linear-gradient(180deg, rgba(2,25,70,.4) 0%, rgba(14,165,233,.3) 100%);
    animation: ch-mouth-listen 1.8s ease-in-out infinite;
}
@keyframes ch-mouth-listen {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.3); }
}

.ch.ch-voice-mood--think .ch-sphere-mouth {
    width: 8px;
    height: 2px;
}
.ch.ch-voice-mood--think .ch-mouth-inner {
    border-radius: 1px;
    background: rgba(2,25,70,.3);
}

.ch.ch-voice-mood--speak .ch-sphere-mouth {
    width: 7px;
    height: 5px;
}
.ch.ch-voice-mood--speak .ch-mouth-inner {
    border-radius: 35%;
    background: linear-gradient(180deg, rgba(2,25,70,.45) 0%, rgba(16,185,129,.25) 100%);
    animation: ch-mouth-speak .45s ease-in-out infinite;
}
@keyframes ch-mouth-speak {
    0%, 100% { transform: scaleY(.7) scaleX(.9); }
    30%      { transform: scaleY(1.25) scaleX(1.1); }
    60%      { transform: scaleY(.85) scaleX(1); }
}

/* Particles */
.ch-particle {
    position: absolute;
    width: 2px; height: 2px;
    background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(9,139,233,0.6));
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(9,139,233,0.8);
}
.ch-p1 { top: 20%; left: 85%; animation: ch-float1 6s ease-in-out infinite; }
.ch-p2 { top: 75%; left: 12%; animation: ch-float2 8s ease-in-out infinite; }
.ch-p3 { top: 45%; right: 8%; animation: ch-float3 7s ease-in-out infinite; }

/* Glow ring */
.ch-glow-ring {
    position: absolute;
    top: -8px; left: -8px; right: -8px; bottom: -8px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(9,139,233,0.1) 90deg,
        rgba(0,89,208,0.15) 180deg,
        rgba(4,45,114,0.1) 270deg,
        transparent 360deg
    );
    animation: ch-rotate-glow 10s linear infinite;
    filter: blur(1px);
}

/* Floor reflection */
.ch-bot-floor {
    position: absolute;
    bottom: -6px; left: 50%;
    width: 42px; height: 14px;
    margin-left: -21px;
    pointer-events: none;
}
.ch-floor-grad {
    position: absolute;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at center top, rgba(9,139,233,0.15), rgba(0,89,208,0.1) 40%, rgba(4,45,114,0.05) 70%, transparent);
    filter: blur(3px);
    transform: scaleY(0.6);
    animation: ch-reflect-pulse 4s ease-in-out infinite;
}




/* ── components/chat-light.css ── */
/* ===================================================
   CHAT — LIGHT THEME OVERRIDE
   Кремово-золотая палитра для /chat.
   Все цвета из brand atomic (--b-*) через _tokens.css
   =================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDE — кремово-золотая палитра для страницы /chat.

   Чат построен «blue-dark first»: хардкодные #hex/rgba(9,134,249,…)
   рассыпаны по .ch__*, .ch-mode-* и .ch-glass-* правилам.
   Перебиваем их одним семантическим слоем — от специфичного к общему.
   Все цвета — только из brand atomic (--b-*) чтобы сохранить согласованность.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    --chat-accent:      var(--b-gold-dark);
    --chat-accent-rgb:  var(--b-gold-rgb);
    --chat-btn-bg:      var(--b-grad-coffee);
    --chat-btn-text:    var(--b-cream);
    --chat-btn-shadow:  rgba(var(--b-coffee-rgb), 0.22);
    --chat-glass-bg:    rgba(255, 255, 255, 0.68);
    --chat-glass-bd:    var(--b-line);
    --chat-glass-bd-hi: var(--b-line-hi);
    --chat-surface:     rgba(255, 255, 255, 0.55);
    --chat-track:       rgba(var(--b-coffee-rgb), 0.06);
    --mode-accent:      var(--b-coffee-mid);

    --ch-chip-color:        var(--b-coffee-mid);
    --ch-chip-border:       rgba(160,128,80, 0.30);
    --ch-chip-hover-bg:     rgba(160,128,80, 0.08);
    --ch-chip-hover-border: rgba(160,128,80, 0.50);
}

/* ── .ch-* MAIN LAYOUT ────────────────────────────────────────────────── */
[data-theme="light"] .ch__card {
    background:   var(--chat-glass-bg);
    border-color: var(--chat-glass-bd);
    box-shadow:   var(--b-shadow-sm);
    backdrop-filter: blur(8px);
}

/* ── Левый сайдбар: action button + title ─────────────────────────────── */
[data-theme="light"] .ch__action-btn {
    background:   var(--chat-btn-bg);
    color:        var(--chat-btn-text);
    box-shadow:   0 2px 8px var(--chat-btn-shadow);
}
[data-theme="light"] .ch__action-btn:hover:not(:disabled) {
    box-shadow:   0 4px 16px var(--chat-btn-shadow);
}
[data-theme="light"] .ch__menu-title {
    background:   linear-gradient(90deg, var(--b-coffee) 0%, var(--b-gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .ch__session-item--active {
    box-shadow: 0 1px 3px rgba(var(--b-gold-rgb), 0.10),
                0 4px 12px rgba(var(--b-gold-rgb), 0.10);
}

/* ── Правый сайдбар: depth scale ──────────────────────────────────────── */
[data-theme="light"] .ch__depth-scale-item--clickable:hover {
    background:  rgba(var(--b-gold-rgb), 0.07);
}
[data-theme="light"] .ch__depth-scale-item--active {
    background:  rgba(var(--b-gold-rgb), 0.08);
}
[data-theme="light"] .ch__depth-dot--active { background: var(--b-gold-dark); }
[data-theme="light"] .ch__depth-scale-steps--active { color: var(--b-coffee); }
[data-theme="light"] .ch__depth-badge-now {
    background: rgba(var(--b-gold-rgb), 0.15);
    color: var(--b-gold-dark);
}
[data-theme="light"] .ch__depth-title {
    background: linear-gradient(90deg, var(--b-coffee) 0%, var(--b-gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .ch__depth-hero {
    border-color: rgba(var(--b-gold-rgb), 0.40);
    box-shadow: 0 2px 8px rgba(var(--b-gold-rgb), 0.18), 0 8px 28px rgba(var(--b-gold-rgb), 0.14);
}
[data-theme="light"] .ch__depth-hero::before {
    background:
        radial-gradient(circle at 10% 20%,  rgba(0,82,255,0.40) 0%, transparent 50%),
        radial-gradient(circle at 88% 10%,  rgba(92,144,255,0.30) 0%, transparent 48%),
        radial-gradient(circle at 50% 55%,  rgba(138,153,173,0.28) 0%, transparent 50%),
        var(--b-grad-coffee);
}

/* ── LLM карточка (слева снизу) ───────────────────────────────────────── */
[data-theme="light"] .ch__llm-eyebrow {
    background:  linear-gradient(90deg, var(--b-coffee) 0%, var(--b-gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .ch__llm-stats {
    background:  rgba(var(--b-coffee-rgb), 0.04);
    border-color: var(--b-line);
}
[data-theme="light"] .ch__llm-stat {
    background:  transparent;
}
[data-theme="light"] .ch__llm-meter-track { background: var(--chat-track); }
[data-theme="light"] .ch__llm-model {
    background:  rgba(var(--b-coffee-rgb), 0.03);
    border-color: var(--b-line);
}
[data-theme="light"] .ch__llm-model:hover {
    background:  rgba(var(--b-coffee-rgb), 0.05);
    border-color: rgba(var(--b-gold-rgb), 0.30);
    box-shadow:  0 2px 8px rgba(var(--b-gold-rgb), 0.08);
}
[data-theme="light"] .ch__llm-model--selected {
    background:  rgba(var(--b-gold-rgb), 0.08);
    border-color: rgba(var(--b-gold-rgb), 0.35);
}
[data-theme="light"] .ch__llm-model-ctx {
    color:       var(--b-gold-dark);
    background:  rgba(var(--b-gold-rgb), 0.10);
}
[data-theme="light"] .ch__llm-check { color: var(--b-gold-dark); }
[data-theme="light"] .ch__llm-cohort-tabs {
    background:  rgba(var(--b-coffee-rgb), 0.04);
    border-color: var(--b-line);
}
[data-theme="light"] .ch__llm-cohort-tab:hover {
    background:  rgba(var(--b-coffee-rgb), 0.06);
    color:       var(--b-coffee);
}
[data-theme="light"] .ch__llm-cohort-tab--active {
    background:  rgba(var(--b-gold-rgb), 0.14);
    color:       var(--b-gold-dark);
    box-shadow:  0 1px 4px rgba(var(--b-coffee-rgb), 0.08);
}
[data-theme="light"] .ch__llm-footer {
    border-top-color: var(--b-line);
}
[data-theme="light"] .ch__llm-footer-icon {
    background:  var(--b-grad-gold);
    box-shadow:  0 2px 6px rgba(var(--b-gold-rgb), 0.25);
}

/* ── Центр: empty state + chips + messages ────────────────────────────── */
[data-theme="light"] .ch__empty-icon-ring {
    background:  rgba(var(--b-gold-rgb), 0.06);
    border-color: rgba(var(--b-gold-rgb), 0.15);
}
[data-theme="light"] .ch__empty-title {
    background:  linear-gradient(135deg, var(--b-coffee) 0%, var(--b-gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .ch__chip {
    border-color: rgba(var(--b-gold-rgb), 0.30);
    color:        var(--b-coffee-mid);
    box-shadow:   0 2px 6px rgba(var(--b-coffee-rgb), 0.06);
}
[data-theme="light"] .ch__chip:hover {
    background:  rgba(var(--b-gold-rgb), 0.08);
    border-color: rgba(var(--b-gold-rgb), 0.50);
    box-shadow:  0 4px 12px rgba(var(--b-gold-rgb), 0.14);
}
/* Пузыри сообщений */
[data-theme="light"] .ch__msg-bubble--user {
    background:  var(--b-grad-coffee);
    box-shadow:  0 2px 8px rgba(var(--b-coffee-rgb), 0.18);
}
[data-theme="light"] .ch__msg-bubble--user:hover {
    box-shadow:  0 4px 16px rgba(var(--b-coffee-rgb), 0.26);
}
[data-theme="light"] .ch__ai-card:hover {
    box-shadow:  0 4px 20px rgba(var(--b-gold-rgb), 0.10), 0 1px 4px rgba(0,0,0,0.04);
    border-color: rgba(var(--b-gold-rgb), 0.25);
}
[data-theme="light"] .ch__ai-avatar {
    background:  var(--b-grad-coffee);
    box-shadow:  0 2px 8px rgba(var(--b-coffee-rgb), 0.18);
}
[data-theme="light"] .ch__ai-btn:hover {
    background:  rgba(var(--b-gold-rgb), 0.10);
    color:       var(--b-gold-dark);
}
[data-theme="light"] .ch__typing span {
    background:  linear-gradient(135deg, var(--b-gold), var(--b-gold-dark));
}

/* ── Composer (поле ввода) ─────────────────────────────────────────────── */
[data-theme="light"] .ch__form-box:focus-within {
    border-color: rgba(var(--b-gold-rgb), 0.55);
    box-shadow:  0 2px 8px rgba(var(--b-gold-rgb), 0.12);
}
/* Кнопки отправки/прикрепления */
[data-theme="light"] .ch__send-btn {
    background:  var(--chat-btn-bg) !important;
    box-shadow:  0 2px 8px var(--chat-btn-shadow) !important;
}
[data-theme="light"] .ch__attach-btn:hover {
    background:  rgba(var(--b-coffee-rgb), 0.06);
    color:       var(--b-gold-dark);
}

/* ── ExpertModeSelector ────────────────────────────────────────────────── */
[data-theme="light"] .ch-mode-trigger {
    border-color: var(--b-line-hi);
    box-shadow:  0 1px 4px rgba(var(--b-coffee-rgb), 0.05);
}
[data-theme="light"] .ch-mode-trigger:hover,
[data-theme="light"] .ch-mode-trigger--open {
    background:  linear-gradient(135deg, var(--b-paper-hi) 0%, rgba(var(--b-gold-rgb), 0.08) 100%);
    border-color: rgba(var(--b-gold-rgb), 0.40);
    box-shadow:  0 2px 8px rgba(var(--b-gold-rgb), 0.10);
}
[data-theme="light"] .ch-mode-dropdown { box-shadow: var(--b-shadow-lg); }
[data-theme="light"] .ch-mode-dropdown__title {
    background:  linear-gradient(90deg, var(--b-coffee) 0%, var(--b-gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .ch-mode-opt:hover {
    background:  rgba(var(--b-gold-rgb), 0.05);
    border-color: rgba(var(--b-gold-rgb), 0.15);
}
[data-theme="light"] .ch-mode-opt--active {
    background:  linear-gradient(135deg, rgba(var(--b-gold-rgb), 0.08) 0%, rgba(92,144,255,0.05) 100%);
    border-color: rgba(var(--b-gold-rgb), 0.28);
}

/* ── LLM meters fill (синие/teal акценты): оставляем «живыми» — информативные индикаторы загрузки ── */
/* .ch__llm-meter-fill--blue, --teal — оставляем as-is (информативный цвет, не брендовый) */

/* ── Глянцевая сфера в голосовом режиме — тёмно-синяя всегда, это «персонаж» ── */
/* .ch-glass-sphere — сохраняем тёмно-синей намеренно */

/* ── Правый сайдбар: секция «Параметры запроса» (ползунки качество/скорость) ── */
[data-theme="light"] .ch__speed-header-icon { color: var(--b-coffee-mid); }
[data-theme="light"] .ch__speed-title        { color: var(--b-coffee); }

[data-theme="light"] .ch__sl-label { color: var(--b-coffee-soft); }

/* Бейджи: тёмные полупрозрачные → светлые в тональности бренда */
[data-theme="light"] .ch__sl-badge--quality {
    background: rgba(var(--b-gold-rgb), 0.12);
    color:      var(--b-coffee-mid);
}
[data-theme="light"] .ch__sl-badge--speed {
    background: rgba(var(--b-gold-rgb), 0.15);
    color:      var(--b-gold-dark);
}

/* Трек ползунка — светлый */
[data-theme="light"] .ch__sl-range::-webkit-slider-runnable-track {
    background: rgba(var(--b-coffee-rgb), 0.10);
}
[data-theme="light"] .ch__sl-range::-moz-range-track {
    background: rgba(var(--b-coffee-rgb), 0.10);
}
/* Ползунок-thumb — кофейный вместо тёмно-синего */
[data-theme="light"] .ch__sl-range::-webkit-slider-thumb {
    background: var(--b-coffee);
    border-color: var(--b-coffee);
    box-shadow: 0 0 0 3px rgba(var(--b-coffee-rgb), 0.15);
}
[data-theme="light"] .ch__sl-range::-webkit-slider-thumb:active {
    box-shadow: 0 0 0 5px rgba(var(--b-coffee-rgb), 0.20);
}
[data-theme="light"] .ch__sl-range::-moz-range-thumb {
    background: var(--b-coffee);
    border-color: var(--b-coffee);
}
/* Thumb quality slider — фиолетовый → тёмно-кофейный */
[data-theme="light"] .ch__sl-range--quality::-webkit-slider-thumb {
    border-color: var(--b-coffee);
    box-shadow: 0 0 0 3px rgba(var(--b-coffee-rgb), 0.15);
}
[data-theme="light"] .ch__sl-range--quality::-moz-range-thumb {
    border-color: var(--b-coffee);
}
/* Thumb speed slider — amber → золотистый */
[data-theme="light"] .ch__sl-range--speed::-webkit-slider-thumb {
    border-color: var(--b-gold-dark);
    box-shadow: 0 0 0 3px rgba(var(--b-gold-rgb), 0.20);
}
[data-theme="light"] .ch__sl-range--speed::-moz-range-thumb {
    border-color: var(--b-gold-dark);
}
/* Цветная полоса заполнения */
[data-theme="light"] .ch__sl-track-fill--quality {
    background: linear-gradient(90deg, var(--b-coffee-mid), var(--b-coffee));
}
[data-theme="light"] .ch__sl-track-fill--speed {
    background: linear-gradient(90deg, var(--b-gold), var(--b-gold-dark));
}

/* Подсказки крайних значений (Черновик / Максимум) */
[data-theme="light"] .ch__sl-hints { color: var(--b-coffee-soft); opacity: 0.75; }

/* Блок метрик (шагов / время / стоимость) */
[data-theme="light"] .ch__sl-metrics {
    background:   rgba(var(--b-coffee-rgb), 0.04);
    border-color: var(--b-line);
}
[data-theme="light"] .ch__sl-metric {
    background: var(--b-paper-hi, rgba(255,255,255,0.70));
}
[data-theme="light"] .ch__sl-metric svg      { color: var(--b-coffee-soft); }
[data-theme="light"] .ch__sl-metric-label    { color: var(--b-coffee-soft); }
[data-theme="light"] .ch__sl-metric-val      { color: var(--b-coffee); }

/* ── Agents sidebar: перекрашиваем индиго/синие акценты в coffee/gold ── */
[data-theme="light"] .ch__agents-title {
    background: linear-gradient(90deg, var(--b-coffee) 0%, var(--b-gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .ch__agents-count-badge {
    background: rgba(var(--b-gold-rgb), 0.12);
    color: var(--b-gold-dark);
}
[data-theme="light"] .ch__agents-tab--active {
    color: var(--b-coffee-mid);
    background: rgba(var(--b-coffee-rgb), 0.06);
}
[data-theme="light"] .ch__agents-tab--active::after {
    background: var(--b-grad-coffee);
}
[data-theme="light"] .ch__agents-tab-badge {
    background: rgba(var(--b-gold-rgb), 0.12);
    color: var(--b-gold-dark);
}
[data-theme="light"] .ch__agents-cta-btn {
    background: var(--b-grad-coffee);
    box-shadow: 0 2px 8px rgba(var(--b-coffee-rgb), 0.22);
}
[data-theme="light"] .ch__agent-item:hover {
    background: rgba(var(--b-gold-rgb), 0.06);
}
[data-theme="light"] .ch__depth-track-fill { background: var(--b-gold-dark); }
[data-theme="light"] .ch__sl-badge--quality {
    background: rgba(var(--b-coffee-rgb), 0.12);
    color: var(--b-coffee-mid);
}
[data-theme="light"] .ch__sl-badge--speed {
    background: rgba(var(--b-gold-rgb), 0.15);
    color: var(--b-gold-dark);
}




/* ── components/chat/index.css ── */
/* Chat UI — модульная сборка */

/* ── components/chat/chat-layout.css ── */
/* ============================================
   chat-layout.css
   Page wrapper, root layout, sidebars, card base,
   responsive breakpoints, mobile panel drawers
   ============================================ */

/* ============================================
   CHAT v6 — точно по React-исходникам
   ============================================ */


/* ── PAGE WRAPPER ── */
.ch-page {
    display: flex;
    flex-direction: column;

    /* 100vh на телефоне — это высота БЕЗ учёта адресной строки: она то появляется,
       то прячется, и строка ввода уезжает под неё. dvh считает видимую область
       и меняется вместе с ней; vh оставлен запасным для старых браузеров. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--ch-page-bg);
    transition: background var(--t-base);
}

/* ── Замок одного экрана ──
   Чат должен помещаться ровно в один экран: скроллится ТОЛЬКО лента сообщений
   (.ch__messages с собственным overflow-y), а не всё окно. .ch-page уже задаёт
   height:100vh + overflow:hidden, но высоту нужно «дотянуть» по всей цепочке обёрток
   (html/body и контейнеры MudBlazor) — иначе overflow протекает в окно и прокручивается
   вся страница. Через :has(.ch-page) правила действуют ТОЛЬКО на странице чата, обычные
   страницы скроллятся как прежде. */
html:has(.ch-page),
body:has(.ch-page) {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
body:has(.ch-page) .mud-layout,
body:has(.ch-page) .mud-main-content {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
/* Плавающая шапка позиционируется fixed, а отступ под неё даёт .ch (padding-top) —
   поэтому верхний отступ основного контейнера MudBlazor здесь обнуляем. */
body:has(.ch-page) .mud-main-content {
    padding-top: 0 !important;
}

/* Без шапки сайта: её не выводит React-клиент, когда чат открыт десктопной оболочкой FAI
   (см. Mas.Front/src/lib/shell.ts) — окно оболочки рисует свою. Отступа под неё тогда
   не нужно ни в одном из брейкпоинтов. Два класса в селекторе, поэтому правило перекрывает
   и .ch { padding-top: 64px }, и его значения в медиазапросах — те специфичности не добавляют. */
.ch-page--bare .ch {
    padding-top: 0;
}

/* ══════════════════════════════════════════
   ROOT LAYOUT  (flex row; React: chat-head)
   ══════════════════════════════════════════ */
.ch {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    /* На широком мониторе панели прибивались к краям окна, а лента — к центру:
       между ними зияла пустота в сотни пикселей. Ограничиваем всю рабочую область
       и центрируем её целиком, чтобы панели оставались рядом с разговором. */
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    background: var(--ch-page-bg);
    font-family: var(--font-ui);
    gap: 8px;
    padding: 0 12px;
    /* push all content below the fixed floating header (top:1rem + ~58px height) */
    padding-top: 64px;
}

/* ══════════════════════════════════════════
   SIDE-COLUMN WRAPPERS
   ══════════════════════════════════════════ */
/* На широком экране обёртки drawer'ов прозрачны для раскладки: display:contents убирает
   сам div из flex-потока, и вложенные колонки (aside + панель шаблонов) остаются прямыми
   flex-детьми .ch — десктопная раскладка не меняется. На мобиле (медиазапрос ниже) обёртки
   становятся настоящими выдвижными панелями. */
.ch__sidebar-left-wrap,
.ch__sidebar-right-wrap { display: contents; }

.ch__sidebar-left {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: calc(100% - 16px);
    padding-top: 0;
    padding-bottom: 8px;
    gap: 10px;
    min-height: 0;
    overflow-y: auto; /* scroll if content overflows */
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,116,139,0.2) transparent;
}
.ch__sidebar-left::-webkit-scrollbar       { width: 4px; }
.ch__sidebar-left::-webkit-scrollbar-track { background: transparent; }
.ch__sidebar-left::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.2); border-radius: 4px; }

/* Left sidebar: menu card grows, LLM card is fixed height */
.ch__sidebar-left > .ch__card:first-child { flex: 1 1 auto; min-height: 0; }
.ch__sidebar-left > .ch__card:last-child  { flex: 0 0 auto; flex-shrink: 0; }

.ch__sidebar-right {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: calc(100% - 16px);
    padding-top: 0;
    padding-bottom: 8px;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
}

/* Right sidebar: depth and agents divide space equally */
.ch__sidebar-right > .ch__card { flex: 1; min-height: 56px; }

/* ══════════════════════════════════════════
   SHARED CARD BASE
   (ChatMenu, LLMModels, AnalysisDepth, Agents)
   ══════════════════════════════════════════ */
.ch__card {
    box-sizing: border-box;
    border-radius: 16px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--ch-card-bg);
    border: 1px solid var(--ch-card-border);
    box-shadow: var(--ch-card-shadow);
    backdrop-filter: var(--glass-blur-md);
    transition: all var(--t-base);
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

/* Compact sidebars on medium desktops */
@media (min-width: 1280px) and (max-width: 1500px) {
    .ch__sidebar-left  { width: 240px; }
    .ch__sidebar-right { width: 260px; }
    .ch { gap: 8px; }
}

/* Tablet / small desktop: колонки уезжают в drawer'ы (открываются мобильной панелью).
   Сами колонки НЕ прячем display:none — иначе они пропали бы и внутри выехавшего drawer'а;
   их прячет transform обёртки за краем экрана (см. блок MOBILE PANEL DRAWERS ниже). */
@media (max-width: 1279px) {
    .ch { gap: 0; padding: 0; padding-top: 64px; }
    .ch__input-section { padding: 0 10px 10px; min-height: 130px; }
    .ch__messages { padding-bottom: 180px; }
}

/* Large desktop: slightly reduced top gap since header floats away from columns */
@media (min-width: 1460px) {
    .ch { padding-top: 72px; }
}

/* Mobile */
@media (max-width: 767px) {
    .ch { padding: 56px 0 0; gap: 0; }
    .ch__messages { padding: 12px 8px 155px; }
    .ch__input-section {
        padding: 0 6px 6px;
        min-height: 90px;
        right: 0;
        width: 100%;
    }
    .ch__input-container { min-height: 80px; }
    .ch__form-with-bot { gap: 6px; }
    .ch__form-box {
        border-radius: 16px;
        padding: 8px 10px;
        min-height: 60px;
        gap: 0.4rem;
    }
    .ch__textarea {
        font-size: var(--ts-lg);
        min-height: 40px;
        padding: 6px 8px 30px 8px;
    }
    .ch__textarea::placeholder { font-size: var(--ts-md); }
    .ch-composer-controls {
        /* Панель в потоке (см. chat-composer.css) — координат больше нет, только плотность. */
        gap: 2px;
        padding: 2px 2px 0 4px;
    }
    .ch-mode-trigger {
        min-width: 80px;
        min-height: 44px;
        font-size: var(--ts-2xs);
        padding: 4px 22px 4px 6px;
        border-radius: 8px;
    }
    .ch-llm-trigger {
        min-height: 44px;
        font-size: var(--ts-2xs);
        padding: 3px 7px 3px 5px;
        border-radius: 8px;
    }
    .ch__send-btn  { width: 44px; height: 44px; }
    .ch__attach-btn { width: 44px; height: 44px; }
    .ch__form-actions { align-self: flex-end; }
    .ch__btn-group { gap: 4px; }
    .ch__chips-wrap { gap: 8px; }
    .ch__chip { font-size: var(--ts-base); padding: 8px 14px; }
    .ch__disclaimer { font-size: var(--ts-2xs); padding: 0 4px; }
    /* Sphere — compact on mobile */
    .ch-bot-wrap--enter-voice,
    .ch-bot-wrap--voice-launch {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0;
    }
    .ch-bot-wrap--enter-voice .ch-glass-sphere,
    .ch-bot-wrap--voice-launch .ch-glass-sphere {
        width: 38px !important;
        height: 38px !important;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .ch__form-box { padding: 6px 8px; min-height: 56px; }
    .ch__textarea { font-size: var(--ts-md); min-height: 36px; padding: 4px 6px 26px 6px; }
    .ch__send-btn { width: 40px; height: 40px; }
    .ch__attach-btn { width: 40px; height: 40px; }
    .ch__mob-bar__btn span { display: none; }
    .ch__mob-bar { padding: 0 4px; }
    .ch-mode-trigger { min-width: 70px; font-size: var(--ts-3xs); }
    .ch-llm-trigger { font-size: var(--ts-3xs); }
    .ch-bot-wrap--enter-voice,
    .ch-bot-wrap--voice-launch { width: 38px !important; height: 38px !important; }
    .ch-bot-wrap--enter-voice .ch-glass-sphere,
    .ch-bot-wrap--voice-launch .ch-glass-sphere { width: 32px !important; height: 32px !important; }
}

/* ══ MOBILE PANEL DRAWERS ══ */
.ch__mob-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 199;
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    animation: ch-mob-fade .2s ease;
}
@keyframes ch-mob-fade { from { opacity: 0; } to { opacity: 1; } }

/* Mobile top bar (replaces floating FABs) */
.ch__mob-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    height: 48px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--ch-card-border, rgba(255,255,255,.08));
    background: var(--ch-sidebar-bg, #10152b);
}
[data-theme="light"] .ch__mob-bar {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
}
.ch__mob-bar__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    min-height: 44px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ch-text-muted, #64748b);
    font-size: var(--ts-base);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base);
}
.ch__mob-bar__btn svg { flex-shrink: 0; }
.ch__mob-bar__btn:hover,
.ch__mob-bar__btn--active {
    background: rgba(9,134,249,.12);
    color: #0986F9;
}
[data-theme="light"] .ch__mob-bar__btn { color: #64748b; }
[data-theme="light"] .ch__mob-bar__btn:hover,
[data-theme="light"] .ch__mob-bar__btn--active { background: rgba(9,134,249,.1); color: #0986F9; }
.ch__mob-bar__title {
    font-size: var(--ts-md);
    font-weight: 600;
    color: var(--ch-text, #e2e8f0);
}
[data-theme="light"] .ch__mob-bar__title { color: #0f172a; }

@media (max-width: 1279px) {
    /* Плавающий сайтовый хедер на мобиле в чате прячем — его роль (навигация, аккаунт) берут
       мобильная панель сверху и левый drawer (user-pill в списке чатов). Так вверху одна
       компактная полоса, а не две. */
    .ch-page .ui-header { display: none; }
    .ch { padding-top: 52px; }

    .ch__mob-bar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 210;   /* выше drawer'ов: кнопки открытия/закрытия всегда доступны */
        height: 52px;
    }

    /* Обёртки становятся настоящими панелями: перестаём быть display:contents и превращаемся
       в фиксированную колонку с прокруткой, уезжающую за край экрана. */
    .ch__sidebar-left-wrap,
    .ch__sidebar-right-wrap {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 200;
        width: min(320px, 90vw);
        max-width: 90vw;

        /* Отступы с учётом безопасной зоны: снизу у телефонов с жестовой навигацией
           живёт полоса «домой», и последний пункт списка чатов оказывался под ней —
           нажать его было нельзя. Слева/справа то же на устройствах с вырезом,
           когда экран повёрнут. */
        padding: 60px 12px 14px;   /* верхний отступ — под фиксированную мобильную панель */
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        /* Прокрутка не перетекает на страницу под панелью: без этого, докрутив
           список до конца, пользователь начинал листать ленту сообщений позади —
           и терял место в разговоре, не закрыв панель. */
        overscroll-behavior: contain;

        background: var(--ch-page-bg, #0b1020);
        transition: transform .28s var(--ease-std);
    }

    .ch__sidebar-left-wrap { padding-left: calc(12px + env(safe-area-inset-left, 0px)); }
    .ch__sidebar-right-wrap { padding-right: calc(12px + env(safe-area-inset-right, 0px)); }

    /* Мобильная полоса — тоже под вырез: иначе её кнопки уезжают под «чёлку». */
    .ch__mob-bar {
        padding-left: calc(8px + env(safe-area-inset-left, 0px));
        padding-right: calc(8px + env(safe-area-inset-right, 0px));
    }

    /* Системная настройка «меньше движения»: выезд убираем, панель просто появляется.
       Само перемещение оставить нельзя — для части людей это причина укачивания. */
    @media (prefers-reduced-motion: reduce) {
        .ch__sidebar-left-wrap,
        .ch__sidebar-right-wrap { transition: none; }
    }
    [data-theme="light"] .ch__sidebar-left-wrap,
    [data-theme="light"] .ch__sidebar-right-wrap { background: #f4f6fb; }

    .ch__sidebar-left-wrap {
        left: 0;
        transform: translateX(-110%);
        box-shadow: 4px 0 24px rgba(0,0,0,.3);
    }
    .ch__sidebar-right-wrap {
        right: 0;
        transform: translateX(110%);
        box-shadow: -4px 0 24px rgba(0,0,0,.3);
    }
    .ch__sidebar-left-wrap.ch__sidebar-left--open  { transform: translateX(0); }
    .ch__sidebar-right-wrap.ch__sidebar-right--open { transform: translateX(0); }
    .ch__sidebar-left-wrap.ch__sidebar-left--open,
    .ch__sidebar-right-wrap.ch__sidebar-right--open { display: flex; }

    /* Внутри drawer'а колонки и панель шаблонов раскрываются на всю ширину, высота — по контенту
       (не 100%, иначе шаблоны выдавились бы за пределы прокрутки). */
    .ch__sidebar-left-wrap .ch__sidebar-left,
    .ch__sidebar-right-wrap .ch__sidebar-right {
        display: flex !important;
        width: 100%;
        height: auto;
        flex: 0 0 auto;
        overflow: visible;
        padding: 0;
    }
    /* Панель шаблонов внутри левого drawer'а: показать (на планшете она была display:none)
       и развернуть из узкого рельса в полноширинный блок. */
    .ch__sidebar-left-wrap .ch-tpl,
    .ch__sidebar-left-wrap .ch-tpl--collapsed {
        display: flex !important;
        width: 100% !important;
        height: auto;
        flex: 0 0 auto;
    }

    /* Затемнение показываем ТОЛЬКО когда drawer открыт (иначе оно перехватывало бы клики
       по чату). Разметка рендерит .ch__mob-overlay лишь при открытой панели. */
    .ch__mob-overlay { display: block; }
}



/* ── components/chat/chat-menu.css ── */
/* ============================================
   chat-menu.css
   Chat menu card, voice toggle, sessions
   ============================================ */

/* ══════════════════════════════════════════
   CHAT MENU CARD (left sidebar top)
   ══════════════════════════════════════════ */
/* Menu card: flex:1 so it takes remaining space in left sidebar */
.ch__menu-card {
    flex: 1 1 auto !important;
    min-height: 0;
    overflow: hidden;
}

.ch__menu-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Search box (chat sidebar) */
.ch__search {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.ch__search-icon {
    position: absolute;
    left: 11px;
    color: var(--ch-session-date);
    pointer-events: none;
    transition: color var(--t-base);
}
.ch__search-input {
    width: 100%;
    height: 36px;
    padding: 0 32px 0 34px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--ch-session-border);
    background: var(--ch-session-bg);
    color: var(--ch-session-title);
    font-family: var(--font-ui);
    font-size: var(--ts-xs);
    letter-spacing: -0.01em;
    outline: none;
    transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.ch__search-input::placeholder { color: var(--ch-session-date); }
.ch__search-input:focus {
    border-color: rgba(9, 134, 249, 0.55);
    box-shadow: 0 0 0 3px rgba(9, 134, 249, 0.12);
}
.ch__search:focus-within .ch__search-icon { color: #0768c5; }
.ch__search-clear {
    position: absolute;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ch-session-date);
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base);
}
.ch__search-clear:hover { background: rgba(148, 163, 184, 0.18); color: var(--ch-session-title); }

.ch__mic-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #64748b;
    background: rgba(148, 163, 184, 0.15);
    transition: color var(--t-smooth), background var(--t-smooth), box-shadow var(--t-smooth);
}
.ch__mic-btn:hover:not(:disabled) {
    color: #0768c5;
    background: rgba(9, 134, 249, 0.12);
}
.ch__mic-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ch__mic-btn--listening {
    color: #fff;
    background: linear-gradient(135deg, #0768c5 0%, #0590d0 100%);
    box-shadow: 0 0 0 3px rgba(9, 134, 249, 0.25);
    animation: ch-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes ch-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(9, 134, 249, 0.2); }
    50% { box-shadow: 0 0 0 6px rgba(9, 134, 249, 0.12); }
}

/* sphere → chat-sphere.css */

/* Bottom actions (delete btn): fixed at bottom of menu card */
.ch__menu-footer {
    flex-shrink: 0;
    margin-top: auto;
}

.ch__menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

/* Gradient text title — matches React .title */
.ch__menu-title {
    font-weight: 600;
    font-size: var(--ts-md);
    line-height: 1.2;
    letter-spacing: -0.01em;
    background: linear-gradient(90deg, #0768C5 0%, #0590D0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Shared action button (New + Delete) ── */
.ch__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    width: 100%;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--ts-md);
    letter-spacing: -0.01em;
    color: #ffffff;
    background: linear-gradient(135deg, #0768C5 0%, #0590D0 100%);
    box-shadow: 0 2px 8px rgba(7,104,197,0.3);
    transition: all var(--t-base);
    flex-shrink: 0;
    will-change: transform;
}
.ch__action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(7,104,197,0.35), 0 2px 6px rgba(7,104,197,0.2);
}
.ch__action-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(7,104,197,0.25);
}
.ch__action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Session list ── */
.ch__session-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 2px 0 0;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(9,134,249,0.2) transparent;
}
.ch__session-list::-webkit-scrollbar        { width: 3px; background: transparent; }
.ch__session-list::-webkit-scrollbar-track  { background: transparent; border-radius: 10px; }
.ch__session-list::-webkit-scrollbar-thumb  { background: rgba(9,134,249,0.2); border-radius: 10px; }
.ch__session-list::-webkit-scrollbar-thumb:hover { background: rgba(9,134,249,0.35); }
.ch__session-list::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

/* ── Date / pinned group ── */
.ch__session-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ch__session-group + .ch__session-group { margin-top: 14px; }
/* Метка группы дат — тише и мельче (как заголовки секций в VS): приглушённая, без крика */
.ch__session-group-label {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 4px 3px;
    font-family: var(--font-ui);
    font-size: var(--ts-3xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ch-session-date);
    opacity: .85;
    user-select: none;
}
.ch__session-group-label svg { color: #0768c5; }

/* ── Empty state ── */
.ch__session-empty {
    padding: 28px 14px;
    text-align: center;
    font-family: var(--font-ui);
    font-size: var(--ts-xs);
    line-height: 1.5;
    color: var(--ch-session-date);
}

/* ── Session item: now a positioned container (main button + hover actions) ── */
.ch__session-item {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 52px;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--ch-session-bg);
    border: 1px solid var(--ch-session-border);
    transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.ch__session-item:hover:not(.ch__session-item--active) {
    background: var(--ch-session-hover-bg);
    border-color: var(--ch-session-hover-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.ch__session-item--active {
    background: var(--ch-session-active-bg);
    border-color: var(--ch-session-active-border);
    box-shadow:
        0 1px 3px rgba(59,130,246,0.12),
        0 4px 12px rgba(59,130,246,0.12);
}

/* Clickable main area (select session) */
.ch__session-main {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    height: 100%;
    padding: 7px 10px;
    box-sizing: border-box;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-ui);
    border-radius: 10px;
    transition: padding-right var(--t-base);
}
.ch__session-item:hover .ch__session-main,
.ch__session-item--active .ch__session-main { padding-right: 96px; }

.ch__session-pin {
    flex: 0 0 auto;
    color: #0768c5;
    margin-top: -1px;
}

/* ── Session item content: title top, date bottom-right ── */
.ch__session-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.ch__session-title {
    font-weight: 600;                       /* читаемый контраст заголовка чата (не бледный) */
    font-size: var(--ts-sm);
    color: var(--ch-session-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
    line-height: 1.4;
    transition: color .4s;
}
.ch__session-date {
    font-weight: 500;
    font-size: var(--ts-xs);
    color: var(--ch-session-date);
    align-self: flex-end;
    margin-top: 4px;
    letter-spacing: 0.01em;
    transition: color .4s;
}

/* ── Per-item hover actions (pin / rename / delete) ── */
.ch__session-actions {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 14px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, var(--ch-session-hover-bg) 26%);
    border-radius: 10px;
    transition: opacity var(--t-base);
}
.ch__session-item--active .ch__session-actions {
    background: linear-gradient(90deg, transparent 0%, var(--ch-session-active-bg) 26%);
}
.ch__session-item:hover .ch__session-actions,
.ch__session-item--active .ch__session-actions,
.ch__session-item:focus-within .ch__session-actions {
    opacity: 1;
    pointer-events: auto;
}

/* ── Shared small icon button ── */
.ch__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--ch-session-date);
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base), transform var(--t-base);
}
.ch__icon-btn:hover {
    background: rgba(7, 104, 197, 0.12);
    color: #0768c5;
    transform: translateY(-1px);
}
.ch__icon-btn--active { color: #0768c5; }
.ch__icon-btn--ok:hover { background: rgba(16, 185, 129, 0.15); color: #0f9d6b; }
.ch__icon-btn--danger:hover { background: rgba(239, 68, 68, 0.13); color: #e23b3b; }

/* ── Inline rename ── */
.ch__session-rename {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    padding: 6px 7px;
    box-sizing: border-box;
}
.ch__session-rename-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    padding: 0 9px;
    box-sizing: border-box;
    border-radius: 7px;
    border: 1px solid rgba(9, 134, 249, 0.55);
    background: var(--ch-card-bg, #fff);
    color: var(--ch-session-title);
    font-family: var(--font-ui);
    font-size: var(--ts-xs);
    outline: none;
    box-shadow: 0 0 0 3px rgba(9, 134, 249, 0.12);
}

/* ── Inline delete confirm ── */
.ch__session-confirm {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    padding: 6px 9px;
    box-sizing: border-box;
}
.ch__session-confirm-text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-ui);
    font-size: var(--ts-xs);
    font-weight: 600;
    color: var(--ch-session-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ch__session-confirm-btn {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--ch-session-border);
    border-radius: 7px;
    background: transparent;
    color: var(--ch-session-date);
    font-family: var(--font-ui);
    font-size: var(--ts-3xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-base);
}
.ch__session-confirm-btn:hover { background: rgba(148, 163, 184, 0.15); color: var(--ch-session-title); }
.ch__session-confirm-yes {
    border-color: transparent;
    background: linear-gradient(135deg, #ef4444 0%, #e23b3b 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(226, 59, 59, 0.3);
}
.ch__session-confirm-yes:hover {
    background: linear-gradient(135deg, #f15555 0%, #e84747 100%);
    color: #fff;
    transform: translateY(-1px);
}



/* ── components/chat/chat-models.css ── */
/* ============================================
   chat-models.css
   LLM models card (sidebar) +
   LLM picker modal (composer) + light theme
   ============================================ */

/* ── UIKit audit (P1): локальные токены → brand.css ───────────────── */
:root {
  --chmd-audit-surface: var(--surface-1);
  --chmd-audit-border:  var(--border-subtle);
}

/* ══════════════════════════════════════════
   LLM MODELS CARD (left sidebar bottom)
   ══════════════════════════════════════════ */
.ch__llm-card {
    flex-shrink: 0;
    gap: 8px;
    overflow: hidden;
}
.ch__llm-card::after {
    content: '';
    position: absolute;
    top: -24px; right: -24px;
    width: 90px; height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(6,182,212,0.15) 0%,
        rgba(9,134,249,0.08) 50%,
        transparent 70%
    );
    pointer-events: none;
}

/* ── Header row ── */
.ch__llm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.ch__llm-header-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ch__llm-eyebrow {
    font-size: var(--ts-3xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #0768C5 0%, #0590D0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.3;
}
.ch__llm-headline {
    font-size: var(--ts-base);
    font-weight: 700;
    color: var(--ch-llm-headline, #e2e8f0);
    letter-spacing: -0.01em;
    line-height: 1.2;
    transition: color .4s;
}

/* status pill */
.ch__llm-status-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: var(--ts-2xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.ch__llm-status-pill--ok {
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16,185,129,0.22);
    color: #10B981;
}
.ch__llm-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 5px rgba(16,185,129,0.6);
    animation: ch-online-pulse 2.5s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes ch-online-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(1.3); }
}

/* ── Session stats ── */
.ch__llm-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    overflow: hidden;
}
.ch__llm-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    gap: 2px;
    background: var(--ch-card-bg, rgba(15,22,42,0.85));
}
.ch__llm-stat-value {
    font-size: var(--ts-lg);
    font-weight: 700;
    color: var(--ch-llm-headline, #e2e8f0);
    line-height: 1;
    font-family: var(--font-ui);
    letter-spacing: -0.03em;
}
.ch__llm-stat-unit {
    font-size: var(--ts-3xs);
    font-weight: 500;
    opacity: 0.55;
    letter-spacing: 0;
}
.ch__llm-stat-label {
    font-size: var(--ts-3xs);
    color: var(--c-text-3, #64748b);
    font-weight: 500;
    letter-spacing: 0.01em;
}
.ch__llm-stat-divider {
    display: none;
}

/* ── Load meters ── */
.ch__llm-meters {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ch__llm-meter {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ch__llm-meter-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--ts-3xs);
    color: var(--c-text-3, #64748b);
}
.ch__llm-meter-val {
    font-weight: 600;
    color: var(--c-text-2, #94a3b8);
}
.ch__llm-meter-track {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.ch__llm-meter-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.7s cubic-bezier(.22,1,.36,1);
}
.ch__llm-meter-fill--blue {
    background: linear-gradient(90deg, #0986F9, #6366f1);
    box-shadow: 0 0 6px rgba(9,134,249,0.4);
}
.ch__llm-meter-fill--teal {
    background: linear-gradient(90deg, #06b6d4, #10b981);
    box-shadow: 0 0 6px rgba(6,182,212,0.35);
}

/* ── Model selector ── */
.ch__llm-models {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ch__llm-model {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border-radius: 9px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
    width: 100%;
    text-align: left;
}
.ch__llm-model:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(9,134,249,0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(9,134,249,0.08);
}
.ch__llm-model--selected {
    background: rgba(9,134,249,0.08);
    border-color: rgba(9,134,249,0.30);
    box-shadow: 0 0 0 0 rgba(9,134,249,0.0);
}
.ch__llm-logo {
    width: 26px; height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ch__llm-logo--anthropic {
    background: linear-gradient(135deg, #BF7252, #8F4A2C);
    box-shadow: 0 2px 8px rgba(143,74,44,0.3);
}
.ch__llm-logo--google {
    background: #fff;
    border: 1px solid rgba(226,232,240,0.9);
    box-shadow: 0 1px 5px rgba(0,0,0,0.08);
}
.ch__llm-model-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.ch__llm-model-name {
    font-size: var(--ts-xs);
    font-weight: 600;
    color: var(--ch-llm-model-name, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    transition: color .4s;
}
.ch__llm-model-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ch__llm-model-vendor {
    font-size: var(--ts-2xs);
    color: var(--c-text-3, #64748b);
    line-height: 1.2;
}
.ch__llm-model-ctx {
    font-size: var(--ts-3xs);
    font-weight: 600;
    color: #0986F9;
    background: rgba(9,134,249,0.10);
    padding: 1px 5px;
    border-radius: 4px;
    line-height: 1.5;
}
.ch__llm-model-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}
.ch__llm-online-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 20px;
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16,185,129,0.20);
    flex-shrink: 0;
}
.ch__llm-online-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 4px rgba(16,185,129,0.6);
    flex-shrink: 0;
    animation: ch-online-pulse 2.5s ease-in-out infinite;
}
.ch__llm-online-text {
    font-size: var(--ts-3xs);
    font-weight: 700;
    color: #10B981;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}
.ch__llm-check {
    color: #0986F9;
    flex-shrink: 0;
}

/* ── Footer ── */
.ch__llm-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(9,134,249,0.10);
}
.ch__llm-footer-icon {
    width: 18px; height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0986F9, #06B6D4);
    box-shadow: 0 2px 6px rgba(9,134,249,0.35);
}
.ch__llm-footer-text {
    font-size: var(--ts-xs);
    font-weight: 500;
    color: var(--c-text-3, #64748b);
    line-height: 1.4;
    transition: color .4s;
}

/* ── Cohort tabs ── */
.ch__llm-cohort-tabs {
    display: flex;
    gap: 3px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 9px;
    padding: 3px;
}
.ch__llm-cohort-tab {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1;
    justify-content: center;
    padding: 4px 3px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--c-text-3, #64748b);
    font-size: var(--ts-3xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    white-space: nowrap;
}
.ch__llm-cohort-tab:hover {
    background: rgba(255,255,255,0.06);
    color: var(--c-text-1, #e2e8f0);
}
.ch__llm-cohort-tab--active {
    background: rgba(9,134,249,0.18);
    color: #60a5fa;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* model stat badges */
.ch__llm-model-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.ch__llm-model-stat {
    font-size: var(--ts-3xs);
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
.ch__llm-model-stat--speed {
    background: rgba(245,158,11,0.12);
    color: #fbbf24;
}
.ch__llm-model-stat--cost {
    background: rgba(16,185,129,0.12);
    color: #34d399;
}
/* OpenAI/Mistral/Meta logos */
.ch__llm-logo--openai  { background: #10a37f; }
.ch__llm-logo--mistral { background: linear-gradient(135deg, #FF7000, #D45000); }
.ch__llm-logo--meta    { background: linear-gradient(135deg, #0668E1, #0082FB); }

/* light theme */
[data-theme="light"] .ch__llm-stats {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .ch__llm-stat-divider {
    background: rgba(0,0,0,0.08);
}
[data-theme="light"] .ch__llm-meter-track {
    background: rgba(0,0,0,0.06);
}
[data-theme="light"] .ch__llm-model {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .ch__llm-model:hover {
    background: rgba(0,0,0,0.04);
}
[data-theme="light"] .ch__llm-model--selected {
    background: rgba(9,134,249,0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ch-llm-* — компактный пикер LLM-модели в строке под textarea
   Кнопка-триггер + backdrop + модальное окно с категориями и картами
═══════════════════════════════════════════════════════════════════════════ */

/* ── Обёртка (position: relative для модального) ── */
.ch-llm-wrap { position: relative; }

/* ── Кнопка-триггер ── */
.ch-llm-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 6px;
    border: 1px solid var(--ch-depth-btn-border);
    border-radius: 8px;
    background: var(--ch-depth-btn-bg);
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--ts-xs);
    font-weight: 500;
    font-family: var(--font-ui);
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, border-color .18s, color .18s;
    min-height: 30px;
}
.ch-llm-trigger:hover,
.ch-llm-trigger--open {
    border-color: rgba(9, 134, 249, 0.25);
    color: rgba(255, 255, 255, 0.85);
    background: color-mix(in srgb, var(--ch-depth-btn-bg) 94%, rgba(9,134,249,0.12));
}

/* Логотип модели в кнопке */
.ch-llm-trigger__logo {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Название модели в кнопке */
.ch-llm-trigger__name {
    font-size: var(--ts-xs);
    line-height: 1;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Шеврон */
.ch-llm-trigger__chev {
    opacity: 0.45;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.ch-llm-trigger__chev--up { transform: rotate(180deg); }

/* ── Backdrop (закрывает modal при клике снаружи) ── */
.ch-llm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 490;
    background: rgba(0, 0, 0, 0.30);
    backdrop-filter: var(--glass-blur-sm);
    animation: ch-llm-fade 0.15s ease;
}

/* ── Модальное окно (позиционируется над composer по центру экрана) ── */
.ch-llm-modal {
    position: fixed;
    bottom: 105px;
    left: 50%;
    transform: translateX(-50%);
    width: min(430px, calc(100vw - 24px));
    z-index: 500;
    background: rgba(14, 20, 38, 0.94);
    backdrop-filter: var(--glass-blur-xl) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.50),
        0 0 0 0.5px rgba(255, 255, 255, 0.04) inset;
    overflow: hidden;
    animation: ch-llm-slide-up 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Header модального окна ── */
.ch-llm-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ch-llm-modal__title {
    font-size: var(--ts-base);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: -0.01em;
}
.ch-llm-modal__close {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.ch-llm-modal__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.90);
}

/* ── Табы категорий (Быстрые / Качественные / Экономные) ── */
.ch-llm-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ch-llm-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.45);
    font-size: var(--ts-xs);
    font-weight: 500;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ch-llm-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.80);
}
.ch-llm-tab--on {
    background: rgba(9, 134, 249, 0.15);
    border-color: rgba(9, 134, 249, 0.32);
    color: #60a5fa;
}
.ch-llm-tab__icon {
    display: flex;
    align-items: center;
    opacity: 0.75;
}
.ch-llm-tab--on .ch-llm-tab__icon { opacity: 1; }

/* ── Список моделей ── */
.ch-llm-list {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

/* ── Карточка модели ── */
.ch-llm-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-ui);
    text-align: left;
    width: 100%;
    transition: background 0.13s, border-color 0.13s;
}
.ch-llm-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}
.ch-llm-card--on {
    background: rgba(9, 134, 249, 0.12);
    border-color: rgba(9, 134, 249, 0.28);
}

.ch-llm-card__logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ch-llm-card__info { flex: 1; min-width: 0; }
.ch-llm-card__name {
    display: block;
    font-size: var(--ts-base);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.90);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ch-llm-card__meta {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
}
.ch-llm-card__vendor {
    font-size: var(--ts-2xs);
    color: rgba(255, 255, 255, 0.38);
}
.ch-llm-card__ctx {
    font-size: var(--ts-3xs);
    color: rgba(9, 134, 249, 0.75);
    background: rgba(9, 134, 249, 0.10);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 500;
}

.ch-llm-card__tags {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}
.ch-llm-card__speed,
.ch-llm-card__cost {
    font-size: var(--ts-2xs);
    color: rgba(255, 255, 255, 0.38);
    white-space: nowrap;
}

.ch-llm-card__check { color: #60a5fa; flex-shrink: 0; }

.ch-llm-card__dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ch-llm-card__dot span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.70);
    box-shadow: 0 0 4px rgba(74, 222, 128, 0.50);
}

/* ── Анимации ── */
@keyframes ch-llm-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ch-llm-slide-up {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(14px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* ── Логотипы вендоров (цветной фон) ── */
.ch-llm-trigger__logo.ch__llm-logo--openai,
.ch-llm-card__logo.ch__llm-logo--openai   { background: #10a37f; }
.ch-llm-trigger__logo.ch__llm-logo--google,
.ch-llm-card__logo.ch__llm-logo--google   { background: #fff; border: 1px solid #e5e7eb; }
.ch-llm-trigger__logo.ch__llm-logo--anthropic,
.ch-llm-card__logo.ch__llm-logo--anthropic { background: #c96442; }
.ch-llm-trigger__logo.ch__llm-logo--mistral,
.ch-llm-card__logo.ch__llm-logo--mistral  { background: #f63; }
.ch-llm-trigger__logo.ch__llm-logo--meta,
.ch-llm-card__logo.ch__llm-logo--meta     { background: #0064e0; }

/* ── Светлая тема ── */
[data-theme="light"] .ch-llm-trigger {
    border-color: var(--b-line-hi);
    background: var(--b-surface);
    color: var(--b-coffee-mid);
}
[data-theme="light"] .ch-llm-trigger:hover,
[data-theme="light"] .ch-llm-trigger--open {
    background: rgba(var(--b-gold-rgb), 0.06);
    border-color: rgba(var(--b-gold-rgb), 0.38);
    color: var(--b-coffee);
}
[data-theme="light"] .ch-llm-trigger__chev { opacity: 0.40; }

[data-theme="light"] .ch-llm-backdrop {
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: var(--glass-blur-sm);
}

[data-theme="light"] .ch-llm-modal {
    background: var(--b-paper);
    border-color: var(--b-line-hi);
    box-shadow: var(--b-shadow-lg, 0 16px 48px rgba(0,0,0,0.18));
}
[data-theme="light"] .ch-llm-modal__head { border-bottom-color: var(--b-line); }
[data-theme="light"] .ch-llm-modal__title { color: var(--b-coffee); }
[data-theme="light"] .ch-llm-modal__close {
    background: rgba(var(--b-coffee-rgb), 0.05);
    color: var(--b-coffee-soft);
}
[data-theme="light"] .ch-llm-modal__close:hover {
    background: rgba(var(--b-coffee-rgb), 0.10);
    color: var(--b-coffee);
}

[data-theme="light"] .ch-llm-tabs { border-bottom-color: var(--b-line); }
[data-theme="light"] .ch-llm-tab {
    background: rgba(var(--b-coffee-rgb), 0.03);
    color: var(--b-coffee-soft);
}
[data-theme="light"] .ch-llm-tab:hover {
    background: rgba(var(--b-coffee-rgb), 0.07);
    color: var(--b-coffee);
}
[data-theme="light"] .ch-llm-tab--on {
    background: rgba(var(--b-gold-rgb), 0.12);
    border-color: rgba(var(--b-gold-rgb), 0.35);
    color: var(--b-gold-dark, #8a6e3c);
}

[data-theme="light"] .ch-llm-list { scrollbar-color: rgba(0,0,0,0.10) transparent; }

[data-theme="light"] .ch-llm-card:hover {
    background: rgba(var(--b-coffee-rgb), 0.04);
    border-color: var(--b-line);
}
[data-theme="light"] .ch-llm-card--on {
    background: rgba(var(--b-gold-rgb), 0.09);
    border-color: rgba(var(--b-gold-rgb), 0.28);
}
[data-theme="light"] .ch-llm-card__name { color: var(--b-coffee); }
[data-theme="light"] .ch-llm-card__vendor { color: var(--b-coffee-faint, rgba(52,40,26,0.4)); }
[data-theme="light"] .ch-llm-card__ctx {
    color: var(--b-gold-dark, #8a6e3c);
    background: rgba(var(--b-gold-rgb), 0.10);
}
[data-theme="light"] .ch-llm-card__speed,
[data-theme="light"] .ch-llm-card__cost { color: var(--b-coffee-soft); }
[data-theme="light"] .ch-llm-card__check { color: var(--b-gold-dark, #8a6e3c); }

/* light theme → chat-light.css */



/* ── components/chat/chat-messages.css ── */
/* ============================================
   chat-messages.css
   Center column, messages, empty state, chips,
   message bubbles, AI cards, typing animation
   ============================================ */

/* ══════════════════════════════════════════
   CENTER COLUMN — messages + composer
   ══════════════════════════════════════════ */

/* Center column: position:relative so absolute input-section works */
.ch__center {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Messages: flex:1, overflow-y, padding-bottom ~190px so content not hidden behind input */
.ch__messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 24px 190px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,116,139,0.3) transparent;
    min-height: 0;
    scroll-behavior: smooth;
    align-items: center;
}
.ch__messages > * {
    width: 100%;
    max-width: 740px;
}
.ch__messages::-webkit-scrollbar        { width: 5px; }
.ch__messages::-webkit-scrollbar-track  { background: transparent; }
.ch__messages::-webkit-scrollbar-thumb  { background: rgba(100,116,139,0.3); border-radius: 10px; }

/* Empty state */
.ch__empty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 32px 24px;
    gap: 20px;
    text-align: center;
    height: 100%;
    animation: ch-empty-in .5s ease-out;
}
@keyframes ch-empty-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ch__empty-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
}
.ch__empty-icon svg {
    position: relative;
    z-index: 1;
}
.ch__empty-icon-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* Fractal: мягкое синее кольцо-пульс */
    background: rgba(46,107,255,0.06);
    border: 1.5px solid rgba(46,107,255,0.12);
    animation: ch-icon-pulse 3s ease-in-out infinite;
}
@keyframes ch-icon-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.12); opacity: .6; }
}
.ch__empty-title {
    font-size: var(--ts-2xl);
    font-weight: 700;
    margin: 0 0 6px;
    font-family: var(--font-ui);
    letter-spacing: -.02em;
    /* Fractal: сине-циановый градиент заголовка пустого состояния */
    background: linear-gradient(135deg, var(--fr-blue-500), var(--fr-cyan-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ch__desc-block {
    max-width: 480px;
}
.ch__desc-text {
    font-size: var(--ts-md);
    color: var(--ch-text-muted);
    line-height: 1.65;
    margin: 0;
    transition: color .4s;
}
.ch__chips-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 580px;
}
.ch__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    background: var(--ch-session-bg);
    backdrop-filter: var(--glass-blur-md) var(--glass-sat-low);
    -webkit-backdrop-filter: var(--glass-blur-md) var(--glass-sat-low);
    border: 1.5px solid var(--ch-chip-border, var(--fr-slate-200));
    border-radius: var(--r-card);
    font-family: var(--font-ui);
    font-size: var(--ts-base);
    font-weight: 500;
    color: var(--ch-chip-color, #23252e);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    box-shadow: var(--b-shadow-sm);
}
.ch__chip:hover {
    background: var(--ch-chip-hover-bg, var(--fr-blue-25));
    border-color: var(--ch-chip-hover-border, var(--fr-blue-200));
    box-shadow: var(--b-shadow-md);
    transform: translateY(-1px);
}

/* Messages */
.ch__msg {
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: ch-msg-in .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes ch-msg-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ch__msg--user { align-items: flex-end; }
.ch__msg--ai   { align-items: flex-start; }

.ch__msg-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: var(--ts-xs);
    color: var(--ch-text-muted);
    font-family: var(--font-body);
    transition: color .4s;
}
.ch__msg-who   { font-weight: 600; }

.ch__msg-bubble {
    max-width: min(74%, 560px);
    padding: 12px 16px;
    border-radius: 16px;
    font-size: var(--ts-md);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-body);
    color: var(--chat-message-color);
    transition: box-shadow var(--t-smooth);
}
/* Пузырь пользователя: плоский синий Fractal, скругление 16/16/4/16,
   без прежнего тёмного градиента и тяжёлых теней */
.ch__msg-bubble--user {
    background: var(--fr-blue-500);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(46,107,255,0.22);
    border-radius: 16px 16px 4px 16px;
}
.ch__msg-bubble--user:hover {
    box-shadow: 0 4px 16px rgba(46,107,255,0.30);
}

/* AI card */
.ch__ai-card {
    max-width: min(92%, 780px);
    background: var(--ch-msg-ai-bg);
    border: 1px solid var(--ch-msg-ai-border);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: box-shadow .25s ease, border-color .25s ease, background .4s;
}
.ch__ai-card:hover {
    box-shadow: 0 4px 20px rgba(46,107,255,0.10), 0 1px 4px rgba(90,104,150,0.06);
    border-color: var(--fr-blue-200);
}
.ch__ai-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.ch__ai-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    /* База (в chat-fractal.css заменяется на градиентный орб) */
    background: linear-gradient(135deg, var(--fr-blue-600), var(--fr-cyan-500));
    color: #fff;
    font-size: var(--ts-xs);
    font-weight: 700;
    -webkit-text-fill-color: #fff;
    box-shadow: 0 2px 8px rgba(46,107,255,0.20);
    flex-shrink: 0;
}
.ch__ai-brand {
    font-size: var(--ts-base);
    font-weight: 600;
    color: var(--ch-title);
    flex: 1;
    font-family: var(--font-ui);
    transition: color .4s;
}
.ch__agent-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    /* База (в chat-fractal.css заменяется на светлый синий бейдж) */
    color: var(--fr-blue-600);
    background: var(--fr-blue-50);
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ch__ai-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--t-smooth);
}
.ch__ai-card:hover .ch__ai-actions {
    opacity: 1;
}
.ch__ai-btn {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: none;
    background: transparent;
    /* Fractal: серый slate, hover — светло-slate подложка */
    color: var(--fr-slate-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-base);
}
.ch__ai-btn svg { width: 16px; height: 16px; }
.ch__ai-btn--text {
    width: auto;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ch__ai-btn:hover {
    background: var(--fr-slate-100);
    color: var(--fr-slate-900);
    transform: scale(1.08);
}
.ch__ai-body {
    font-size: var(--ts-md);
    line-height: 1.65;
    color: var(--ch-msg-ai-text);
    word-break: break-word;
    font-family: var(--font-ui);
    transition: color .4s;
}

/* ── Markdown inside AI messages ── */
.ch__md p              { margin: 0 0 .75em; }
.ch__md p:last-child   { margin-bottom: 0; }
.ch__md h1, .ch__md h2, .ch__md h3, .ch__md h4 {
    margin: 1em 0 .4em;
    font-weight: 700;
    line-height: 1.3;
}
.ch__md h1 { font-size: 1.35em; }
.ch__md h2 { font-size: 1.2em; }
.ch__md h3 { font-size: 1.1em; }
.ch__md ul, .ch__md ol {
    margin: .4em 0 .75em;
    padding-left: 1.6em;
}
.ch__md li { margin-bottom: .25em; }
.ch__md strong { font-weight: 700; }
.ch__md em     { font-style: italic; }
.ch__md code {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: .88em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--ch-code-bg, rgba(46,107,255,0.08));
    color: var(--ch-code-color, #c7254e);
}
.ch__md pre {
    margin: .6em 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--ch-pre-bg, #1e293b);
    color: var(--ch-pre-color, #e2e8f0);
    overflow-x: auto;
    font-size: .88em;
    line-height: 1.55;
}
.ch__md pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}
.ch__md blockquote {
    margin: .6em 0;
    padding: 8px 14px;
    border-left: 3px solid var(--chat-accent, var(--fr-blue-500));
    background: var(--ch-bq-bg, rgba(46,107,255,0.05));
    border-radius: 0 8px 8px 0;
    color: var(--ch-text-muted);
}
.ch__md .ch__table-wrap {
    overflow-x: auto;
    margin: .6em 0;
    border-radius: 10px;
    border: 1px solid var(--ch-msg-ai-border, rgba(100,116,139,0.18));
    scrollbar-width: thin;
}
.ch__md table {
    border-collapse: collapse;
    font-size: .88em;
    width: max-content;
    min-width: 100%;
}
.ch__md th, .ch__md td {
    border: 1px solid var(--ch-msg-ai-border, rgba(100,116,139,0.15));
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ch__md td {
    white-space: normal;
    min-width: 80px;
}
.ch__md th {
    background: var(--ch-code-bg, rgba(46,107,255,0.06));
    font-weight: 600;
    white-space: nowrap;
    position: sticky;
    top: 0;
}
.ch__md hr {
    border: none;
    border-top: 1px solid var(--ch-msg-ai-border, rgba(100,116,139,0.15));
    margin: 1em 0;
}
.ch__ai-image-wrap {
    margin-bottom: 12px;
}
.ch__ai-image {
    max-width: 100%;
    max-height: 512px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    object-fit: contain;
}

/* Картинки внутри markdown-ответа (генерация через ![](…)) — тот же аккуратный
   бокс, что и у .ch__ai-image: компактно, с сохранением пропорций, а не во всю
   ширину столбца. height:auto держит соотношение сторон при любом max-*. */
.ch__md img,
.ch__ai-image,
.ch__user-image {
    cursor: zoom-in;
}
.ch__md img {
    display: block;
    max-width: min(100%, 420px);
    max-height: 420px;
    width: auto;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    object-fit: contain;
    margin: 4px 0;
}

/* Изображение, прикреплённое пользователем (в его пузыре) */
.ch__user-image-wrap {
    margin-bottom: 8px;
}
.ch__user-image {
    max-width: 100%;
    max-height: 320px;
    border-radius: 10px;
    object-fit: contain;
    display: block;
}

/* ── Thinking steps (real-time agent progress) ── */
.ch__think {
    margin-bottom: 6px;
}
.ch__think-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--ch-text-muted);
    transition: background .2s, color .2s;
}
.ch__think-toggle:hover {
    background: var(--ch-chip-hover-bg, var(--fr-blue-25));
    color: var(--ch-accent, var(--fr-blue-600));
}
.ch__think-chevron {
    transition: transform .25s ease;
    flex-shrink: 0;
}
.ch__think--collapsed .ch__think-chevron {
    transform: rotate(-90deg);
}
.ch__think-title {
    white-space: nowrap;
}
.ch__think-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0 0 0 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ch__think-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-family: var(--font-ui);
    line-height: 1.35;
    animation: ch-step-in .3s ease-out both;
}
@keyframes ch-step-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}
.ch__think-item--done {
    color: var(--ch-text-muted);
}
.ch__think-item--active {
    color: var(--ch-title);
    font-weight: 500;
}
/* Готовый шаг: зелёный check в светло-зелёном кружке (по эталону) */
.ch__think-check {
    flex-shrink: 0;
    color: var(--fr-green-700);
    background: var(--fr-green-100);
    border-radius: 50%;
    padding: 2px;
    box-sizing: content-box;
}
/* Активный шаг: синий loader-спиннер Fractal */
.ch__think-spinner {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: 2px solid var(--fr-blue-200);
    border-top-color: var(--fr-blue-500);
    border-radius: 50%;
    animation: ch-spin .7s linear infinite;
}
@keyframes ch-spin {
    to { transform: rotate(360deg); }
}
.ch__think-label {
    white-space: nowrap;
}
.ch__think-detail {
    color: var(--ch-text-muted);
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* ── Reasoning block (model thinking) — светлый нейтральный блок Fractal ── */
.ch__reasoning {
    margin: 4px 0 8px;
    border-radius: 8px;
    border: 1px solid var(--fr-slate-200);
    background: var(--ch-reasoning-bg, var(--fr-slate-50));
    overflow: hidden;
}
.ch__reasoning-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--ch-reasoning-color, var(--fr-slate-500));
    transition: background .2s;
}
.ch__reasoning-toggle:hover {
    background: var(--ch-reasoning-hover, var(--fr-slate-100));
}
.ch__reasoning-icon {
    flex-shrink: 0;
    color: var(--ch-reasoning-color, var(--fr-blue-500));
}
.ch__reasoning-title {
    flex: 1;
    text-align: left;
    white-space: nowrap;
}
.ch__reasoning--collapsed .ch__think-chevron {
    transform: rotate(-90deg);
}
.ch__reasoning-body {
    padding: 0 10px 8px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ch-text-muted);
    font-family: var(--font-ui);
    max-height: 260px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    scrollbar-width: thin;
    animation: ch-step-in .3s ease-out both;
}
.ch__reasoning-body p { margin: 0 0 .4em; }
.ch__reasoning-body p:last-child { margin-bottom: 0; }

/* Streaming cursor blink */
.ch__stream-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--chat-accent, var(--fr-blue-500));
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: ch-blink 1s step-end infinite;
}
@keyframes ch-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}
.ch__stream-body {
    min-height: 1.5em;
}

/* Typing animation */
.ch__typing {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 0;
}
.ch__typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* Fractal: сине-циановые точки набора */
    background: linear-gradient(135deg, var(--fr-blue-500), var(--fr-cyan-500));
    animation: ch-typing-pulse 1.4s ease-in-out infinite;
    opacity: 0.4;
}
.ch__typing span:nth-child(2) { animation-delay: 0.15s; }
.ch__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ch-typing-pulse {
    0%, 100% { transform: scale(0.7) translateY(0); opacity: 0.3; }
    35%      { transform: scale(1.15) translateY(-4px); opacity: 1; }
    55%      { transform: scale(0.95) translateY(0); opacity: 0.7; }
}



/* ── components/chat/chat-composer.css ── */
/* ============================================
   chat-composer.css
   Input section, form, textarea, expert mode
   selector, sphere animations, buttons, disclaimer
   ============================================ */

/* ══════════════════════════════════════════
   INPUT SECTION — matches React .inputs-section
   position:absolute bottom:0, gradient fade-up
   ══════════════════════════════════════════ */
.ch__input-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: auto;
    background: linear-gradient(
        to top,
        var(--ch-page-bg)   0%,
        color-mix(in srgb, var(--ch-page-bg) 98%, transparent) 30%,
        color-mix(in srgb, var(--ch-page-bg) 80%, transparent) 55%,
        color-mix(in srgb, var(--ch-page-bg) 50%, transparent) 75%,
        transparent 100%
    );
    padding: 0 24px 0.5rem;
    z-index: 5;
    pointer-events: none;
}

/* input-container */
.ch__input-container {
    max-width: 740px;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    pointer-events: auto;
}

/* form-with-bot: flex row [form-messages | bot-sphere], matches React exactly */
.ch__form-with-bot {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    margin-top: auto;
}

/* Main form box */
.ch__form-box {
    position: relative;
    display: flex;
    align-items: flex-end;
    background: var(--ch-form-bg);
    border-radius: 16px;
    border: 1px solid var(--ch-form-border);
    padding: 4px 8px 4px 4px;
    gap: 6px;
    width: 100%;
    min-height: 56px;
    height: auto;
    box-shadow: var(--ch-form-shadow);
    transition: border-color var(--t-base), background var(--t-slow), box-shadow var(--t-base);
}
.ch__form-box:focus-within {
    border-color: rgba(46,107,255,0.35);
    box-shadow: 0 0 0 3px rgba(46,107,255,0.10), var(--ch-form-shadow);
}
.ch__form-box--has-chips {
    padding-top: 2px;
}

/* textarea-container — matches React */
.ch__textarea-wrap {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* textarea */
.ch__textarea {
    order: 1;
    background-color: transparent;
    border: none;
    outline: none;
    resize: none;
    font-size: var(--ts-md);
    width: 100%;
    min-height: 40px;
    max-height: 280px;
    overflow-y: auto;
    /* Снизу больше не резервируем 48px под панель — она теперь ниже, в потоке. */
    padding: 10px 10px 4px 10px;
    /* Аккуратная тонкая полоса прокрутки вместо системной «плиты». */
    scrollbar-width: thin;
    scrollbar-color: rgba(90, 104, 150, .32) transparent;
    font-family: var(--font-ui);
    /* Тёмный текст на светлой карточке Fractal */
    color: #23252e;
    line-height: 1.5;
}
/* WebKit: та же тонкая полоса, что и scrollbar-width: thin в Firefox. */
.ch__textarea::-webkit-scrollbar { width: 8px; }
.ch__textarea::-webkit-scrollbar-track { background: transparent; }
.ch__textarea::-webkit-scrollbar-thumb {
    background: rgba(90, 104, 150, .28);
    border-radius: 999px;
    /* Прозрачная рамка «поджимает» ползунок от края поля. */
    border: 2px solid transparent;
    background-clip: content-box;
}
.ch__textarea::-webkit-scrollbar-thumb:hover { background: rgba(90, 104, 150, .45); background-clip: content-box; }

.ch__textarea::placeholder {
    color: #9aa0b0;
    font-family: var(--font-ui);
    font-size: var(--ts-md);
    font-weight: 400;
    line-height: 1.5;
    opacity: 1;
}

/* ── Панель управления под textarea: режим + LLM ── */
/* Панель «Режим + модель» — НОРМАЛЬНЫЙ поток под полем ввода.
   Раньше была absolute поверх textarea, а место под неё резервировалось
   padding-bottom: 48px. При длинном тексте этот отступ скраливался вместе с
   содержимым, и строки уезжали ПОД чипы «Авто»/«Gemini» — они накладывались.
   В потоке пересечение невозможно в принципе. В DOM панель идёт до textarea,
   поэтому порядок задаём через order. */
.ch-composer-controls {
    order: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px 2px 6px;
    margin-top: 2px;
}

/* ── Context agent badge ── */
.ch-context-agent {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 7px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(139,92,246,0.10));
    border: 1px solid rgba(99,102,241,0.25);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    color: #6366f1;
    white-space: nowrap;
    line-height: 1.3;
}
.ch-context-agent svg {
    flex-shrink: 0;
    color: #6366f1;
}

/* ── ExpertModeSelector ── */
.ch-mode-sel-wrap {
    position: relative;
    display: inline-block;
    --mode-accent: #2e6bff;
}
[data-theme="light"] .ch-mode-sel-wrap {
    --mode-accent: #2e6bff;
}

/* Trigger button — светлый pill (Fractal) */
.ch-mode-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 24px 5px 10px;
    background: var(--fr-slate-0, #fff);
    border: 1px solid var(--fr-slate-200, #dde1ea);
    border-radius: 999px;
    box-shadow: var(--fr-field-shadow);
    color: var(--mode-accent);
    font-size: var(--ts-xs);
    font-weight: 500;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all .18s ease;
    min-width: 0;
    min-height: 30px;
    position: relative;
    white-space: nowrap;
    gap: 4px;
}
.ch-mode-trigger:hover {
    border-color: var(--fr-blue-200, #b9cdfd);
    background: var(--fr-blue-25, #f5f8ff);
}
.ch-mode-trigger--open {
    border-color: var(--fr-blue-200, #b9cdfd);
    background: var(--fr-blue-25, #f5f8ff);
}
.ch-mode-trigger__icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mode-accent);
    flex-shrink: 0;
}
.ch-mode-trigger__icon svg { display: block; }
.ch-mode-trigger__label {
    font-weight: 500;
    color: var(--mode-accent);
    font-size: var(--ts-xs);
    line-height: 1;
}
.ch-mode-trigger__arrow {
    color: var(--mode-accent);
    transition: transform var(--t-smooth);
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.ch-mode-trigger__arrow--up {
    transform: translateY(-50%) rotate(180deg);
}

/* Transparent backdrop to close dropdown on outside click */
.ch-mode-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: transparent;
}

/* Dropdown panel */
.ch-mode-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: -20px;
    right: -20px;
    min-width: 240px;
    background: var(--ch-card-bg);
    border: 1px solid var(--ch-card-border);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.1);
    backdrop-filter: var(--glass-blur-md);
    -webkit-backdrop-filter: var(--glass-blur-md);
    padding: 0.5rem;
    z-index: 101;
    animation: ch-mode-slide-up 0.15s ease;
    transition: background .4s, border-color .4s;
}
@keyframes ch-mode-slide-up {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ch-mode-dropdown__title {
    font-size: var(--ts-lg);
    font-weight: 600;
    text-align: center;
    display: block;
    margin-bottom: 10px;
    padding: 4px 0 6px;
    background: linear-gradient(90deg, #2e6bff 0%, #08b8d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Option buttons */
.ch-mode-opt {
    width: 100%;
    display: block;
    padding: 0;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    border-radius: 12px;
    margin: 2px 0;
    transition: all var(--t-smooth);
    text-align: left;
}
.ch-mode-opt:hover {
    background: rgba(46,107,255,0.05);
    border-color: rgba(46,107,255,0.12);
}
.ch-mode-opt--active {
    background: linear-gradient(135deg, rgba(46,107,255,0.08) 0%, rgba(8,184,212,0.06) 100%);
    border-color: rgba(46,107,255,0.25);
    box-shadow: 0 1px 4px rgba(46,107,255,0.08);
}
.ch-mode-opt__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 2px;
}
.ch-mode-opt__icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mode-accent);
    flex-shrink: 0;
}
.ch-mode-opt__icon svg { display: block; }
.ch-mode-opt__title {
    font-weight: 500;
    font-size: var(--ts-md);
    color: var(--mode-accent);
    line-height: 1.3;
}
.ch-mode-opt__desc {
    display: block;
    font-size: var(--ts-xs);
    color: var(--ch-text-muted);
    line-height: 1.3;
    padding: 0 16px 8px 48px;
    transition: color .4s;
}

/* ai-bot-sphere → chat-sphere.css */

/* ── Sphere animations ── */
@keyframes ch-levitate {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}
@keyframes ch-rotate-grad {
    0%   { filter: hue-rotate(0deg) brightness(1); }
    50%  { filter: hue-rotate(10deg) brightness(1.1); }
    100% { filter: hue-rotate(0deg) brightness(1); }
}
@keyframes ch-rotate-glow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes ch-eye-pulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.2); }
}
@keyframes ch-float1 {
    0%, 100% { transform: translate(0,0) scale(1); opacity: 0.7; }
    50%       { transform: translate(-8px,-10px) scale(1.3); opacity: 1; }
}
@keyframes ch-float2 {
    0%, 100% { transform: translate(0,0) scale(0.8); opacity: 0.6; }
    50%       { transform: translate(10px,-8px) scale(1.2); opacity: 0.95; }
}
@keyframes ch-float3 {
    0%, 100% { transform: translate(0,0) scale(0.9); opacity: 0.5; }
    50%       { transform: translate(-6px,10px) scale(1.4); opacity: 0.9; }
}
@keyframes ch-reflect-pulse {
    0%, 100% { opacity: 0.7; }
    50%       { opacity: 1; }
}

/* Mobile: hide sphere, shrink mode trigger */
@media (max-width: 768px) {
    .ch-bot-wrap { display: none; }
    .ch__form-with-bot > .ch-bot-wrap.ch-bot-wrap--voice-launch,
    .ch__form-with-bot > .ch-bot-wrap.ch-bot-wrap--enter-voice {
        display: flex !important;
    }
    .ch-mode-trigger { font-size: var(--ts-2xs); padding: 4px 22px 4px 7px; }
    .ch-mode-trigger__label { font-size: var(--ts-2xs); }
}

/* buttons-container — right side of form */
.ch__form-actions {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    padding-bottom: 6px;
}

/* button-group */
.ch__btn-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Кнопки действий (Fractal) ──
   attach / mic — прозрачные иконки-кнопки (fr-iconbtn),
   send — круглая металлическая кнопка. */
.ch__attach-btn,
.ch__mic-btn,
.ch__send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s, color .2s, background .2s, box-shadow .2s, filter .2s;
}

/* attach / mic — 32px, прозрачный фон, slate-текст, hover slate-100, радиус 8px */
.ch__form-actions .ch__attach-btn,
.ch__form-actions .ch__mic-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--fr-slate-500, #5c6172);
}
.ch__form-actions .ch__attach-btn:hover,
.ch__form-actions .ch__mic-btn:hover:not(:disabled) {
    color: #23252e;
    background: var(--fr-slate-100, #f0f2f7);
}
.ch__form-actions .ch__attach-btn:active,
.ch__form-actions .ch__mic-btn:active { transform: translateY(1px); }
.ch__form-actions .ch__mic-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Активная запись голоса — синий Fractal */
.ch__form-actions .ch__mic-btn--listening,
.ch__form-actions .ch__mic-btn--listening:hover {
    color: #fff;
    background: var(--fr-metal-bg);
    box-shadow: var(--fr-metal-shadow);
}

/* Превью прикреплённых файлов над полем ввода (фото и документы, с переносом) */
.ch__attach-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 4px 4px;
}

/* Чип вложения: иконка/миниатюра + имя + крестик */
.ch__attach-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 220px;
    padding: 5px 26px 5px 8px;
    border-radius: 10px;
    border: 1px solid var(--ch-border, rgba(0,0,0,0.08));
    background: var(--ch-surface-2, rgba(0,0,0,0.03));
}
.ch__attach-chip--img { padding-left: 5px; }
.ch__attach-chip .ch__attach-thumb-img {
    width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex-shrink: 0;
}
.ch__attach-chip__icon {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
    background: var(--fr-blue-50, rgba(46,107,255,.10)); color: var(--fr-blue-500, #2e6bff);
}
.ch__attach-chip__name {
    font-size: 0.82rem; color: var(--ch-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch__attach-chip__remove {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; padding: 0;
}
.ch__attach-chip__remove:hover { background: rgba(0,0,0,0.8); }
.ch__attach-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--ch-border, rgba(0,0,0,0.08));
    flex-shrink: 0;
}
.ch__attach-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ch__attach-thumb__remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    cursor: pointer;
    padding: 0;
}
.ch__attach-thumb__remove:hover { background: rgba(0,0,0,0.8); }
.ch__attach-name {
    font-size: 0.82rem;
    color: var(--ch-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* Send — круглая металлическая кнопка 36px
   (фон/тень/бордер задаёт chat-fractal.css через --fr-metal-*) */
.ch__form-actions .ch__send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
}
.ch__form-actions .ch__send-btn:not(:disabled):hover { filter: brightness(1.05); }
.ch__form-actions .ch__send-btn:not(:disabled):active { transform: translateY(1px); }
.ch__form-actions .ch__send-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

/* disclaimer */
.ch__disclaimer {
    text-align: center;
    font-size: var(--ts-2xs);
    color: var(--ch-text-muted);
    width: 100%;
    position: relative;
    margin-top: 8px;
    font-family: var(--font-ui);
    transition: color .4s;
    opacity: .75;
    letter-spacing: .01em;
}

/* ── Баннер активной сборки ── */
.ch-assembly-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 10px;
    /* Плотный непрозрачный фон — не должен просвечивать поверх mesh-фона. */
    background: #eef3ff;
    border: 1px solid #cdddff;
    box-shadow: 0 2px 8px rgba(30,45,90,.10);
}
.ch-assembly-banner__info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    min-width: 0;
}
.ch-assembly-banner__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ch-text-muted);
    font-weight: 600;
}
.ch-assembly-banner__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ch-text);
}
.ch-assembly-banner__step {
    font-size: 12px;
    color: var(--ch-text-muted);
}
.ch-assembly-banner__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.ch-assembly-banner__btn {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--ch-accent, #2e6bff) 40%, transparent);
    background: color-mix(in srgb, var(--ch-accent, #2e6bff) 18%, transparent);
    color: var(--ch-text);
    cursor: pointer;
    font-family: var(--font-ui);
}
.ch-assembly-banner__btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ch-accent, #2e6bff) 28%, transparent);
}
/* «Выполнить всё» — акцентная (плотная синяя) */
.ch-assembly-banner__btn--all {
    font-weight: 600;
    color: #fff;
    border-color: transparent;
    background: linear-gradient(180deg, #2e6bff, #2456e2);
}
.ch-assembly-banner__btn--all:hover:not(:disabled) {
    background: linear-gradient(180deg, #3b78ff, #2a5fe6);
}
.ch-assembly-banner__btn:disabled,
.ch-assembly-banner__close:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.ch-assembly-banner__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--ch-text-muted);
    cursor: pointer;
}
.ch-assembly-banner__close:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ch-text) 8%, transparent);
    color: var(--ch-text);
}


/* Live-превью LaTeX над композером: тихая плашка с отрендеренной формулой. */
.ch__latex-preview {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 8px; padding: 10px 12px;
    border: 1px solid #dbe1ec; border-radius: 12px;
    background: #f7f9fe;
}
.ch__latex-preview__tag {
    flex: 0 0 auto; margin-top: 2px;
    font: 700 10px/1.6 var(--font-ui); letter-spacing: .06em;
    color: #2159e4; background: #e6eeff; border-radius: 5px; padding: 1px 6px;
}
.ch__latex-preview__body {
    flex: 1 1 auto; min-width: 0; overflow-x: auto;
    font-size: 14px; color: #23252e; line-height: 1.5;
}
.ch__latex-preview__body p { margin: 0; }

/* ── попап способа для изображения: перетащить / загрузить / нарисовать ── */
.ch__attach-menu { position: relative; display: inline-flex; }

/* Прозрачная подложка попапа: ловит клик мимо и закрывает. Под попапом (z ниже),
   но над остальным — иначе клик уходил бы в чат, а не в закрытие. */
.ch__attach-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: transparent;
}

.ch__attach-pop {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 40;
    width: 232px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--fr-slate-200, #e3e6ee);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20, 28, 48, .16);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ch__attach-pop-hint {
    padding: 6px 8px 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--fr-slate-500, #5c6172);
    border-bottom: 1px dashed var(--fr-slate-200, #e3e6ee);
    margin-bottom: 2px;
}

.ch__attach-pop-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    font: inherit;
    font-size: 13.5px;
    color: #23252e;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.ch__attach-pop-item:hover { background: var(--fr-slate-100, #f0f2f7); }
.ch__attach-pop-item svg { flex: 0 0 auto; color: var(--fr-slate-500, #5c6172); }

/* ── зона приёма при перетаскивании файла на окно чата ── */
.ch__dropzone {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(24, 32, 54, .38);
    backdrop-filter: blur(2px);
    pointer-events: none;   /* сам drop ловит window; оверлей только показывает */
}

.ch__dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 56px;
    color: #fff;
    background: rgba(46, 107, 255, .9);
    border: 2px dashed rgba(255, 255, 255, .7);
    border-radius: 18px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.ch__dropzone-sub { font-size: 13px; font-weight: 500; opacity: .85; }

@media (prefers-color-scheme: dark) {
    .ch__attach-pop { background: #1c2030; border-color: #2c3350; }
    .ch__attach-pop-item { color: #e6e9f2; }
    .ch__attach-pop-item:hover { background: rgba(255, 255, 255, .06); }
}



/* ── components/chat/chat-sidebar.css ── */
/* ============================================
   chat-sidebar.css
   Depth card, inference params (sliders),
   agents catalog + light theme overrides
   ============================================ */

/* ── UIKit audit (P1): локальные токены → brand.css ───────────────── */
:root {
  --chsb-audit-sky-rgb: var(--b-c-sky-rgb);
  --chsb-audit-surface: var(--surface-1);
}

/* ══════════════════════════════════════════
   ANALYSIS DEPTH CARD (right sidebar top)
   ══════════════════════════════════════════ */
.ch__depth-card {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
/* Decorative glow — top-right */
.ch__depth-card::before {
    content: '';
    position: absolute;
    top: -24px; right: -24px;
    width: 90px; height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(var(--chsb-audit-sky-rgb),0.15) 0%,
        rgba(46,107,255,0.08) 50%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

.ch__depth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
}
.ch__depth-title {
    font-size: var(--ts-md);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
    /* Заголовок панели «Глубина» (переопределяется в chat-fractal.css на сплошной цвет) */
    background: linear-gradient(90deg, var(--fr-blue-600) 0%, var(--fr-cyan-500) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Scrollable content inside depth card */
.ch__depth-scroll {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,116,139,0.25) transparent;
}
.ch__depth-scroll::-webkit-scrollbar       { width: 4px; }
.ch__depth-scroll::-webkit-scrollbar-track { background: transparent; }
.ch__depth-scroll::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.25); border-radius: 4px; }

/* Hero card */
.ch__depth-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    overflow: hidden;
    /* Fractal: насыщенная сине-циановая hero-карточка */
    border: 1.5px solid rgba(46,107,255,0.30);
    box-shadow:
        0 2px 8px rgba(46,107,255,0.18),
        0 8px 28px rgba(46,107,255,0.14),
        inset 0 1px 0 rgba(255,255,255,0.12);
}
.ch__depth-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 10% 20%,  rgba(8,184,212,0.55) 0%, transparent 50%),
        radial-gradient(circle at 88% 10%,  rgba(103,224,240,0.45) 0%, transparent 48%),
        radial-gradient(circle at 50% 55%,  rgba(46,107,255,0.40) 0%, transparent 50%),
        radial-gradient(circle at 15% 85%,  rgba(36,86,226,0.50) 0%, transparent 48%),
        radial-gradient(circle at 85% 80%,  rgba(8,184,212,0.35) 0%, transparent 45%),
        linear-gradient(135deg, var(--fr-blue-600) 0%, var(--fr-blue-500) 40%, var(--fr-cyan-500) 100%);
}
.ch__depth-hero-number {
    position: relative;
    z-index: 1;
    font-size: var(--ts-4xl);
    font-weight: 700;
    font-family: var(--font-ui);
    line-height: 1;
    color: #ffffff;
    flex-shrink: 0;
    transition: transform 0.15s cubic-bezier(.22,1,.36,1);
}
.ch__depth-hero:active .ch__depth-hero-number {
    transform: scale(1.15);
}
.ch__depth-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    z-index: 1;
}
.ch__depth-hero-label {
    font-size: var(--ts-xs);
    font-weight: 500;
    color: #ffffff;
    line-height: 1.2;
    font-family: var(--font-ui);
}
.ch__depth-hero-balance {
    font-size: var(--ts-2xs);
    font-weight: 400;
    color: rgba(255,255,255,0.65);
    line-height: 1.2;
    font-family: var(--font-ui);
}

/* Vertical scale */
.ch__depth-scale {
    position: relative;
    display: flex;
    gap: 0;
    padding: 0 4px;
}
.ch__depth-track {
    position: absolute;
    left: 11.5px;
    top: 16px;
    bottom: 16px;
    width: 3px;
    background: var(--ch-divider);
    border-radius: 2px;
    overflow: hidden;
}
.ch__depth-track-fill {
    width: 100%;
    background: var(--fr-blue-500);
    border-radius: 2px;
    transition: height 0.2s ease(0.4,0,0.2,1);
}
.ch__depth-scale-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}
.ch__depth-scale-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 7px;
    transition: background var(--t-fast);
}
.ch__depth-scale-item--clickable {
    cursor: pointer;
    user-select: none;
    min-height: 44px;
}
.ch__depth-scale-item--clickable:hover {
    background: var(--fr-slate-100);
}
.ch__depth-scale-item--active {
    background: var(--fr-blue-50);
}
.ch__depth-dot-wrap {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.ch__depth-dot {
    border-radius: 50%;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    background: var(--ch-divider);
    transition: background var(--t-slow);
    box-shadow: 0 0 0 3px var(--ch-page-bg);
}
.ch__depth-dot--active {
    background: var(--fr-blue-500);
    width: 10px;
    height: 10px;
}
.ch__depth-scale-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.ch__depth-scale-steps {
    font-size: var(--ts-xs);
    font-weight: 500;
    line-height: 1;
    color: var(--ch-text-muted);
    transition: color var(--t-base);
    font-family: var(--font-ui);
}
.ch__depth-scale-steps--active {
    color: var(--fr-blue-600);
    font-weight: 600;
}
.ch__depth-scale-range {
    font-size: var(--ts-2xs);
    color: var(--ch-text-muted);
    line-height: 1;
    font-family: var(--font-ui);
    transition: color .4s;
}
.ch__depth-badge-now {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 5px;
    /* Fractal: светлый синий pill-бейдж «сейчас» */
    background: var(--fr-blue-50);
    color: var(--fr-blue-600);
    font-size: var(--ts-2xs);
    font-weight: 600;
    font-family: var(--font-ui);
    letter-spacing: 0.02em;
    flex-shrink: 0;
    line-height: 1.4;
}

/* CTA banner at bottom of depth card */
.ch__depth-cta {
    position: relative;
    padding: 10px 12px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    margin-top: auto;
    background: var(--ch-session-bg);
    border: 1px solid var(--ch-card-border);
    box-shadow: var(--ch-card-shadow);
    transition: background .4s, border-color .4s;
}
.ch__depth-cta-text {
    font-size: var(--ts-xs);
    font-weight: 500;
    color: var(--ch-text);
    line-height: 1.45;
    font-family: var(--font-ui);
    position: relative;
    z-index: 3;
    margin: 0;
    max-height: 38px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
    transition: color .4s;
}
.ch__depth-cta-arrow {
    display: flex;
    justify-content: center;
    padding-top: 4px;
    opacity: 0.6;
    position: relative;
    z-index: 3;
}

/* ══════════════════════════════════════════
   INFERENCE PARAMS CARD (sliders)
   ══════════════════════════════════════════ */
.ch__speed-card {
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 10px;
}
.ch__speed-header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ch__speed-header-icon { color: var(--fr-blue-500); flex-shrink: 0; opacity: 0.9; }
.ch__speed-title {
    font-size: var(--ts-xs);
    font-weight: 600;
    color: var(--ch-title);
    margin: 0;
    letter-spacing: 0.01em;
}

/* ── Slider group ── */
.ch__sl-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ch__sl-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.ch__sl-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ts-2xs);
    font-weight: 600;
    color: var(--ch-text);
}
.ch__sl-label svg { opacity: 0.7; flex-shrink: 0; }
.ch__sl-badge {
    font-size: var(--ts-3xs);
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
/* Fractal: качество — синий pill, скорость — циановый pill */
.ch__sl-badge--quality {
    background: var(--fr-blue-50);
    color: var(--fr-blue-600);
}
.ch__sl-badge--speed {
    background: var(--fr-cyan-100);
    color: var(--fr-cyan-700);
}

/* Custom range slider */
.ch__sl-track-wrap {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}
.ch__sl-range {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 20px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
}
/* Track — светлый slate */
.ch__sl-range::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 5px;
    background: var(--fr-slate-200);
}
.ch__sl-range::-moz-range-track {
    height: 5px;
    border-radius: 5px;
    background: var(--fr-slate-200);
}
/* Thumb — белый с синей обводкой Fractal */
.ch__sl-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--fr-blue-500);
    box-shadow: 0 0 0 3px rgba(46,107,255,0.18);
    margin-top: -5.5px;
    cursor: grab;
    transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.ch__sl-range::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
    box-shadow: 0 0 0 5px rgba(46,107,255,0.24);
}
.ch__sl-range::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--fr-blue-500);
    box-shadow: 0 0 0 3px rgba(46,107,255,0.18);
    cursor: grab;
}
/* Качество — синий бренд, скорость — циановый бренд */
.ch__sl-range--quality::-webkit-slider-thumb { border-color: var(--fr-blue-500); box-shadow: 0 0 0 3px rgba(46,107,255,0.22); }
.ch__sl-range--quality::-moz-range-thumb     { border-color: var(--fr-blue-500); }
.ch__sl-range--speed::-webkit-slider-thumb   { border-color: var(--fr-cyan-500); box-shadow: 0 0 0 3px rgba(8,184,212,0.24); }
.ch__sl-range--speed::-moz-range-thumb       { border-color: var(--fr-cyan-500); }

/* Colored fill bar under the track (decorative, pointer-events:none) */
.ch__sl-track-fill {
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    height: 5px;
    border-radius: 5px;
    pointer-events: none;
    z-index: 1;
    transition: width 0.05s linear;
}
/* Заполнение: качество — синее, скорость — циановое (бренд Fractal) */
.ch__sl-track-fill--quality { background: linear-gradient(90deg, var(--fr-blue-500), var(--fr-blue-600)); }
.ch__sl-track-fill--speed   { background: linear-gradient(90deg, var(--fr-cyan-500), var(--fr-cyan-700)); }

.ch__sl-hints {
    display: flex;
    justify-content: space-between;
    font-size: var(--ts-3xs);
    color: var(--ch-text-muted);
    padding: 0 2px;
    opacity: 0.85;
}

/* ── Computed metrics row ── */
.ch__sl-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    padding: 0;
    /* Fractal: светлая плитка метрик с slate-разделителями */
    background: var(--fr-slate-200);
    border: 1px solid var(--fr-slate-200);
    border-radius: 8px;
    overflow: hidden;
}
.ch__sl-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    background: var(--fr-slate-0);
    font-size: var(--ts-xs);
}
.ch__sl-metric svg { flex-shrink: 0; color: var(--ch-text-muted); opacity: 0.8; }
.ch__sl-metric-label {
    color: var(--ch-text-muted);
    font-size: var(--ts-3xs);
    text-align: center;
    line-height: 1.2;
}
.ch__sl-metric-val {
    font-weight: 700;
    font-family: var(--font-ui);
    color: var(--ch-title);
    font-size: var(--ts-base);
    white-space: nowrap;
    letter-spacing: -0.02em;
}

/* ── Toggle row (Интерактивный режим) ── */
.ch__toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    /* Fractal: светлая строка-тоггл */
    border: 1px solid var(--fr-slate-200);
    border-radius: 8px;
    background: var(--fr-slate-50);
}
.ch__toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ch__toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ts-xs);
    font-weight: 600;
    color: var(--ch-title);
}
.ch__toggle-label svg { flex-shrink: 0; color: var(--ch-text-muted); }
.ch__toggle-hint {
    font-size: var(--ts-3xs);
    color: var(--ch-text-muted);
    line-height: 1.2;
}
.ch__switch {
    flex-shrink: 0;
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    padding: 0;
    /* Fractal: off — серый slate, on — синий бренд */
    background: var(--fr-slate-300);
    transition: background 0.18s ease;
}
.ch__switch--on { background: var(--fr-blue-500); }
.ch__switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    transition: transform 0.18s ease;
}
.ch__switch--on .ch__switch-thumb { transform: translateX(16px); }
.ch__switch:focus-visible { outline: 2px solid var(--fr-blue-200); outline-offset: 2px; }

/* light theme overrides → chat-light.css */

/* ══════════════════════════════════════════
   AGENTS CATALOG CARD (right sidebar bottom)
   ══════════════════════════════════════════ */
/* Agents card: equal flex with depth card so both are visible */
.ch__agents-card {
    flex: 1;
    min-height: 0;
    gap: 0;
    overflow: hidden;
    padding: 0;
}

/* ── Tab switcher ── */
.ch__agents-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 10px 0;
    flex-shrink: 0;
    border-bottom: 1px solid var(--fr-slate-200);
    margin-bottom: 2px;
}
.ch__agents-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border: none;
    background: transparent;
    color: var(--ch-text-muted);
    font-size: var(--ts-2xs);
    font-weight: 600;
    border-radius: 7px 7px 0 0;
    cursor: pointer;
    position: relative;
    transition: color var(--t-fast), background var(--t-fast);
    white-space: nowrap;
}
.ch__agents-tab:hover {
    color: var(--ch-title);
    background: var(--fr-slate-100);
}
/* Активный таб: синее подчёркивание + цвет бренда */
.ch__agents-tab--active {
    color: var(--fr-blue-600);
    background: var(--fr-blue-50);
}
.ch__agents-tab--active::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--fr-blue-600);
    border-radius: 2px 2px 0 0;
}
/* Бейджи табов — светлые pill (агенты — slate, workflow — синий) */
.ch__agents-tab-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--fr-slate-100);
    color: var(--fr-slate-500);
    font-size: var(--ts-3xs);
    font-weight: 600;
    font-family: var(--font-ui);
    line-height: 1.6;
}
.ch__agents-tab-badge--wf {
    background: var(--fr-blue-50);
    color: var(--fr-blue-600);
}

/* scroll and list wrappers inside the new tab layout */
.ch__agents-card .ch__agents-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,116,139,0.25) transparent;
}
.ch__agents-card .ch__agents-scroll::-webkit-scrollbar { width: 3px; background: transparent; }
.ch__agents-card .ch__agents-scroll::-webkit-scrollbar-thumb { background: rgba(46,107,255,0.2); border-radius: 10px; }

.ch__agents-card .ch__agents-cta-hint,
.ch__agents-card .ch__agents-cta-btn {
    margin-left: 8px;
    margin-right: 8px;
}
.ch__agents-card .ch__agents-cta-btn {
    margin-bottom: 8px;
}

/* ── Workflow list ── */
.ch__wf-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Fractal: белая карточка workflow с slate-бордером и лёгкой тенью */
.ch__wf-item {
    border-radius: 10px;
    border: 1px solid var(--fr-slate-200);
    background: var(--fr-slate-0);
    box-shadow: 0 1px 3px rgba(90,104,150,0.08);
    overflow: hidden;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ch__wf-item--open {
    border-color: var(--fr-blue-200);
}
.ch__wf-header {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--t-fast);
}
.ch__wf-header:hover {
    background: var(--fr-slate-100);
}
.ch__wf-item--open .ch__wf-header {
    background: var(--fr-blue-50);
}
.ch__wf-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 7px;
    flex-shrink: 0;
}
.ch__wf-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.ch__wf-title {
    font-size: var(--ts-2xs);
    font-weight: 600;
    color: var(--ch-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ch__wf-tag {
    font-size: var(--ts-3xs);
    font-weight: 500;
    color: var(--ch-text-muted);
    letter-spacing: 0.03em;
}
.ch__wf-chevron {
    flex-shrink: 0;
    color: var(--ch-text-muted);
    transition: transform var(--t-fast);
}
.ch__wf-item--open .ch__wf-chevron {
    transform: rotate(180deg);
}

/* expanded body */
.ch__wf-body {
    padding: 0 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--fr-slate-200);
}
.ch__wf-desc {
    font-size: var(--ts-xs);
    color: var(--ch-text);
    line-height: 1.45;
    margin: 8px 0 0;
}
.ch__wf-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    counter-reset: wf-step;
}
.ch__wf-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ts-xs);
    counter-increment: wf-step;
}
.ch__wf-step::before {
    content: counter(wf-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--fr-blue-50);
    color: var(--fr-blue-600);
    font-size: var(--ts-3xs);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}
.ch__wf-step-agent {
    font-weight: 600;
    color: var(--ch-title);
    white-space: nowrap;
    flex-shrink: 0;
}
/* Краткое описание шага — приглушённое, прижато вправо (как в макете) */
.ch__wf-step-action {
    color: var(--ch-text-muted);
    line-height: 1.35;
    font-size: var(--ts-3xs);
    margin-left: auto;
    text-align: right;
    max-width: 58%;
}
/* Кнопка «Запустить» — металлическая синяя (бренд Fractal) */
.ch__wf-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    border: var(--fr-metal-border);
    border-radius: 8px;
    background: var(--fr-metal-bg);
    color: #fff;
    text-shadow: var(--fr-metal-text-shadow);
    box-shadow: var(--fr-metal-shadow);
    font-size: var(--ts-xs);
    font-weight: 600;
    cursor: pointer;
    opacity: 1;
    transition: filter var(--t-fast), transform var(--t-fast);
}
.ch__wf-apply-btn:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}
.ch__wf-apply-btn:active {
    transform: translateY(0);
}

/* ── Мои сборки (персональные, редактируемые) ── */
.ch__wf-mine {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--fr-slate-200, rgba(148,163,184,.25));
}
.ch__wf-mine-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ch__wf-mine-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
}
.ch__wf-mine-add {
    border: 1px solid var(--fr-blue-400, #2e6bff);
    background: transparent;
    color: var(--fr-blue-500, #2e6bff);
    border-radius: 7px;
    padding: 3px 9px;
    font-size: 12px;
    cursor: pointer;
}
.ch__wf-mine-add:hover { background: var(--fr-blue-50, rgba(46,107,255,.08)); }
.ch__wf-mine-empty { font-size: 12px; opacity: .6; margin: 2px 0; }
.ch__wf-mine-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--fr-slate-200, rgba(148,163,184,.25));
    border-radius: 8px;
}
.ch__wf-mine-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch__wf-mine-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ch__wf-mine-sub { font-size: 11px; opacity: .55; }
.ch__wf-mine-actions { display: flex; gap: 3px; flex: 0 0 auto; }
.ch__wf-mine-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    padding: 3px 5px;
    border-radius: 6px;
    color: inherit;
    opacity: .75;
}
.ch__wf-mine-btn:hover { opacity: 1; background: var(--fr-slate-100, rgba(148,163,184,.15)); }
.ch__wf-mine-btn--danger:hover { color: #dc2626; }

/* light theme — согласовано с палитрой Fractal */
:root[data-theme="light"] .ch__agents-tabs {
    border-bottom-color: var(--fr-slate-200);
}
:root[data-theme="light"] .ch__agents-tab:hover {
    background: var(--fr-slate-100);
}
:root[data-theme="light"] .ch__agents-tab--active {
    background: var(--fr-blue-50);
}
:root[data-theme="light"] .ch__wf-item {
    border-color: var(--fr-slate-200);
}
:root[data-theme="light"] .ch__wf-header {
    background: transparent;
}
:root[data-theme="light"] .ch__wf-header:hover {
    background: var(--fr-slate-100);
}
/* Decorative glow — bottom-left (циан + синий Fractal) */
.ch__agents-card::after {
    content: '';
    position: absolute;
    bottom: -30px; left: -20px;
    width: 110px; height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(8,184,212,0.18) 0%,
        rgba(46,107,255,0.06) 55%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

.ch__agents-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.ch__agents-title {
    font-size: var(--ts-xl);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
    /* Заголовок «Агенты» (в chat-fractal.css переопределяется на сплошной цвет) */
    background: linear-gradient(90deg, var(--fr-blue-600) 0%, var(--fr-cyan-500) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Счётчик — светлый синий pill (используется и в блоке MCP) */
.ch__agents-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--fr-blue-50);
    color: var(--fr-blue-600);
    font-size: var(--ts-xs);
    font-weight: 600;
    font-family: var(--font-ui);
}

.ch__agents-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(46,107,255,0.2) transparent;
}
.ch__agents-scroll::-webkit-scrollbar       { width: 3px; background: transparent; }
.ch__agents-scroll::-webkit-scrollbar-track { background: transparent; }
.ch__agents-scroll::-webkit-scrollbar-thumb { background: rgba(46,107,255,0.2); border-radius: 10px; }

/* Agents list: just a column, scroll is on parent */
.ch__agents-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Agents CTA: stays at bottom */
.ch__agents-cta-btn  { flex-shrink: 0; }
.ch__agent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    min-height: 44px;
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    color: inherit;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--t-smooth);
    text-decoration: none;
}
.ch__agent-item:hover {
    background: var(--fr-slate-100);
}
/* Выбранный (упомянутый) агент — светло-синяя подложка */
.ch__agent-item--selected {
    background: var(--fr-blue-50);
}
.ch__agent-item--selected:hover {
    background: var(--fr-blue-100);
}
/* Короткая вспышка при клике-выборе */
.ch__agent-item--picked {
    background: var(--fr-blue-100);
}
/* Галочка вместо статус-точки у выбранного агента */
.ch__agent-check {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: ch-agent-check-pop .28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ch-agent-check-pop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
/* Летящий клон строки агента (анимация выбора) — белая карточка Fractal */
.ch__agent-fly-clone {
    border-radius: 10px;
    background: var(--fr-slate-0);
    box-shadow: 0 14px 38px rgba(46,107,255,0.22), 0 3px 10px rgba(90,104,150,0.14);
    overflow: hidden;
}
:root[data-theme="light"] .ch__agent-fly-clone {
    background: #fff;
    box-shadow: 0 14px 38px rgba(46,107,255,0.22), 0 3px 10px rgba(90,104,150,0.12);
}
/* Иконка агента — цветной мягкий квадрат (радиус 9px по эталону) */
.ch__agent-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ch__agent-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ch__agent-name {
    font-size: var(--ts-xs);
    font-weight: 600;
    color: var(--ch-session-title);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-ui);
    line-height: 1.3;
    transition: color .4s;
}
.ch__agent-desc {
    font-size: var(--ts-2xs);
    color: var(--ch-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-ui);
    line-height: 1.2;
    transition: color .4s;
}
.ch__agent-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Статус локального агента: online — зелёный, offline — slate */
.ch__agent-status-dot--online  { background: var(--fr-green-500); box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
.ch__agent-status-dot--offline { background: var(--fr-slate-300); }

.ch__agents-cta-hint {
    font-size: var(--ts-3xs);
    color: var(--ch-text-muted);
    text-align: center;
    margin: 2px 0 4px;
    font-family: var(--font-ui);
    flex-shrink: 0;
    transition: color .4s;
}
/* CTA-кнопки (Проверить/Подключить/«Все агенты») — светлые field-кнопки Fractal */
.ch__agents-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 7px 12px;
    background: var(--fr-slate-0);
    color: var(--ch-title);
    border: 1px solid var(--fr-slate-200);
    border-radius: 8px;
    font-size: var(--ts-xs);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-base), border-color var(--t-base);
    font-family: var(--font-ui);
    flex-shrink: 0;
    box-shadow: var(--fr-field-shadow);
}
.ch__agents-cta-btn:hover {
    background: var(--fr-slate-50);
    border-color: var(--fr-slate-300);
}
.ch__agents-cta-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* ══════════════════════════════════════════
   MCP-БЛОК (часть настроек, правый сайдбар)
   Разметка/базовые стили — в ChatRightSidebar.razor;
   здесь — светлые переопределения Fractal (специфичность
   .ch__sidebar-right перебивает inline <style> компонента).
   ══════════════════════════════════════════ */
.ch__sidebar-right .ch__mcp-section {
    border-top: 1px solid var(--fr-slate-200);
}
.ch__sidebar-right .ch__mcp-section-title {
    color: var(--ch-title);
}
.ch__sidebar-right .ch__mcp-input {
    background: var(--fr-slate-0);
    border: 1px solid var(--fr-slate-200);
    color: var(--ch-title);
    box-shadow: var(--fr-field-shadow);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ch__sidebar-right .ch__mcp-input::placeholder {
    color: var(--ch-text-muted);
}
.ch__sidebar-right .ch__mcp-input:focus {
    outline: none;
    border-color: var(--fr-blue-200);
    box-shadow: 0 0 0 3px rgba(46,107,255,0.14);
}
/* Чипы подключённых MCP — светлый вид независимо от темы */
.ch__sidebar-right .ch__mention-chip {
    background: color-mix(in srgb, var(--chip-clr) 12%, var(--fr-slate-0));
    border: 1px solid color-mix(in srgb, var(--chip-clr) 26%, transparent);
}
.ch__sidebar-right .ch__mention-chip:hover {
    background: color-mix(in srgb, var(--chip-clr) 18%, var(--fr-slate-0));
    border-color: color-mix(in srgb, var(--chip-clr) 38%, transparent);
}



/* ── components/chat/chat-genui.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Generative UI — «минисайт» внутри ответа ассистента.
   Префикс .genui-. Построен ПОЛНОСТЬЮ на дизайн-системе UIKit:
   • акцент — из активного цветового контекста (--cur-*: bar/bg/border/hover);
   • поверхности — --surface-*, тени — --b-shadow-*, радиусы — --r-*;
   • типографика — --font-serif/--ts-*; градиенты бренда — --b-grad-*;
   • стекломорфизм — токены --glass-* (blur/sat) на hero/сим/график/таблице;
   • фирменные анимации UIKit — ui-pulse-ring / ui-float / ui-glow-pulse /
     ui-pulse-dot (живые «не-чатовые» акценты) + section-label-eyebrow.
   → автоматически следует теме и палитре.

   Структура от пресетов (heading h2 + grid карточек, hero-card с h1 и т.д.)
   стилизуется так, чтобы блоки читались как секции лендинга.
   ═══════════════════════════════════════════════════════════════════ */

/* Удобные алиасы акцента с безопасными фолбэками (если контекст не задан).
   `.fc-md` — обёртка ответа в React-кокпите: без неё у вкладок и полос активного
   состояния не было фона вовсе — белый текст ложился на белую поверхность. Фолбэки
   вторых аргументов здесь буквальные по той же причине: в кокпите нет и токенов
   UIKit (--b-grad-blue и др.), пустой var() снова давал прозрачный фон. */
.ch__ai-body, .fc-md {
    --genui-accent:        var(--cur, #818cf8);
    --genui-accent-bar:    var(--cur-bar, var(--b-grad-blue, linear-gradient(135deg, #2e6bf5, #6b4bd8)));
    --genui-accent-bg:     var(--cur-bg, rgba(var(--rgb-indigo, 99, 102, 241), .10));
    --genui-accent-border: var(--cur-border, var(--border-subtle, rgba(99, 102, 241, .28)));
    --genui-accent-hover:  var(--cur-hover-border, rgba(var(--rgb-indigo, 99, 102, 241), .35));
    --genui-accent-glow:   var(--cur-hover-shadow, rgba(var(--rgb-indigo, 99, 102, 241), .18));
}

/* Кокпит (корень .fc): у React-оболочки нет ни синего ремапа `.ch` из chat-fractal.css,
   ни цветовых контекстов [data-color] — весь генеративный UI падал в дефолтный индиго
   темы (:root в themes.css): фиолетовые полосы, кнопки и заливки посреди синего
   интерфейса. Та же болезнь уже вылечена для `.ch` — ремапим тот же набор --cur-*
   во фрактальную синеву кокпита (--fc-accent: #2E6BF5). */
.fc {
    --cur:               #2e6bf5;
    --cur-bar:           linear-gradient(90deg, #2159e4, #4d85ff);
    --cur-bg:            rgba(46, 107, 245, .08);
    --cur-border:        rgba(46, 107, 245, .22);
    --cur-hover-border:  rgba(46, 107, 245, .35);
    --cur-hover-shadow:  rgba(46, 107, 245, .18);
    --rgb-indigo:        46, 107, 245;
}

/* Анимируемый угол для вращающихся conic-градиентов (живая «энергия» блоков). */
@property --genui-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

@keyframes genui-spin       { to { --genui-angle: 360deg; } }
@keyframes genui-flow       { to { background-position: 200% center; } }
@keyframes genui-grow-bar   { from { transform: scaleY(0); }                       to { transform: scaleY(1); } }
@keyframes genui-draw       { to { stroke-dashoffset: 0; } }
@keyframes genui-fade       { from { opacity: 0; }                                  to { opacity: 1; } }
@keyframes genui-pop        { from { opacity: 0; transform: scale(0); }             to { opacity: 1; transform: scale(1); } }
@keyframes genui-pie-in     { from { opacity: 0; transform: rotate(-22deg) scale(.84); } to { opacity: 1; transform: none; } }
@keyframes genui-fill-grow  { from { transform: scaleX(0); }                        to { transform: scaleX(1); } }

/* ───── Ритм секций верхнего уровня ───── */
.ch__ai-body > .genui-stack,
.ch__ai-body > .genui-card,
.ch__ai-body > .genui-grid,
.ch__ai-body > .genui-tabs,
.ch__ai-body > .genui-app,
.ch__ai-body > .ch__table-wrap,
.ch__ai-body > .genui-chart-wrap,
.ch__ai-body > .genui-callout,
.ch__ai-body > .genui-form { margin-top: 18px; }
.ch__ai-body > .genui-stack--col { gap: 18px; }

/* ───── Раскладка ───── */
.genui-stack { display: flex; gap: 12px; }
.genui-stack--col { flex-direction: column; }
.genui-stack--row { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
.genui-grid { display: grid; gap: 14px; }
.genui-grid > .genui-card { height: 100%; }

/* ───── Карточка ───── */
.genui-card {
    position: relative; overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-card);
    background: var(--surface-card);
    padding: 20px 22px;
    box-shadow: var(--b-shadow-sm);
    transition: border-color var(--t-smooth), box-shadow var(--t-smooth), transform .22s var(--ease-spring);
}
/* Верхняя акцентная линия — «прорастает» на hover. */
.genui-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--genui-accent-bar); transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-smooth);
}
.genui-card:hover {
    transform: translateY(-3px);
    border-color: var(--genui-accent-hover);
    box-shadow: var(--b-shadow-md), 0 18px 40px -22px var(--genui-accent-glow);
}
.genui-card:hover::before { transform: scaleX(1); }
.genui-card__head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.genui-card__title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-weight: 700; color: var(--c-text-1); font-size: var(--ts-xl); letter-spacing: -.01em; line-height: 1.25; }
/* Eyebrow-риска в духе UIKit .section-label — заголовок карточки читается как секция. */
.genui-card__title::before {
    content: ""; flex: 0 0 auto; width: 18px; height: 2px; border-radius: var(--r-full);
    background: var(--genui-accent-bar);
}
.genui-card__subtitle { font-size: var(--ts-sm); color: var(--c-text-3); }
.genui-card__body { gap: 12px; }

/* Иконка-тайл карточки (фичи/преимущества) — крупная эмодзи в градиентной плитке. */
.genui-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: var(--r-lg);
    font-size: 26px; line-height: 1; margin-bottom: 14px;
    background:
        radial-gradient(120% 120% at 30% 20%, var(--genui-accent-bg), transparent 75%),
        var(--surface-1);
    box-shadow: inset 0 0 0 1px var(--genui-accent-border), 0 10px 24px -12px var(--genui-accent-glow);
    transition: transform var(--t-smooth);
}
.genui-card:hover .genui-card__icon { transform: translateY(-2px) scale(1.07) rotate(-4deg); }
/* С иконкой eyebrow-риска перед заголовком лишняя. */
.genui-card:has(.genui-card__icon) .genui-card__title::before { display: none; }

/* Premium-варианты карточек: акцентная подсветка по контексту. */
.genui-card--accent { border-color: var(--genui-accent-border); background:
    radial-gradient(120% 140% at 100% 0%, var(--genui-accent-bg), transparent 60%), var(--surface-card); }
.genui-card--accent::before { transform: scaleX(1); }

/* ───── Плотная карточка — СТРОКА списка, а не блок ─────
   Нужна там, где карточек десяток и каждая несёт одну работу: план публикаций, очередь
   задач. В обычном виде такой список занимает несколько экранов на восемь пунктов —
   заголовок в серифе, отступы 20/22 и кнопка отдельной строкой рассчитаны на одиночную
   карточку, а не на перечень. Здесь всё то же содержимое лежит одной строкой. */
.genui-card--dense { padding: 10px 14px; box-shadow: none; }
.genui-card--dense:hover { transform: none; box-shadow: var(--b-shadow-sm); }
.genui-card--dense .genui-card__head { margin-bottom: 0; gap: 2px; }
.genui-card--dense .genui-card__title {
    font-family: inherit; font-size: var(--ts-md); font-weight: 600; line-height: 1.35;
}
/* Eyebrow-риска у строки лишняя: в перечне она превращается в шум по левому краю. */
.genui-card--dense .genui-card__title::before { display: none; }
.genui-card--dense .genui-card__subtitle { font-size: var(--ts-xs); }
.genui-card--dense .genui-card__body { gap: 8px; margin-top: 8px; }
/* Кнопка строки — ВТОРИЧНАЯ, даже если объявлена основной: шестнадцать залитых
   акцентом кнопок в перечне забивают собой темы, ради которых список и читают.
   Заливка возвращается по наведению — то есть у той строки, к которой тянутся. */
.genui-card--dense .genui-btn {
    padding: 5px 12px; font-size: var(--ts-sm);
    /* Цвет текста мешаем с основным: чистый акцент светлый (--cur ≈ #818cf8) и на белом
       даёт около 2.9:1 — для подписи кнопки этого мало в любой теме. */
    background: transparent; color: color-mix(in srgb, var(--genui-accent) 55%, var(--c-text-1));
    border: 1px solid var(--genui-accent-border); box-shadow: none;
}
.genui-card--dense:hover .genui-btn,
.genui-card--dense .genui-btn:hover, .genui-card--dense .genui-btn:focus-visible {
    background: var(--genui-accent-bar); color: #fff; border-color: transparent;
}

/* Перечень строк внутри карточки-обёртки: между строками нужен зазор списка, а не блоков. */
.genui-card__body:has(> .genui-card--dense),
.genui-stack--col:has(> .genui-card--dense) { gap: 8px; }

/* Широкий экран — заголовок и действие в одну строку: вертикаль перечня короче вдвое. */
@media (min-width: 720px) {
    .genui-card--dense {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
    }
    .genui-card--dense .genui-card__body { margin-top: 0; }
}

/* ───── HERO / CTA — карточка с заголовком h1 читается как hero-секция ───── */
/* Стекломорфизм UIKit (--glass-* токены) + полупрозрачная тема-зависимая поверхность. */
.genui-card:has(.genui-heading--h1) {
    text-align: center;
    padding: 52px 32px;
    border-color: var(--genui-accent-border);
    background:
        radial-gradient(55% 75% at 12% 0%, var(--genui-accent-bg), transparent 60%),
        radial-gradient(50% 70% at 100% 18%, var(--genui-accent-bg), transparent 55%),
        radial-gradient(130% 150% at 50% -30%, var(--genui-accent-bg), transparent 62%),
        color-mix(in srgb, var(--surface-card) 80%, transparent);
    backdrop-filter: var(--glass-blur-lg) var(--glass-sat);
    -webkit-backdrop-filter: var(--glass-blur-lg) var(--glass-sat);
}
.genui-card:has(.genui-heading--h1)::before { transform: scaleX(1); height: 4px; }
/* Медленно вращающийся conic-глоу за контентом — «дышащая» энергия hero. */
.genui-card:has(.genui-heading--h1)::after {
    content: ""; position: absolute; inset: -45%; z-index: 0; pointer-events: none;
    background: conic-gradient(from var(--genui-angle),
        var(--genui-accent-bg), transparent 28%, var(--genui-accent-bg) 58%, transparent 82%);
    filter: blur(34px); opacity: .55;
    animation: genui-spin 9s linear infinite;
}
.genui-card:has(.genui-heading--h1) .genui-card__body { position: relative; z-index: 1; gap: 18px; align-items: center; }
.genui-card:has(.genui-heading--h1) .genui-heading--h1 {
    font-size: clamp(var(--ts-4xl), 5.2vw, var(--ts-6xl)); line-height: 1.08; letter-spacing: -.025em;
    background: linear-gradient(100deg, var(--genui-accent), var(--c-text-1) 45%, var(--genui-accent) 90%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: genui-flow 5s linear infinite;
}
.genui-card:has(.genui-heading--h1) .genui-text { max-width: 58ch; margin: 0 auto; font-size: var(--ts-lg); color: var(--c-text-2); }
.genui-card:has(.genui-heading--h1) .genui-stack--row { justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════
   Многостраничное приложение (app) — оболочка с навигацией и маршрутами.
   App-bar на стекломорфизме UIKit, pill-навигация, плавная смена страниц.
   ═══════════════════════════════════════════════════════════════════ */
.genui-app {
    border: 1px solid var(--genui-accent-border, var(--border-subtle));
    border-radius: var(--r-card); overflow: hidden;
    background: color-mix(in srgb, var(--surface-card) 86%, transparent);
    box-shadow: var(--b-shadow-md);
}
/* Шапка-приложения: «прилипает» сверху при прокрутке длинных страниц. */
.genui-app__bar {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 16px; border-bottom: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--surface-card) 72%, transparent);
    backdrop-filter: var(--glass-blur-lg) var(--glass-sat); -webkit-backdrop-filter: var(--glass-blur-lg) var(--glass-sat);
}
.genui-app__brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }
.genui-app__logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--r-md); font-size: 16px;
    background: var(--genui-accent-bg); box-shadow: inset 0 0 0 1px var(--genui-accent-border);
}
.genui-app__name { font-family: var(--font-serif); font-weight: 700; font-size: var(--ts-lg); color: var(--c-text-1); letter-spacing: -.01em; }
/* Pill-навигация по страницам (как pill-nav UIKit). */
.genui-app__nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: var(--r-full); background: var(--surface-1); }
.genui-app__navlink {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 0; background: transparent; color: var(--c-text-3);
    padding: 6px 14px; border-radius: var(--r-full); font-size: var(--ts-base); font-weight: 600;
    transition: color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.genui-app__navlink:hover { color: var(--c-text-1); }
.genui-app__navlink.is-active { color: #fff; background: var(--genui-accent-bar); box-shadow: 0 4px 12px -4px var(--genui-accent-glow); }
.genui-app__navicon { font-size: 14px; line-height: 1; }
/* Контент страницы: ambient-mesh фон + появление со сдвигом при переключении (@key пересоздаёт узел). */
.genui-app__page {
    padding: 24px 20px; gap: 20px;
    background: radial-gradient(120% 55% at 50% 0%, var(--genui-accent-bg), transparent 55%);
    animation: ui-fade-up .3s var(--ease-out) both;
}
@media (max-width: 640px) {
    .genui-app__bar { padding: 10px 12px; }
    .genui-app__nav { width: 100%; }
    .genui-app__page { padding: 16px 14px; }
}

/* ───── Готовые файлы в ленте: набор материалов этапа ─────
   Своя высота с прокруткой — материал читают целиком, а лента чата не должна
   растягиваться на десять экранов из-за одного ответа. */
/* Набор материалов этапа: слева выбор, ниже — сам текст. Оформлен как ЧИТАЛКА, а не
   как карточка с абзацем: статью читают целиком, поэтому у тела своя прокрутка, ширина
   строки под чтение и полоса вкладок, которая не уезжает вместе с текстом. */
.genui-docs {
    border: 1px solid var(--c-border-1); border-radius: var(--r-lg);
    background: var(--surface-1); overflow: hidden;
}
.genui-docs__head {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 13px 16px 11px;
}
.genui-docs__title { font-weight: 600; color: var(--c-text-1); }
.genui-docs__folder {
    font-size: var(--ts-sm); color: var(--c-text-3); font-family: var(--font-mono, monospace);
    padding: 2px 8px; border-radius: var(--r-full);
    background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Вкладки — сегментами в общей оправе: это выбор ОДНОГО материала из набора, а
   разлетевшиеся таблетки читались как несколько независимых кнопок. */
.genui-docs__bar {
    display: flex; gap: 3px; flex-wrap: wrap; margin: 0 16px 0;
    padding: 3px; border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--c-text-3) 8%, transparent);
}
.genui-docs__tab {
    border: none; background: transparent; cursor: pointer;
    padding: 6px 14px; font-size: var(--ts-base); color: var(--c-text-3);
    border-radius: calc(var(--r-lg) - 3px);
    transition: color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.genui-docs__tab:hover { color: var(--c-text-1); background: var(--surface-1); }
.genui-docs__tab.is-active {
    color: var(--c-text-1); background: var(--surface-1); font-weight: 600;
    box-shadow: 0 1px 3px rgba(20, 28, 46, .12);
}
.genui-docs__meta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 10px 16px; font-size: var(--ts-sm); color: var(--c-text-3);
}
.genui-docs__actions { display: flex; gap: 8px; }
.genui-docs__action {
    border: 1px solid var(--c-border-1); background: transparent; cursor: pointer;
    padding: 5px 12px; border-radius: var(--r-full); font-size: var(--ts-sm); color: var(--c-text-2);
    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.genui-docs__action:hover {
    color: var(--c-text-1); border-color: var(--genui-accent-border);
    background: color-mix(in srgb, var(--c-text-3) 6%, transparent);
}
/* Тело: своя прокрутка и ширина строки под чтение. Верхняя граница отделяет текст от
   органов управления — иначе на прокрутке абзац наезжал прямо на вкладки. */
.genui-docs__body {
    padding: 16px; max-height: 60vh; overflow-y: auto;
    border-top: 1px solid var(--c-border-1);
    background: var(--surface-1);
    scrollbar-gutter: stable;
}
.genui-docs__body > * { max-width: 68ch; }
.genui-docs__body > :first-child { margin-top: 0; }
.genui-docs__notes {
    margin: 0 16px 16px; font-size: var(--ts-sm); color: var(--c-text-3);
    border: 1px dashed var(--c-border-1); border-radius: var(--r-md, 10px);
    padding: 0 12px;
}
.genui-docs__notes > summary { cursor: pointer; padding: 8px 0; color: var(--c-text-2); }
.genui-docs__notes[open] { padding-bottom: 10px; }

/* ───── Вкладки — pill-стиль ───── */
.genui-tabs__bar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.genui-tabs__tab {
    border: 1px solid transparent; background: var(--surface-1); cursor: pointer;
    padding: 7px 15px; font-size: var(--ts-base); color: var(--c-text-3);
    border-radius: var(--r-full); transition: color var(--t-base), background var(--t-base), border-color var(--t-base);
}
.genui-tabs__tab:hover { color: var(--c-text-1); border-color: var(--genui-accent-border); }
.genui-tabs__tab.is-active { color: #fff; background: var(--genui-accent-bar); border-color: transparent; font-weight: 600; }

/* ───── Текст / заголовки ───── */
.genui-heading { font-family: var(--font-serif); font-weight: 700; color: var(--c-text-1); line-height: 1.3; }
.genui-heading--h1 { font-size: var(--ts-4xl); letter-spacing: -.02em; }
.genui-heading--h2 {
    font-size: var(--ts-2xl); letter-spacing: -.01em;
    display: inline-block; position: relative; padding-bottom: 8px;
}
/* Акцентное подчёркивание секционного заголовка. */
.genui-heading--h2::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px;
    border-radius: var(--r-full); background: var(--genui-accent-bar);
}
.genui-heading--h3 { font-size: var(--ts-lg); }
.genui-text { font-size: var(--ts-md); color: var(--c-text-2); line-height: 1.65; }

/* ───── Бейджи ───── */
.genui-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 11px; border-radius: var(--r-full); font-size: var(--ts-xs); font-weight: 600;
    background: var(--b-c-indigo-bg); color: var(--b-c-indigo);
}
.genui-badge--neutral { background: var(--surface-2); color: var(--c-text-3); }
.genui-badge--primary { background: var(--b-c-sky-bg);     color: var(--b-c-sky); }
.genui-badge--success { background: var(--b-c-emerald-bg); color: var(--b-c-emerald); }
.genui-badge--warning { background: var(--b-c-amber-bg);   color: var(--b-c-amber); }
.genui-badge--danger  { background: rgba(var(--b-terra-rgb), .12); color: var(--b-error); }

/* ───── Метрики (KPI-тайлы) ───── */
.genui-metric {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 4px;
    border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 16px 18px;
    background: var(--surface-1); min-width: 130px; flex: 1;
    transition: transform var(--t-hover), box-shadow var(--t-base), border-color var(--t-base);
}
.genui-metric::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--genui-accent-bar); opacity: 0; transition: opacity var(--t-base);
}
.genui-metric:hover { transform: translateY(-2px); border-color: var(--genui-accent-hover); box-shadow: var(--b-shadow-sm); }
.genui-metric:hover::before { opacity: 1; }
.genui-metric__label { font-size: var(--ts-2xs); color: var(--c-text-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.genui-metric__value { font-size: var(--ts-3xl); font-weight: 700; color: var(--c-text-1); line-height: 1.1; font-family: var(--font-serif); }
.genui-metric__delta { font-size: var(--ts-xs); font-weight: 600; color: var(--c-text-3); }
.genui-metric--success .genui-metric__delta { color: var(--b-success-br); }
.genui-metric--danger  .genui-metric__delta { color: var(--b-error); }
.genui-metric--primary .genui-metric__value {
    background: linear-gradient(100deg, var(--genui-accent), var(--c-text-1) 50%, var(--genui-accent) 95%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: genui-flow 6s linear infinite;
}

/* ───── Ключ-значение ───── */
.genui-kv { display: flex; flex-direction: column; margin: 0; }
.genui-kv__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--border-subtle); }
.genui-kv__row:last-child { border-bottom: 0; }
.genui-kv dt { color: var(--c-text-3); font-size: var(--ts-base); }
.genui-kv dd { color: var(--c-text-1); font-size: var(--ts-base); font-weight: 600; margin: 0; text-align: right; }

/* ───── Списки с акцентными маркерами ───── */
.genui-list { margin: 4px 0; padding: 0; list-style: none; color: var(--c-text-2); font-size: var(--ts-md); display: flex; flex-direction: column; gap: 9px; }
.genui-list li { position: relative; padding-left: 26px; }
/* Маркированный: акцентная точка. */
ul.genui-list li::before {
    content: ""; position: absolute; left: 5px; top: .55em; width: 7px; height: 7px;
    border-radius: var(--r-full); background: var(--genui-accent-bar);
}
/* Нумерованный: номер в акцентном чипе. */
ol.genui-list { counter-reset: genui-li; }
ol.genui-list li { padding-left: 30px; }
ol.genui-list li::before {
    counter-increment: genui-li; content: counter(genui-li);
    position: absolute; left: 0; top: .05em;
    width: 20px; height: 20px; border-radius: var(--r-full);
    background: var(--genui-accent-bg); color: var(--genui-accent);
    font-size: var(--ts-2xs); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ───── Лента шагов / этапов (timeline) ───── */
.genui-steps { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-direction: column; }
.genui-steps__item { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.genui-steps__item:last-child { padding-bottom: 0; }
/* Соединительная линия между маркерами. */
.genui-steps__item::before {
    content: ""; position: absolute; left: 13px; top: 30px; bottom: -2px; width: 2px;
    background: linear-gradient(var(--genui-accent-border), transparent);
}
.genui-steps__item:last-child::before { display: none; }
.genui-steps__num {
    position: relative; z-index: 1; flex: 0 0 auto;
    min-width: 28px; height: 28px; padding: 0 9px; border-radius: var(--r-full);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--genui-accent-bg); color: var(--genui-accent);
    border: 1px solid var(--genui-accent-border);
    font-size: var(--ts-xs); font-weight: 700; line-height: 1;
}
.genui-steps__body { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; min-width: 0; }
.genui-steps__title { font-weight: 700; color: var(--c-text-1); font-size: var(--ts-md); line-height: 1.35; }
.genui-steps__detail { color: var(--c-text-2); font-size: var(--ts-base); line-height: 1.6; }
.genui-steps__detail > :first-child { margin-top: 0; }
.genui-steps__detail > :last-child { margin-bottom: 0; }

/* ───── Разделитель ───── */
.genui-divider { border: 0; border-top: 1px solid var(--border-subtle); margin: 4px 0; }

/* ───── Изображение ───── */
.genui-figure { margin: 0; overflow: hidden; border-radius: var(--r-lg); }
.genui-figure__img { max-width: 100%; display: block; transition: transform var(--t-slow); }
.genui-figure:hover .genui-figure__img { transform: scale(1.04); }
.genui-figure__cap { font-size: var(--ts-xs); color: var(--c-text-3); margin-top: 6px; text-align: center; }

/* ───── Выноски с боковым акцентом ───── */
.genui-callout { position: relative; border-radius: var(--r-lg); padding: 14px 16px 14px 18px; border: 1px solid; font-size: var(--ts-base); overflow: hidden; }
.genui-callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: currentColor; opacity: .5; }
.genui-callout__title { font-weight: 700; margin-bottom: 4px; }
.genui-callout--info    { background: var(--b-c-sky-bg);     border-color: var(--b-c-sky-border);     color: var(--c-text-1); }
.genui-callout--info::before    { background: var(--b-c-sky); opacity: 1; }
.genui-callout--success { background: var(--b-c-emerald-bg); border-color: var(--b-c-emerald-border); color: var(--c-text-1); }
.genui-callout--success::before { background: var(--b-c-emerald); opacity: 1; }
.genui-callout--warning { background: var(--b-c-amber-bg);   border-color: var(--b-c-amber-border);   color: var(--c-text-1); }
.genui-callout--warning::before { background: var(--b-c-amber); opacity: 1; }
.genui-callout--danger  { background: rgba(var(--b-terra-rgb), .08); border-color: rgba(var(--b-terra-rgb), .25); color: var(--c-text-1); }
.genui-callout--danger::before  { background: var(--b-error); opacity: 1; }

/* ───── Рейтинг ───── */
.genui-rating { display: inline-flex; align-items: center; gap: 2px; }
.genui-rating__star { color: var(--border-subtle); font-size: 17px; transition: transform var(--t-base); }
.genui-rating__star.is-on { color: var(--b-gold); }
.genui-rating:hover .genui-rating__star.is-on { transform: scale(1.14); }
.genui-rating__count { color: var(--c-text-3); font-size: var(--ts-xs); margin-left: 6px; }

/* ───── Прогресс ───── */
.genui-progress { display: flex; flex-direction: column; gap: 6px; }
.genui-progress__label { display: flex; justify-content: space-between; font-size: var(--ts-sm); color: var(--c-text-3); font-weight: 500; }
.genui-progress__track { background: var(--surface-2); border-radius: var(--r-full); height: 9px; overflow: hidden; }
.genui-progress__fill {
    position: relative; overflow: hidden; background: var(--genui-accent-bar); height: 100%;
    border-radius: var(--r-full); transition: width .5s var(--ease-out);
    transform-origin: left; animation: genui-fill-grow .9s var(--ease-out) both;
}
.genui-progress__fill::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    animation: genui-shimmer 1.9s ease-in-out infinite;
}

/* ───── Таблица ───── */
.ch__table-wrap {
    border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--b-shadow-sm);
    background: color-mix(in srgb, var(--surface-1) 78%, transparent);
    backdrop-filter: var(--glass-blur-sm) var(--glass-sat); -webkit-backdrop-filter: var(--glass-blur-sm) var(--glass-sat);
}
.genui-table { width: 100%; border-collapse: collapse; font-size: var(--ts-base); }
.genui-table th, .genui-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border-subtle); }
.genui-table th { color: var(--c-text-3); font-weight: 700; background: var(--surface-1); white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; font-size: var(--ts-2xs); }
.genui-table tbody tr { transition: background var(--t-fast); }
.genui-table tbody tr:last-child td { border-bottom: 0; }
.genui-table tbody tr:hover td { background: var(--genui-accent-bg); }
.genui-table td:first-child { font-weight: 600; color: var(--c-text-1); }

/* ───── График ───── */
.genui-chart-wrap {
    border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 14px;
    background: color-mix(in srgb, var(--surface-1) 78%, transparent);
    backdrop-filter: var(--glass-blur-sm) var(--glass-sat); -webkit-backdrop-filter: var(--glass-blur-sm) var(--glass-sat);
}
.genui-chart { display: flex; flex-direction: column; gap: 8px; }
.genui-chart__svg { width: 100%; height: auto; color: var(--c-text-1); }
.genui-chart__tick { font-size: 7px; fill: var(--c-text-3); }
.genui-chart__axis { font-size: 8px; fill: var(--c-text-3); }
.genui-chart__legend { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: var(--ts-sm); color: var(--c-text-2); }
.genui-chart__legend-item { display: inline-flex; align-items: center; gap: 5px; }
.genui-chart__legend-item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Графики «рисуются» при появлении — то, чего статичный чат не умеет. */
.genui-chart rect { transform-box: fill-box; transform-origin: center bottom; animation: genui-grow-bar .7s var(--ease-out) both; }
.genui-chart rect:nth-of-type(1) { animation-delay: .05s; }
.genui-chart rect:nth-of-type(2) { animation-delay: .11s; }
.genui-chart rect:nth-of-type(3) { animation-delay: .17s; }
.genui-chart rect:nth-of-type(4) { animation-delay: .23s; }
.genui-chart rect:nth-of-type(5) { animation-delay: .29s; }
.genui-chart rect:nth-of-type(6) { animation-delay: .35s; }
.genui-chart rect:nth-of-type(n+7) { animation-delay: .4s; }
.genui-chart polyline { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: genui-draw 1.2s var(--ease-out) .15s forwards; }
.genui-chart polygon { transform-box: fill-box; transform-origin: center bottom; animation: genui-fade .9s .35s both; }
.genui-chart circle { transform-box: fill-box; transform-origin: center; animation: genui-pop .45s var(--ease-spring) both; }
.genui-chart circle:nth-of-type(odd)  { animation-delay: .6s; }
.genui-chart circle:nth-of-type(even) { animation-delay: .75s; }
.genui-chart path { transform-box: view-box; transform-origin: 50% 50%; animation: genui-pie-in .7s var(--ease-out) both; }
.genui-chart path:nth-of-type(2) { animation-delay: .1s; }
.genui-chart path:nth-of-type(3) { animation-delay: .2s; }
.genui-chart path:nth-of-type(4) { animation-delay: .3s; }
.genui-chart path:nth-of-type(n+5) { animation-delay: .4s; }

/* ───── Кнопки / ссылки / чипы ───── */
.genui-btn {
    border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer;
    padding: 10px 20px; font-size: var(--ts-md); font-weight: 600;
    transition: transform var(--t-hover), box-shadow var(--t-base), background var(--t-base), border-color var(--t-base);
    align-self: flex-start;
}
.genui-btn:active { transform: translateY(1px); }
.genui-btn--primary {
    position: relative; overflow: hidden;
    background: var(--genui-accent-bar); color: #fff;
    box-shadow: 0 6px 18px -6px var(--genui-accent-glow);
}
.genui-btn--primary::after {
    content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
    transform: skewX(-18deg); transition: left .6s var(--ease-out); pointer-events: none;
}
.genui-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -6px var(--genui-accent-glow); }
.genui-btn--primary:hover::after { left: 150%; }
/* Фокус-доступность с фирменным пульсирующим кольцом UIKit. */
.genui-btn--primary:focus-visible { outline: none; animation: ui-pulse-ring 1.6s ease-in-out infinite; }
.genui-btn--ghost { background: var(--surface-1); color: var(--c-text-1); border-color: var(--border-subtle); }
.genui-btn--ghost:hover { border-color: var(--genui-accent-hover); background: var(--surface-2); transform: translateY(-1px); }
.genui-btn--danger { background: var(--b-error); color: #fff; }
.genui-btn--danger:hover { transform: translateY(-1px); filter: brightness(1.05); }

.genui-link {
    color: var(--genui-accent); text-decoration: none; padding-bottom: 1px; font-size: var(--ts-md);
    background-image: linear-gradient(var(--genui-accent), var(--genui-accent));
    background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px;
    transition: background-size var(--t-base);
}
.genui-link:hover { background-size: 100% 1.5px; }

.genui-choices { display: flex; flex-wrap: wrap; gap: 9px; }
.genui-choices--list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
}
.genui-chip {
    border: 1px solid var(--border-subtle); background: var(--surface-1); border-radius: var(--r-full);
    padding: 8px 16px; font-size: var(--ts-base); color: var(--c-text-1); cursor: pointer;
    transition: border-color var(--t-base), background var(--t-base), color var(--t-base), transform var(--t-hover);
}
.genui-choices--list .genui-chip {
    border-radius: 10px;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    font-weight: 500;
}
.genui-chip:hover { background: var(--genui-accent-bg); border-color: var(--genui-accent-hover); color: var(--genui-accent); transform: translateY(-1px); }
.genui-chip:active { transform: translateY(0) scale(.97); }
.genui-choices .genui-chip { animation: genui-pop .5s var(--ease-spring) both; }
.genui-choices .genui-chip:nth-child(1) { animation-delay: .04s; }
.genui-choices .genui-chip:nth-child(2) { animation-delay: .1s; }
.genui-choices .genui-chip:nth-child(3) { animation-delay: .16s; }
.genui-choices .genui-chip:nth-child(4) { animation-delay: .22s; }
.genui-choices .genui-chip:nth-child(n+5) { animation-delay: .28s; }

/* ───── Интерактивная симуляция (canvas + ползунки) ───── */
/* Стекломорфизм + «live»-eyebrow и пульсирующий индикатор — то, чего обычный чат не умеет. */
.genui-sim {
    --genui-sim-ink: var(--c-text-3);
    display: flex; flex-direction: column; gap: 12px;
    border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
    padding: 14px;
    background: color-mix(in srgb, var(--surface-1) 78%, transparent);
    backdrop-filter: var(--glass-blur-md) var(--glass-sat); -webkit-backdrop-filter: var(--glass-blur-md) var(--glass-sat);
}
/* Eyebrow «Интерактивно» в стиле UIKit .section-label с мягким мерцанием. */
.genui-sim::before {
    content: "● Интерактивно"; align-self: flex-start;
    font-size: var(--ts-3xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--genui-accent); animation: ui-glow-pulse 2.4s ease-in-out infinite;
}
.genui-sim__canvas {
    position: relative;
    width: 100%; border-radius: var(--r-md); overflow: hidden;
    background:
        radial-gradient(120% 140% at 50% 0%, var(--genui-accent-bg), transparent 70%),
        var(--b-paper-hi, var(--surface-2));
}
/* Пульсирующее кольцо UIKit (ui-pulse-ring) — индикатор «живого» холста. */
.genui-sim__canvas::after {
    content: ""; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px;
    border-radius: var(--r-full); background: var(--genui-accent);
    animation: ui-pulse-ring 2s ease-in-out infinite;
}
.genui-sim__canvas canvas { display: block; width: 100%; }
.genui-text--muted { font-size: var(--ts-sm); color: var(--c-text-3); font-style: italic; }
.genui-sim__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--ts-xs); color: var(--c-text-3); }
.genui-sim__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.genui-sim__legend-item i { width: 12px; height: 3px; border-radius: var(--r-full); flex: 0 0 auto; }
.genui-sim__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
.genui-sim__btn {
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--r-full);
    border: 1px solid var(--border-subtle); background: var(--surface-2); color: var(--c-text-1);
    cursor: pointer; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
    transition: border-color var(--t-base), background var(--t-base), transform var(--t-hover);
}
.genui-sim__btn:hover { border-color: var(--genui-accent-hover); color: var(--genui-accent); transform: translateY(-1px); }
.genui-sim__btn:active { transform: scale(.94); }
.genui-sim__ctrl { display: flex; flex-direction: column; gap: 5px; min-width: 150px; flex: 1 1 150px; }
.genui-sim__ctrl-head { display: flex; justify-content: space-between; gap: 10px; font-size: var(--ts-xs); color: var(--c-text-3); }
.genui-sim__ctrl-head b { color: var(--genui-accent); font-variant-numeric: tabular-nums; }
.genui-sim__range { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: var(--r-full); background: var(--surface-2); outline: none; cursor: pointer; }
.genui-sim__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: var(--r-full); background: var(--genui-accent-bar); border: 2px solid var(--b-paper-hi, #fff); box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform var(--t-hover); }
.genui-sim__range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.genui-sim__range::-moz-range-thumb { width: 14px; height: 14px; border-radius: var(--r-full); background: var(--genui-accent); border: 2px solid var(--b-paper-hi, #fff); cursor: pointer; }

/* ───── Поля / формы ───── */
.genui-form { gap: 12px; }
.genui-field { display: flex; flex-direction: column; gap: 5px; }
.genui-field__label { font-size: var(--ts-sm); color: var(--c-text-3); font-weight: 500; }
.genui-field__input {
    border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 10px 13px; font-size: var(--ts-md);
    color: var(--c-text-1); background: var(--b-paper-hi, var(--surface-2)); outline: none;
    transition: border-color var(--t-base), box-shadow var(--t-base); font-family: var(--font-ui); width: 100%;
}
.genui-field__input:focus { border-color: var(--genui-accent); box-shadow: 0 0 0 3px var(--genui-accent-bg); }

/* ── Группа чекбоксов (множественный выбор, checkgroup) ── */
.genui-field--check { gap: 8px; }
.genui-checkgroup { display: flex; flex-direction: column; gap: 7px; }
.genui-check {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    font-size: var(--ts-md); color: var(--c-text-1); user-select: none;
}
.genui-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.genui-check__box {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 6px;
    border: 1.5px solid var(--border-subtle); background: var(--b-paper-hi, var(--surface-2));
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s ease, background .15s ease;
}
.genui-check__box::after {
    content: ""; width: 10px; height: 10px; border-radius: 3px; transform: scale(0);
    background: var(--genui-accent); transition: transform .15s ease;
}
.genui-check input:checked + .genui-check__box { border-color: var(--genui-accent); }
.genui-check input:checked + .genui-check__box::after { transform: scale(1); }
.genui-check input:focus-visible + .genui-check__box { box-shadow: 0 0 0 3px var(--genui-accent-bg); }
.genui-check:hover .genui-check__box { border-color: var(--genui-accent); }

/* ═══════════════════════════════════════════════════════════════════
   Живость: появление со стаггером и микро-взаимодействия.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes genui-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes genui-shimmer { to { transform: translateX(100%); } }

.ch__ai-body > .genui-stack,
.ch__ai-body > .genui-card,
.ch__ai-body > .genui-grid,
.ch__ai-body > .genui-tabs,
.ch__ai-body > .genui-app,
.ch__ai-body > .ch__table-wrap,
.ch__ai-body > .genui-chart-wrap,
.ch__ai-body > .genui-callout,
.ch__ai-body > .genui-form { animation: genui-rise .45s var(--ease-out) both; }

.genui-stack--col > *, .genui-grid > * { animation: genui-rise .42s var(--ease-out) both; }
.genui-stack--col > *:nth-child(1),  .genui-grid > *:nth-child(1)  { animation-delay: .02s; }
.genui-stack--col > *:nth-child(2),  .genui-grid > *:nth-child(2)  { animation-delay: .07s; }
.genui-stack--col > *:nth-child(3),  .genui-grid > *:nth-child(3)  { animation-delay: .12s; }
.genui-stack--col > *:nth-child(4),  .genui-grid > *:nth-child(4)  { animation-delay: .17s; }
.genui-stack--col > *:nth-child(5),  .genui-grid > *:nth-child(5)  { animation-delay: .22s; }
.genui-stack--col > *:nth-child(n+6), .genui-grid > *:nth-child(n+6) { animation-delay: .27s; }

/* ───── Адаптивность ───── */
@media (max-width: 640px) {
    .genui-grid { grid-template-columns: 1fr !important; }
    .genui-stack--row { flex-direction: column; }
    .genui-card { padding: 16px 16px; }
    .genui-card:has(.genui-heading--h1) { padding: 26px 18px; }
}

/* ───── Уважение к настройке «меньше движения» ───── */
@media (prefers-reduced-motion: reduce) {
    .ch__ai-body > .genui-stack,
    .ch__ai-body > .genui-card,
    .ch__ai-body > .genui-grid,
    .ch__ai-body > .genui-tabs,
    .ch__ai-body > .genui-app,
    .ch__ai-body > .ch__table-wrap,
    .ch__ai-body > .genui-chart-wrap,
    .ch__ai-body > .genui-callout,
    .ch__ai-body > .genui-form,
    .genui-app__page,
    .genui-stack--col > *, .genui-grid > *,
    .genui-choices .genui-chip,
    .genui-progress__fill,
    .genui-chart rect, .genui-chart polyline, .genui-chart polygon, .genui-chart circle, .genui-chart path,
    .genui-card:has(.genui-heading--h1)::after,
    .genui-card:has(.genui-heading--h1) .genui-heading--h1,
    .genui-sim::before,
    .genui-sim__canvas::after,
    .genui-btn--primary:focus-visible,
    .genui-metric--primary .genui-metric__value { animation: none !important; }
    .genui-chart polyline { stroke-dasharray: none; stroke-dashoffset: 0; }
    .genui-progress__fill::after { display: none; }
    .genui-btn--primary::after { display: none; }
    .genui-card, .genui-metric, .genui-chip, .genui-btn, .genui-figure__img, .genui-card__icon { transition: none; }
}

/* ═══════════════════════════════════════════
   Окно с агентами (действие кнопки action="agents")
   ═══════════════════════════════════════════ */
/* Окно встроено в область чата (.ch__center, position:relative), а не поверх всего экрана —
   «модульное окно в самом чате»: сайдбары остаются видимыми, фон затемняется только в чате. */
.ch-agents-modal {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ch-agents-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(4px);
    animation: ch-agents-fade .18s var(--ease-out, ease);
}
.ch-agents-modal__dialog {
    position: relative;
    width: min(600px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface-0, #fff);
    border: 1px solid var(--border-subtle, rgba(148, 163, 184, .25));
    border-radius: 16px;
    box-shadow: 0 18px 48px -14px rgba(7, 104, 197, 0.3), 0 6px 18px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: ch-agents-pop .2s var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
.ch-agents-modal__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-subtle, rgba(148, 163, 184, .2));
}
.ch-agents-modal__titles { flex: 1 1 auto; min-width: 0; }
.ch-agents-modal__title {
    margin: 0;
    font-family: var(--font-serif, serif);
    font-weight: 700;
    font-size: var(--ts-xl, 1.25rem);
    color: var(--c-text-1, #0f172a);
    letter-spacing: -0.01em;
}
.ch-agents-modal__sub {
    margin: 4px 0 0;
    font-size: var(--ts-sm, .85rem);
    color: var(--c-text-3, #64748b);
    line-height: 1.4;
}
.ch-agents-modal__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 9px;
    background: var(--surface-1, #f1f5f9);
    color: var(--c-text-2, #475569);
    cursor: pointer;
    transition: background var(--t-base, .2s), color var(--t-base, .2s);
}
.ch-agents-modal__close:hover { background: rgba(239, 68, 68, .12); color: #e23b3b; }

.ch-agents-modal__grid {
    flex: 1 1 auto;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 20px;
    scrollbar-width: thin;
}
.ch-agents-modal__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid var(--border-subtle, rgba(148, 163, 184, .25));
    border-radius: 12px;
    background: var(--surface-1, #f8fafc);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--t-base, .2s), background var(--t-base, .2s), transform var(--t-base, .2s), box-shadow var(--t-base, .2s);
}
.ch-agents-modal__item:hover {
    border-color: var(--genui-accent-hover, rgba(7, 104, 197, .5));
    background: var(--surface-0, #fff);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(7, 104, 197, .35);
}
.ch-agents-modal__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
}
.ch-agents-modal__info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ch-agents-modal__name {
    font-weight: 600;
    font-size: var(--ts-sm, .9rem);
    color: var(--c-text-1, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ch-agents-modal__desc {
    font-size: var(--ts-xs, .78rem);
    color: var(--c-text-3, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ch-agents-modal__add {
    flex: 0 0 auto;
    opacity: 0;
    transform: scale(.8);
    transition: opacity var(--t-base, .2s), transform var(--t-base, .2s);
}
.ch-agents-modal__item:hover .ch-agents-modal__add { opacity: 1; transform: scale(1); }

.ch-agents-modal__foot {
    padding: 13px 20px;
    border-top: 1px solid var(--border-subtle, rgba(148, 163, 184, .2));
    background: var(--surface-1, #f8fafc);
}
.ch-agents-modal__catalog {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: var(--ts-sm, .85rem);
    color: #0768c5;
    text-decoration: none;
    transition: gap var(--t-base, .2s);
}
.ch-agents-modal__catalog:hover { gap: 11px; }

@keyframes ch-agents-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ch-agents-pop {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 560px) {
    .ch-agents-modal__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   Живой оркестрационный холст (ChatEvent.Surface): план → прогресс →
   карточки шагов → экономия. Эфемерная панель поверх стрима ответа.
   ═══════════════════════════════════════════════════════════════════ */
.ch__orchestration {
    margin: 10px 0 4px;
    animation: ch-orch-appear var(--t-base, .25s) ease both;
}
.ch__orchestration-inner {
    position: relative;
    border-radius: var(--r-lg, 16px);
    padding: 2px;
    background: var(--cur-bar, var(--b-grad-blue, linear-gradient(135deg, #6366f1, #06b6d4)));
    box-shadow: var(--b-shadow-md, 0 8px 24px rgba(15, 23, 42, .12));
}
.ch__orchestration-inner > * {
    border-radius: calc(var(--r-lg, 16px) - 2px);
    background: var(--surface-0, #fff);
}
/* Мягкая «дышащая» подсветка, пока идёт оркестрация. */
.ch__orchestration-inner::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: inherit;
    filter: blur(10px);
    opacity: .45;
    z-index: -1;
    animation: ch-orch-glow 2.4s ease-in-out infinite;
}
.ch__orchestration .genui-steps__item { transition: opacity var(--t-base, .2s); }

@keyframes ch-orch-appear {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ch-orch-glow {
    0%, 100% { opacity: .30; }
    50%      { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
    .ch__orchestration, .ch__orchestration-inner::before { animation: none; }
}



/* ── components/chat/chat-superadmin.css ── */
/* Режим суперадмина: окно входа (.sa-login) и панель (.sa).

   Панель — служебный инструмент, а не часть продуктового интерфейса: приборный вид,
   моноширинные значения, состояние читается за секунду. Данные здесь плотные (маршруты,
   ключи, доли трафика), поэтому строка вместо таблицы: в таблице действия и полоса
   загрузки не помещаются, а на узком экране она разъезжается. */

/* ─── Окно входа ─────────────────────────────────────────────────────── */

.sa-login {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-login__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 26, .5);
    backdrop-filter: blur(3px);
}

.sa-login__dialog {
    position: relative;
    width: min(400px, 92vw);
    background: var(--ch-card-bg, #fff);
    color: var(--ch-text, #0f172a);
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .3);
    display: flex;
    flex-direction: column;
}

.sa-login__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 14px;
}

.sa-login__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }

.sa-login__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ch-muted, #64748b);
    padding: 4px;
    border-radius: 8px;
    display: inline-flex;
}

.sa-login__close:hover { background: var(--ch-hover, #f1f5f9); }

.sa-login__body { padding: 4px 22px 6px; display: flex; flex-direction: column; gap: 14px; }

.sa-login__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.sa-login__field > span { color: var(--ch-muted, #64748b); font-weight: 600; }

.sa-login__field input {
    border: 1px solid var(--ch-border, #e2e8f0);
    border-radius: 11px;
    padding: 10px 13px;
    font: inherit;
    background: var(--ch-input-bg, #f8fafc);
    color: inherit;
    transition: border-color .12s, background .12s;
}

.sa-login__field input:focus {
    outline: none;
    border-color: var(--ch-accent, #3b82f6);
    background: var(--ch-card-bg, #fff);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.sa-login__error { margin: 0; font-size: 13px; color: #b91c1c; }

.sa-login__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px 20px; }

.sa-login__btn {
    border-radius: 11px;
    border: 1px solid var(--ch-border, #e2e8f0);
    padding: 9px 16px;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    background: var(--ch-card-bg, #fff);
    color: inherit;
}

.sa-login__btn--primary {
    background: var(--ch-accent, #3b82f6);
    border-color: transparent;
    color: #fff;
}

.sa-login__btn:disabled { opacity: .55; cursor: default; }

/* ─── Панель ─────────────────────────────────────────────────────────── */

.sa {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 26, .55);
    backdrop-filter: blur(3px);
}

.sa__dialog {
    position: relative;
    width: min(980px, 95vw);
    max-height: 90vh;
    background: var(--ch-bg, #f8fafc);
    color: var(--ch-text, #0f172a);
    border-radius: 20px;
    box-shadow: 0 28px 72px rgba(15, 23, 42, .32);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sa__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: var(--ch-card-bg, #fff);
    border-bottom: 1px solid var(--ch-border, #e2e8f0);
}

.sa__head-title { display: flex; align-items: center; gap: 12px; }

/* Значок щита отделяет служебный режим от обычных модалок чата. */
.sa__mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e293b, #475569);
    color: #fff;
    flex: none;
}

.sa__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.sa__sub { font-size: 12px; color: var(--ch-muted, #64748b); }

.sa__head-actions { display: flex; align-items: center; gap: 8px; }

.sa__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    border: 1px solid var(--ch-border, #e2e8f0);
    padding: 7px 13px;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    background: var(--ch-card-bg, #fff);
    color: inherit;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}

.sa__btn:hover:not(:disabled) { background: var(--ch-hover, #f1f5f9); }
.sa__btn:disabled { opacity: .55; cursor: default; }
.sa__btn--sm { padding: 5px 10px; font-size: 12px; }
.sa__btn--danger { color: #b91c1c; }
.sa__btn--danger:hover:not(:disabled) { background: #fef2f2; border-color: #fecaca; }

.sa__btn--primary {
    background: var(--ch-accent, #3b82f6);
    border-color: transparent;
    color: #fff;
}

.sa__btn--primary:hover:not(:disabled) { filter: brightness(1.06); background: var(--ch-accent, #3b82f6); }

.sa__icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ch-muted, #64748b);
    padding: 5px;
    border-radius: 9px;
    display: inline-flex;
}

.sa__icon:hover { background: var(--ch-hover, #f1f5f9); }

/* Сводка: три числа, по которым видно состояние системы без чтения таблиц. */
.sa__summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--ch-border, #e2e8f0);
    border-bottom: 1px solid var(--ch-border, #e2e8f0);
}

.sa__stat {
    background: var(--ch-card-bg, #fff);
    padding: 12px 22px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sa__stat-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.sa__stat-value--bad { color: #b91c1c; }
.sa__stat-of { font-size: 14px; font-weight: 600; color: var(--ch-muted, #94a3b8); }
.sa__stat-label { font-size: 12px; color: var(--ch-muted, #64748b); }

.sa__body {
    padding: 18px 22px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sa__card {
    background: var(--ch-card-bg, #fff);
    border: 1px solid var(--ch-border, #e2e8f0);
    border-radius: 16px;
    padding: 16px 18px 14px;
}

.sa__card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.sa__card-title { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.sa__hint-inline { font-size: 12px; color: var(--ch-muted, #94a3b8); }

/* ─── Строки маршрутов и ключей ──────────────────────────────────────── */

.sa__rows { display: flex; flex-direction: column; }

.sa__row {
    display: grid;
    grid-template-columns: minmax(210px, 1.4fr) minmax(140px, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 10px;
    border-radius: 12px;
    border-bottom: 1px solid var(--ch-border, #eef2f7);
}

.sa__row:last-child { border-bottom: none; }
.sa__row--current { background: rgba(59, 130, 246, .06); }

.sa__row-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sa__row-name { display: flex; align-items: center; gap: 8px; min-width: 0; }

.sa__row-name code {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa__num {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--ch-hover, #f1f5f9);
    color: var(--ch-muted, #64748b);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sa__tag {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ch-muted, #64748b);
    background: var(--ch-hover, #f1f5f9);
    border-radius: 999px;
    padding: 2px 7px;
}

.sa__tag--current { color: #1d4ed8; background: rgba(59, 130, 246, .12); }

/* Состояние — точкой и словом: цвет читается боковым зрением, слово снимает
   двусмысленность (и остаётся доступным при дальтонизме). */
.sa__state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ch-muted, #64748b);
}

.sa__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sa__state--ok   { color: #15803d; }
.sa__state--warn { color: #b45309; }
.sa__state--off  { color: #94a3b8; }

/* Загрузка: полоса доли трафика + числа. Полоса нужна, чтобы перекос между
   ключами был виден мгновенно, без сравнения цифр. */
.sa__load { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.sa__bar {
    height: 6px;
    border-radius: 999px;
    background: var(--ch-hover, #eef2f7);
    overflow: hidden;
}

.sa__bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    min-width: 2px;
    transition: width .25s ease;
}

.sa__load-text {
    font-size: 11px;
    color: var(--ch-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.sa__load-fail { color: #b45309; }

.sa__row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* ─── Добавление / подсказки ─────────────────────────────────────────── */

.sa__add { display: flex; gap: 8px; margin-top: 12px; }

.sa__add input,
.sa__model-pick input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--ch-border, #e2e8f0);
    border-radius: 10px;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    background: var(--ch-input-bg, #f8fafc);
    color: inherit;
    transition: border-color .12s, background .12s;
}

.sa__add input:focus,
.sa__model-pick input:focus {
    outline: none;
    border-color: var(--ch-accent, #3b82f6);
    background: var(--ch-card-bg, #fff);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.sa__hint,
.sa__empty {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ch-muted, #64748b);
}

.sa__note {
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    padding: 8px 11px;
}

.sa__note--ok  { color: #166534; background: #f0fdf4; }
.sa__note--bad { color: #9f1239; background: #fff1f2; }

/* ─── Модели ─────────────────────────────────────────────────────────── */

.sa__models {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.sa__model {
    border: 1px solid var(--ch-border, #e2e8f0);
    border-radius: 12px;
    padding: 11px 13px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sa__model-head { display: flex; align-items: center; gap: 8px; }
.sa__model-name { font-size: 13px; font-weight: 700; }
.sa__model-role { font-size: 11px; color: var(--ch-muted, #94a3b8); }
.sa__model-pick { display: flex; gap: 6px; align-items: center; margin-top: 6px; }

.sa__model-pick input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

/* ─── Узкий экран ────────────────────────────────────────────────────── */

@media (max-width: 720px) {
    .sa__row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sa__row-actions { justify-content: flex-start; }
    .sa__summary { grid-template-columns: 1fr; }
    .sa__add { flex-direction: column; }
}


/* Fractal-редизайн: переопределяет палитру/структуру чата — импорт последним. */

/* ── components/chat/chat-fractal.css ── */
/* ============================================================================
   chat-fractal.css — «Fractal» дизайн чата
   Light-slate / blue glass-тема по макету F_blue_SaaS_Wireframe.
   Реализована как переопределение чат-токенов --ch-* (весь визуал чата на них),
   плюс точечные структурные правки: glass-панели, металлические кнопки,
   синие пузыри, таймлайн шагов, остров-композер, правые панели.
   Импортируется ПОСЛЕДНИМ в chat/index.css — перебивает прежнюю палитру.
   ============================================================================ */

/* ── Палитра Fractal (локальные атомы дизайна) ───────────────────────────── */
/* .ch-tpl__pop включён в селектор: JS-поповер шаблонов монтируется в document.body
   (вне .ch), поэтому атомы fr-переменных и шрифты должны быть доступны и на нём. */
.ch-page,
.ch,
.ch-tpl__pop {
    --fr-blue-25:  #f5f8ff;
    --fr-blue-50:  #ecf2ff;
    --fr-blue-100: #dbe6fe;
    --fr-blue-200: #b9cdfd;
    --fr-blue-500: #2e6bff;
    --fr-blue-600: #2456e2;
    --fr-blue-700: #1a3fb0;
    --fr-cyan-100: #d8f6fb;
    --fr-cyan-300: #67e0f0;
    --fr-cyan-500: #08b8d4;
    --fr-cyan-700: #0891ac;
    --fr-green-100:#dcfce7;
    --fr-green-500:#22c55e;
    --fr-green-700:#15803d;
    --fr-sun-100:  #fdf2d4;
    --fr-sun-700:  #b9871a;
    --fr-sky-500:  #7c6cff;
    --fr-slate-0:  #ffffff;
    --fr-slate-50: #f5f7fb;
    --fr-slate-100:#f0f2f7;
    --fr-slate-200:#dde1ea;
    --fr-slate-300:#c4cad8;
    --fr-slate-500:#5c6172;
    --fr-slate-700:#3a3f4d;
    --fr-slate-900:#20222b;
    --fr-page:     #e9ebf2;

    /* Металлическая синяя кнопка (New chat / send / run) */
    --fr-metal-bg: radial-gradient(85% 100% at 50% 50%, rgba(200,235,255,.22), rgba(255,255,255,0) 72%),
                   linear-gradient(180deg, #1470e2 0%, #2b8ef6 50%, #1470e2 100%);
    --fr-metal-shadow: inset 0 3px 6px rgba(4,32,90,.45), inset 0 -2px 5px rgba(4,32,90,.35),
                       inset 0 0 16px rgba(120,200,255,.30), 0 1px 0 rgba(255,255,255,.45),
                       0 6px 16px rgba(10,73,160,.25);
    --fr-metal-border: 1px solid rgba(6,48,116,.45);
    --fr-metal-text-shadow: 0 0 8px rgba(200,235,255,.8), 0 1px 2px rgba(10,50,130,.4);

    /* Glass-панель */
    --fr-panel-bg: linear-gradient(180deg, #fefeff, #f5f7fb);
    --fr-panel-border: #dde1ea;
    --fr-panel-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(90,104,150,.09), 0 14px 30px rgba(90,104,150,.11);
    --fr-field-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 8px rgba(80,84,96,.20);

    --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-display: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── Переопределение чат-токенов --ch-* под Fractal ───────────────────────── */
.ch-page,
.ch {
    /* Фон — мягкая цветная сетка (mesh) под стеклянными панелями */
    --ch-page-bg:
        radial-gradient(46% 42% at 16% 12%, rgba(46,107,255,.14), transparent 70%),
        radial-gradient(50% 46% at 88% 18%, rgba(8,184,212,.16), transparent 70%),
        radial-gradient(56% 52% at 60% 98%, rgba(124,108,255,.12), transparent 75%),
        radial-gradient(40% 40% at 40% 55%, rgba(255,255,255,.7), transparent 70%),
        linear-gradient(180deg, #eef0f6, #e3e6ef);

    --ch-card-bg: var(--fr-panel-bg);
    --ch-card-border: var(--fr-panel-border);
    --ch-card-shadow: var(--fr-panel-shadow);
    --ch-card-glow-start: transparent;
    --ch-card-glow-end: transparent;

    --ch-title: #23252e;
    --ch-text: #5c6172;
    --ch-text-muted: #9aa0b0;
    --ch-accent: var(--fr-blue-500);
    --ch-accent2: var(--fr-cyan-500);
    --ch-divider: rgba(100,116,160,.12);

    /* Элементы чатов */
    --ch-session-bg: transparent;
    --ch-session-border: transparent;
    --ch-session-hover-bg: var(--fr-slate-100);
    --ch-session-hover-border: transparent;
    --ch-session-active-bg: var(--fr-blue-50);
    --ch-session-active-border: var(--fr-blue-200);
    --ch-session-title: #23252e;
    --ch-session-date: #9aa0b0;

    /* Модель-пикер */
    --ch-llm-model-bg: var(--fr-slate-0);
    --ch-llm-model-border: var(--fr-slate-200);
    --ch-llm-model-hover-bg: var(--fr-slate-100);
    --ch-llm-model-name: #23252e;
    --ch-llm-headline: #23252e;
    --ch-llm-desc: #5c6172;

    /* Пузыри сообщений */
    --ch-msg-user-bg: var(--fr-blue-500);
    --ch-msg-user-text: #ffffff;
    --ch-msg-ai-bg: var(--fr-slate-0);
    --ch-msg-ai-border: var(--fr-slate-200);
    --ch-msg-ai-text: #23252e;

    /* Ввод / композер */
    --ch-input-bg: var(--fr-slate-0);
    --ch-input-border: var(--fr-slate-200);
    --ch-input-text: #23252e;
    --ch-input-ph: #9aa0b0;
    --ch-form-bg: var(--fr-slate-0);
    --ch-form-border: var(--fr-slate-200);
    --ch-form-shadow: var(--fr-field-shadow);

    /* Глубина / агенты (правый сайдбар) */
    --ch-depth-label: #5c6172;
    --ch-depth-btn-bg: var(--fr-slate-0);
    --ch-depth-btn-border: var(--fr-slate-200);
    --ch-depth-btn-text: #5c6172;
    --ch-depth-btn-active-bg: var(--fr-metal-bg);
    --ch-agent-item-bg: var(--fr-slate-0);
    --ch-agent-item-border: var(--fr-slate-200);
    --ch-agent-item-text: #3a3f4d;
    --ch-empty-icon: var(--fr-blue-50);
    --ch-empty-title: #23252e;
    --ch-empty-text: #9aa0b0;

    /* Чипы стартовых подсказок */
    --ch-chip-color: #23252e;
    --ch-chip-border: var(--fr-slate-200);
    --ch-chip-hover-bg: var(--fr-blue-25);
    --ch-chip-hover-border: var(--fr-blue-200);

    font-family: var(--font-ui);
}

/* ── Панели-стекло: единый вид карточек + шапка ──────────────────────────── */
.ch__card {
    background: var(--fr-panel-bg);
    border: 1px solid var(--fr-panel-border);
    box-shadow: var(--fr-panel-shadow);
    border-radius: 16px;
    backdrop-filter: none;
    position: relative;
    overflow: hidden;
}
/* Диагональный глянец сверху панели (как в макете) */
.ch__card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 30%);
}
.ch__card > * { position: relative; z-index: 1; }

/* ── Шапка панели «Чаты»: лого-орб + заголовок ───────────────────────────── */
.ch__menu-header { display: flex; align-items: center; gap: 8px; }
/* Реальный логотип из маркетплейса (SVG) вместо CSS-орба. */
.ch__menu-logo {
    width: 24px; height: 24px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

/* ── Металлическая синяя кнопка (общий класс для New chat / send) ─────────── */
.ch__action-btn,
.ch__send-btn {
    background: var(--fr-metal-bg) !important;
    color: #fff !important;
    border: var(--fr-metal-border) !important;
    box-shadow: var(--fr-metal-shadow) !important;
    text-shadow: var(--fr-metal-text-shadow);
}
.ch__action-btn:hover:not(:disabled),
.ch__send-btn:hover:not(:disabled) {
    filter: brightness(1.04);
}
.ch__action-btn:active,
.ch__send-btn:active { transform: translateY(1px); }

/* Заголовки панелей — Outfit, без градиентного текста прежней темы */
.ch__menu-title,
.ch__depth-title,
.ch__agents-title,
.ch__llm-title {
    font-family: var(--font-display) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: #23252e !important;
    font-weight: 600;
}

/* ── Пузырь пользователя: плоский синий, скруглён 16/16/4/16 ──────────────── */
/* Литеральный #2e6bff (не var): если --fr-blue-500 вдруг не в скоупе, объявление
   с var() становится невалидным (IACVT) и фон «проваливается» в прозрачный —
   тогда белый текст висит на светлой странице (баг «неконтрастные шрифты»).
   Селекторы с [data-theme] перебивают кофейный градиент из chat-light.css. */
.ch__msg-bubble--user,
[data-theme="light"] .ch__msg-bubble--user,
[data-theme="dark"]  .ch__msg-bubble--user {
    background: #2e6bff !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 16px 16px 4px 16px !important;
    box-shadow: 0 2px 10px rgba(46,107,255,.28) !important;
}

/* ── Карточка ассистента: белое стекло, орб-аватар, скругление 16/16/16/4 ─── */
.ch__ai-card {
    background: var(--fr-slate-0) !important;
    border: 1px solid var(--fr-slate-200) !important;
    border-radius: 16px 16px 16px 4px !important;
    box-shadow: 0 2px 6px rgba(90,104,150,.10) !important;
}
/* Аватар ассистента — настоящий фирменный знак маркетплейса (синий квадрат + белый глиф),
   а не CSS-орб. SVG уже содержит скруглённый фон, поэтому свой градиент не рисуем. */
.ch__ai-avatar {
    background: url("fai-logo.svg") center / contain no-repeat !important;
    color: transparent !important;
    width: 26px; height: 26px;
    border-radius: 8px;
    font-size: 0 !important;
    box-shadow: 0 2px 6px rgba(46, 107, 255, .25);
}
.ch__ai-brand {
    color: #23252e !important;
    font-family: var(--font-display);
    font-weight: 600;
    flex: 0 0 auto !important;   /* без flex:1 — бейдж агента прижимается к «FAI», а не улетает вправо */
}
.ch__agent-badge {
    background: var(--fr-blue-50) !important;
    color: var(--fr-blue-600) !important;
    border: 1px solid var(--fr-blue-200) !important;
}
/* Кнопки действий (копир./скачать/DOCX) уезжают к правому краю шапки */
.ch__ai-actions { margin-left: auto; }
/* «Сохранить шаблон» — акцентная текстовая кнопка */
.ch__ai-btn--save { color: var(--fr-blue-600) !important; font-weight: 600; }
.ch__ai-btn--save:hover { background: var(--fr-blue-25) !important; }

/* ── Системная реплика сборки: компактная центрированная «капсула»-переход ── */
.ch__msg--system { align-items: center; }
.ch__sys-note {
    display: inline-flex; align-items: center; gap: 8px;
    max-width: 92%;
    padding: 7px 15px;
    border-radius: 999px;
    background: linear-gradient(180deg, #eef3ff, #e5edff);
    border: 1px solid #cdddff;
    color: #3a4a6b;
    font: 600 12.5px var(--font-ui);
    box-shadow: 0 1px 3px rgba(46, 107, 255, .10);
}
.ch__sys-note svg { color: var(--fr-blue-500); flex-shrink: 0; }

/* ── Таймлайн шагов (thinking) под дизайн ─────────────────────────────────── */
.ch__think-item--done .ch__think-check { color: var(--fr-green-500) !important; }
.ch__think-item--active { color: var(--fr-blue-600) !important; }
.ch__think-spinner {
    border-color: var(--fr-blue-200) !important;
    border-top-color: var(--fr-blue-500) !important;
}
.ch__think-label { color: #3a3f4d; }
.ch__think-detail { color: #9aa0b0; }
.ch__think-toggle { color: #5c6172; }

/* ── Скроллбары — тонкие slate ────────────────────────────────────────────── */
.ch__messages::-webkit-scrollbar-thumb,
.ch__sidebar-left::-webkit-scrollbar-thumb { background: var(--fr-slate-300); }

/* ── ОДНА колонка контента для ленты и композера ───────────────────────────
   Лента (.ch__messages) и композер (.ch__input-section) — разные контейнеры
   с разными отступами, поэтому раньше «разъезжались». Задаём им одинаковый
   боковой отступ и одну и ту же максимальную ширину колонки (растёт до 50vw
   на широких экранах, не уже 840px на средних) → края сообщений и острова
   композера совпадают. ── */
.ch {
    /* Компактная читаемая колонка: не растекается на широких мониторах.
       (Раньше было max(840px,50vw) — на 2К+ строки становились слишком длинными.) */
    --ch-content-w: min(100%, 880px);
}
.ch__messages,
.ch__input-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
.ch__messages > .ch__msg,
.ch__messages > .ch__empty-wrap,
.ch__messages > .ch__chips-wrap,
.ch__input-section .ch__form-with-bot,
.ch__input-section .ch__form-box {
    width: 100%;
    max-width: var(--ch-content-w) !important;
    margin-inline: auto !important;
}
/* Композер — плотный БЕЛЫЙ остров. В светлой теме токен --ch-form-bg =
   rgba(255,255,255,.78) (полупрозрачный) → mesh-фон просвечивал сквозь поле
   и баннер сборки внутри «висел» на странице. Задаём литеральный #fff, чтобы
   не зависеть от темы. :not(.ch--voice-mode) — не трогаем голосовой композер. */
.ch:not(.ch--voice-mode) .ch__form-box {
    background: #ffffff !important;
    border: 1px solid #dbe1ec !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6),
                0 4px 14px rgba(70,84,120,.12),
                0 16px 34px rgba(70,84,120,.10) !important;
}

/* ── Артефакты: пустое состояние (файлов сессии пока нет) ─────────────────── */
.ch__artifacts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 22px 16px 18px;
    color: var(--fr-slate-300);
}
.ch__artifacts-empty svg { color: var(--fr-slate-300); }
.ch__artifacts-empty-title {
    font: 600 12.5px var(--font-ui);
    color: var(--fr-slate-500);
    margin-top: 2px;
}
.ch__artifacts-empty-hint {
    font: 500 11px/1.45 var(--font-ui);
    color: #9aa0b0;
    max-width: 200px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПЛАШКА ЭКОНОМИИ ЗА СЕССИЮ (над композером, накопительная)
   ══════════════════════════════════════════════════════════════════════════ */
.ch-save {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 148px;              /* над композером */
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;       /* клики только по самой плашке/панели */
}
.ch-save__pill,
.ch-save__panel { pointer-events: auto; }

.ch-save__pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px 8px 14px;
    border: 1px solid #d5dae6;
    border-radius: 999px;
    /* плотный непрозрачный фон — не должен просвечивать поверх mesh-фона */
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(30,45,90,.16), 0 1px 3px rgba(30,45,90,.10);
    cursor: pointer;
    font: 500 12px var(--font-ui);
    color: #3a3f4d;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ch-save__pill:hover { border-color: var(--fr-blue-200); box-shadow: 0 8px 22px rgba(30,45,90,.20); }
.ch-save__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--fr-green-500);
    box-shadow: 0 0 8px var(--fr-green-500);
    flex-shrink: 0;
}
.ch-save__pill-label { color: #5c6172; }
.ch-save__pill-val {
    font-weight: 700;
    color: var(--fr-green-700);
    font-variant-numeric: tabular-nums;
}
.ch-save__pill-chev {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--fr-slate-100);
    color: #5c6172;
    flex-shrink: 0;
}

/* Раскрытая панель — над плашкой */
.ch-save__panel {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    /* плотный непрозрачный фон + чёткая граница/тень, чтобы панель не сливалась с фоном */
    background: #ffffff;
    border: 1px solid #d5dae6;
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 18px 44px rgba(30,45,90,.26), 0 2px 8px rgba(30,45,90,.12);
    padding: 12px 14px 13px;
    animation: ch-save-drop .18s ease-out;
}
@keyframes ch-save-drop { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ch-save__panel-head { display: flex; align-items: center; gap: 8px; }
.ch-save__panel-title {
    font: 600 12px var(--font-display);
    color: #23252e;
}
.ch-save__close {
    margin-left: auto;
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    border: none; background: var(--fr-slate-100); color: #5c6172; cursor: pointer;
}
.ch-save__close:hover { background: var(--fr-slate-200); }

.ch-save__rows { display: flex; flex-direction: column; gap: 4px; margin-top: 11px; }
.ch-save__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--fr-slate-50);
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, border-color .15s ease;
}
.ch-save__row:hover { background: var(--fr-slate-100); }
.ch-save__row--on {
    background: var(--fr-blue-50);
    border-color: var(--fr-blue-200);
}
.ch-save__row-tier { font: 700 12px var(--font-ui); color: #23252e; }
.ch-save__row-note { font: 500 10.5px var(--font-ui); color: #9aa0b0; }
.ch-save__row-val {
    font: 700 12.5px var(--font-ui); color: var(--fr-green-700);
    font-variant-numeric: tabular-nums;
}
.ch-save__hint {
    margin-top: 10px;
    font: 500 10px var(--font-ui);
    color: #9aa0b0;
    text-align: center;
}@media (max-width: 767px) {
.ch-save { bottom: 128px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ПАНЕЛЬ «ШАБЛОНЫ» (левая, новая)
   ══════════════════════════════════════════════════════════════════════════ */
.ch-tpl {
    width: 210px;
    flex-shrink: 0;
    height: calc(100% - 16px);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ch-tpl--collapsed { width: 56px; }

.ch-tpl__card {
    flex: 1;
    min-height: 0;
    padding: 0;
    gap: 0;
}
.ch-tpl__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px 10px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(100,116,160,.10);
}
.ch-tpl__head-icon { color: var(--fr-blue-500); flex-shrink: 0; }
.ch-tpl__title {
    font: 600 13px/1 var(--font-display);
    color: #23252e;
}
.ch-tpl__collapse {
    margin-left: auto;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: none; border-radius: 8px;
    background: transparent; color: #5c6172; cursor: pointer;
    transition: background .15s ease;
}
.ch-tpl__collapse:hover { background: var(--fr-slate-100); color: #23252e; }

.ch-tpl__search {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    margin: 10px 12px 4px;
    padding: 7px 10px;
    border: 1px solid var(--fr-slate-200);
    border-radius: 10px;
    box-shadow: var(--fr-field-shadow);
    color: #9aa0b0;
}
.ch-tpl__search-input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: transparent;
    font: 400 11.5px var(--font-ui);
    color: #23252e;
}
.ch-tpl__search-input::placeholder { color: #9aa0b0; }

.ch-tpl__scroll {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 6px 8px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--fr-slate-300) transparent;
}
.ch-tpl__scroll::-webkit-scrollbar { width: 5px; }
.ch-tpl__scroll::-webkit-scrollbar-thumb { background: var(--fr-slate-300); border-radius: 3px; }

/* ── Сворачиваемые секции категорий (как дерево в VS Code) ─────────────────── */
.ch-tpl__cat { margin-top: 2px; }
/* Лёгкий разделитель между категориями — тоньше и спокойнее */
.ch-tpl__cat + .ch-tpl__cat {
    margin-top: 3px;
    padding-top: 3px;
    border-top: 1px solid rgba(100,116,160,.07);
}
/* Заголовок-кнопка секции: во всю ширину, с шевроном и hover */
.ch-tpl__cat-head {
    display: flex; align-items: center; gap: 7px;
    width: 100%;
    padding: 6px 8px;
    background: transparent; border: none;
    border-radius: 7px;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease;
}
.ch-tpl__cat-head:hover { background: var(--fr-slate-100); }
.ch-tpl__cat-chevron {
    flex-shrink: 0;
    color: #9aa0b0;
    transition: transform .18s ease, color .15s ease;
}
.ch-tpl__cat--open .ch-tpl__cat-chevron { transform: rotate(90deg); }
.ch-tpl__cat-head:hover .ch-tpl__cat-chevron { color: #5c6172; }
.ch-tpl__cat-icon { flex-shrink: 0; }
.ch-tpl__cat-name { font: 600 11px var(--font-ui); color: #23252e; }
.ch-tpl__cat-count {
    margin-left: auto;
    font: 600 10px var(--font-ui); color: #b3b8c6;
    font-variant-numeric: tabular-nums;
}
/* Контейнер элементов категории — спокойный вертикальный ритм */
.ch-tpl__cat-items {
    display: flex; flex-direction: column; gap: 1px;
    padding-bottom: 2px;
}
.ch-tpl__item {
    display: block; width: 100%;
    text-align: left;
    background: transparent; border: none;
    padding: 7px 10px 7px 32px;
    border-radius: 8px;
    font: 500 12px/1.35 var(--font-ui);
    color: #5c6172; cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background .15s ease, color .15s ease;
}
.ch-tpl__item:hover { background: var(--fr-slate-100); color: #23252e; }

/* Свёрнутый рейл иконок */
.ch-tpl__rail {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    padding: 12px 0;
    background: var(--fr-panel-bg);
    border: 1px solid var(--fr-panel-border);
    box-shadow: var(--fr-panel-shadow);
    border-radius: 16px;
}
.ch-tpl__rail-cats { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ch-tpl__rail-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: none; border-radius: 10px;
    background: transparent; color: #5c6172; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ch-tpl__rail-btn:hover { background: var(--fr-slate-100); color: #23252e; }
.ch-tpl__rail-btn--accent { color: var(--fr-blue-500); }

/* На узких экранах прячем панель шаблонов (как прочие боковые) */@media (max-width: 1400px) {
.ch-tpl { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ПУСТОЙ ЭКРАН — hero: орб + приветствие (как в макете)
   ══════════════════════════════════════════════════════════════════════════ */
.ch__empty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    min-height: min(62vh, 560px);
    text-align: center;
    padding: 24px 16px;
}
.ch__empty-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: relative;
}
/* Контейнер живой сферы-ассистента (глаза следят за курсором).
   Сам шар рисует ChatBotSphereInner — здесь только размер, центровка и ореол. */
.ch__empty-orb {
    width: 128px; height: 128px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Базовый .ch-bot-container — 56px (размер под композером). Для приветственного
   экрана увеличиваем до ~128px: 128/56 ≈ 2.28. Масштабом, а не width/height,
   потому что блики, глаза и частицы внутри заданы в процентах и так остаются
   пропорциональными. */
.ch__empty-orb .ch-bot-container {
    transform: scale(2.28);
    transform-origin: center center;
}
/* Подставка-«пол» уместна в голосовом холсте, но не под заголовком приветствия. */
.ch__empty-orb .ch-bot-floor { display: none; }
.ch__empty-orb::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 320px; height: 320px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -1;
    background: radial-gradient(circle, rgba(46,107,255,.22) 0%, rgba(8,184,212,.12) 40%, transparent 70%);
    pointer-events: none;
}
/* Трёхмерный персонаж (React-клиент): в кадре не только шар, но и ладони с
   левитационной подушкой, поэтому бокс заметно больше сферы. Ореол ::after
   остаётся общим — он рисуется от центра и от размера бокса не зависит. */
.ch__empty-orb--3d { width: 268px; height: 252px; }
.ch__empty-orb--3d .ch__bot3d { width: 100%; height: 100%; }
.ch__bot3d > canvas { display: block; width: 100%; height: 100%; }

.ch__empty-title {
    margin: 0;
    font: 700 30px/1.15 var(--font-display);
    letter-spacing: -0.02em;
    color: #23252e;
    background: linear-gradient(120deg, var(--fr-blue-600), var(--fr-cyan-700));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    max-width: 640px;
}
.ch__empty-sub {
    margin: 0;
    font: 500 15px/1.5 var(--font-ui);
    color: var(--fr-slate-500);
    max-width: 460px;
}

/* ── Стартовые чипы ───────────────────────────────────────────────────────── */
.ch__chip {
    background: var(--fr-slate-0);
    border: 1px solid var(--fr-slate-200);
    color: #23252e;
    box-shadow: var(--fr-field-shadow);
    border-radius: 999px;
}
.ch__chip:hover {
    border-color: var(--fr-blue-200);
    background: var(--fr-blue-25);
    color: var(--fr-blue-600);
}

/* ══════════════════════════════════════════════════════════════════════════
   ПРАВЫЙ САЙДБАР — карточки «Прогресс» и «Артефакты» (по макету)
   Компактные карточки не растягиваются; серединная (Агенты/Workflow) растёт.
   ══════════════════════════════════════════════════════════════════════════ */
.ch__sidebar-right > .ch__progress-card,
.ch__sidebar-right > .ch__artifacts-card {
    flex: 0 0 auto;
    min-height: 0;
}

/* Баланс правого сайдбара: карточки размерятся по контенту, «Агенты/Workflow» и
   локальные агенты ограничены по высоте с внутренним скроллом (иначе одна карточка
   занимала бы почти всю колонку). При переполнении скроллится сам сайдбар — панели
   выглядят пропорционально. */
.ch__sidebar-right {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--fr-slate-300) transparent;
}
.ch__sidebar-right::-webkit-scrollbar { width: 5px; }
.ch__sidebar-right::-webkit-scrollbar-track { background: transparent; }
.ch__sidebar-right::-webkit-scrollbar-thumb { background: var(--fr-slate-300); border-radius: 3px; }

.ch__sidebar-right > .ch__agents-card,
.ch__sidebar-right > .ch__local-agents-card {
    flex: 0 1 auto;
    min-height: 0;
}
.ch__agents-card .ch__agents-scroll { max-height: 40vh; }
.ch__local-agents-card .ch__agents-scroll { max-height: 22vh; }

/* ── Карточка «Прогресс» ──────────────────────────────────────────────────── */
.ch__progress-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px 12px;
}
.ch__progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ch__progress-title {
    margin: 0;
    font: 600 13px/1.2 var(--font-display);
    color: #23252e;
}
/* Бейдж «Шаг N из M» — синий pill */
.ch__progress-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--fr-blue-50);
    color: var(--fr-blue-600);
    font: 600 10.5px var(--font-ui);
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Полоса прогресса */
.ch__progress-bar {
    height: 5px;
    border-radius: 999px;
    background: var(--fr-slate-200);
    overflow: hidden;
}
.ch__progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--fr-blue-500);
    transition: width .35s cubic-bezier(.22,1,.36,1);
}
/* Компактная экономия в статус-карточке (вместо панели со столбиками) */
/* Экономия — свёрнутый зелёный чип, раскрывается вниз по клику (появляется после решения задачи) */
.ch__progress-save {
    margin-top: 10px;
    border-radius: 10px;
    background: linear-gradient(180deg, #f3fdf7, var(--fr-green-100));
    border: 1px solid rgba(34, 197, 94, .28);
    overflow: hidden;
    animation: ch-save-pop .22s cubic-bezier(.22, 1, .36, 1);
}
@keyframes ch-save-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ch__progress-save-head {
    display: flex; align-items: center; gap: 7px;
    width: 100%;
    padding: 8px 10px;
    background: none; border: none; cursor: pointer;
    font: 600 12px var(--font-ui); color: #2f6a45;
    text-align: left;
}
.ch__progress-save-head:hover { background: rgba(34, 197, 94, .07); }
.ch__progress-save-ico { color: var(--fr-green-700); display: inline-flex; flex-shrink: 0; }
.ch__progress-save-title { font-weight: 600; }
.ch__progress-save-badge {
    margin-left: 4px; font-weight: 700; color: var(--fr-green-700);
    font-variant-numeric: tabular-nums;
}
.ch__progress-save-chev { margin-left: auto; color: var(--fr-green-700); flex-shrink: 0; transition: transform .2s ease; }
.ch__progress-save--open .ch__progress-save-chev { transform: rotate(180deg); }
.ch__progress-save-body {
    padding: 0 10px 9px 30px;
    font: 500 11px/1.4 var(--font-ui); color: #2f6a45;
    font-variant-numeric: tabular-nums;
    animation: ch-save-slide .2s ease;
}
@keyframes ch-save-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Список шагов */
.ch__progress-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ch__progress-step {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 500 12px var(--font-ui);
}
/* Маркер-кружок слева (галочка / точка / пустой ободок) */
.ch__progress-marker {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.ch__progress-step--done .ch__progress-marker {
    background: var(--fr-green-100);
    color: var(--fr-green-700);
}
.ch__progress-step--active .ch__progress-marker,
.ch__progress-step--running .ch__progress-marker {
    background: var(--fr-blue-50);
    border: 2px solid var(--fr-blue-200);
}
.ch__progress-step--active .ch__progress-dot,
.ch__progress-step--running .ch__progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fr-blue-500);
    box-shadow: 0 0 0 3px rgba(46,107,255,.15);
    animation: ch-progress-pulse 1.1s ease-in-out infinite;
}
@keyframes ch-progress-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.ch__progress-step--pending .ch__progress-marker {
    border: 2px solid var(--fr-slate-300);
    background: transparent;
}
/* Название шага */
.ch__progress-step-name {
    flex: 1;
    min-width: 0;
    color: #3a3f4d;
    line-height: 1.3;
}
.ch__progress-step--done .ch__progress-step-name {
    color: var(--fr-slate-300);
    text-decoration: line-through;
}
.ch__progress-step--active .ch__progress-step-name,
.ch__progress-step--running .ch__progress-step-name {
    color: #23252e;
    font-weight: 600;
}
.ch__progress-step--pending .ch__progress-step-name {
    color: var(--fr-slate-500);
}
/* Таймер-заглушка справа у активного шага */
.ch__progress-timer {
    flex-shrink: 0;
    font: 600 10.5px var(--font-ui);
    color: var(--fr-blue-600);
    font-variant-numeric: tabular-nums;
}

/* ── Workflow: две кнопки в ряд (Запустить / Правка) ──────────────────────── */
.ch__wf-actions {
    display: flex;
    gap: 6px;
}
.ch__wf-actions .ch__wf-apply-btn {
    flex: 1 1 auto;
    width: auto;
}
/* «Правка» — светлая outline-кнопка (пока неактивна: маршрута /flows нет) */
.ch__wf-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid var(--fr-slate-200);
    border-radius: 8px;
    background: var(--fr-slate-0);
    color: var(--ch-title);
    box-shadow: var(--fr-field-shadow);
    font: 600 var(--ts-xs) var(--font-ui);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.ch__wf-edit-btn:hover:not(:disabled) {
    background: var(--fr-slate-50);
    border-color: var(--fr-slate-300);
}
.ch__wf-edit-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* ── Карточка «Артефакты» ─────────────────────────────────────────────────── */
.ch__artifacts-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 10px;
}
.ch__artifacts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}
.ch__artifacts-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    font: 600 13px/1.2 var(--font-display);
    color: #23252e;
}
.ch__artifacts-title svg { color: var(--fr-blue-500); }
/* Список артефактов — компактный, со своим скроллом при переполнении */
.ch__artifacts-card .ch__agents-scroll {
    flex: 0 1 auto;
    max-height: 176px;
    padding: 0;
}
.ch__artifacts-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ch__artifact-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 7px;
    border-radius: 9px;
    border: 1px solid transparent;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.ch__artifact-item:hover {
    background: var(--fr-slate-50);
    border-color: var(--fr-slate-200);
}
/* Квадратная иконка типа файла */
.ch__artifact-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ch__artifact-icon--xlsx  { background: var(--fr-green-100); color: var(--fr-green-700); }
.ch__artifact-icon--docx  { background: var(--fr-blue-50);   color: var(--fr-blue-600); }
.ch__artifact-icon--pdf   { background: var(--fr-sun-100);   color: var(--fr-sun-700); }
.ch__artifact-icon--image { background: color-mix(in srgb, var(--fr-sky-500) 16%, #fff); color: var(--fr-sky-500); }
.ch__artifact-icon--file  { background: var(--fr-slate-100); color: var(--fr-slate-500); }
.ch__artifact-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ch__artifact-name {
    font: 600 12px var(--font-ui);
    color: #23252e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ch__artifact-meta {
    font: 500 10.5px var(--font-ui);
    color: var(--fr-slate-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Кнопка-иконка скачивания */
.ch__artifact-dl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    color: var(--fr-slate-500);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.ch__artifact-dl:hover {
    background: var(--fr-blue-50);
    color: var(--fr-blue-600);
}
/* Удаление файла — та же геометрия, что у скачивания, но красный акцент на hover.
   В покое приглушена, чтобы не спорить с основным действием (скачать). */
.ch__artifact-del {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--fr-slate-400, #9aa3b8);
    cursor: pointer;
    opacity: .75;
    transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
.ch__artifact-del:hover {
    background: #fee9e9;
    color: #d1343d;
    opacity: 1;
}
.ch__artifact-del:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(209, 52, 61, .30);
}

/* «Скачать всё» — светлая field-кнопка на всю ширину */
.ch__artifacts-all {
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Категории артефактов: секции-каталог ─────────────────────────────────── */
.ch__artifact-group + .ch__artifact-group { margin-top: 10px; }
.ch__artifact-group-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 2px 5px;
}
.ch__artifact-group-dot {
    width: 8px; height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
}
.ch__artifact-group-label {
    font: 700 10.5px/1 var(--font-ui);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fr-slate-500);
}
.ch__artifact-group-count {
    font: 700 10px/1 var(--font-ui);
    color: var(--fr-slate-400, #9aa3b8);
    background: var(--fr-slate-100);
    border-radius: 20px;
    padding: 2px 6px;
}
/* Цветной квадратик категории повторяет палитру иконок (--xlsx/--docx/…). */
.ch__artifact-group-dot.ch__artifact-icon--pptx { background: color-mix(in srgb, var(--fr-orange-500, #f5822b) 70%, #fff); }
.ch__artifact-group-dot.ch__artifact-icon--code { background: color-mix(in srgb, #7c5cff 70%, #fff); }
.ch__artifact-group-dot.ch__artifact-icon--audio { background: color-mix(in srgb, #17b8a6 70%, #fff); }

/* ── Превью-миниатюра изображения в строке артефакта ──────────────────────── */
.ch__artifact-thumb {
    width: 34px; height: 34px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--fr-slate-200);
    border-radius: 8px;
    overflow: hidden;
    background: var(--fr-slate-50);
    cursor: zoom-in;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.ch__artifact-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch__artifact-thumb:hover { border-color: var(--fr-blue-400, #6aa0ff); box-shadow: 0 2px 8px rgba(46,107,255,.18); transform: scale(1.04); }
.ch__artifact-thumb:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(46,107,255,.35); }

/* Иконка «Код», «Презентация» и «Звук» — тон под категорию (плоские квадратные плитки) */
.ch__artifact-icon--pptx  { background: color-mix(in srgb, var(--fr-orange-500, #f5822b) 15%, #fff); color: var(--fr-orange-500, #f5822b); }
.ch__artifact-icon--code  { background: color-mix(in srgb, #7c5cff 14%, #fff); color: #7c5cff; }
.ch__artifact-icon--audio { background: color-mix(in srgb, #17b8a6 14%, #fff); color: #0f8f81; }

/* Встроенный плеер под репликой: запись слушают, не открывая редактор. */
.ch__attach-audio {
    width: 100%;
    max-width: 420px;
    height: 34px;
    margin-top: 6px;
    border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   fracLightbox · полноэкранный просмотрщик изображений (зум + правка)
   ══════════════════════════════════════════════════════════════════════════ */
.ch__lightbox {
    position: fixed; inset: 0;
    z-index: 4000;
    display: none;
    flex-direction: column;
    background: rgba(16, 18, 27, .78);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .16s ease;
}
.ch__lightbox--on { opacity: 1; }

/* Верхняя полоса: имя файла слева, закрытие справа. */
.ch__lightbox-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    flex-shrink: 0;
}
.ch__lightbox-title {
    font: 600 13px var(--font-ui);
    color: rgba(255,255,255,.92);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Сцена с изображением. */
.ch__lightbox-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 24px;
}
.ch__lightbox-stage img {
    max-width: 92%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0,0,0,.5);
    transition: transform .08s ease-out, filter .12s ease;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

/* Плавающий док инструментов внизу по центру. */
.ch__lightbox-dock {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    margin: 14px auto 20px;
    padding: 6px;
    background: rgba(28, 30, 42, .72);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.4);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(100vw - 32px);
}
.ch__lb-group {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px;
}
.ch__lb-group + .ch__lb-group { border-left: 1px solid rgba(255,255,255,.12); }
.ch__lb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: rgba(255,255,255,.82);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.ch__lb-btn svg { width: 18px; height: 18px; }
.ch__lb-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.ch__lb-btn--on { background: var(--fr-blue-500, #2e6bff); color: #fff; }
.ch__lb-btn--on:hover { background: var(--fr-blue-600, #2159e4); }
.ch__lb-close { color: rgba(255,255,255,.75); }
.ch__lb-close:hover { background: rgba(255,255,255,.14); color: #fff; }
.ch__lightbox-zoom {
    min-width: 44px;
    text-align: center;
    font: 600 12px var(--font-ui);
    color: rgba(255,255,255,.82);
    user-select: none;
}

/* Панель коррекции цвета — выезжает над доком по кнопке «Коррекция». */
.ch__lightbox-adjust {
    display: none;
    flex-direction: column;
    gap: 9px;
    align-self: center;
    width: min(340px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 14px 16px;
    background: rgba(28, 30, 42, .82);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.4);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}
.ch__lightbox--adj .ch__lightbox-adjust { display: flex; }
.ch__lb-adj {
    display: grid;
    grid-template-columns: 92px 1fr 42px;
    align-items: center;
    gap: 10px;
    font: 600 11.5px var(--font-ui);
    color: rgba(255,255,255,.82);
}
.ch__lb-adj b { text-align: right; color: rgba(255,255,255,.6); font-weight: 600; }
.ch__lb-adj input[type=range] {
    -webkit-appearance: none; appearance: none;
    height: 4px; border-radius: 3px;
    background: rgba(255,255,255,.22);
    cursor: pointer;
}
.ch__lb-adj input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid var(--fr-blue-500, #2e6bff);
    cursor: pointer;
}
.ch__lb-adj input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid var(--fr-blue-500, #2e6bff);
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   ШАБЛОНЫ · строка элемента с иконкой-ботом + счётчиком агентов
   (переопределяет базовый .ch-tpl__item выше: block → flex)
   ══════════════════════════════════════════════════════════════════════════ */
.ch-tpl__item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ch-tpl__item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ch-tpl__item-bots {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    font: 600 9.5px var(--font-ui);
    color: #b8bccb;                 /* приглушённый бейдж-счётчик — менее шумный */
    font-variant-numeric: tabular-nums;
    opacity: .8;
    transition: color .15s ease, opacity .15s ease;
}
.ch-tpl__item-bots svg { width: 10px; height: 10px; opacity: .85; }
.ch-tpl__item:hover .ch-tpl__item-bots { color: var(--fr-slate-500); opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   ШАБЛОНЫ · hover-поповер (создаётся JS в document.body, поэтому position:fixed)
   ══════════════════════════════════════════════════════════════════════════ */
.ch-tpl__pop {
    position: fixed;
    z-index: 80;
    width: 264px;
    background: var(--fr-slate-0);
    border: 1px solid var(--fr-slate-200);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(90, 104, 150, .22);
    padding: 14px;
    display: none;                 /* переключается из JS */
    animation: ch-tpl-pop-in .16s ease-out;
}
@keyframes ch-tpl-pop-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}
.ch-tpl__pop-title {
    font: 600 13px var(--font-display);
    color: #23252e;
}
.ch-tpl__pop-desc {
    font: 400 11.5px/1.55 var(--font-ui);
    color: var(--fr-slate-500);
    margin-top: 5px;
}
.ch-tpl__pop-sub {
    font: 600 9.5px var(--font-ui);
    letter-spacing: .07em;
    color: #9aa0b0;
    margin-top: 11px;
}
.ch-tpl__pop-agent {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.ch-tpl__pop-agent-n {
    width: 20px; height: 20px;
    border-radius: 6px;
    background: var(--fr-blue-50);
    color: var(--fr-blue-600);
    font: 700 9.5px var(--font-ui);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ch-tpl__pop-agent-name {
    font: 500 11.5px var(--font-ui);
    color: #3a3f4d;
}
.ch-tpl__pop-conns {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}
.ch-tpl__pop-conn {
    padding: 3px 9px;
    border: 1px solid var(--fr-slate-200);
    border-radius: 999px;
    font: 500 10.5px var(--font-ui);
    color: var(--fr-slate-500);
}
.ch-tpl__pop-run {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 13px;
    padding: 9px;
    border-radius: 10px;
    border: var(--fr-metal-border);
    background: var(--fr-metal-bg);
    box-shadow: var(--fr-metal-shadow);
    color: #fff;
    text-shadow: var(--fr-metal-text-shadow);
    font: 600 12px var(--font-ui);
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   Hover-микроанимация акцентных/металлических кнопок (как в макете).
   Список кнопок точечный — .ch-tpl__item (список) сознательно НЕ включён.
   ══════════════════════════════════════════════════════════════════════════ */
.ch__action-btn,
.ch__send-btn,
.ch__wf-apply-btn,
.ch-tpl__pop-run {
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.ch__action-btn:hover:not(:disabled),
.ch__send-btn:hover:not(:disabled),
.ch__wf-apply-btn:hover:not(:disabled),
.ch-tpl__pop-run:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.05);
}
.ch__action-btn:active:not(:disabled),
.ch__send-btn:active:not(:disabled),
.ch__wf-apply-btn:active:not(:disabled),
.ch-tpl__pop-run:active:not(:disabled) {
    transform: translateY(1px);
    filter: brightness(1);
}

/* ══════════════════════════════════════════════════════════════════════════
   МОДАЛКА «НАСТРОЙКИ» (Qwen-стиль: слева навигация, справа контент).
   Открывается из меню user-pill внизу панели «Чаты».
   ══════════════════════════════════════════════════════════════════════════ */
.ch-set__overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 26, 40, .42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    outline: none;
    animation: ch-set-fade .16s ease;
}

.ch-set {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 720px;
    max-width: 94vw;
    height: min(560px, 86vh);
    background: var(--fr-slate-0);
    border: 1px solid var(--fr-slate-200);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(20, 26, 40, .28);
    overflow: hidden;
    animation: ch-set-slide-up .22s cubic-bezier(.22, 1, .36, 1);
}

/* Крестик закрытия — вверху справа диалога */
.ch-set__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--fr-slate-500);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ch-set__close:hover { background: var(--fr-slate-100); color: var(--fr-slate-700); }

/* ── Навигация по секциям (слева) ── */
.ch-set__nav {
    flex-shrink: 0;
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 10px;
    border-right: 1px solid var(--fr-slate-200);
    background: var(--fr-slate-50);
}
.ch-set__nav-title {
    padding: 4px 8px 12px;
    font: 700 15px var(--font-display);
    color: var(--fr-slate-900);
    letter-spacing: -0.01em;
}
.ch-set__nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--fr-slate-500);
    font: 600 13px var(--font-ui);
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ch-set__nav-item svg { flex-shrink: 0; }
.ch-set__nav-item:hover { background: var(--fr-slate-100); color: var(--fr-slate-700); }
.ch-set__nav-item--active,
.ch-set__nav-item--active:hover {
    background: var(--fr-blue-50);
    color: var(--fr-blue-600);
}

/* ── Контент активной секции (справа) ── */
.ch-set__body {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 22px 26px 26px;
    scrollbar-width: thin;
    scrollbar-color: var(--fr-slate-300) transparent;
}
.ch-set__body::-webkit-scrollbar        { width: 6px; }
.ch-set__body::-webkit-scrollbar-thumb  { background: var(--fr-slate-300); border-radius: 6px; }
.ch-set__section-title {
    margin: 0 0 18px;
    font: 700 16px var(--font-display);
    color: var(--fr-slate-900);
    letter-spacing: -0.01em;
}

/* Отступы между блоками секции «Генерация» внутри модалки */
.ch-set__body .ch__sl-group   { margin-bottom: 16px; }
.ch-set__body .ch__sl-metrics { margin: 16px 0; }
.ch-set__body .ch__toggle-row { margin-top: 4px; }

/* ── Настройки на телефоне ──
   Диалог 720px с боковой навигацией 200px на узком экране оставлял под контент ~150px.
   На мобиле разворачиваем модалку почти на весь экран, а навигацию превращаем в верхний
   ряд вкладок с горизонтальной прокруткой. */@media (max-width: 640px) {
.ch-set {
        flex-direction: column;
        width: 100%;
        max-width: 100vw;
        height: 100dvh;          /* учитывает адресную строку мобильных браузеров */
        border-radius: 0;
        border: none;
    }
    .ch-set__nav {
        width: 100%;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 50px 10px 12px;   /* справа — место под крестик закрытия */
        border-right: none;
        border-bottom: 1px solid var(--fr-slate-200);
    }
    .ch-set__nav-title { display: none; }   /* заголовок «Настройки» ни к чему в ряду вкладок */
    .ch-set__nav-item {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 9px 14px;       /* комфортный тач-таргет */
    }
    .ch-set__body { padding: 18px 16px 40px; }
    .ch-set__close { top: 14px; right: 12px; width: 34px; height: 34px; }
}

/* Анимации модалки */
@keyframes ch-set-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ch-set-slide-up {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* ── MCP-секция (перенесена из локального <style> ChatRightSidebar) ── */
.ch__mcp-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fr-slate-200);
}
.ch__mcp-section--modal { margin-top: 0; padding-top: 0; border-top: none; }
.ch__mcp-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--fr-slate-700);
}
.ch__mcp-section-title {
    margin: 0;
    font: 600 12px var(--font-ui);
    color: var(--fr-slate-700);
    letter-spacing: 0.02em;
}
.ch__mcp-form { display: flex; flex-direction: column; gap: 8px; }
.ch__mcp-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--fr-slate-200);
    border-radius: 8px;
    background: var(--fr-slate-0);
    color: var(--fr-slate-900);
    font: 400 12px var(--font-ui);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ch__mcp-input::placeholder { color: var(--fr-slate-500); }
.ch__mcp-input:focus {
    border-color: var(--fr-blue-200);
    box-shadow: 0 0 0 3px rgba(46, 107, 255, .12);
}
.ch__mcp-actions { display: flex; gap: 8px; }
.ch__mcp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
   USER-PILL (футер панели «Чаты») + всплывающее меню профиля.
   ══════════════════════════════════════════════════════════════════════════ */
.ch__user-wrap {
    position: relative;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 10px;
}

.ch__user-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--fr-slate-200);
    border-radius: 12px;
    background: var(--fr-slate-0);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.ch__user-pill:hover { background: var(--fr-slate-100); }

.ch__user-pill-av {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;   /* фото обрезается по кругу */
    background: radial-gradient(120% 120% at 30% 20%, var(--fr-cyan-500), var(--fr-blue-500));
    color: #fff;
    font: 700 13px var(--font-display);
    text-transform: uppercase;
}

.ch__user-pill-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    font: 600 13px var(--font-ui);
    color: var(--fr-slate-900);
}
.ch__user-pill-chev { flex-shrink: 0; color: var(--fr-slate-500); }

/* Подложки под меню больше нет: она лежала внутри .ch__card, а тот несёт
   backdrop-filter — и «position: fixed; inset: 0» разворачивался не по экрану, а по
   карточке. Клик мимо ловит uiKit.outsideWatch на самом документе. */

/* Меню выезжает ВВЕРХ над пилюлей */
.ch__user-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 8px;
    right: 8px;
    z-index: 41;
    padding: 7px;
    border: 1px solid var(--fr-slate-200);
    border-radius: 15px;
    background: var(--fr-slate-0);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 16px 40px rgba(20, 26, 40, .20);
    animation: ch-set-slide-up .16s ease;
}
/* Шапка = мини-карточка аккаунта с лёгкой заливкой */
.ch__user-menu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 11px;
    background: linear-gradient(180deg, var(--fr-slate-50), #fff);
    border: 1px solid var(--fr-slate-200);
}
/* Аватар в шапке — крупнее для иерархии */
.ch__user-menu-head .ch__user-pill-av { width: 36px; height: 36px; font-size: 15px; }
/* Фото пользователя вместо инициала — заполняет кружок целиком. */
.ch__user-pill-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch__user-menu-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ch__user-menu-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: 700 13.5px var(--font-ui);
    color: var(--fr-slate-900);
}
.ch__user-menu-email {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: 500 11px var(--font-ui);
    color: var(--fr-slate-500);
}
.ch__user-menu-divider {
    height: 1px;
    margin: 5px 4px;
    background: var(--fr-slate-200);
}
.ch__user-menu-item {
    display: flex;
    align-items: center;
    /* Явно: у <button> с display:flex Chrome по умолчанию центрирует контент, а у <a> — нет.
       Без этого «Настройки» (button) уезжали к центру, а «Профиль» (ссылка) стоял слева. */
    justify-content: flex-start;
    gap: 11px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--fr-slate-700);
    font: 600 13px var(--font-ui);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ch__user-menu-item svg { flex-shrink: 0; color: var(--fr-slate-500); transition: color .15s ease; }
.ch__user-menu-item:hover { background: var(--fr-blue-25); color: var(--fr-blue-700); }
.ch__user-menu-item:hover svg { color: var(--fr-blue-600); }
.ch__user-menu-item--danger { color: #d64545; }
.ch__user-menu-item--danger svg { color: #d64545; }
.ch__user-menu-item--danger:hover { background: #fdecec; color: #c0392b; }
.ch__user-menu-item--danger:hover svg { color: #c0392b; }

/* ═══════════════════════════════════════════════════════════════════════════
   Панель «Прогресс»: цены шагов + раскрытие в детальный холст
   (компактная карточка + оверлей-модалка с экономикой и графиком)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Цена шага в компактной карточке (справа, перед таймером) */
.ch__progress-step-cost {
    flex-shrink: 0;
    margin-left: auto;
    font: 600 10.5px var(--font-ui);
    color: var(--fr-slate-500);
    font-variant-numeric: tabular-nums;
}
/* Если у активного шага есть и цена, и таймер — отделяем таймер небольшим отступом */
.ch__progress-step-cost + .ch__progress-timer { margin-left: 8px; }

/* Группируем бейдж «Шаг N из M» и кнопку-раскрытие в правой части шапки */
.ch__progress-header .ch__progress-badge { margin-left: auto; }

/* Кнопка-раскрытие в шапке «Прогресс» (иконка «развернуть в углы») */
.ch__progress-expand {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border: none; border-radius: 8px;
    background: transparent; color: var(--fr-slate-500); cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.ch__progress-expand:hover { background: var(--fr-slate-100); color: #23252e; }

/* ── Оверлей детального холста (прижат к верх-правому углу) ─────────────────── */
.ch__progress-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 250;
    background: rgba(20, 26, 40, .38);
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 78px 24px 24px;
    outline: none;
}
/* Карточка — «вырастает» из верхнего-правого угла */
.ch__progress-detail {
    width: 460px;
    max-width: calc(100vw - 48px);
    max-height: 86vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--fr-slate-200);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(20, 30, 60, .28);
    transform-origin: top right;
    animation: ch-progress-pop .2s cubic-bezier(.22, 1, .36, 1);
}
@keyframes ch-progress-pop {
    from { opacity: 0; transform: scale(.9) translate(14px, -14px); }
    to   { opacity: 1; transform: scale(1) translate(0, 0); }
}
/* Закрытие — «уезжает» обратно в правый верхний угол (в панель «Прогресс») */
.ch__progress-detail--closing {
    animation: ch-progress-unpop .22s cubic-bezier(.4, 0, 1, 1) forwards;
    pointer-events: none;
}
@keyframes ch-progress-unpop {
    from { opacity: 1; transform: scale(1) translate(0, 0); }
    to   { opacity: 0; transform: scale(.3) translate(46px, -46px); }
}
/* Затемнение фона гаснет синхронно с уездом карточки */
.ch__progress-detail-overlay--closing {
    animation: ch-progress-overlay-out .22s ease forwards;
    pointer-events: none;
}
@keyframes ch-progress-overlay-out {
    from { background: rgba(20, 26, 40, .38); }
    to   { background: rgba(20, 26, 40, 0); }
}

/* Шапка детального холста */
.ch__progress-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.ch__progress-detail-titles {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; min-width: 0;
}
.ch__progress-detail-title {
    margin: 0;
    font: 600 15px/1.25 var(--font-display);
    color: #23252e;
}
.ch__progress-detail-badge {
    display: inline-flex; align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--fr-blue-50);
    color: var(--fr-blue-600);
    font: 600 11px var(--font-ui);
    white-space: nowrap;
}
.ch__progress-detail-close {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border: none; border-radius: 9px;
    background: transparent; color: var(--fr-slate-500); cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.ch__progress-detail-close:hover { background: var(--fr-slate-100); color: #23252e; }

/* Детальный список шагов */
.ch__progress-detail-steps {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 12px;
}
.ch__progress-detail-step { display: flex; gap: 11px; align-items: flex-start; }
.ch__progress-detail-marker {
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px; box-sizing: border-box;
}
.ch__progress-detail-step--done .ch__progress-detail-marker {
    background: var(--fr-green-100);
    color: var(--fr-green-700);
}
.ch__progress-detail-step--running .ch__progress-detail-marker {
    background: var(--fr-blue-50);
    border: 2px solid var(--fr-blue-200);
}
.ch__progress-detail-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--fr-blue-500);
    box-shadow: 0 0 0 3px rgba(46, 107, 255, .15);
}
.ch__progress-detail-step--pending .ch__progress-detail-marker {
    border: 2px solid var(--fr-slate-300);
    background: transparent;
}
.ch__progress-detail-step-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}
.ch__progress-detail-step-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.ch__progress-detail-step-name {
    font: 600 12.5px var(--font-ui);
    color: #23252e;
    min-width: 0;
}
.ch__progress-detail-step--done .ch__progress-detail-step-name { color: var(--fr-slate-500); text-decoration: line-through; }
.ch__progress-detail-step-cost {
    flex-shrink: 0;
    font: 600 11px var(--font-ui);
    color: var(--fr-blue-600);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ch__progress-detail-step-purpose {
    font: 500 11px/1.4 var(--font-ui);
    color: var(--fr-slate-500);
}
/* Реальные метрики этапа (качество/скорость/токены/время/модель) */
.ch__progress-detail-step-metrics {
    display: flex; flex-wrap: wrap; gap: 5px 6px;
    margin-top: 5px;
}
.ch__pmetric {
    display: inline-flex; align-items: baseline; gap: 4px;
    padding: 2px 7px;
    border-radius: 7px;
    background: var(--fr-slate-50);
    border: 1px solid var(--fr-slate-200);
    font: 600 10.5px var(--font-ui);
    color: #3a3f4d;
    font-variant-numeric: tabular-nums;
}
.ch__pmetric-k { font-weight: 500; color: var(--fr-slate-500); }
.ch__pmetric--model {
    background: var(--fr-blue-25);
    border-color: var(--fr-blue-100);
    color: var(--fr-blue-700);
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Экономика — три плитки в ряд */
.ch__progress-eco {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.ch__progress-eco-tile {
    display: flex; flex-direction: column; gap: 4px;
    padding: 11px 12px;
    border: 1px solid var(--fr-slate-200);
    border-radius: 13px;
    background: linear-gradient(180deg, #ffffff, var(--fr-slate-50));
    box-shadow: 0 1px 2px rgba(80, 90, 120, .05);
}
.ch__progress-eco-tile--success {
    border-color: rgba(34, 197, 94, .32);
    background: linear-gradient(180deg, #f3fdf7, var(--fr-green-100));
}
.ch__progress-eco-val {
    font: 700 16px var(--font-display);
    color: #23252e;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.ch__progress-eco-tile--success .ch__progress-eco-val { color: var(--fr-green-700); }
.ch__progress-eco-label {
    font: 500 10px var(--font-ui);
    color: var(--fr-slate-500);
    line-height: 1.25;
}

/* Среднее по сборке */
.ch__progress-avg {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--fr-slate-200);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff, var(--fr-slate-50));
}
.ch__progress-avg-label { font: 600 12px var(--font-ui); color: #3a3f4d; }
.ch__progress-avg-val {
    font: 700 14px var(--font-display);
    color: var(--fr-blue-600);
    font-variant-numeric: tabular-nums;
}

/* График MAS vs Монолит (две вертикальные CSS-полосы) */
.ch__progress-bars {
    display: flex; align-items: flex-end; justify-content: center; gap: 34px;
    padding: 28px 14px 12px;
    border: 1px solid var(--fr-slate-200);
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfcfe, #f2f4fa);
}
.ch__progress-bars-col {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    width: 74px;
}
.ch__progress-bars-track {
    position: relative;
    width: 52px; height: 120px;
    display: flex; align-items: flex-end;
    border-radius: 10px 10px 7px 7px;
    background: linear-gradient(180deg, #edf0f6, #e5e9f1);
    box-shadow: inset 0 1px 3px rgba(70, 84, 120, .12);
    overflow: hidden;
}
.ch__progress-bars-fill {
    position: relative;
    width: 100%;
    border-radius: 8px 8px 0 0;
    min-height: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40);
    transition: height .5s cubic-bezier(.22, 1, .36, 1);
}
.ch__progress-bars-fill--mas  { background: linear-gradient(180deg, #4f8bff, #2456e2); }
.ch__progress-bars-fill--mono { background: linear-gradient(180deg, #c7cdda, #a9b0c3); }
.ch__progress-bars-val {
    position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--fr-slate-200);
    box-shadow: 0 2px 6px rgba(70, 84, 120, .14);
    font: 700 10.5px var(--font-ui);
    color: #23252e;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ch__progress-bars-cap {
    font: 600 11px var(--font-ui);
    color: var(--fr-slate-700);
    letter-spacing: .01em;
}

/* Узкие вьюпорты: холст занимает почти всю ширину, отступ сверху меньше */@media (max-width: 767px) {
.ch__progress-detail-overlay { padding: 60px 12px 12px; }
    .ch__progress-detail { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ПРИМИРЕНИЕ light-темы (кофе/золото) с Fractal (синий).
   Приложение работает в data-theme="light" — это кофейно-золотая тема:
   chat-light.css красит чат-элементы через бренд-токены --b-*/--chat-* и бьёт
   Fractal по специфичности ([data-theme="light"] .ch__x). Вместо перекрытия
   десятков селекторов РЕМАППИМ сами токены в синие/нейтральные ЛОКАЛЬНО на .ch —
   и все кофейные правила chat-light становятся Fractal-синими (в т.ч. кнопка
   отправки с !important: она берёт значение из --chat-btn-bg).
   ══════════════════════════════════════════════════════════════════════════ */
.ch,
.ch-page {
    /* Золото → синий Fractal */
    --b-gold:        var(--fr-blue-500);
    --b-gold-dark:   var(--fr-blue-700);
    --b-gold-rgb:    46, 107, 255;
    --b-grad-gold:   linear-gradient(180deg, var(--fr-blue-500), var(--fr-blue-600));
    --b-grad-coffee: var(--fr-metal-bg);

    /* Кофейные тексты → слейт-иерархия Fractal; тени — нейтральные, не кофе */
    --b-coffee:       #23252e;
    --b-coffee-mid:   #3a3f4d;
    --b-coffee-soft:  #5c6172;
    --b-coffee-faint: #9aa0b0;
    --b-coffee-rgb:   90, 100, 130;

    /* Поверхности/линии/тени → белый/слейт (убираем полупрозрачность и кремовость) */
    --b-paper-hi:  #ffffff;
    --b-paper:     var(--fr-slate-50);
    --b-cream:     var(--fr-slate-50);
    --b-line:      var(--fr-slate-200);
    --b-line-hi:   var(--fr-slate-300);
    --b-shadow-sm: 0 1px 3px rgba(90, 100, 130, .12);
    --b-shadow-md: 0 2px 8px rgba(90, 100, 130, .14);
    --b-shadow-lg: 0 12px 32px rgba(20, 26, 40, .18);

    /* Композер/кнопки/стекло чата (--chat-*) → синий металлик + плотный белый */
    --chat-btn-bg:     var(--fr-metal-bg);
    --chat-btn-text:   #ffffff;
    --chat-btn-shadow: rgba(10, 73, 160, .22);
    --chat-accent:     var(--fr-blue-600);
    --chat-accent-rgb: 46, 107, 255;
    --chat-glass-bg:   #ffffff;
    --chat-glass-bd:   var(--fr-slate-200);
    --chat-surface:    #ffffff;
    --chat-track:      rgba(46, 107, 255, .10);
    --mode-accent:     var(--fr-blue-600);

    /* Генеративный UI — ВЕСЬ набор --cur-*, а не только --cur.
       Раньше перекрывался лишь --cur, а полосы/заливки/тени карточек брались из
       темы (индиго #4f46e5 → #818cf8) — отсюда фиолетовые заголовки и кнопки
       посреди синего интерфейса. */
    --cur:               #2e6bff;
    --cur-bar:           linear-gradient(90deg, #2159e4, #4d85ff);
    --cur-bg:            rgba(46, 107, 255, .10);
    --cur-border:        rgba(46, 107, 255, .22);
    --cur-hover-border:  rgba(46, 107, 255, .35);
    --cur-hover-shadow:  rgba(46, 107, 255, .18);
    --rgb-indigo:        46, 107, 255;
}

/* ══════════════════════════════════════════════════════════════════════════
   КНОПКИ ЧАТА — единая система (последний слой: перекрывает и базу, и тему)

   Три уровня вместо трёх разных внешностей:
     • primary   — «Новый чат», отправка: брендовый синий с объёмом;
     • secondary — «Запросить под свою задачу»: белая с акцентом на hover;
     • у всех    — одинаковые hover / active / focus-visible.

   Почему не через --chat-btn-bg: тема (chat-light) красит эти же кнопки своими
   кофейными токенами, а ремап --b-grad-coffee → тёмный металлик оставлял тёмный
   фон под ТЁМНЫМ текстом (кнопка «Запросить под свою задачу» была нечитаемой).
   Поэтому цвета здесь литеральные, а не через переменные темы.
   ══════════════════════════════════════════════════════════════════════════ */
.ch__action-btn,
.ch__send-btn,
.ch__wf-apply-btn,
.ch-tpl__pop-run {
    background: linear-gradient(180deg, #4d85ff 0%, #2e6bff 52%, #2159e4 100%) !important;
    color: #fff !important;
    border: 1px solid #1f4ecb !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .30) inset,
        0 1px 2px rgba(16, 38, 90, .20),
        0 6px 16px -7px rgba(46, 107, 255, .70) !important;
    text-shadow: 0 1px 1px rgba(12, 34, 84, .30);
    font-weight: 600;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.ch__action-btn:hover:not(:disabled),
.ch__send-btn:hover:not(:disabled),
.ch__wf-apply-btn:hover:not(:disabled),
.ch-tpl__pop-run:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .34) inset,
        0 2px 4px rgba(16, 38, 90, .18),
        0 12px 24px -8px rgba(46, 107, 255, .78) !important;
}
/* Нажатие: кнопка «проваливается» — тень внутрь, внешнее свечение гаснет. */
.ch__action-btn:active:not(:disabled),
.ch__send-btn:active:not(:disabled),
.ch__wf-apply-btn:active:not(:disabled),
.ch-tpl__pop-run:active:not(:disabled) {
    transform: translateY(1px);
    filter: brightness(.98);
    box-shadow:
        0 2px 5px rgba(16, 38, 90, .28) inset,
        0 1px 2px rgba(16, 38, 90, .16) !important;
}
.ch__action-btn:disabled,
.ch__send-btn:disabled,
.ch__wf-apply-btn:disabled {
    opacity: .45;
    filter: grayscale(.35);
    box-shadow: none !important;
    transform: none;
}

/* «Остановить» — та же кнопка на месте «Отправить», пока идёт ход.
   Красный металлик той же формы: место и размер не меняются (кнопка не «прыгает»),
   а цвет однозначно говорит, что действие обратное отправке. Идёт ПОСЛЕ базовых
   правил .ch__send-btn — при равной специфичности выигрывает последнее. */
.ch__send-btn--stop {
    background: linear-gradient(180deg, #ff6a5e 0%, #e5442f 52%, #c9331f 100%) !important;
    border: 1px solid #a82a19 !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .28) inset,
        0 1px 2px rgba(90, 20, 12, .22),
        0 6px 16px -7px rgba(229, 68, 47, .70) !important;
    text-shadow: 0 1px 1px rgba(84, 18, 10, .30);
}
.ch__send-btn--stop:hover:not(:disabled) {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .32) inset,
        0 2px 4px rgba(90, 20, 12, .20),
        0 12px 24px -8px rgba(229, 68, 47, .78) !important;
}
.ch__send-btn--stop:focus-visible {
    box-shadow: 0 0 0 3px rgba(229, 68, 47, .40) !important;
}

/* Клавиатурная доступность: раньше кольца фокуса не было ни у одной кнопки. */
.ch__action-btn:focus-visible,
.ch__send-btn:focus-visible,
.ch__wf-apply-btn:focus-visible,
.ch-tpl__pop-run:focus-visible,
.ch__agents-cta-btn:focus-visible,
.ch__chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 107, 255, .38) !important;
}

/* ── Вторичная: «Запросить под свою задачу» ───────────────────────────────── */
.ch__agents-cta-btn,
[data-theme="light"] .ch__agents-cta-btn {
    background: #ffffff !important;
    color: #3d465c !important;
    border: 1px solid #dbe1ec !important;
    box-shadow: 0 1px 2px rgba(90, 100, 130, .10) !important;
    font-weight: 600;
    transition: color .16s ease, border-color .16s ease, background .16s ease,
                transform .16s ease, box-shadow .16s ease;
}
.ch__agents-cta-btn:hover:not(:disabled),
[data-theme="light"] .ch__agents-cta-btn:hover:not(:disabled) {
    background: #f5f8ff !important;
    color: #2159e4 !important;
    border-color: #9dbaff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(46, 107, 255, .40) !important;
}
.ch__agents-cta-btn:active:not(:disabled) {
    transform: translateY(1px);
    background: #eaf1ff !important;
    box-shadow: 0 1px 2px rgba(46, 107, 255, .22) inset !important;
}

/* ── Ссылка на файл в ответе агента ────────────────────────────────────────
   Модель отдаёт обычную markdown-ссылку; ChatFormatting превращает её в плашку
   с бейджем типа. Раньше в тексте висел голый URL вида
   /api/chat-media/{guid}/upload_{guid}.docx — нечитаемый и ломающий вёрстку. */
.ch__file-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 10px 6px 6px;
    margin: 2px 0;
    border: 1px solid #dbe1ec;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(90, 100, 130, .10);
    text-decoration: none !important;
    color: #23252e !important;
    vertical-align: middle;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ch__file-link:hover {
    border-color: #9dbaff;
    box-shadow: 0 4px 12px -4px rgba(46, 107, 255, .40);
    transform: translateY(-1px);
}
.ch__file-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 107, 255, .38);
}
/* Бейдж с расширением — он же цветовой код типа файла. */
.ch__file-link__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 3px 6px;
    border-radius: 7px;
    font: 700 10px/1 var(--font-ui);
    letter-spacing: .04em;
    color: #fff;
    background: #7a869f;
}
.ch__file-link--docx  .ch__file-link__badge { background: #2563eb; }
.ch__file-link--xlsx  .ch__file-link__badge { background: #059669; }
.ch__file-link--pptx  .ch__file-link__badge { background: #ea580c; }
.ch__file-link--pdf   .ch__file-link__badge { background: #dc2626; }
.ch__file-link--image .ch__file-link__badge { background: #7c3aed; }

.ch__file-link__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: var(--ts-sm, 13px);
}
.ch__file-link__dl { flex: 0 0 auto; color: #7a869f; }
.ch__file-link:hover .ch__file-link__dl { color: #2159e4; }
.ch-doced {
    position: fixed;
    z-index: 1201;
    inset: 4vh 6vw;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #dbe1ec;
    box-shadow: 0 30px 80px -30px rgba(16, 38, 90, .55);
    overflow: hidden;
}



/* Карандаш правки — рядом со скачиванием и корзиной. */
.ch__artifact-edit {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    border: none; background: transparent;
    color: var(--fr-slate-400, #9aa3b8); cursor: pointer; opacity: .75;
    transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
.ch__artifact-edit:hover { background: var(--fr-blue-50, #eaf1ff); color: #2159e4; opacity: 1; }
.ch__artifact-edit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(46,107,255,.35); }

/* Планшет и телефон: редактор на весь экран — поля модалки съедали бы страницу. */@media (max-width: 900px) {
.ch-doced {
        inset: 0;
        border-radius: 0;
        border: none;
    }
}

/* ── Обычный (неинтерактивный) ответ: Markdown + LaTeX ─────────────────────
   Режим стал основным, поэтому типографика ответа важнее, чем раньше. */

/* Блочная формула: воздух сверху/снизу и горизонтальный скролл вместо разрыва
   вёрстки — длинные выкладки шире колонки встречаются постоянно. */
.ch__msg-bubble .katex-display {
    margin: 14px 0;
    padding: 2px 0;
    overflow-x: auto;
    overflow-y: hidden;
}
.ch__msg-bubble .katex { font-size: 1.05em; }
/* MathML-дубль нужен для копирования и скринридеров, но показывать его нельзя. */
.ch__msg-bubble .katex-mathml { position: absolute; clip: rect(1px,1px,1px,1px); overflow: hidden; }

/* Заголовки внутри ответа: различимая иерархия без «простыни одинакового текста». */
.ch__msg-bubble h1 { font: 700 1.35em/1.25 var(--font-display); margin: 18px 0 8px; }
.ch__msg-bubble h2 { font: 700 1.2em/1.3  var(--font-display); margin: 16px 0 8px; }
.ch__msg-bubble h3 { font: 600 1.08em/1.35 var(--font-display); margin: 14px 0 6px; }
.ch__msg-bubble h1:first-child,
.ch__msg-bubble h2:first-child,
.ch__msg-bubble h3:first-child { margin-top: 0; }

.ch__msg-bubble p  { margin: 0 0 10px; }
.ch__msg-bubble ul,
.ch__msg-bubble ol { margin: 0 0 10px; padding-left: 22px; }
.ch__msg-bubble li { margin: 0 0 4px; }
.ch__msg-bubble li > p { margin: 0; }

.ch__msg-bubble blockquote {
    margin: 10px 0;
    padding: 6px 0 6px 14px;
    border-left: 3px solid #c9d3e6;
    color: #4a5468;
}

.ch__msg-bubble pre {
    background: #f6f8fc;
    border: 1px solid #e3e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    overflow-x: auto;
    margin: 10px 0;
}
.ch__msg-bubble :not(pre) > code {
    background: #f1f4fa;
    border: 1px solid #e3e8f0;
    border-radius: 5px;
    padding: 1px 5px;
    font-size: .92em;
}

/* Сноски — мелко и приглушённо, как в печатном тексте. */
.ch__msg-bubble .footnotes {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid #eef1f6;
    font-size: .92em;
    color: #5a6478;
}
.ch__msg-bubble .footnote-ref { font-size: .82em; vertical-align: super; }

/* Списки определений (термин → пояснение). */
.ch__msg-bubble dt { font-weight: 600; margin-top: 8px; }
.ch__msg-bubble dd { margin: 2px 0 0 18px; color: #4a5468; }

.ch__msg-bubble table { border-collapse: collapse; width: 100%; }
.ch__msg-bubble th,
.ch__msg-bubble td { border: 1px solid #dbe1ec; padding: 6px 9px; text-align: left; }
.ch__msg-bubble th { background: #f5f8ff; font-weight: 600; }

/* Пометка «бета» у незрелых функций: янтарная, чтобы отличалась от синих
   акцентов интерфейса и читалась как предупреждение, а не как действие. */
.ch__badge-beta {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    padding: 1px 6px;
    border-radius: 5px;
    background: #fff4e2;
    border: 1px solid #f3d5a6;
    color: #96601a;
    font: 700 9px/1.6 var(--font-ui);
    letter-spacing: .06em;
    vertical-align: middle;
}

/* Карточка «Авто» в выборе модели — визуально отделена от конкретных моделей:
   это не ещё одна модель, а режим подбора. */
.ch-llm-card--auto { border-bottom: 1px solid #eef1f6; }
.ch-llm-card__logo--auto {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4d85ff, #2159e4);
    color: #fff;
}

/* ── Форма уточнения — минималистичный вид ─────────────────────────────────
   Карточки-графики и дашборды остаются богатыми, а форма с вопросами (card,
   внутри которого форма) должна быть тихой: без градиентной полосы сверху,
   без буллета-акцента у заголовка, без «парящего» hover. Только поля и кнопка.
   Скоуп :has(.genui-form) бьёт ровно по формам, не задевая визуализации. */
.ch__ai-body .genui-card:has(.genui-form) {
    border: 1px solid #e3e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(90, 100, 130, .08);
    background: #fff;
}
.ch__ai-body .genui-card:has(.genui-form)::before { display: none; }          /* верхняя полоса */
.ch__ai-body .genui-card:has(.genui-form):hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(90, 100, 130, .08);
    border-color: #dbe1ec;
}
.ch__ai-body .genui-card:has(.genui-form) .genui-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
}
.ch__ai-body .genui-card:has(.genui-form) .genui-card__title::before { display: none; } /* буллет */
.ch__ai-body .genui-card:has(.genui-form) .genui-card__subtitle { font-size: 13px; }

/* Поля — ровные и нейтральные. */
.ch__ai-body .genui-card:has(.genui-form) .genui-field__input {
    border: 1px solid #dbe1ec;
    border-radius: 10px;
    background: #fff;
}
.ch__ai-body .genui-card:has(.genui-form) .genui-field__label {
    font-weight: 600;
    color: #3d465c;
}

/* Кнопка — плоский синий Fractal, без бегущего блика и «прыжка». */
.ch__ai-body .genui-card:has(.genui-form) .genui-btn--primary {
    background: linear-gradient(180deg, #4d85ff 0%, #2e6bff 52%, #2159e4 100%);
    border: 1px solid #1f4ecb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 38, 90, .18);
}
.ch__ai-body .genui-card:has(.genui-form) .genui-btn--primary::after { display: none; }
.ch__ai-body .genui-card:has(.genui-form) .genui-btn--primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 4px 12px -4px rgba(46, 107, 255, .5);
}

/* ── Визард уточнения: один вопрос на страницу, «Назад»/«Далее» ───────────── */
.ch__ai-body .genui-wizard {
    border: 1px solid #e3e8f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(90, 100, 130, .08);
    padding: 20px;
}
.genui-wizard__progress { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.genui-wizard__dot {
    width: 22px; height: 4px; border-radius: 999px; background: #e3e8f0;
    transition: background .2s ease;
}
.genui-wizard__dot.is-active { background: #2e6bff; }
.genui-wizard__dot.is-done   { background: #9dbaff; }
.genui-wizard__count { margin-left: auto; font-size: 12px; color: #7a869f; font-weight: 600; }

.genui-wizard__question {
    font-family: var(--font-display); font-weight: 600; font-size: 17px;
    color: #23252e; margin-bottom: 14px; line-height: 1.3;
}
.genui-wizard__options { display: flex; flex-direction: column; gap: 8px; }
.genui-wizard__opt {
    text-align: left; padding: 12px 14px; border-radius: 11px;
    border: 1px solid #dbe1ec; background: #fff; color: #23252e;
    font-size: 14px; font-weight: 500; cursor: pointer;
    transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.genui-wizard__opt:hover { border-color: #9dbaff; background: #f5f8ff; transform: translateX(2px); }
.genui-wizard__opt.is-picked { border-color: #2e6bff; background: #eaf1ff; color: #2159e4; font-weight: 600; }

.genui-wizard__other {
    margin-top: 10px; width: 100%;
    border: 1px solid #dbe1ec; border-radius: 10px; padding: 10px 12px; font-size: 14px;
}
.genui-wizard__other:focus { outline: none; border-color: #9dbaff; box-shadow: 0 0 0 3px rgba(46,107,255,.12); }

/* ── СХЕМА-ПОТОК ──
   Ряды блоков сверху вниз со стрелками между рядами. Приходит двумя путями: узлом
   генеративного интерфейса и разобранной псевдографикой из блока кода — разметка
   у обоих одна. */

.genui-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 14px 0;
    padding: 16px 14px;
    background: #f7f9fe;
    border: 1px solid #dbe1ec;
    border-radius: 12px;
}

.genui-flow__title {
    align-self: flex-start;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #46526b;
}

.genui-flow__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.genui-flow__box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
    max-width: 280px;
    padding: 9px 13px;
    text-align: center;
    background: #fff;
    border: 1px solid #c8d3e8;
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(16, 38, 90, .06);
}

.genui-flow__text { font-size: 13.5px; font-weight: 600; color: #1f2a40; }
.genui-flow__note { font-size: 12px; line-height: 1.35; color: #5a6b86; }

/* Стрелка между рядами: линия с наконечником. Рисуется псевдоэлементами, а не
   картинкой, — иначе она не подстроится под цвет и масштаб. */
.genui-flow__link {
    position: relative;
    width: 2px;
    height: 22px;
    background: #b9c6e0;
}

.genui-flow__link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #b9c6e0;
    border-bottom: 2px solid #b9c6e0;
    transform: translateX(-50%) rotate(45deg);
}@media (max-width: 640px) {
.genui-flow__box { min-width: 0; flex: 1 1 100%; }
}

/* ── шаг, который просит файл ──
   Три состояния одной плашки: выбор, приём, приложено. Одинаковая рамка и высота
   у всех трёх — иначе карточка прыгает на каждом переходе, и это читается как
   перерисовка страницы, а не как отклик на действие. */

.genui-file {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
}

/* Зона выбора. Поле ввода лежит поверх прозрачным слоем, поэтому перетаскивание
   работает само — без единой строки скриптов и без обработчиков на сервере. */
.genui-file--drop {
    position: relative;
    cursor: pointer;
    color: #4a5a78;
    background: #f7f9fe;
    border: 1.5px dashed #b9c6e0;
    transition: border-color .15s, background .15s;
}

.genui-file--drop:hover,
.genui-file--drop:focus-within {
    border-color: var(--fr-blue-500, #2e6bff);
    background: #eff4ff;
}

.genui-file__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.genui-file__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.genui-file__title { font-weight: 600; color: #1b2740; }
.genui-file__hint { font-size: 12.5px; color: #6b7a96; }

.genui-file__icon { flex: 0 0 auto; font-size: 18px; line-height: 1; }
.genui-file__icon--big { display: flex; color: var(--fr-blue-500, #2e6bff); }

/* Приложенный файл: плашка объекта, который можно убрать. */
.genui-file--done {
    background: #eef7f1;
    border: 1px solid #b7dcc6;
    color: #14663a;
}

.genui-file__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.genui-file__drop-btn {
    flex: 0 0 auto;
    display: flex;
    padding: 5px;
    color: #4a6d59;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.genui-file__drop-btn:hover { color: #b3262f; background: rgba(179, 38, 47, .1); }

/* Приём файла. Состояние обязательно: чтение и разбор занимают время, и без
   него нажатие выглядит беззвучным. */
/* Приём файла — это ТА ЖЕ зона выбора, а не отдельная плашка: поле ввода нельзя
   убирать из DOM, пока Blazor читает по нему файл. Поэтому «занято» — модификатор
   поверх --drop: гасим рамку-приглашение и запрещаем повторный выбор. */
.genui-file--drop.genui-file--busy {
    cursor: default;
    border-style: solid;
    border-color: #b9c6e0;
    background: #f7f9fe;
}

.genui-file--drop.genui-file--busy:hover { border-color: #b9c6e0; background: #f7f9fe; }

/* Выключенное поле не должно перехватывать щелчки — иначе во время приёма
   открылся бы диалог выбора второго файла. */
.genui-file--busy .genui-file__input { pointer-events: none; cursor: default; }

.genui-file__spin {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid #c9d5ea;
    border-top-color: var(--fr-blue-500, #2e6bff);
    border-radius: 50%;
    animation: genui-file-spin .7s linear infinite;
}

@keyframes genui-file-spin { to { transform: rotate(360deg); } }

/* Уважение к системной настройке: вращение — украшение, а не смысл. */@media (prefers-reduced-motion: reduce) {
.genui-file__spin { animation-duration: 2.4s; }
}

.genui-file__err {
    margin: 8px 0 0;
    font-size: 13px;
    color: #b3262f;
}

/* Второй способ ответить файлом — выбрать существующий артефакт (чата или библиотеки). */
.genui-file__pick {
    margin-top: 8px;
    padding: 7px 12px;
    font-size: 13px;
    color: var(--fr-blue-500, #2e6bff);
    background: transparent;
    border: 1px dashed #b9c6e0;
    border-radius: 9px;
    cursor: pointer;
}

.genui-file__pick:hover { border-color: var(--fr-blue-500, #2e6bff); background: #f4f8ff; }
.genui-file__pick:disabled { color: #8a93a6; border-color: #d5dce9; cursor: default; }

.genui-file__pick-list {
    margin-top: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #dde4f0;
    border-radius: 10px;
    background: #fff;
}

.genui-file__pick-group {
    padding: 5px 8px 3px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a93a6;
}

.genui-file__pick-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    font-size: 13px;
    text-align: left;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.genui-file__pick-opt:hover { background: #f0f5ff; color: var(--fr-blue-600, #2159e4); }

.genui-file__pick-empty {
    padding: 10px 8px;
    font-size: 12.5px;
    color: #6b7a96;
}

/* Догрузка в библиотеку прямо из списка: строка-действие под файлами. */
.genui-file__pick-upload {
    margin-top: 4px;
    border-top: 1px dashed #dde4f0;
    border-radius: 0 0 8px 8px;
    color: var(--fr-blue-500, #2e6bff);
    cursor: pointer;
}@media (max-width: 560px) {
.genui-file { gap: 10px; padding: 10px; }
    .genui-file__hint { display: none; }
}

.genui-wizard__nav { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.genui-wizard__nav .genui-btn--primary {
    background: linear-gradient(180deg, #4d85ff 0%, #2e6bff 52%, #2159e4 100%);
    border: 1px solid #1f4ecb; border-radius: 10px; box-shadow: 0 1px 2px rgba(16,38,90,.18);
}
.genui-wizard__nav .genui-btn--primary:disabled { opacity: .5; cursor: default; }

/* ══════════════════════════════════════════════════════════════════════════
   fracImageEditor · мини-фоторедактор (слои, кисть, ластик, кроп, фильтры)
   ══════════════════════════════════════════════════════════════════════════ */
.fie {
    position: fixed; inset: 0; z-index: 4200;
    display: flex; flex-direction: column;
    /* Палитра референса «Редактор изображений»: акцент мягче базового #2e6bff,
       поверхность — тёплый near-black #1d1f20, разделители со стально-синим
       оттенком. Токены переопределены локально — перекрашивают все правила .fie
       разом (акцент тянется через --fr-blue-*), не задевая остальной чат. */
    --fr-blue-500: #3d81db;
    --fr-blue-600: #2f6fd0;
    --fie-line: rgba(89, 128, 166, .22);
    --fie-panel: rgba(89, 128, 166, .06);
    background: rgba(22, 24, 26, .96);
    backdrop-filter: blur(6px);
    color: #fff;
}
.fie__top {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; flex-shrink: 0;
    border-bottom: 1px solid var(--fie-line);
}
.fie__title { font: 600 13px var(--font-ui); color: rgba(255,255,255,.92); }
.fie__status { font: 500 12px var(--font-ui); color: rgba(255,255,255,.55); margin-left: auto; }
.fie__status--warn { color: #ffb44d; }
.fie__body { flex: 1; min-height: 0; display: flex; }
.fie__stage { flex: 1; min-width: 0; position: relative; overflow: hidden; }
.fie__stage canvas { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.fie__side {
    width: 250px; flex-shrink: 0; overflow-y: auto;
    border-left: 1px solid var(--fie-line);
    background: var(--fie-panel);
    padding: 12px;
}
.fie__group-title {
    font: 700 10.5px var(--font-ui); letter-spacing: .05em; text-transform: uppercase;
    color: rgba(255,255,255,.5); margin-bottom: 8px;
}
.fie__filter { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.fie__filter-btn {
    width: 100%; text-align: left; padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
    background: rgba(255,255,255,.06); color: #fff;
    font: 600 12px var(--font-ui); cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.fie__filter-btn:hover { background: var(--fr-blue-500, #2e6bff); border-color: transparent; }
.fie__dock {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 8px 14px; flex-shrink: 0;
    border-top: 1px solid var(--fie-line);
    background: var(--fie-panel);
}
.fie__btn {
    min-width: 34px; height: 34px; padding: 0 10px;
    border: none; border-radius: 9px;
    background: transparent; color: rgba(255,255,255,.85);
    font: 600 13px var(--font-ui); cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.fie__btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.fie__btn--on { background: var(--fr-blue-500, #2e6bff); color: #fff; }
.fie__btn:disabled { opacity: .35; cursor: default; }
/* «Применить» — акцентная кнопка возврата результата (аватар и т.п.). */
.fie__btn--apply { background: var(--fr-blue-500, #2e6bff); color: #fff; font-weight: 700; }
.fie__btn--apply:hover { background: var(--fr-blue-600, #2f6fe0); color: #fff; }
.fie__sep { width: 1px; height: 22px; background: rgba(255,255,255,.14); margin: 0 4px; }
.fie__lbl {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 11.5px var(--font-ui); color: rgba(255,255,255,.75);
}
.fie__lbl--col { display: flex; flex-direction: column; align-items: stretch; gap: 3px; margin-top: 6px; }
.fie__lbl input[type=range] { width: 110px; accent-color: var(--fr-blue-500, #2e6bff); }
.fie__lbl--col input[type=range] { width: 100%; }
.fie__dock input[type=color] {
    width: 32px; height: 30px; padding: 0; border: none; border-radius: 8px;
    background: transparent; cursor: pointer;
}

/* ── Проекты (рабочие области) в левом сайдбаре ─────────────────────────────── */
.ch__projects { padding: 0 10px 8px; }
.ch__projects-head {
    display: flex; align-items: center; justify-content: space-between; gap: 4px;
    padding: 8px 2px 6px;
}
/* Заголовок — кнопка сворачивания всего раздела: каретка, подпись, счётчик. */
.ch__projects-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    flex: 1; min-width: 0;
    padding: 3px 4px; border: none; border-radius: 7px;
    background: transparent; cursor: pointer;
    font: 700 11.5px var(--font-ui); letter-spacing: .05em; text-transform: uppercase;
    color: var(--fr-slate-500); text-align: left;
}
.ch__projects-toggle:hover { background: var(--fr-slate-100); color: var(--fr-slate-700); }
.ch__projects-toggle svg { flex-shrink: 0; transition: transform var(--t-fast); }
.ch__projects-caret--open { transform: rotate(90deg); }
.ch__projects-count {
    font: 700 10px var(--font-ui); letter-spacing: 0; color: var(--fr-slate-500);
    background: var(--fr-slate-100); border-radius: 20px; padding: 1px 6px;
}
.ch__projects-add {
    width: 26px; height: 26px; flex-shrink: 0;
    border: none; border-radius: 7px;
    background: transparent; color: var(--fr-slate-500); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ch__projects-add:hover { background: var(--fr-slate-100); color: var(--fr-blue-600); }

/* Отступ уровня задаётся переменной — один стиль на любую глубину. */
.ch__project { padding-left: calc(var(--project-depth, 0) * 12px); }
.ch__project-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 8px; border-radius: 10px; cursor: default;
    transition: background var(--t-fast);
}
.ch__project-row:hover { background: var(--fr-slate-50); }
.ch__project-toggle {
    width: 20px; height: 20px; flex-shrink: 0;
    border: none; background: transparent; cursor: pointer;
    color: var(--fr-slate-400, #9aa3b8);
    display: inline-flex; align-items: center; justify-content: center;
}
.ch__project-toggle svg { transition: transform var(--t-fast); }
.ch__project-caret--open { transform: rotate(90deg); }
/* Иконка проекта на подложке: строка стала выше, и голый контур в ней терялся. */
.ch__project-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 8px; background: var(--fr-slate-100); color: var(--fr-blue-500);
}
.ch__project-row--open .ch__project-icon,
.ch__project-row:hover .ch__project-icon { background: #fff; }
.ch__project-name {
    flex: 1; min-width: 0;
    font: 600 13.5px var(--font-ui); color: #23252e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch__project-count {
    font: 700 11px var(--font-ui); color: var(--fr-slate-500);
    background: var(--fr-slate-100); border-radius: 20px; padding: 2px 7px;
}
/* Метка «у проекта есть инструкции»: они влияют на каждый ход, но нигде больше не видны. */
.ch__project-badge {
    display: inline-flex; align-items: center; flex-shrink: 0;
    color: var(--fr-blue-500);
}
/* Пустой список проектов — объяснение, а не пустое место. */
.ch__projects-empty {
    margin: 0; padding: 2px 6px 6px;
    font: 500 11.5px var(--font-ui); color: var(--fr-slate-500); line-height: 1.5;
}
.ch__project-actions { display: none; gap: 1px; }
.ch__project-row:hover .ch__project-actions { display: inline-flex; }
.ch__project-actions button {
    width: 26px; height: 26px; border: none; border-radius: 7px;
    background: transparent; color: var(--fr-slate-400, #9aa3b8); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ch__project-actions button:hover { background: var(--fr-slate-200); color: #23252e; }
.ch__project-sources {
    display: flex; align-items: center; gap: 7px;
    margin-left: 28px; padding: 6px 9px; width: calc(100% - 28px);
    border: none; border-radius: 8px; background: transparent;
    font: 600 12px var(--font-ui); color: var(--fr-blue-600); cursor: pointer;
    text-align: left;
}
.ch__project-sources:hover { background: var(--fr-blue-50); }
.ch__project-chat {
    display: block; width: calc(100% - 28px); margin-left: 28px;
    padding: 7px 9px; border: none; border-radius: 8px;
    background: transparent; text-align: left; cursor: pointer;
    font: 500 13px var(--font-ui); color: #4a4f5e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch__project-chat:hover { background: var(--fr-slate-50); color: #23252e; }
.ch__project-chat--active { background: var(--fr-blue-50); color: var(--fr-blue-600); font-weight: 600; }

/* ── Панель слоёв редактора ───────────────────────────────────────────────── */
.fie__group-title { display: flex; align-items: center; justify-content: space-between; }
.fie__layer-tools { display: inline-flex; gap: 2px; }
.fie__layer-tools button {
    width: 22px; height: 22px; border: none; border-radius: 6px;
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.8);
    font: 600 12px var(--font-ui); cursor: pointer;
}
.fie__layer-tools button:hover { background: var(--fr-blue-500, #2e6bff); color: #fff; }
.fie__layer {
    display: grid; grid-template-columns: 22px 1fr 64px;
    align-items: center; gap: 6px;
    padding: 5px 6px; margin-bottom: 3px; border-radius: 8px;
    border: 1px solid transparent;
}
.fie__layer:hover { background: rgba(255,255,255,.06); }
.fie__layer--active { background: rgba(46,107,255,.18); border-color: rgba(46,107,255,.5); }
.fie__layer-eye {
    border: none; background: transparent; cursor: pointer;
    color: rgba(255,255,255,.8); font-size: 13px; padding: 0;
}
.fie__layer-name {
    font: 600 11.5px var(--font-ui); color: rgba(255,255,255,.9); cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fie__layer-op { width: 100%; accent-color: var(--fr-blue-500, #2e6bff); }

/* ── Редактор: менюбар сверху, инструменты справа ─────────────────────────── */
.fie__menubar {
    display: flex; align-items: center; gap: 14px;
    padding: 6px 12px; flex-shrink: 0;
    border-bottom: 1px solid var(--fie-line);
    background: var(--fie-panel);
}
.fie__menu { display: flex; align-items: center; gap: 2px; }
.fie__menu-item { position: relative; }
.fie__menu-btn {
    border: none; background: transparent; color: rgba(255,255,255,.85);
    font: 600 12.5px var(--font-ui); padding: 6px 10px; border-radius: 7px; cursor: pointer;
}
.fie__menu-btn:hover, .fie__menu-item--open .fie__menu-btn {
    background: rgba(255,255,255,.14); color: #fff;
}
.fie__menu-drop {
    display: none; position: absolute; top: 100%; left: 0; z-index: 20;
    min-width: 220px; padding: 5px;
    background: #23263a; border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.fie__menu-item--open .fie__menu-drop { display: block; }
.fie__menu-opt {
    display: block; width: 100%; text-align: left;
    padding: 7px 10px; border: none; border-radius: 7px;
    background: transparent; color: rgba(255,255,255,.88);
    font: 500 12.5px var(--font-ui); cursor: pointer;
}
.fie__menu-opt:hover { background: var(--fr-blue-500, #2e6bff); color: #fff; }

/* Палитра инструментов */
.fie__tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 10px; }
.fie__tool {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 4px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
    background: rgba(255,255,255,.05); color: rgba(255,255,255,.85);
    font: 600 10.5px var(--font-ui); cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.fie__tool svg { width: 18px; height: 18px; }
.fie__tool:hover { background: rgba(255,255,255,.12); }
.fie__tool--on { background: var(--fr-blue-500, #2e6bff); border-color: transparent; color: #fff; }
.fie__tool-opts { display: flex; flex-direction: column; gap: 6px; }
.fie__color-row { display: flex; align-items: center; justify-content: space-between; }

.fie__wide {
    width: 100%; margin-top: 8px; padding: 8px;
    border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
    background: rgba(255,255,255,.07); color: #fff;
    font: 600 12px var(--font-ui); cursor: pointer;
}
.fie__wide:hover { background: rgba(255,255,255,.14); }
.fie__wide--primary { background: var(--fr-blue-500, #2e6bff); border-color: transparent; }
.fie__wide--primary:hover { background: var(--fr-blue-600, #2159e4); }

/* ИИ-панель */
.fie__ai-input {
    width: 100%; resize: vertical; padding: 8px;
    border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
    background: rgba(0,0,0,.25); color: #fff;
    font: 500 12px var(--font-ui);
}
.fie__ai-hint { margin-top: 6px; font: 500 10.5px var(--font-ui); color: rgba(255,255,255,.45); }

/* Статусбар снизу */
.fie__statusbar {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; flex-shrink: 0;
    border-top: 1px solid var(--fie-line);
    background: var(--fie-panel);
}
.fie__zoom, .fie__dims {
    font: 600 11.5px var(--font-ui); color: rgba(255,255,255,.7); min-width: 46px; text-align: center;
}
.fie__dims { min-width: auto; color: rgba(255,255,255,.45); }

/* Диалог параметров фильтра */
.fie__dialog {
    position: absolute; top: 60px; right: 270px; z-index: 30;
    width: 260px; padding: 14px;
    background: #23263a; border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
/* Заголовок — ручка перетаскивания (fracDrag): окно фильтра не должно закрывать
   ту самую область картинки, которую пользователь настраивает. */
.fie__dialog-title {
    font: 700 12.5px var(--font-ui); color: #fff; margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px; user-select: none;
}
.fie__dialog-title::before {
    content: '⠿'; color: rgba(255,255,255,.35); font-size: 13px; line-height: 1;
}
.fie__dialog-hint {
    font: 500 10.5px/1.45 var(--font-ui); color: rgba(255,255,255,.45); margin-top: 8px;
}
.fie__dialog-actions { display: flex; gap: 6px; }
.fie__dialog-actions .fie__wide { margin-top: 10px; }

/* ── Диалог смены разрешения ─────────────────────────────────────────────── */
.fie__dialog--resize { width: 280px; }
.fie__rz-cur { font: 500 11px var(--font-ui); color: rgba(255,255,255,.55); margin-bottom: 8px; }
.fie__rz-cur b { color: #fff; font-weight: 700; }
.fie__rz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fie__rz-grid .fie__lbl--col { margin-top: 0; }
.fie__rz-grid input[type=number] {
    width: 100%; box-sizing: border-box; padding: 6px 8px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px; color: #fff; font: 600 12px var(--font-ui);
}
.fie__rz-grid input[type=number]:focus { outline: none; border-color: var(--fr-blue-500, #2e6bff); }
.fie__rz-check {
    display: flex; align-items: center; gap: 7px; margin-top: 10px;
    font: 500 11.5px var(--font-ui); color: rgba(255,255,255,.82); cursor: pointer;
}
.fie__rz-check input[type=checkbox] { accent-color: var(--fr-blue-500, #2e6bff); width: 15px; height: 15px; }
.fie__rz-quick { display: flex; gap: 6px; margin-top: 10px; }
.fie__rz-quick .fie__chip { flex: 1; text-align: center; }
/* Галочка «нейросеть» выделена — это ключевой выбор пользователя */
.fie__rz-nn {
    margin-top: 12px; padding: 8px 10px; align-items: flex-start;
    background: rgba(46,107,255,.12); border: 1px solid rgba(46,107,255,.32); border-radius: 9px;
    flex-wrap: wrap;
}
.fie__rz-nn .fie__rz-sub {
    flex-basis: 100%; margin-left: 22px; margin-top: 2px;
    font: 500 10px var(--font-ui); color: rgba(255,255,255,.45);
}
.fie__rz-nn--off { opacity: .5; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); cursor: default; }
.fie__rz-nn--off input[type=checkbox] { cursor: default; }
.fie__rz-hint { font: 500 10.5px/1.45 var(--font-ui); color: rgba(255,255,255,.5); margin-top: 9px; min-height: 28px; }

/* Панель редактора переехала влево — граница и диалог меняют сторону.
   Отдельным блоком, чтобы не трогать исходное правило .fie__side. */
.fie__side { border-left: none; border-right: 1px solid rgba(255,255,255,.10); }
.fie__dialog { right: auto; left: 270px; }

/* Подтверждение удаления проекта — вместо системного confirm() */
.ch__project-confirm {
    display: inline-flex; align-items: center; gap: 4px;
    font: 600 10.5px var(--font-ui); color: var(--fr-slate-500); white-space: nowrap;
}
.ch__project-confirm button {
    border: none; border-radius: 6px; padding: 2px 7px; cursor: pointer;
    background: var(--fr-slate-100); color: #23252e;
    font: 600 10.5px var(--font-ui);
}
.ch__project-confirm-yes { background: #fee9e9 !important; color: #d1343d !important; }
.ch__project-confirm button:hover { filter: brightness(.95); }

/* ══ Модалка настройки проекта ═══════════════════════════════════════════════
   Оболочка общая с «Настройками» (.ch-set__*) — здесь только поля формы.
   Подвал прижат к низу колонки, поэтому тело — flex-столбец на всю высоту. */

/* Шире базовой модалки: пять разделов, а в «Знаниях» два списка друг под другом. */
.ch__pm { width: 880px; height: min(640px, 88vh); }
.ch__pm-body { display: flex; flex-direction: column; }

/* Шапка навигации — сам проект, а не слово «Проект»: открыть модалку можно
   из любой строки дерева, и «какой именно» должно быть видно сразу. */
.ch__pm-head {
    display: flex; align-items: center; gap: 9px;
    padding: 2px 8px 14px;
    border-bottom: 1px solid var(--fr-slate-200);
    margin-bottom: 10px;
}
.ch__pm-head-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 9px; background: var(--fr-slate-100); color: var(--fr-blue-500);
}
.ch__pm-head-text { display: flex; flex-direction: column; min-width: 0; }
.ch__pm-head-name {
    font: 700 13px var(--font-display); color: var(--fr-slate-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch__pm-head-sub { font: 500 10.5px var(--font-ui); color: var(--fr-slate-500); }

.ch__pm-nav-count {
    margin-left: auto;
    font: 700 10px var(--font-ui); color: var(--fr-slate-500);
    background: var(--fr-slate-100); border-radius: 20px; padding: 1px 6px;
}

/* Блок раздела: у «Знаний» их два (файлы и внешние источники), у MCP — форма добавления. */
.ch__pm-block { margin-bottom: 22px; }
.ch__pm-block-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.ch__pm-block-title { margin: 0; font: 700 13px var(--font-display); color: var(--fr-slate-900); }
.ch__pm-block-note { font: 500 11px var(--font-ui); color: var(--fr-slate-500); }
.ch__pm-note { margin: 0 0 8px; font: 500 11.5px var(--font-ui); color: var(--fr-slate-500); line-height: 1.45; }

/* Выбор внешних источников: строка-переключатель с названием и пояснением. */
.ch__pm-checks { display: flex; flex-direction: column; gap: 6px; }
.ch__pm-check {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--fr-slate-200); border-radius: 10px;
    background: var(--fr-slate-0); cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.ch__pm-check:hover { background: var(--fr-slate-50); }
.ch__pm-check--on { border-color: var(--fr-blue-400, #6aa0ff); background: var(--fr-blue-50); }
.ch__pm-check input { margin-top: 2px; accent-color: var(--fr-blue-600); }
/* Иконка типа источника: документное хранилище или база — разница видна без чтения подписи. */
.ch__pm-check-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 24px; height: 24px; margin-top: -1px;
    border-radius: 7px; background: var(--fr-slate-100); color: var(--fr-slate-500);
}
.ch__pm-check--on .ch__pm-check-icon { background: #fff; color: var(--fr-blue-600); }
.ch__pm-check-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch__pm-check-title { font: 600 12px var(--font-ui); color: var(--fr-slate-900); }
.ch__pm-check-sub { font: 500 10.5px var(--font-ui); color: var(--fr-slate-500); }

/* Ссылка-действие: «Подключить источник», «Новый чат в проекте». */
.ch__pm-link {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 10px 0 0;
    padding: 7px 12px;
    border: 1px solid var(--fr-slate-200); border-radius: 9px;
    background: transparent; color: var(--fr-blue-600);
    font: 600 12px var(--font-ui); cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.ch__pm-link:hover { background: var(--fr-blue-50); border-color: var(--fr-blue-400, #6aa0ff); }

/* Форма нового MCP-сервера: три поля в столбик и кнопка. */
.ch__pm-mcp-form { display: flex; flex-direction: column; gap: 8px; }
.ch__pm-mcp-form .ch__pm-btn { align-self: flex-start; }

/* На телефоне модалка проекта разворачивается на весь экран — как и «Настройки».
   Правило нужно отдельным: .ch__pm задан ПОЗЖЕ мобильного блока .ch-set и иначе
   перебил бы его своей фиксированной шириной. */
@media (max-width: 640px) {
    .ch__pm { width: 100%; height: 100dvh; }
    .ch__pm-head { display: none; }   /* в ряду вкладок шапке места нет */
}

/* ══ Окно артефактов ═════════════════════════════════════════════════════════
   Три зоны, как в файловом менеджере: слева ГДЕ искать, в центре ЧТО лежит
   (плитки с превью — картинку опознают глазами, а не по имени), справа ЧТО ЭТО.
   Правая зона появляется только с выбранным файлом: пока выбора нет, плиткам
   достаётся вся ширина. */
.ch__am { width: 1180px; height: min(760px, 92vh); }

/* ── Зона 1: навигация ── */
.ch__am-nav {
    flex-shrink: 0; width: 262px;
    display: flex; flex-direction: column; min-height: 0;
    border-right: 1px solid var(--fr-slate-200);
    background: linear-gradient(180deg, var(--fr-slate-50), color-mix(in srgb, var(--fr-slate-50) 55%, #fff));
}
.ch__am-head { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; }
.ch__am-head-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 11px;
    background: linear-gradient(135deg, var(--fr-blue-500, #3b82f6), var(--fr-blue-600));
    color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--fr-blue-600) 28%, transparent);
}
.ch__am-head-text { display: flex; flex-direction: column; min-width: 0; }
.ch__am-head-title { font: 700 15px var(--font-display); color: var(--fr-slate-900); letter-spacing: -.01em; }
.ch__am-head-sub { font: 500 11px var(--font-ui); color: var(--fr-slate-500); }

.ch__am-nav-list {
    flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 16px;
    scrollbar-width: thin; scrollbar-color: var(--fr-slate-300) transparent;
}
.ch__am-nav-list::-webkit-scrollbar       { width: 6px; }
.ch__am-nav-list::-webkit-scrollbar-thumb { background: var(--fr-slate-300); border-radius: 6px; }

.ch__am-nav-all {
    display: flex; align-items: center; gap: 9px; width: 100%;
    margin-bottom: 10px; padding: 9px 11px;
    border: 1px solid transparent; border-radius: 10px;
    background: transparent; cursor: pointer; text-align: left;
    font: 600 12.5px var(--font-ui); color: var(--fr-slate-700);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.ch__am-nav-all:hover { background: var(--fr-slate-100); }
.ch__am-nav-all--on {
    background: #fff; border-color: var(--fr-blue-400, #6aa0ff); color: var(--fr-blue-600);
    box-shadow: 0 2px 8px rgba(20, 26, 40, .06);
}
.ch__am-nav-count {
    margin-left: auto;
    font: 700 10.5px var(--font-ui); color: var(--fr-slate-500);
    background: var(--fr-slate-100); border-radius: 20px; padding: 2px 7px;
}
.ch__am-nav-all--on .ch__am-nav-count { background: var(--fr-blue-50); color: var(--fr-blue-600); }

/* Область: чат либо проект — на своей карточке, чтобы «своё» и «общее» не сливались. */
.ch__am-scope {
    margin-bottom: 8px; padding: 4px;
    border: 1px solid var(--fr-slate-200); border-radius: 13px; background: #fff;
    box-shadow: 0 1px 3px rgba(20, 26, 40, .04);
}
.ch__am-scope-head {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px; border: none; border-radius: 10px;
    background: transparent; cursor: pointer; text-align: left;
    transition: background var(--t-fast);
}
.ch__am-scope-head:hover   { background: var(--fr-slate-50); }
.ch__am-scope-head--on     { background: var(--fr-blue-50); }
.ch__am-scope-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 9px;
}
.ch__am-scope-icon--chat    { background: var(--fr-blue-50); color: var(--fr-blue-600); }
.ch__am-scope-icon--project { background: color-mix(in srgb, #7c5cff 14%, #fff); color: #7c5cff; }
.ch__am-scope-head--on .ch__am-scope-icon { background: #fff; }
.ch__am-scope-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ch__am-scope-title {
    font: 700 12.5px var(--font-ui); color: var(--fr-slate-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch__am-scope-note { font: 500 10px var(--font-ui); color: var(--fr-slate-500); }
.ch__am-scope-count {
    font: 700 10.5px var(--font-ui); color: var(--fr-slate-500);
    background: var(--fr-slate-100); border-radius: 20px; padding: 2px 7px;
}

/* Категория внутри области. */
.ch__am-cat {
    display: flex; align-items: center; gap: 8px; width: calc(100% - 14px);
    margin-left: 14px; padding: 6px 9px;
    border: none; border-radius: 8px; background: transparent;
    cursor: pointer; text-align: left;
    transition: background var(--t-fast);
}
.ch__am-cat:hover { background: var(--fr-slate-50); }
.ch__am-cat--on   { background: var(--fr-blue-50); }
.ch__am-cat--on .ch__am-cat-label { color: var(--fr-blue-600); font-weight: 700; }
.ch__am-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.ch__am-cat-label { flex: 1; min-width: 0; font: 600 11.5px var(--font-ui); color: var(--fr-slate-700); }
.ch__am-cat-count { font: 600 10.5px var(--font-ui); color: var(--fr-slate-400, #9aa3b8); }

/* ── Зона 2: плитки ── */
.ch__am-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.ch__am-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 24px 14px; border-bottom: 1px solid var(--fr-slate-200);
}
.ch__am-path {
    flex: 1; min-width: 0;
    font: 700 14px var(--font-display); color: var(--fr-slate-900); letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch__am-search {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    width: 230px; padding: 7px 11px;
    border: 1px solid var(--fr-slate-200); border-radius: 10px;
    background: var(--fr-slate-50); color: var(--fr-slate-400, #9aa3b8);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.ch__am-search:focus-within {
    background: #fff;
    border-color: var(--fr-blue-400, #6aa0ff);
    box-shadow: 0 0 0 3px var(--fr-blue-50);
}
.ch__am-search-input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font: 500 12.5px var(--font-ui); color: var(--fr-slate-900);
}
.ch__am-search-clear {
    border: none; background: transparent; cursor: pointer; padding: 0;
    color: var(--fr-slate-400, #9aa3b8); display: inline-flex;
}
.ch__am-search-clear:hover { color: var(--fr-slate-700); }

.ch__am-scroll {
    flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 28px;
    display: flex; flex-direction: column;
    scrollbar-width: thin; scrollbar-color: var(--fr-slate-300) transparent;
}
.ch__am-scroll::-webkit-scrollbar       { width: 8px; }
.ch__am-scroll::-webkit-scrollbar-thumb { background: var(--fr-slate-300); border-radius: 8px; }

.ch__am-section { margin-bottom: 22px; }
.ch__am-section-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; }
.ch__am-section-head .ch__am-dot { align-self: center; }
.ch__am-section-title { font: 700 12.5px var(--font-ui); color: var(--fr-slate-900); }
.ch__am-section-sub {
    font: 500 11px var(--font-ui); color: var(--fr-slate-500);
    padding-left: 8px; border-left: 1px solid var(--fr-slate-200);
}
.ch__am-section-count {
    margin-left: auto;
    font: 600 10.5px var(--font-ui); color: var(--fr-slate-400, #9aa3b8);
}

.ch__am-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.ch__am-tile {
    display: flex; flex-direction: column; gap: 0;
    padding: 0 0 10px; overflow: hidden;
    border: 1px solid var(--fr-slate-200); border-radius: 14px;
    background: #fff; cursor: pointer; text-align: left;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.ch__am-tile:hover {
    transform: translateY(-2px);
    border-color: var(--fr-slate-300);
    box-shadow: 0 10px 24px rgba(20, 26, 40, .10);
}
.ch__am-tile--on {
    border-color: var(--fr-blue-500, #3b82f6);
    box-shadow: 0 0 0 3px var(--fr-blue-50), 0 10px 24px rgba(20, 26, 40, .10);
}

/* Превью плитки. Шахматка под картинкой — чтобы прозрачный PNG не выглядел обрезанным. */
.ch__am-tile-preview {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: 122px; margin-bottom: 10px;
    background:
        linear-gradient(45deg, var(--fr-slate-100) 25%, transparent 25%) 0 0/16px 16px,
        linear-gradient(-45deg, var(--fr-slate-100) 25%, transparent 25%) 0 8px/16px 16px,
        linear-gradient(45deg, transparent 75%, var(--fr-slate-100) 75%) 8px -8px/16px 16px,
        linear-gradient(-45deg, transparent 75%, var(--fr-slate-100) 75%) -8px 0/16px 16px,
        var(--fr-slate-0);
    border-bottom: 1px solid var(--fr-slate-200);
}
.ch__am-tile-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Тон по типу файла ──
   Один набор переменных на плитку и на карточку: подложка, глиф и подпись типа
   берутся отсюда, поэтому документ выглядит одинаково всюду, где он показан. */
.ch__am-tone--docx  { --am-ink: var(--fr-blue-600);              --am-bg: var(--fr-blue-50); }
.ch__am-tone--xlsx  { --am-ink: var(--fr-green-700);             --am-bg: var(--fr-green-100); }
.ch__am-tone--pdf   { --am-ink: var(--fr-sun-700);               --am-bg: var(--fr-sun-100); }
.ch__am-tone--pptx  { --am-ink: var(--fr-orange-500, #f5822b);   --am-bg: color-mix(in srgb, var(--fr-orange-500, #f5822b) 13%, #fff); }
.ch__am-tone--code  { --am-ink: #7c5cff;                         --am-bg: color-mix(in srgb, #7c5cff 12%, #fff); }
.ch__am-tone--image { --am-ink: var(--fr-sky-500);               --am-bg: color-mix(in srgb, var(--fr-sky-500) 14%, #fff); }
.ch__am-tone--file  { --am-ink: var(--fr-slate-500);             --am-bg: var(--fr-slate-100); }

/* У документа превью нет — вместо подделки под лист бумаги ровная подложка тона
   с крупным глифом: тип узнаётся быстрее, чем по картинке-заглушке. */
.ch__am-tile-preview--doc {
    background: linear-gradient(155deg, var(--am-bg), color-mix(in srgb, var(--am-bg) 35%, #fff));
    color: var(--am-ink);
}
.ch__am-tile-icon { display: flex; align-items: center; justify-content: center; }
.ch__am-tile-icon svg { width: 40px; height: 40px; stroke-width: 1.5; }
.ch__am-tile-kind {
    position: absolute; left: 8px; bottom: 8px;
    padding: 2px 7px; border-radius: 6px;
    background: rgba(20, 26, 40, .62); color: #fff;
    font: 700 9px var(--font-ui); letter-spacing: .04em;
    backdrop-filter: blur(3px);
}
/* Над светлой подложкой тёмный чип выглядит наклейкой — там подпись того же тона. */
.ch__am-tile-kind--soft {
    background: rgba(255, 255, 255, .72); color: var(--am-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--am-ink) 22%, transparent);
}
.ch__am-tile-name {
    padding: 0 11px;
    font: 600 12px var(--font-ui); color: var(--fr-slate-900); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ch__am-tile-meta { padding: 3px 11px 0; font: 500 10.5px var(--font-ui); color: var(--fr-slate-500); }

.ch__am-empty {
    margin: auto; max-width: 340px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center; color: var(--fr-slate-400, #9aa3b8);
}
.ch__am-empty-title { font: 700 14px var(--font-display); color: var(--fr-slate-700); }
.ch__am-empty-hint { font: 500 12px var(--font-ui); color: var(--fr-slate-500); line-height: 1.5; }

/* ── Зона 3: карточка файла ── */
.ch__am-detail {
    flex-shrink: 0; width: 348px;
    display: flex; flex-direction: column; min-height: 0;
    padding: 22px 22px 26px;
    border-left: 1px solid var(--fr-slate-200);
    background: linear-gradient(180deg, var(--fr-slate-50), #fff 40%);
    overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--fr-slate-300) transparent;
    animation: ch-am-slide .18s cubic-bezier(.22, 1, .36, 1);
}
.ch__am-detail::-webkit-scrollbar       { width: 6px; }
.ch__am-detail::-webkit-scrollbar-thumb { background: var(--fr-slate-300); border-radius: 6px; }
@keyframes ch-am-slide {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: none; }
}

.ch__am-preview {
    display: flex; align-items: center; justify-content: center;
    height: 268px; flex-shrink: 0; margin-bottom: 16px;
    border: 1px solid var(--fr-slate-200); border-radius: 16px; overflow: hidden;
    background:
        linear-gradient(45deg, var(--fr-slate-100) 25%, transparent 25%) 0 0/18px 18px,
        linear-gradient(-45deg, var(--fr-slate-100) 25%, transparent 25%) 0 9px/18px 18px,
        linear-gradient(45deg, transparent 75%, var(--fr-slate-100) 75%) 9px -9px/18px 18px,
        linear-gradient(-45deg, transparent 75%, var(--fr-slate-100) 75%) -9px 0/18px 18px,
        #fff;
}
.ch__am-preview-image {
    border: none; background: none; padding: 0; cursor: zoom-in;
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}
.ch__am-preview-image img { max-width: 100%; max-height: 268px; object-fit: contain; display: block; }

/* Документу растянутая на треть окна рамка с иконкой посередине не нужна — это дыра,
   а не превью. Ему хватает полосы тона с крупным глифом и расширением. */
.ch__am-preview--doc {
    height: 128px; gap: 14px;
    background: linear-gradient(150deg, var(--am-bg), color-mix(in srgb, var(--am-bg) 30%, #fff));
    color: var(--am-ink);
}
.ch__am-preview-icon { display: flex; align-items: center; justify-content: center; }
.ch__am-preview-icon svg { width: 52px; height: 52px; stroke-width: 1.4; }
.ch__am-preview-kind {
    font: 800 22px var(--font-display); letter-spacing: .04em;
    color: color-mix(in srgb, var(--am-ink) 78%, transparent);
}

.ch__am-title {
    margin: 0 0 10px;
    font: 700 17px var(--font-display); color: var(--fr-slate-900); letter-spacing: -.01em;
    line-height: 1.3; word-break: break-word;
}
.ch__am-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ch__am-fact {
    padding: 3px 9px; border-radius: 20px;
    background: var(--fr-slate-100); color: var(--fr-slate-600, #5b6478);
    font: 600 10.5px var(--font-ui);
}
.ch__am-fact--scope { background: var(--fr-blue-50); color: var(--fr-blue-600); }

/* Главное действие — во всю ширину, второстепенные — парой под ним. Тремя в строку они
   не помещались, и «Удалить» уезжала на отдельную строку, будто она здесь главная. */
.ch__am-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.ch__am-act-row { display: flex; gap: 8px; }
.ch__am-actions .ch__pm-btn {
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.ch__am-act-main { width: 100%; padding: 10px 16px; }
.ch__am-act { flex: 1; }
.ch__am-danger { color: #d1343d; }
.ch__am-danger:hover { background: #fee9e9 !important; border-color: #f3c9cc !important; }
.ch__am-hint {
    margin: -10px 0 16px;
    font: 500 11.5px var(--font-ui); color: var(--fr-slate-500); line-height: 1.5;
}

.ch__am-desc {
    padding: 14px 15px;
    border: 1px solid var(--fr-slate-200); border-radius: 12px; background: #fff;
}
.ch__am-desc-title {
    display: block; margin-bottom: 7px;
    font: 700 10px var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
    color: var(--fr-slate-500);
}
.ch__am-desc-text {
    margin: 0; max-height: 260px; overflow-y: auto;
    font: 500 12.5px/1.6 var(--font-ui); color: var(--fr-slate-700);
    white-space: pre-wrap;
    scrollbar-width: thin; scrollbar-color: var(--fr-slate-300) transparent;
}
.ch__am-desc-text::-webkit-scrollbar       { width: 6px; }
.ch__am-desc-text::-webkit-scrollbar-thumb { background: var(--fr-slate-300); border-radius: 6px; }
.ch__am-desc-text--muted {
    color: var(--fr-slate-500);
    display: flex; align-items: flex-start; gap: 8px;
}
/* Кнопка повтора: описание не строится само, когда фоновая задача уже упала. */
.ch__am-desc-retry {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 10px; padding: 7px 12px;
    font-size: 11.5px;
}
/* Крутилка — тот же смысл, что и «идёт вызов модели»: маленькая, чтобы не спорить с текстом. */
.ch__am-spin {
    width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px;
    border: 2px solid color-mix(in srgb, var(--fr-blue-600) 25%, transparent);
    border-top-color: var(--fr-blue-600);
    border-radius: 50%;
    animation: ch-am-spin .8s linear infinite;
}
@keyframes ch-am-spin { to { transform: rotate(360deg); } }

/* ── Markdown описания ──
   Описание пишет модель, и пишет она разметкой: заголовки, списки, иногда таблица.
   Своя шкала размеров, а не общая для ленты: там абзац — основной текст страницы,
   здесь — подпись в колонке 300 пикселей, и заголовок ленты в ней выглядел бы криком.
   pre-wrap снимаем: переносы уже расставил рендерер. */
.ch__am-md { white-space: normal; }
.ch__am-md > :first-child { margin-top: 0; }
.ch__am-md > :last-child  { margin-bottom: 0; }
.ch__am-md p { margin: 0 0 9px; }
.ch__am-md h1, .ch__am-md h2, .ch__am-md h3, .ch__am-md h4 {
    margin: 14px 0 6px;
    font: 700 12.5px var(--font-display); color: var(--fr-slate-900); letter-spacing: -.01em;
}
.ch__am-md h1 { font-size: 13.5px; }
.ch__am-md ul, .ch__am-md ol { margin: 0 0 9px; padding-left: 18px; }
.ch__am-md li { margin-bottom: 3px; }
.ch__am-md li::marker { color: var(--fr-slate-400, #9aa3b8); }
.ch__am-md strong { color: var(--fr-slate-900); font-weight: 700; }
.ch__am-md a { color: var(--fr-blue-600); text-decoration: none; }
.ch__am-md a:hover { text-decoration: underline; }
.ch__am-md code {
    padding: 1px 5px; border-radius: 5px;
    background: var(--fr-slate-100); color: var(--fr-slate-900);
    font: 500 11.5px var(--font-mono, ui-monospace, monospace);
}
.ch__am-md pre {
    margin: 0 0 9px; padding: 9px 11px; overflow-x: auto;
    border-radius: 9px; background: var(--fr-slate-50);
    border: 1px solid var(--fr-slate-200);
}
.ch__am-md pre code { background: none; padding: 0; font-size: 11px; }
.ch__am-md blockquote {
    margin: 0 0 9px; padding: 2px 0 2px 11px;
    border-left: 2px solid var(--fr-slate-200); color: var(--fr-slate-500);
}
.ch__am-md hr { margin: 12px 0; border: none; border-top: 1px solid var(--fr-slate-200); }
.ch__am-md table { width: 100%; border-collapse: collapse; margin: 0 0 9px; font-size: 11.5px; }
.ch__am-md th, .ch__am-md td {
    padding: 5px 7px; border: 1px solid var(--fr-slate-200); text-align: left;
}
.ch__am-md th { background: var(--fr-slate-50); font-weight: 700; }
/* Таблица шире колонки прокручивается внутри себя, а не растягивает карточку. */
.ch__am-md .ch__table-wrap { overflow-x: auto; margin-bottom: 9px; }

/* На узком экране окно во весь экран: навигация лентой сверху, карточка — снизу. */
@media (max-width: 1000px) {
    .ch__am { width: 100%; height: 100dvh; flex-direction: column; border-radius: 0; }
    .ch__am-nav {
        width: 100%; max-height: 40%;
        border-right: none; border-bottom: 1px solid var(--fr-slate-200);
    }
    .ch__am-detail {
        width: 100%; border-left: none; border-top: 1px solid var(--fr-slate-200);
        max-height: 55%;
    }
    .ch__am-preview { height: 190px; }
    .ch__am-preview-image img { max-height: 190px; }
    .ch__am-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

.ch__pm-intro {
    margin: -8px 0 16px;
    font: 500 12px var(--font-ui); color: var(--fr-slate-500); line-height: 1.5;
}
.ch__pm-field { display: block; margin-bottom: 18px; }
.ch__pm-label {
    display: block; margin-bottom: 6px;
    font: 600 12px var(--font-ui); color: var(--fr-slate-700);
}
.ch__pm-hint {
    display: block; margin-top: 6px;
    font: 500 11px var(--font-ui); color: var(--fr-slate-500); line-height: 1.45;
}
.ch__pm-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--fr-slate-200); border-radius: 10px;
    background: var(--fr-slate-0); color: var(--fr-slate-900);
    font: 500 13px var(--font-ui); outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ch__pm-input:focus {
    border-color: var(--fr-blue-400, #6aa0ff);
    box-shadow: 0 0 0 3px var(--fr-blue-50);
}
.ch__pm-textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--fr-slate-200); border-radius: 12px;
    background: var(--fr-slate-0); color: var(--fr-slate-900);
    font: 500 13px/1.55 var(--font-ui); outline: none; resize: vertical;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ch__pm-textarea:focus {
    border-color: var(--fr-blue-400, #6aa0ff);
    box-shadow: 0 0 0 3px var(--fr-blue-50);
}

/* Палитра метки: кружки цвета, первый — «без цвета» с косой чертой. */
.ch__pm-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.ch__pm-color {
    width: 24px; height: 24px; padding: 0;
    border: 2px solid transparent; border-radius: 50%;
    background: var(--pm-color, var(--fr-slate-100));
    color: var(--fr-slate-500);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform var(--t-fast), border-color var(--t-fast);
}
.ch__pm-color:hover { transform: scale(1.08); }
.ch__pm-color--on { border-color: var(--fr-slate-900); }

/* Источники данных */
.ch__pm-upload {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; margin-bottom: 14px;
    border: 1px dashed var(--fr-slate-300, #cbd2e0); border-radius: 10px;
    color: var(--fr-blue-600); background: transparent;
    font: 600 12px var(--font-ui); cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.ch__pm-upload:hover { background: var(--fr-blue-50); border-color: var(--fr-blue-400, #6aa0ff); }
.ch__pm-upload--busy { opacity: .6; cursor: progress; }
.ch__pm-empty {
    padding: 18px 16px;
    border: 1px dashed var(--fr-slate-200); border-radius: 12px;
    font: 500 12px var(--font-ui); color: var(--fr-slate-500); line-height: 1.5;
}
.ch__pm-files { display: flex; flex-direction: column; gap: 6px; }
.ch__pm-file {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--fr-slate-200); border-radius: 10px;
    background: var(--fr-slate-0);
}
.ch__pm-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch__pm-file-name {
    font: 600 12px var(--font-ui); color: var(--fr-slate-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch__pm-file-meta { font: 500 10.5px var(--font-ui); color: var(--fr-slate-500); }
.ch__pm-file-act {
    width: 26px; height: 26px; flex-shrink: 0;
    border: none; border-radius: 7px; background: transparent;
    color: var(--fr-slate-400, #9aa3b8); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--t-fast), color var(--t-fast);
}
.ch__pm-file-act:hover { background: var(--fr-slate-100); color: var(--fr-slate-700); }
.ch__pm-file-act--danger:hover { background: #fee9e9; color: #d1343d; }

/* Подвал: он общий для вкладок, поэтому прижат к низу, а не следует за содержимым. */
.ch__pm-footer {
    display: flex; align-items: center; gap: 8px;
    margin-top: auto; padding-top: 18px;
}
.ch__pm-dirty { flex: 1; font: 500 11px var(--font-ui); color: var(--fr-slate-500); }
.ch__pm-error { flex: 1; font: 600 11px var(--font-ui); color: #d1343d; }
.ch__pm-footer > .ch__pm-btn:first-of-type { margin-left: auto; }
.ch__pm-dirty ~ .ch__pm-btn:first-of-type,
.ch__pm-error ~ .ch__pm-btn:first-of-type { margin-left: 0; }
.ch__pm-btn {
    padding: 8px 16px;
    border: 1px solid var(--fr-slate-200); border-radius: 10px;
    background: var(--fr-slate-0); color: var(--fr-slate-700);
    font: 600 12px var(--font-ui); cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.ch__pm-btn:hover:not(:disabled) { background: var(--fr-slate-100); }
.ch__pm-btn--primary {
    border-color: transparent;
    background: var(--fr-blue-600); color: #fff;
}
.ch__pm-btn--primary:hover:not(:disabled) { filter: brightness(1.06); background: var(--fr-blue-600); }
.ch__pm-btn:disabled { opacity: .5; cursor: default; }

/* ══ Редактор: инструменты слева, ассистент справа ═════════════════════════ */
.fie__side--left  { border-right: 1px solid rgba(255,255,255,.10); border-left: none; width: 232px; }
.fie__side--right {
    border-left: 1px solid rgba(255,255,255,.10); border-right: none;
    width: 300px; display: flex; flex-direction: column; padding: 0;
}
.fie__side--right .fie__ai { display: flex; flex-direction: column; height: 100%; padding: 12px; }

/* Заголовок ассистента */
.fie__ai .fie__group-title { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.fie__ai-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 7px; border-radius: 6px;
    background: linear-gradient(135deg, #3d81db, #1a3e6e);
    color: #fff; font: 700 9.5px var(--font-ui); letter-spacing: .04em;
}

/* Журнал правок */
.fie__ai-log {
    flex: 1; min-height: 120px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 7px;
    padding: 10px; margin-bottom: 10px;
    background: rgba(0,0,0,.22); border-radius: 10px;
}
.fie__ai-empty {
    font: 500 11.5px/1.5 var(--font-ui); color: rgba(255,255,255,.42); text-align: center;
    margin: auto 0;
}
/* ── палитра инструментов ──
   Два столбца: инструментов больше десятка, и в один они уходили бы за край. */

.fie__tools {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.fie__tools .fie__tool {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 0;
}

.fie__tools .fie__tool svg { width: 17px; height: 17px; }
.fie__tools .fie__tool span { display: none; }

.fie__tool-name {
    margin: 8px 0 2px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}

/* ── два цвета ──
   Образцы перекрывают друг друга, как в настольных редакторах: так сразу видно,
   какой основной, и они занимают вдвое меньше места, чем две отдельные строки. */

.fie__swatches {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 4px;
    padding-left: 2px;
}

.fie__swatch {
    position: relative;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
}

.fie__swatch--secondary { margin-left: -12px; margin-top: 12px; }

.fie__swatch input[type="color"] {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.fie__swap {
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 13px;
    line-height: 1;
    color: inherit;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 4px;
    cursor: pointer;
}

.fie__swap:hover { background: rgba(255, 255, 255, .16); }

/* ── листание версий реплики (ветвление, как в Qwen) ──
   Мелкая полоса «‹ 2/3 ›» под сообщением, у которого есть версии. */
.ch__ver {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    vertical-align: middle;
}

.ch__ver-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    color: var(--fr-ink-500, #5a6b8c);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.ch__ver-arrow:hover:not(:disabled) { background: rgba(120, 140, 190, .16); color: inherit; }
.ch__ver-arrow:disabled { opacity: .35; cursor: default; }

.ch__ver-count {
    font-size: 11.5px;
    color: var(--fr-ink-400, #7d8dab);
    font-variant-numeric: tabular-nums;
    min-width: 30px;
    text-align: center;
}

/* ── действия над сообщением ──
   Копировать, править, удалить — одинаково у своего вопроса и у ответа.
   У вопроса панель стоит в строке метаданных и проявляется по наведению:
   висеть постоянно ей незачем, а на своей же реплике она отвлекала бы. */

.ch__msg-actions {
    display: inline-flex;
    gap: 2px;
    margin-left: 6px;
    opacity: 0;
    transition: opacity .12s;
}

.ch__msg:hover .ch__msg-actions,
.ch__msg-actions:focus-within { opacity: 1; }

/* Где наведения нет — на телефоне и планшете — действия видны всегда.
   Иначе правка и удаление своего сообщения недостижимы вовсе: показать их
   нечем, а появление «по нажатию» отняло бы у пузыря обычный тап. */@media (hover: none) {
.ch__msg-actions { opacity: 1; }
}

/* ── лента на узком экране ──
   Пузырю нужна почти вся ширина: на 360 px «85 %» оставляют полосу, в которую
   не помещается ни одна осмысленная строка. Карточка ответа теряет поля, но не
   отступ между сообщениями — иначе разговор сливается в сплошное полотно. */@media (max-width: 767px) {
.ch__msg-bubble--user { max-width: 92%; }

    .ch__ai-card { border-radius: 14px; }
    .ch__ai-card-head { flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
    .ch__ai-body { padding: 10px 12px 12px; }

    /* Кнопки действий крупнее: палец точнее 44 px не попадает. */
    .ch__ai-btn { min-width: 34px; min-height: 34px; }

    /* Действия у своего сообщения переносим под строку метаданных: в одну строку
       с именем и временем они на узком экране не влезают. */
    .ch__msg-meta { flex-wrap: wrap; }
    .ch__msg-actions { margin-left: 0; }
}

.ch__ai-btn--danger:hover {
    color: #ff9ba0;
    border-color: rgba(255, 110, 110, .55);
    background: rgba(209, 52, 61, .18);
}

.fie__ai-msg {
    padding: 7px 10px; border-radius: 9px;
    font: 500 11.5px/1.45 var(--font-ui); word-break: break-word;
}
.fie__ai-msg--me   { background: var(--fr-blue-500, #2e6bff); color: #fff; align-self: flex-end; max-width: 90%; }
.fie__ai-msg--wait { background: rgba(255,255,255,.07); color: rgba(255,255,255,.6); font-style: italic; }
.fie__ai-msg--ok   { background: rgba(52,168,110,.18); color: #6ee7a8; }
.fie__ai-msg--err  { background: rgba(209,52,61,.18); color: #ff9ba0; }

/* Быстрые подсказки */
.fie__ai-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.fie__chip {
    padding: 4px 9px; border-radius: 20px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.78); font: 500 10.5px var(--font-ui);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.fie__chip:hover { background: var(--fr-blue-500, #2e6bff); border-color: transparent; color: #fff; }

.fie__ai-compose { flex-shrink: 0; }
.fie__ai-compose .fie__wide { margin-top: 7px; }

/* Выбор модели — над полем задания: его меняют под конкретную правку. */
.fie__ai-model {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 11.5px;
    color: #9aabc9;
}

/* Цвета ЯВНЫЕ, а не через переменные оболочки редакторов: фоторедактор живёт вне
   её разметки, там этих переменных нет — объявление стало бы недействительным,
   и остался бы почти белый текст на белом списке. Он и остался. */
.fie__ai-model select {
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    padding: 0 6px;
    font: inherit;
    font-size: 11.5px;
    color: #eef3fc;
    background: #131f38;
    border: 1px solid #33456b;
    border-radius: 5px;
}

/* Раскрытый список рисует система, и цвет из select он наследует не везде:
   в Windows фон выпадающего списка остаётся белым. Без явных цветов на option
   светлый текст оказывался на светлом фоне — пункты были не видны. */
.fie__ai-model select option {
    color: #eef3fc;
    background: #131f38;
}

.fie__ai-model select:focus { outline: none; border-color: #8b6dff; }
.fie__wide:disabled { opacity: .6; cursor: default; }

/* Диалог параметров фильтра — теперь между колонками, ближе к меню */
.fie__dialog { left: 250px; right: auto; }

/* Строка чата внутри проекта + кнопка «убрать из проекта» */
.ch__project-chat-row { display: flex; align-items: center; }
.ch__project-chat-row .ch__project-chat { flex: 1; margin-left: 28px; width: auto; }
.ch__project-chat-out {
    width: 26px; height: 26px; flex-shrink: 0;
    border: none; border-radius: 7px; background: transparent;
    color: var(--fr-slate-400, #9aa3b8); cursor: pointer;
    display: none; align-items: center; justify-content: center;
}
.ch__project-chat-row:hover .ch__project-chat-out { display: inline-flex; }
.ch__project-chat-out:hover { background: var(--fr-slate-200); color: #23252e; }

/* ── Перетаскивание чата в проект ──────────────────────────────────────────── */
.ch__session-item[draggable="true"] { cursor: grab; }
.ch__session-item[draggable="true"]:active { cursor: grabbing; }

/* Перетаскиваемая строка «отрывается» от списка: приглушается и слегка сжимается. */
.ch__session-item--dragging {
    opacity: .45;
    transform: scale(.97);
    transition: opacity .16s ease, transform .16s ease;
}

/* Проект-цель: подсвечивается и заметно «принимает» элемент. */
.ch__project-row--drop {
    background: var(--fr-blue-50) !important;
    box-shadow: inset 0 0 0 2px var(--fr-blue-400, #6aa0ff);
    transform: scale(1.02);
    animation: ch-project-pulse 1.1s ease-in-out infinite;
}
.ch__project-row--drop .ch__project-icon { transform: scale(1.18); }
.ch__project-row--drop .ch__project-name { color: var(--fr-blue-600); font-weight: 700; }

/* Плавность самих строк — чтобы подсветка появлялась не рывком. */
.ch__project-row {
    transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.ch__project-icon { transition: transform var(--t-fast); }

@keyframes ch-project-pulse {
    0%, 100% { box-shadow: inset 0 0 0 2px var(--fr-blue-400, #6aa0ff); }
    50%      { box-shadow: inset 0 0 0 2px var(--fr-blue-600, #2159e4); }
}

/* Появление чата в раскрытом проекте после переноса. */
.ch__project-chat-row { animation: ch-chat-in .22s ease-out; }
@keyframes ch-chat-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

/* Действия проекта: четыре кнопки — чуть теснее самой строки, чтобы имя не сжималось,
   но не мельче тач-минимума. */
.ch__project-actions { gap: 0; }
.ch__project-actions button { width: 24px; height: 24px; }










.ch-slides {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 41; width: min(560px, 92%); max-height: 84%;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,.32);
}


/* ── Поле ввода: ручное изменение высоты ──────────────────────────────────── */
.ch__form-box { position: relative; }

/* Хват на верхнем крае: узкая зона захвата с видимой «ручкой» по наведению. */
.ch__composer-resize {
    position: absolute; top: 0; left: 0; right: 0; height: 10px;
    cursor: ns-resize; z-index: 3;
    display: flex; align-items: center; justify-content: center;
}
.ch__composer-resize::before {
    content: ''; width: 42px; height: 3px; border-radius: 2px;
    background: transparent; transition: background var(--t-fast);
}
.ch__composer-resize:hover::before { background: var(--fr-slate-300, #c7cddb); }
.ch__composer-resize:active::before { background: var(--fr-blue-500, #2e6bff); }

/* Во время перетаскивания глушим выделение текста по всей странице. */
body.ch--resizing { user-select: none; cursor: ns-resize; }

/* Место под хват, чтобы он не наезжал на чипы и текст. */
.ch__form-box .ch__textarea-wrap { padding-top: 4px; }

/* ── Стоимость ответа: строка под сообщением + раскладка при наведении ─────────
   Раскрытие целиком на CSS (:hover / :focus-within) — ни одного обращения к
   серверу и ни одного перерендера Blazor: на слабом канале подсказка открывается
   мгновенно. focus-within оставляет её доступной с клавиатуры. */
.ch__ai-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px solid var(--fr-slate-100, #eef0f6);
}
/* Когда оценки нет (только биллинг) — прижимаем стоимость вправо. */
.ch__ai-foot > .ch__bill:only-child { margin-left: auto; }

/* ── Оценка ответа: лайк / дизлайк + форма пояснения ──────────────────────── */
.ch__fb { display: inline-flex; align-items: center; gap: 4px; }
.ch__fb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    border: 1px solid transparent; border-radius: 7px;
    background: transparent; color: var(--fr-slate-400, #9aa3b8);
    cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.ch__fb-btn:hover { background: var(--fr-slate-100, #eef0f6); color: var(--fr-slate-600, #5a6480); }
.ch__fb-btn--on { color: var(--fr-blue-600, #2f6fe0); background: var(--fr-blue-50, #eef4ff); }
.ch__fb-btn--on.ch__fb-btn--bad { color: #d64545; background: #fdecec; }
/* Дизлайк держим «нажатым» вниз, лайк — вверх: считывается без цвета. */
.ch__fb-btn--bad svg { transform: translateY(1px); }

.ch__fb-note {
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 2px 8px; border: none; border-radius: 999px; cursor: pointer;
    background: var(--fr-slate-100, #eef0f6); color: var(--fr-slate-500, #7a839c);
    font: 500 11px var(--font-ui);
}
.ch__fb-note:hover { background: var(--fr-slate-200, #dfe3ee); color: #23252e; }

.ch__fb-form {
    margin-top: 8px; padding: 12px;
    border: 1px solid var(--fr-slate-200, #dfe3ee); border-radius: 12px;
    background: var(--fr-slate-50, #f7f8fc);
    display: flex; flex-direction: column; gap: 9px;
}
.ch__fb-form-title { font: 700 12px var(--font-ui); color: #23252e; }
.ch__fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ch__fb-chip {
    padding: 4px 10px; border: 1px solid var(--fr-slate-200, #dfe3ee); border-radius: 999px;
    background: #fff; color: var(--fr-slate-600, #5a6480);
    font: 500 11px var(--font-ui); cursor: pointer; transition: background .12s, border-color .12s;
}
.ch__fb-chip:hover { background: var(--fr-blue-50, #eef4ff); border-color: var(--fr-blue-400, #6aa0ff); color: #23252e; }
.ch__fb-input {
    resize: vertical; min-height: 44px;
    padding: 8px 10px; border: 1px solid var(--fr-slate-200, #dfe3ee); border-radius: 8px;
    background: #fff; color: #23252e; font: 400 12.5px/1.4 var(--font-ui); outline: none;
}
.ch__fb-input:focus { border-color: var(--fr-blue-400, #6aa0ff); }
.ch__fb-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ch__fb-cancel, .ch__fb-send {
    padding: 6px 14px; border-radius: 8px; cursor: pointer;
    font: 600 12px var(--font-ui); border: 1px solid transparent;
}
.ch__fb-cancel { background: transparent; color: var(--fr-slate-500, #7a839c); border-color: var(--fr-slate-200, #dfe3ee); }
.ch__fb-cancel:hover { background: var(--fr-slate-100, #eef0f6); }
.ch__fb-send { background: var(--fr-blue-600, #2f6fe0); color: #fff; }
.ch__fb-send:hover { background: var(--fr-blue-700, #2a5fc4); }
.ch__bill {
    position: relative;
    display: inline-flex; align-items: baseline; gap: 5px;
    font: 500 11px/1.2 var(--font-ui);
    color: var(--fr-slate-400, #9aa3b8);
    cursor: help; outline: none;
    /* Пунктир — общепринятый знак «здесь есть пояснение». */
    border-bottom: 1px dotted var(--fr-slate-300, #c7cddd);
    padding-bottom: 1px;
}
.ch__bill:hover, .ch__bill:focus-visible { color: var(--fr-slate-600, #5a6480); }
.ch__bill-sum { font-weight: 700; color: var(--fr-slate-600, #5a6480); }
.ch__bill-dot { opacity: .5; }

.ch__bill-card {
    position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 60;
    width: 288px; padding: 12px 14px;
    background: var(--fr-slate-0, #fff);
    border: 1px solid var(--fr-slate-200, #dfe3ee);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(90,104,150,.22);
    cursor: default; text-align: left;
    /* Скрыто без display:none — тогда работает плавное появление, а содержимое
       остаётся в потоке для программ чтения с экрана. Видимость переключается
       мгновенно (0s), иначе она сменилась бы в конце анимации и появление было
       бы рывком; при скрытии — с задержкой, чтобы успело отработать затухание. */
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease, visibility 0s .12s;
}
/* Мостик через зазор между строкой и карточкой: без него указатель по дороге
   «проваливается» мимо обоих элементов и подсказка захлопывается. */
.ch__bill-card::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px;
}
.ch__bill:hover .ch__bill-card,
.ch__bill:focus-within .ch__bill-card {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .12s ease, transform .12s ease, visibility 0s;
}

.ch__bill-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 2.5px 0;
    font: 500 11.5px/1.45 var(--font-ui);
    color: var(--fr-slate-500, #7a839c);
}
.ch__bill-row b {
    font-weight: 600; color: #23252e;
    text-align: right; overflow-wrap: anywhere;
}
/* Составляющие показателя — со сдвигом, чтобы читались как расшифровка строки выше. */
.ch__bill-row--sub { padding-left: 12px; font-size: 11px; opacity: .85; }
.ch__bill-row--total { padding-top: 6px; }
.ch__bill-row--total span { color: #23252e; font-weight: 600; }
.ch__bill-row--total b { font-size: 13px; color: var(--fr-blue-600, #2f6fe0); }

.ch__bill-sep {
    height: 1px; margin: 7px 0;
    background: var(--fr-slate-100, #eef0f6);
}
.ch__bill-note {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--fr-slate-100, #eef0f6);
    font: 500 10.5px/1.45 var(--font-ui);
    color: var(--fr-slate-400, #9aa3b8);
}

/* ── Настройки → Интеграции (Telegram, Google Docs) ────────────────────────── */
.ch-set__section-hint {
    margin: -6px 0 16px; max-width: 62ch;
    font: 500 12.5px/1.55 var(--font-ui); color: var(--fr-slate-500, #7a839c);
}

/* Карточка одного канала. Подключение — один шаг, поэтому карточка компактная:
   заголовок с состоянием + ровно то действие, которое сейчас уместно. */
.ch-int {
    border: 1px solid var(--fr-slate-200, #dfe3ee); border-radius: 14px;
    padding: 14px 16px; margin-bottom: 12px; background: var(--fr-slate-0, #fff);
}
.ch-int__head { display: flex; align-items: center; gap: 11px; }
.ch-int__logo {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.ch-int__logo--tg { background: linear-gradient(135deg, #2aabee, #229ed9); }
.ch-int__logo--gd { background: linear-gradient(135deg, #4285f4, #1a73e8); }

.ch-int__title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-int__title { font: 700 13.5px var(--font-ui); color: #23252e; }
.ch-int__sub {
    font: 500 11.5px/1.4 var(--font-ui); color: var(--fr-slate-500, #7a839c);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-int__badge {
    flex-shrink: 0; padding: 3px 9px; border-radius: 999px;
    background: #e8f6ee; color: #1c7a4a; font: 700 10.5px var(--font-ui);
}

.ch-int__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }

/* Главное действие канала («Подключить Google») — ссылка, потому что это переход на согласие. */
.ch-int__primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: 9px; text-decoration: none;
    background: var(--fr-blue-600, #2f6fe0); color: #fff;
    font: 600 12.5px var(--font-ui); transition: background .15s ease;
}
.ch-int__primary:hover { background: var(--fr-blue-700, #2a5fc4); color: #fff; }

.ch-int__link {
    border: none; background: transparent; cursor: pointer; padding: 6px 2px;
    color: var(--fr-blue-600, #2f6fe0); font: 600 12px var(--font-ui);
}
.ch-int__link:hover { text-decoration: underline; }

.ch-int__unlink {
    border: 1px solid var(--fr-slate-200, #dfe3ee); border-radius: 9px; cursor: pointer;
    padding: 8px 14px; background: transparent;
    color: #d64545; font: 600 12px var(--font-ui);
}
.ch-int__unlink:hover:not(:disabled) { background: #fdecec; border-color: #f2b8b8; }
.ch-int__unlink:disabled, .ch-int__link:disabled { opacity: .55; cursor: default; }

.ch-int__textarea { resize: vertical; min-height: 62px; font-family: var(--font-mono, monospace); font-size: 11.5px; }

/* Итог операции: зелёный — получилось, красный — нет. Текст приходит от сервера. */
.ch-int__status {
    margin: 4px 0 0; padding: 9px 12px; border-radius: 9px;
    font: 500 12px/1.5 var(--font-ui);
}
.ch-int__status--ok  { background: #e8f6ee; color: #1c7a4a; }
.ch-int__status--err { background: #fdecec; color: #b3372f; }

/* ── Список источников документов (9 провайдеров) ─────────────────────────── */
.ch-int__group-title {
    margin: 18px 0 8px; font: 700 12px var(--font-ui);
    letter-spacing: .03em; text-transform: uppercase; color: var(--fr-slate-500, #7a839c);
}
.ch-int-list {
    border: 1px solid var(--fr-slate-200, #dfe3ee); border-radius: 14px;
    overflow: hidden; background: var(--fr-slate-0, #fff);
}
.ch-int-row + .ch-int-row { border-top: 1px solid var(--fr-slate-100, #eef0f6); }
.ch-int-row__head { display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
/* Бейдж-иконка провайдера: цветной фон бренда + короткая марка. */
.ch-int__logo--brand {
    width: 30px; height: 30px; flex-shrink: 0; color: #fff;
    font: 800 11px/1 var(--font-ui); letter-spacing: -.02em;
}
.ch-int__logo--gdocs      { background: #1a73e8; }
.ch-int__logo--notion     { background: #111827; }
.ch-int__logo--confluence { background: #2684ff; }
.ch-int__logo--dropbox    { background: #0061ff; }
.ch-int__logo--yandexdisk { background: #37a0f4; }
.ch-int__logo--s3         { background: #e2574c; }
.ch-int__logo--sharepoint { background: #0a7f8c; }
.ch-int__logo--githubwiki { background: #24292e; }
.ch-int__logo--bitrix24kb { background: #2fabe1; font-size: 9.5px; }
/* Мессенджеры. */
.ch-int__logo--max             { background: #6b57ff; }
.ch-int__logo--vk              { background: #0077ff; font-size: 9.5px; }
.ch-int__logo--yandexmessenger { background: #fc3f1d; }
.ch-int__logo--slack           { background: #4a154b; }

/* Раскрытая форма подключения источника. */
.ch-int-form {
    display: flex; flex-direction: column; gap: 10px;
    padding: 4px 14px 14px; border-top: 1px dashed var(--fr-slate-200, #dfe3ee);
}
.ch-int-form__or {
    font: 500 11px var(--font-ui); color: var(--fr-slate-400, #9aa3b8);
    text-align: center; margin: 2px 0;
}
.ch-int-field { display: flex; flex-direction: column; gap: 4px; }
.ch-int-field__label { font: 600 11.5px var(--font-ui); color: var(--fr-slate-600, #5a6480); }

/* Telegram-карточка в одном стиле со списком источников (та же рамка/радиус/фон). */
.ch-int--card {
    border: 1px solid var(--fr-slate-200, #dfe3ee); border-radius: 14px;
    background: var(--fr-slate-0, #fff); box-shadow: none; padding: 0; overflow: hidden;
}
.ch-int--card .ch-int__head { padding: 12px 14px; }
.ch-int--card .ch-int-form { padding: 0 14px 14px; }
.ch-int__logo--tg { background: linear-gradient(135deg, #2aabee, #229ed9); }

/* Ряд кнопок формы + аккуратные кнопки одного размера. */
.ch-int-form__row { display: flex; gap: 8px; }
.ch-int-btn {
    flex: 1; min-height: 38px; padding: 0 14px; cursor: pointer;
    border: 1px solid var(--fr-slate-200, #dfe3ee); border-radius: 10px;
    background: var(--fr-slate-0, #fff); color: var(--fr-slate-700, #3f495e);
    font: 600 13px var(--font-ui); transition: background .14s, border-color .14s, color .14s;
}
.ch-int-btn:hover:not(:disabled) { background: var(--fr-slate-50, #f7f8fc); border-color: var(--fr-slate-300, #c7cddd); }
.ch-int-btn--primary {
    border-color: transparent; background: var(--fr-blue-600, #2f6fe0); color: #fff;
}
.ch-int-btn--primary:hover:not(:disabled) { background: var(--fr-blue-700, #2a5fc4); }
.ch-int-btn--danger { color: #d64545; }
.ch-int-btn--danger:hover:not(:disabled) { background: #fdecec; border-color: #f2b8b8; }
.ch-int-btn:disabled { opacity: .55; cursor: default; }

/* ── Фоторедактор на телефоне ──
   3 колонки (инструменты | холст | ИИ) на узком экране не помещаются. Складываем в столбец:
   холст сверху занимает большую часть, панели инструментов и ассистента — снизу невысокими
   блоками с собственной прокруткой. Диалоги фильтров уже viewport-safe. */@media (max-width: 760px) {
.fie__body { flex-direction: column; }
    .fie__stage { flex: 1 1 auto; min-height: 45vh; }
    .fie__side {
        width: 100%; flex-shrink: 0;
        max-height: 28vh;
        border-left: none; border-top: 1px solid rgba(255,255,255,.10);
        display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px;
    }
    .fie__side--left, .fie__side--right { width: 100%; border-right: none; }
    .fie__side--right .fie__ai { height: auto; }
    /* Верхнее меню-бар редактора — перенос на несколько строк вместо обрезки. */
    .fie__menubar { flex-wrap: wrap; height: auto; gap: 6px; padding: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   РЕДАКТОР КОДА (ChatCodeEditorModal)

   Палитра намеренно из ТРЁХ уровней глубины, а не из случайных оттенков:
   фон окна → полосы (шапка/тулбар/статус) → поверхности панелей. Первая версия
   мешала четыре близких синих, и интерфейс выглядел грязным.
   ══════════════════════════════════════════════════════════════════════════ */

/* Обвязка редактора кода берёт общую палитру оболочки (--ed-*). Своими остались
   только два цвета, и оба со своей причиной. */
.ed__backdrop {
    /* Полотно кода тёмное намеренно: внутри iframe работает CodeMirror со своей
       тёмной темой, и светлая рамка вокруг тёмного текста читается как рамка,
       а светлый фон под тёмным полотном — как ошибка отрисовки. */
    --cde-code: #0e1626;

    /* Ошибка запуска: на светлом фоне алый из тёмной темы слишком блёклый. */
    --cde-err:  #c81e3a;
}

@media (max-width: 820px) {
.cde { height: 100%; border-radius: 0; border: 0; }
}

@keyframes cde-typing {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1;  transform: translateY(-3px); }
}

























@media (max-width: 820px) {
/* Наведения нет — ручки видны всегда, иначе до них не добраться. */

    /* Панель формата в одну прокручиваемую полосу: перенос на три ряда съедал
       бы половину экрана, на котором и так виден только слайд. */
}



/* ── панель формата ──
   Кнопки относятся к ВЫБРАННОЙ строке. Без выбора они выключены, а не гадают,
   к чему примениться. */















ul,
ol) { margin: 0 0 7px; }@media (max-width: 820px) {
.sv { height: 100%; border-radius: 0; border: 0; }

    /* Панель ассистента уходит под слайд: рядом с ним на телефоне не помещаются оба. */
}













@media (max-width: 820px) {
.tv { height: 100%; border-radius: 0; border: 0; }
}







/* ───────────────────────── Окно уточнения ─────────────────────────
   Агент приостановился и ждёт ответа. Вопрос показывается ПОВЕРХ диалога, а не в ленте:
   там форма уезжала вверх с прокруткой, терялась из виду, а после ответа оставалась
   в истории «мёртвой».

   Стили здесь, а не в ChatClarifyModal.razor.css, по историческим причинам: бандл
   scoped-стилей в App.razor не подключался, и любой .razor.css в Mas.Web не применялся
   вовсе. Теперь подключён (Mas.Web.styles.css — по имени СБОРКИ, не по RootNamespace),
   так что переезд в scoped-файл возможен; здесь их оставили, чтобы не двигать рабочее
   оформление ради самого переезда. */

/* ── Встраиваемая поверхность в ленте (форма уточнения, позже канбан и др.) ────────────────
   Рендерится как карточка ассистента (.ch__msg--ai > .ch__ai-card), поэтому НАСЛЕДУЕТ отступы,
   аватар ◆ FAI и переменные акцента генеративного UI — они объявлены на .ch__ai-body, а тело
   поверхности это та же .ch__ai-body. Отдельному окну их приходилось повторять руками (иначе
   кнопки выходили белым по белому); встроенной поверхности они доходят сами. Здесь — только то,
   чем поверхность ОТЛИЧАЕТСЯ от обычного ответа: акцентная рамка «ждём вас», заголовок-вопрос,
   крестик и подсказка. */
.ch__surface-card {
    border-color: var(--cur-border, rgba(var(--rgb-indigo), .35));
    box-shadow: 0 0 0 1px var(--cur-border, rgba(var(--rgb-indigo), .18)),
                0 10px 30px rgba(20, 24, 38, .10);
}

/* Крестик — в правом краю шапки, на одной линии с бейджем. */
.ch__surface-close {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ch-text-muted, #9aa0b0);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ch__surface-close:hover {
    background: var(--fr-slate-100, #f1f5f9);
    color: var(--ch-title, #23252e);
}

/* Заголовок-вопрос поверхности. */
.ch__surface-title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ch-title, #23252e);
}

/* Подсказка внизу: что произойдёт с формой (отделена тонкой чертой от содержимого). */
.ch__surface-hint {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ch-divider, rgba(100, 116, 160, .12));
    font-size: 12px;
    color: var(--ch-text-muted, #9aa0b0);
}

/* Пустое состояние «Прогресса»: панель на месте всегда, поэтому подпись внутри неё
   должна занимать место, а не схлопывать карточку в полоску. */
.ch__progress-card > .ch__artifacts-empty-hint {
    display: block;
    padding: 2px 2px 6px;
    max-width: none;
}

/* ── Прерванный и отменённый шаги плана ──────────────────────────────────────
   Прерванный — пользователь закрыл вопрос агента, не ответив: работа шага цела и он
   возобновляем, поэтому оформление «внимание», а не «ошибка». Отменённый — до него
   уже не дойдут, он приглушён как выполненный, но без вычёркивания «сделано». */

.ch__progress-step--aborted .ch__progress-marker {
    background: var(--fr-amber-100, #fef3c7);
    color: var(--fr-amber-700, #b45309);
    border: 2px solid var(--fr-amber-200, #fde68a);
}
.ch__progress-step--aborted .ch__progress-step-name {
    color: #8a6212;
    font-weight: 600;
}

.ch__progress-step--cancelled .ch__progress-marker {
    border: 2px dashed var(--fr-slate-300);
    background: transparent;
    color: var(--fr-slate-300);
}
.ch__progress-step--cancelled .ch__progress-step-name {
    color: var(--fr-slate-300);
}

/* Ожидаемое время шага рядом с оценкой цены — приглушено, это прогноз, а не факт. */
.ch__progress-detail-step-eta {
    margin-left: 4px;
    color: var(--fr-slate-300);
    font-weight: 500;
}

/* Кнопки управления прерванной задачей — под списком шагов. */
.ch__progress-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.ch__progress-act {
    flex: 1;
    padding: 7px 10px;
    font: 600 12px var(--font-ui);
    border-radius: 9px;
    border: 1px solid var(--fr-slate-200, #e2e8f0);
    background: transparent;
    color: var(--ch-text, #5c6172);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ch__progress-act:hover {
    background: var(--fr-slate-100, #f1f5f9);
    color: var(--ch-title, #23252e);
}
.ch__progress-act--go {
    border-color: transparent;
    background: var(--fr-blue-500, #2f6bff);
    color: #fff;
}
.ch__progress-act--go:hover {
    background: var(--fr-blue-600, #1d4ed8);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   НЕБО: голубая страница и типографика разговора
   Слой поверх Fractal — доводит чат до макета «голубой FAI»: страница из
   серо-сиреневой становится небесно-голубой, карточки светлее и мягче,
   а текст ответа читается как текст, а не как интерфейсная подпись.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Фон страницы ─────────────────────────────────────────────────────────
   Прежний mesh собирался из синего, циана и фиолета — вместе они давали
   серо-сиреневый, на котором белые карточки выглядели грязными. Здесь одна
   голубая гамма: светлый верх, белёсая середина под лентой (там читают текст)
   и голубые углы. ── */
.ch-page,
.ch {
    --ch-page-bg:
        radial-gradient(58% 44% at 50% 46%, rgba(255,255,255,.92), rgba(255,255,255,0) 72%),
        radial-gradient(46% 38% at 8% 4%,   rgba(120,176,255,.36), transparent 72%),
        radial-gradient(48% 40% at 96% 96%, rgba(126,182,255,.38), transparent 74%),
        linear-gradient(168deg, #d7e8fd 0%, #eaf3ff 42%, #f2f7ff 58%, #d9e9fd 100%);
}

/* Карточки ответов и поверхностей — мягче и голубее теней, чтобы белое
   не «резалось» об голубой фон, а лежало на нём. */
.ch__ai-card {
    border-radius: 18px 18px 18px 6px !important;
    border-color: rgba(46,107,255,.10) !important;
    box-shadow: 0 1px 2px rgba(28,62,140,.05), 0 10px 26px rgba(28,62,140,.08) !important;
}
.ch__msg-bubble--user,
[data-theme="light"] .ch__msg-bubble--user,
[data-theme="dark"]  .ch__msg-bubble--user {
    border-radius: 18px 18px 6px 18px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ТИПОГРАФИКА РАЗГОВОРА
   Чат читают, а не разглядывают: до этого весь текст жил на интерфейсной
   шкале (--ts-*, 14px и мельче) — той же, что подписи кнопок и бейджи. Ответ
   ассистента здесь переводится на читательский размер и ритм, а служебные
   подписи, наоборот, уводятся в один мелкий регистр, чтобы не спорить с ним.
   Порядок импорта делает своё: правила ниже перебивают базовые без !important.
   ══════════════════════════════════════════════════════════════════════════ */

/* Сглаживание — на всю страницу чата: Jakarta/Outfit в вебките без него
   выглядят жирнее, чем задумано, и мелкие подписи «замыливаются». */
.ch-page,
.ch,
.ch-tpl__pop {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Тело ответа ──────────────────────────────────────────────────────────
   15.5px/1.72 — длинный ответ читается абзацами, а не строчками интерфейса.
   Колонка (880px) при этом даёт ~75 знаков в строке, что близко к книжному. */
.ch__ai-body,
.ch__stream-body {
    font-size: 15.5px;
    line-height: 1.72;
    color: #1f2330;
    letter-spacing: .002em;
}

/* Абзацы и списки: воздух между блоками больше, чем между строками, —
   иначе перечисление сливается в стену. */
.ch__md p { margin: 0 0 .9em; }
.ch__md ul,
.ch__md ol { margin: .55em 0 .9em; padding-left: 1.45em; }
.ch__md li { margin-bottom: .4em; }
.ch__md li::marker { color: var(--fr-slate-500); font-weight: 600; }
.ch__md li > ul,
.ch__md li > ol { margin: .35em 0 .2em; }

/* Заголовки внутри ответа — дисплейным шрифтом и с плотным трекингом:
   так виден уровень, даже когда разница в кегле всего 10%. */
.ch__md h1,
.ch__md h2,
.ch__md h3,
.ch__md h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.28;
    color: #171a24;
    margin: 1.4em 0 .5em;
}
.ch__md h1 { font-size: 1.32em; }
.ch__md h2 { font-size: 1.18em; }
.ch__md h3 { font-size: 1.06em; }
.ch__md h4 { font-size: 1em; }
/* Ответ часто НАЧИНАЕТСЯ с заголовка — верхний отступ тогда рвёт карточку. */
.ch__md > :first-child { margin-top: 0; }

/* Полужирный: 700 у Jakarta заметно тяжелее строки и «рябит» в тексте. */
.ch__md strong { font-weight: 600; color: #10131c; }

/* Мера строки: карточка тянется до 780px, и на 15.5px это ~95 знаков — глаз
   теряет начало следующей строки. Ограничиваем ТЕКСТОВЫЕ блоки, а таблицы,
   картинки и код оставляем во всю ширину — им ширина нужна по делу. */
.ch__md > p,
.ch__md > ul,
.ch__md > ol,
.ch__md > blockquote,
.ch__md > h1,
.ch__md > h2,
.ch__md > h3,
.ch__md > h4 {
    max-width: 74ch;
}

/* Моноширинные вставки — на общей шкале с текстом, цифры в колонку.
   Розовый #c7254e достался от базовой темы и в голубом чате кричит:
   переводим в синие чернила на светлой подложке. */
.ch__md code,
.ch__md pre {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.ch__md code {
    font-size: .86em;
    color: #2a3f6b;
    background: rgba(46,107,255,.07);
    border: 1px solid rgba(46,107,255,.12);
    padding: .5px 5px;
}
.ch__md pre code { border: none; padding: 0; }
.ch__md blockquote { color: #47506b; }
.ch__md table { font-size: .9em; font-variant-numeric: tabular-nums; }
.ch__md th { font-weight: 600; letter-spacing: .01em; }

/* Реплика пользователя: тот же кегль, но 500 — белое по синему тоньше
   читается, чем чёрное по белому, и на 400 строка «выцветает». */
.ch__msg-bubble {
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: .005em;
}

/* ── Служебный регистр: шапка, мета, шаги, стоимость ──────────────────────
   Всё, что не является речью, сведено к одному размеру и цвету — оно должно
   опознаваться боковым зрением, а не читаться. ── */
.ch__ai-brand {
    font-size: 14.5px;
    letter-spacing: -.01em;
}
.ch__agent-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
}
/* Дата и «Вы» — цифры в колонку, иначе строка дёргается при каждой минуте. */
.ch__msg-meta {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}
.ch__msg-who { font-weight: 600; }
.ch__think-toggle,
.ch__reasoning-toggle {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
}
.ch__think-label { font-size: 12.5px; font-weight: 500; }
.ch__think-detail { font-size: 12px; }
/* Токены, секунды, рубли — тоже табличными цифрами. */
.ch__bill,
.ch__bill-card,
.ch__ver-count { font-variant-numeric: tabular-nums; }

/* ── Композер ─────────────────────────────────────────────────────────────
   Поле ввода набирают тем же кеглем, каким потом читают ответ, — иначе
   отправленная реплика «прыгает» в размере. ── */
.ch__textarea {
    font-size: 15.5px;
    line-height: 1.6;
    letter-spacing: .002em;
}
.ch__textarea::placeholder {
    font-weight: 500;
    letter-spacing: .005em;
}
.ch__disclaimer {
    font-size: 11.5px;
    letter-spacing: .01em;
}

/* ── Заголовки панелей и пустого экрана ───────────────────────────────────
   Дисплейный шрифт уже стоит; здесь только плотность — Outfit на крупных
   кеглях без отрицательного трекинга выглядит разреженным. ── */
.ch__empty-title { letter-spacing: -.025em; }
.ch__empty-sub { font-size: 15.5px; line-height: 1.6; }
.ch__menu-title,
.ch__depth-title,
.ch__agents-title,
.ch__llm-title,
.ch__progress-title,
.ch__artifacts-title {
    letter-spacing: -.015em;
}
/* Названия чатов в списке и имена агентов — читаются списком, им нужен ритм,
   а не размер: чуть плотнее трекинг и средний вес. */
.ch__session-title,
.ch__agent-name {
    font-weight: 600;
    letter-spacing: -.005em;
}

/* Поверхность-форма в ленте: заголовок-вопрос — дисплейным, как заголовки. */
.ch__surface-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.015em;
}
.ch__surface-hint {
    font-size: 12px;
    line-height: 1.5;
}


/* ── Осталось сделать: панель и окно ──────────────────────────────────────
   Панель показывает две строки и кнопку «Ещё N» — она напоминает о пунктах,
   а не ведёт их список; разбирать десяток пунктов нужно в окне, с полной
   формулировкой. Окно узкое (список, а не файловый менеджер), поэтому свой
   модификатор ширины поверх общей оболочки .ch-set. */
.ch__artifact-more {
    align-self: flex-start;
    padding: 4px 9px;
    border: 1px dashed var(--fr-slate-300);
    border-radius: 8px;
    background: transparent;
    font: 600 11.5px var(--font-ui);
    color: var(--fr-slate-500);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ch__artifact-more:hover {
    background: var(--fr-slate-50);
    border-color: var(--fr-slate-400);
    color: #23252e;
}

.ch__todo { width: 560px; height: min(520px, 84vh); flex-direction: column; }
.ch__todo-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 18px 18px 16px;
    gap: 12px;
}
.ch__todo-head { display: flex; align-items: center; gap: 10px; }
.ch__todo-head-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 11px;
    background: var(--fr-blue-50); color: var(--fr-blue-600);
}
.ch__todo-head-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ch__todo-head-title { font: 600 14px/1.2 var(--font-display); color: #23252e; }
.ch__todo-head-sub { font: 500 11.5px var(--font-ui); color: var(--fr-slate-500); }
.ch__todo-empty { margin: 0; font: 500 12.5px var(--font-ui); color: var(--fr-slate-500); }
.ch__todo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    min-height: 0;
}
.ch__todo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--fr-slate-200);
    border-radius: 10px;
    background: var(--fr-slate-0);
}
.ch__todo-text {
    flex: 1;
    min-width: 0;
    font: 500 12.5px/1.45 var(--font-ui);
    color: #23252e;
}
.ch__todo-meta {
    flex-shrink: 0;
    font: 500 10.5px var(--font-ui);
    color: var(--fr-slate-500);
}
.ch__todo-drop {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 26px; height: 26px;
    border: none; border-radius: 8px;
    background: transparent; color: var(--fr-slate-500);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.ch__todo-drop:hover { background: var(--fr-rose-50, var(--fr-slate-100)); color: var(--fr-rose-600, #23252e); }

@media (max-width: 640px) {
    .ch__todo { width: 100%; height: 100dvh; border-radius: 0; }
}

/* ── Файлы, приложенные к реплике ─────────────────────────────────────────
   Плашками ПОД текстом вопроса: файл принесли с этим вопросом, и связь должна
   быть видна там же, а не только общим списком в панели артефактов. */
.ch__msg-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.ch__msg-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 9px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .16);
    color: inherit;
    text-decoration: none;
    font: 500 11.5px var(--font-ui);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.ch__msg-file:hover {
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .55);
}
.ch__msg-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}





/* ── components/gift-page.css ── */
/* Подарочные сертификаты — порт Gift.module.scss (React) */

/* ── Локальные токены (dark theme default) ── */
:root {
    --gift-page-bg:     var(--b-dark-card);
    --gift-heading:     var(--b-slate-2);
    --gift-text:        var(--b-slate-3);
    --gift-panel-bg:    rgba(61, 130, 242, 0.85);
    --gift-panel-bg-hv: rgba(61, 130, 242, 1);
    --gift-tab-clr:     #60a5fa;
    --gift-tab-border:  rgba(61, 130, 242, 0.4);
    --gift-tab-active:  #3d82f2;
    --gift-sub-text:    var(--b-slate-4);
    --gift-banner-bg:   var(--b-dark-elev);
}

/* ── Light theme overrides ── */
[data-theme="light"] {
    --gift-page-bg:     #fff;
    --gift-heading:     #143d62;
    --gift-text:        #143d62;
    --gift-tab-clr:     #3d82f2;
    --gift-tab-border:  rgba(61, 130, 242, 0.4);
    --gift-tab-active:  #3d82f2;
    --gift-sub-text:    #4a5568;
    --gift-banner-bg:   #e8edf3;
}

.gift-wrap {
    width: 100%;
    box-sizing: border-box;
    background: var(--gift-page-bg);
    margin: 0 -1.25rem;
    padding: 0 1.25rem 2rem;
}
@media (min-width: 640px) {
    .gift-wrap { margin: 0 -2rem; padding-right: 2rem; padding-left: 2rem; }
}
@media (min-width: 1024px) {
    .gift-wrap { margin: 0 -2.5rem; padding-right: 2.5rem; padding-left: 2.5rem; }
}

.gift-header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .gift-header { padding: 0 32px; }
}

.gift-title {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--ts-3xl);
    line-height: 30px;
    text-align: center;
    color: var(--gift-heading);
    margin: 20px 0 0;
    letter-spacing: 0.24px;
}
@media (min-width: 768px) {
    .gift-title {
        font-size: var(--ts-4xl);
        line-height: normal;
        margin-top: 48px;
        letter-spacing: 0.3px;
    }
}

.gift-subtitle {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--ts-md);
    line-height: normal;
    text-align: center;
    color: var(--gift-heading);
    margin: 4px 0 0;
}
@media (min-width: 768px) {
    .gift-subtitle { font-size: var(--ts-xl); margin-top: 8px; }
}

.gift-brand { font-family: var(--font-ui); font-weight: 600; }

.gift-tabs-wrap {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
@media (min-width: 768px) {
    .gift-tabs-wrap { margin-top: 28px; }
}

.gift-tabs-inner {
    display: inline-flex;
    gap: 0;
    border: 1.5px solid var(--gift-tab-border);
    border-radius: 50px;
    padding: 3px;
    width: 100%;
    max-width: 360px;
    justify-content: center;
}
@media (min-width: 768px) {
    .gift-tabs-inner {
        border-width: 2px;
        border-radius: 60px;
        width: auto;
        max-width: none;
    }
}

.gift-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 5px 0;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--ts-base);
    color: var(--gift-tab-clr);
    cursor: pointer;
    transition: all var(--t-slow);
    border-radius: 50px;
    letter-spacing: 0.42px;
    text-align: center;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.gift-tab:hover { opacity: 0.8; }
@media (min-width: 768px) {
    .gift-tab {
        flex: none;
        padding: 6px 36px;
        font-size: var(--ts-lg);
        border-radius: 60px;
        letter-spacing: 0.48px;
    }
}
.gift-tab--active {
    background: var(--gift-tab-active);
    color: #fff;
    font-weight: 700;
}

.gift-tab-sub {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: var(--ts-xs);
    line-height: normal;
    text-align: center;
    color: var(--gift-sub-text);
    margin: 10px auto 0;
    max-width: 700px;
}
@media (min-width: 768px) {
    .gift-tab-sub { font-size: var(--ts-md); margin-top: 14px; }
}

/* Hero banner */
.gift-hero {
    position: relative;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    overflow: visible;
}
@media (min-width: 768px) {
    .gift-hero {
        display: block;
        height: 580px;
        overflow: hidden;
        margin-top: 20px;
    }
}

.gift-banner-bg {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    order: 2;
    background-color: var(--gift-banner-bg);
}
@media (min-width: 768px) {
    .gift-banner-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        order: unset;
        z-index: 0;
    }
}

.gift-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.gift-banner-grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse 140% 80% at 50% 50%,
        rgba(255, 255, 255, 0) 45%,
        rgba(255, 255, 255, 1) 85%
    );
}
@media (min-width: 768px) {
    .gift-banner-grad {
        background: radial-gradient(
            ellipse 130% 75% at 50% 50%,
            rgba(255, 255, 255, 0) 58.928%,
            rgba(255, 255, 255, 1) 96.154%
        );
    }
}

.gift-hero-content {
    position: relative;
    z-index: 1;
    padding: 12px 0 8px;
    text-align: center;
    order: 1;
}
@media (min-width: 768px) {
    .gift-hero-content {
        padding: 28px 20px;
        order: unset;
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.65) 70%,
            rgba(255, 255, 255, 0) 100%
        );
    }
}

.gift-hero-title {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: var(--ts-3xl);
    line-height: 26px;
    color: var(--gift-heading);
    margin: 0 auto 8px;
    max-width: 800px;
    letter-spacing: 0.22px;
}
@media (min-width: 768px) {
    .gift-hero-title {
        font-size: var(--ts-4xl);
        line-height: normal;
        margin-bottom: 20px;
        letter-spacing: 0.3px;
    }
}

.gift-hero-desc {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--ts-base);
    line-height: 17px;
    color: var(--gift-text);
    margin: 0 auto;
    max-width: 720px;
}
.gift-hero-desc p { margin: 0 0 3px; }
.gift-hero-desc p:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
    .gift-hero-desc {
        font-size: var(--ts-xl);
        line-height: 22px;
    }
    .gift-hero-desc p { margin: 0 0 4px; }
}

.gift-deco-line {
    margin-top: 24px;
    display: none;
    justify-content: center;
}
.gift-deco-line img {
    max-width: 920px;
    width: 100%;
    height: auto;
    display: block;
}
@media (min-width: 768px) {
    .gift-deco-line { display: flex; }
}

.gift-cards { width: 100%; box-sizing: border-box; }

/* Показ десктоп / мобилка */
.gift-grid-desktop { display: none; }
.gift-grid-mobile {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 16px 48px;
    align-items: center;
}
@media (min-width: 768px) {
    .gift-grid-desktop { display: grid; }
    .gift-grid-mobile { display: none !important; }
}

/* Desktop grid */
.gift-grid-desktop {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding: 48px 40px 64px;
    margin: 0 auto;
    max-width: 960px;
    box-sizing: border-box;
}
@media (max-width: 1199px) {
    .gift-grid-desktop {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px 20px;
        max-width: 320px;
    }
}

/* Темы fallback */
.gift-theme--premium .gift-cert-bg,
.gift-theme--premium .gift-mob-bg {
    background-color: #1e3a5f;
}
.gift-theme--business .gift-cert-bg,
.gift-theme--business .gift-mob-bg {
    background-color: #4a1525;
}

/* Desktop certificate card + flip */
.gift-cert {
    position: relative;
    width: 260px;
    height: 370px;
    margin: 0 auto;
    perspective: 1000px;
    cursor: pointer;
}
@media (max-width: 1199px) {
    .gift-cert { width: 100%; max-width: 260px; }
}

.gift-cert--expanded {
    width: 290px;
    height: 420px;
}
@media (max-width: 1199px) {
    .gift-cert--expanded { width: 100%; max-width: 290px; }
}
.gift-cert--expanded .gift-cert-inner {
    transform: rotateY(180deg);
}

.gift-cert-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s var(--ease-std);
    transform-style: preserve-3d;
}
.gift-cert:hover:not(.gift-cert--expanded) .gift-cert-inner {
    transform: scale(1.06);
}

.gift-cert-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.gift-cert-face--front {
    z-index: 2;
    transform: rotateY(0deg);
    overflow: visible;
}
.gift-cert-face--back {
    transform: rotateY(180deg);
    overflow: hidden;
}

.gift-cert-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: 16px;
    overflow: hidden;
    background-color: #1e293b;
}
.gift-cert-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gift-cert-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 18px;
    justify-content: space-between;
}
.gift-cert-face--back .gift-cert-content {
    padding: 20px 0;
}

.gift-cert-img-wrap {
    width: 250px;
    height: 160px;
    margin-top: -42px;
    margin-bottom: 12px;
    transform: rotate(-0.91deg);
    box-shadow: 0 5px 3px 0 rgba(0, 0, 0, 0.36);
}
@media (max-width: 1199px) {
    .gift-cert-img-wrap {
        width: 90%;
        max-width: 250px;
        height: auto;
        aspect-ratio: 250 / 160;
    }
}
.gift-cert-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gift-cert-brand,
.gift-cert-price {
    font-family: var(--font-ui);
    font-weight: 800;
    color: #fff;
    text-align: center;
    margin: 0 0 8px;
}
.gift-cert-brand { font-size: var(--ts-lg); }
.gift-cert-price {
    font-size: var(--ts-4xl);
    letter-spacing: 0.28px;
}

.gift-cert-details {
    font-family: var(--font-ui);
    font-weight: 300;
    font-size: var(--ts-base);
    color: #fff;
    text-decoration: underline;
    margin-bottom: 12px;
    cursor: pointer;
    transition: opacity var(--t-slow);
    background: none;
    border: none;
    padding: 0;
}
.gift-cert-details:hover { opacity: 0.8; }

.gift-cert-btn {
    width: 180px;
    min-height: 44px;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 60px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--ts-xl);
    color: #fff;
    cursor: pointer;
    transition: all var(--t-slow);
    letter-spacing: 0.48px;
}
.gift-cert-btn:hover {
    background: var(--gift-panel-bg);
    border-color: var(--gift-panel-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.gift-cert-btn:active {
    transform: translateY(0);
    background: var(--gift-panel-bg-hv);
}

.gift-cert-tariff {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--ts-3xl);
    color: #fff;
    margin: 20px 0 6px;
    text-align: center;
}
.gift-cert-brand-lg {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--ts-base);
    color: #fff;
    margin: 0 0 12px;
    text-align: center;
}
.gift-cert-divider {
    width: 100px;
    height: 1.5px;
    background: #fff;
    margin: 0 auto 16px;
}
.gift-cert-price-lg {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: var(--ts-3xl);
    color: #fff;
    margin: auto 0 12px;
    letter-spacing: 0.26px;
    text-align: center;
}

.gift-cert-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gift-cert-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: var(--ts-base);
    color: #fff;
    padding: 0 28px;
}
.gift-cert-feature strong { font-weight: 700; }
.gift-cert-feature span { font-weight: 500; }
.gift-check-d {
    width: 16px;
    height: 11px;
    flex-shrink: 0;
}

.gift-cert-btn-lg {
    width: 200px;
    min-height: 44px;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 60px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--ts-xl);
    color: #fff;
    cursor: pointer;
    transition: all var(--t-slow);
    letter-spacing: 0.51px;
    margin: 24px auto 20px;
}
.gift-cert-btn-lg:hover {
    background: var(--gift-panel-bg);
    border-color: var(--gift-panel-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.gift-cert-btn-lg:active {
    transform: translateY(0);
    background: var(--gift-panel-bg-hv);
}

/* Mobile cards */
.gift-mob {
    width: calc(100% - 16px);
    max-width: 380px;
    aspect-ratio: 417 / 237;
    perspective: 800px;
    cursor: pointer;
}
.gift-mob--flip .gift-mob-inner {
    transform: rotateY(180deg);
}
.gift-mob-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s var(--ease-std);
    transform-style: preserve-3d;
}
.gift-mob-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
}
.gift-mob-face--front {
    z-index: 2;
    transform: rotateY(0deg);
    overflow: visible;
}
.gift-mob-face--back {
    transform: rotateY(180deg);
    overflow: hidden;
}

.gift-mob-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: 12px;
    overflow: hidden;
    background-color: #1e293b;
}
.gift-mob-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gift-mob-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}
.gift-mob-left {
    flex-shrink: 0;
    width: 50%;
    padding-left: 4px;
    margin-top: -150px;
}
.gift-mob-left img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.37));
}
.gift-mob-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 12px 50px 0;
    min-width: 0;
}
.gift-mob-brand {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: var(--ts-md);
    color: #fff;
    margin: 0 0 4px;
    text-align: center;
    white-space: nowrap;
}
.gift-mob-price {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: var(--ts-3xl);
    color: #fff;
    margin: 0;
    letter-spacing: 0.24px;
    text-align: center;
    white-space: nowrap;
}

.gift-mob-actions {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
}
.gift-mob-details {
    background: transparent;
    border: none;
    font-family: var(--font-ui);
    font-weight: 300;
    font-size: var(--ts-base);
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}
.gift-mob-btn {
    width: 140px;
    height: 38px;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 100px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--ts-lg);
    color: #fff;
    cursor: pointer;
    transition: all var(--t-slow);
    letter-spacing: 0.45px;
}
.gift-mob-btn:hover {
    background: var(--gift-panel-bg);
    border-color: var(--gift-panel-bg);
}
.gift-mob-btn:active {
    background: var(--gift-panel-bg-hv);
}

.gift-mob-back {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    height: 100%;
    padding: 10px 10px 10px 14px;
}
.gift-mob-back-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.gift-mob-tariff {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--ts-3xl);
    color: #fff;
    margin: 8px 0 0 40px;
    text-align: left;
}
.gift-mob-features {
    list-style: none;
    padding: 0;
    margin: 50px 0 0 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gift-mob-features li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: var(--ts-xs);
    line-height: 14px;
    color: #fff;
}
.gift-mob-features strong { font-weight: 700; }
.gift-mob-features span { font-weight: 500; }
.gift-check-m {
    width: 14px;
    height: 10px;
    flex-shrink: 0;
    margin-top: 2px;
}

.gift-mob-back-right {
    flex-shrink: 0;
    width: 44%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.gift-mob-brand-sm {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--ts-base);
    color: #fff;
    margin: 0;
    text-align: center;
}
.gift-mob-price-sm {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: var(--ts-3xl);
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: 0.22px;
    text-align: center;
    white-space: nowrap;
}

/* Страница оплаты (заглушка) */
.gift-pay {
    max-width: 560px;
    margin: 0 auto;
    padding: 1rem 0 3rem;
}
.gift-pay__title {
    font-family: var(--font-body);
    font-size: var(--ts-3xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 1rem;
}
.gift-pay__text {
    font-family: var(--font-body);
    color: var(--color-secondary);
    margin: 0 0 0.75rem;
}
.gift-pay__hint {
    font-size: var(--ts-base);
    color: var(--gift-sub-text);
    margin: 0 0 1.5rem;
}




/* ── components/subscribe-tariffs.css ── */
/* Страница тарифов — порт Subscribe.module.scss + SubscriptionCard + BillingToggle */

/* ── UIKit audit (P1): локальные токены → brand.css ───────────────── */
:root {
  --subs-audit-bg:    var(--b-cream-deep);
  --subs-audit-ink:   var(--b-coffee);
  --subs-audit-muted: var(--b-slate-4);
  --subs-audit-blue:  var(--b-info-br);
}

.subs-wrap {
    --sw-bg: #edf1f8;
    --sw-text: #1e293b;
    --sw-text2: #475569;
    --sw-text3: #64748b;
    --sw-card-bg: rgba(255,255,255,.40);
    --sw-card-hover-bg: rgba(255,255,255,.42);
    --sw-card-shadow-inset: rgba(255,255,255,.35);
    --sw-card-title: #1e293b;
    --sw-card-desc: #64748b;
    --sw-subcard-bg: linear-gradient(160deg,rgba(255,255,255,.94) 0%,rgba(230,242,255,.72) 40%,rgba(210,232,255,.55) 50%,rgba(230,242,255,.72) 60%,rgba(255,255,255,.94) 100%);
    --sw-badge-bg: rgba(239,246,255,.65);
    --sw-badge-color: #1d4ed8;
    --sw-badge-border: rgba(59,130,246,.18);
    --sw-note-bg: linear-gradient(160deg,rgba(255,255,255,.94) 0%,rgba(230,242,255,.72) 40%,rgba(210,232,255,.55) 50%,rgba(230,242,255,.72) 60%,rgba(255,255,255,.94) 100%);
    --sw-note-p: #475569;
    --sw-note-s: #94a3b8;
    --sw-note-border: rgba(226,232,240,.6);
    --sw-toggle-bg: rgba(255,255,255,.65);
    --sw-toggle-border: rgba(0,0,0,.08);
    --sw-toggle-text: #64748b;
    --sw-dot-color: rgba(0,0,0,.035);
    --sw-ico-bg-mix: rgba(248,250,252,.5);
    --sw-ico-border-mix: rgba(226,232,240,.5);

    width: calc(100% + 0px);
    margin-left: 0;
    margin-right: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    background: var(--sw-bg);
    margin: 0 -1.25rem;
    padding: 0 1.25rem 3rem;
    min-height: calc(100vh - 5rem);
    box-sizing: border-box;
}

[data-theme="dark"] .subs-wrap {
    --sw-bg: #080b16;
    --sw-text: #e2e8f0;
    --sw-text2: #94a3b8;
    --sw-text3: #64748b;
    --sw-card-bg: rgba(20,24,45,.55);
    --sw-card-hover-bg: rgba(25,30,55,.65);
    --sw-card-shadow-inset: rgba(255,255,255,.04);
    --sw-card-title: #e2e8f0;
    --sw-card-desc: #94a3b8;
    --sw-subcard-bg: linear-gradient(160deg,rgba(20,24,45,.88) 0%,rgba(15,20,40,.75) 50%,rgba(20,24,45,.88) 100%);
    --sw-badge-bg: rgba(99,102,241,.15);
    --sw-badge-color: #818cf8;
    --sw-badge-border: rgba(99,102,241,.25);
    --sw-note-bg: linear-gradient(160deg,rgba(20,24,45,.85) 0%,rgba(15,20,42,.7) 50%,rgba(20,24,45,.85) 100%);
    --sw-note-p: #94a3b8;
    --sw-note-s: #64748b;
    --sw-note-border: rgba(148,163,184,.1);
    --sw-toggle-bg: rgba(30,35,60,.7);
    --sw-toggle-border: rgba(255,255,255,.06);
    --sw-toggle-text: #94a3b8;
    --sw-dot-color: rgba(99,102,241,.04);
    --sw-ico-bg-mix: rgba(15,20,40,.5);
    --sw-ico-border-mix: rgba(99,102,241,.12);
}
@media (min-width: 640px) {
    .subs-wrap {
        width: calc(100% + 2rem);
        margin-left: -1rem;
        margin-right: -1rem;
    }
}
@media (min-width: 768px) {
    .subs-wrap {
        width: calc(100% + 3rem);
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }
}
@media (min-width: 1024px) {
    .subs-wrap {
        width: calc(100% + 4rem);
        margin-left: -2rem;
        margin-right: -2rem;
    }
}

.subs-wrap::before,
.subs-wrap::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
}
.subs-wrap::before {
    width: 500px;
    height: 500px;
    top: 5%;
    left: -5%;
    background: radial-gradient(circle, rgba(59,130,246,.14) 0%, rgba(6,182,212,.07) 50%, transparent 70%);
}
.subs-wrap::after {
    width: 600px;
    height: 600px;
    top: 35%;
    right: -8%;
    background: radial-gradient(circle, rgba(139,92,246,.10) 0%, rgba(99,102,241,.06) 50%, transparent 70%);
}

/* Преимущества */
.subs-adv {
    width: 100%;
    position: relative;
    padding: 3.5rem 2rem 4rem;
    z-index: 1;
}
@media (max-width: 480px) {
    .subs-adv { padding-left: 14px; padding-right: 14px; }
}
.subs-adv::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--sw-dot-color) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 20%, transparent 100%);
}
.subs-adv-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Логотип компании над заголовком */
.subs-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.subs-brand .ui-header__logo {
    height: auto;
}

.subs-adv-title {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: var(--ts-5xl);
    line-height: 1.25;
    text-align: center;
    margin-bottom: 28px;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #143d62, #0986f9, #26dee0, #0986f9, #143d62);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: subs-title-shimmer 14s ease-in-out infinite;
}
@media (max-width: 785px) {
    .subs-adv-title { font-size: var(--ts-3xl); }
}
@keyframes subs-title-shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.subs-subcard {
    position: relative;
    max-width: 860px;
    margin: 0 auto 24px;
    overflow: hidden;
    background: var(--sw-subcard-bg);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border-radius: 20px;
    padding: 30px 40px;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.08), 0 6px 20px rgba(59, 130, 246, 0.06), 0 16px 56px rgba(37, 99, 235, 0.04);
    transition: box-shadow 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1);
    border: 1.5px solid transparent;
    background-clip: padding-box;
}
.subs-subcard::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: 21.5px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(99,102,241,.30) 0%, rgba(56,189,248,.18) 30%, rgba(99,102,241,.08) 50%, rgba(56,189,248,.18) 70%, rgba(99,102,241,.30) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}
.subs-subcard::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 14px;
    border: 1px solid rgba(99,102,241,.08);
    pointer-events: none;
    z-index: 2;
}
.subs-subcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1), 0 10px 32px rgba(59, 130, 246, 0.08), 0 24px 64px rgba(37, 99, 235, 0.05);
}

.subs-adv-sub {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: var(--ts-lg);
    line-height: 2;
    color: var(--sw-text);
    text-align: center;
    margin: 0;
    position: relative;
    z-index: 4;
}
@media (max-width: 785px) {
    .subs-adv-sub { font-size: var(--ts-base); line-height: 1.8; }
}
.subs-badge {
    display: inline;
    font-weight: 600;
    color: var(--sw-badge-color);
    background: var(--sw-badge-bg);
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--sw-badge-border);
    white-space: nowrap;
}
.subs-adv-foot {
    font-family: var(--font-ui);
    font-size: var(--ts-base);
    font-weight: 500;
    color: var(--sw-text3);
    text-align: center;
    margin: 12px 0 0;
    position: relative;
    z-index: 1;
}

.subs-adv-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 3rem;
    padding: 15px 52px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--ts-md);
    letter-spacing: 0.03em;
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 40%, #2563eb 100%);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25), 0 8px 24px rgba(37, 99, 235, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.3) inset;
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s cubic-bezier(0.22,1,0.36,1);
}
.subs-adv-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3), 0 12px 36px rgba(37, 99, 235, 0.2), 0 0 0 1px rgba(59, 130, 246, 0.4) inset;
}
.subs-adv-btn__ico {
    font-size: var(--ts-2xl) !important;
    color: inherit !important;
}

.subs-adv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 1280px) and (min-width: 981px) {
    .subs-adv-grid { gap: 0.75rem; }
}
@media (max-width: 980px) and (min-width: 786px) {
    .subs-adv-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
}
@media (max-width: 785px) {
    .subs-adv-grid { grid-template-columns: 1fr; gap: 1rem; }
}

.subs-adv-card--span2 {
    grid-column: span 2;
}
@media (max-width: 980px) {
    .subs-adv-card--span2 { grid-column: span 1; }
}
@media (min-width: 981px) {
    .subs-adv-card--span2 { grid-column: span 2; }
}

.subs-adv-card {
    background: var(--sw-card-bg);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--t-base), background var(--t-base), box-shadow var(--t-base);
    box-shadow: 0 1px 3px rgba(0,0,0,.03), 0 4px 20px rgba(0,0,0,.04), 0 0 0 1px var(--sw-card-shadow-inset) inset;
}
.subs-adv-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--accent) 0%, rgba(148,163,184,.15) 50%, var(--accent) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.45;
    pointer-events: none;
    z-index: 1;
}
.subs-adv-card:hover {
    transform: translateY(-4px);
    background: var(--sw-card-hover-bg);
    box-shadow: 0 4px 12px rgba(99,102,241,.08), 0 12px 40px rgba(99,102,241,.06), 0 0 0 1px var(--sw-card-shadow-inset) inset;
}
.subs-adv-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 220px;
    height: 220px;
    background: var(--accent);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    transition: opacity 0.8s;
    pointer-events: none;
    z-index: 0;
}
.subs-adv-card:hover .subs-adv-glow { opacity: 0.18; }

.subs-adv-ico {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--accent) 12%, var(--sw-ico-bg-mix));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--sw-ico-border-mix));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 8%, transparent);
}
@media (max-width: 1280px) {
    .subs-adv-ico { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 0.75rem; }
}

.subs-adv-ctitle {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--ts-lg);
    line-height: 1.4;
    color: var(--sw-card-title);
    margin-bottom: 0.6rem;
    position: relative;
    z-index: 2;
}
@media (max-width: 1280px) {
    .subs-adv-ctitle { font-size: var(--ts-base); margin-bottom: 0.4rem; }
}
.subs-adv-cdesc {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: var(--ts-base);
    line-height: 1.7;
    color: var(--sw-card-desc);
    margin: 0;
    position: relative;
    z-index: 2;
}
@media (max-width: 1280px) {
    .subs-adv-cdesc { font-size: var(--ts-base); line-height: 1.55; }
}

/* Секция тарифов */
.subs-tariffs {
    width: 100%;
    position: relative;
    padding: 0.75rem 2rem 4rem;
    z-index: 1;
}
@media (max-width: 979px) {
    .subs-tariffs { padding-left: 0; padding-right: 0; }
}
.subs-tariffs::after {
    content: '';
    position: absolute;
    width: 550px;
    height: 550px;
    bottom: -10%;
    left: -10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.14) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: -1;
}
.subs-tariffs-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.subs-tariffs-head {
    padding: 14px 28px 12px;
    margin: 0 auto 0;
    width: fit-content;
}
.subs-tariffs-h {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: var(--ts-4xl);
    line-height: 1.3;
    text-align: center;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    background: linear-gradient(135deg, #143d62, #0986f9, #26dee0, #0986f9, #143d62);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: subs-title-shimmer 14s ease-in-out infinite;
}
.subs-tariffs-sub {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: var(--ts-xl);
    line-height: 1.6;
    text-align: center;
    color: var(--sw-text2);
    margin: 0;
}

.subs-top-block {
    position: sticky;
    top: 0;
    z-index: 10;
    background: transparent;
    border-radius: 16px;
    padding: 8px 0;
    margin-bottom: 28px;
}

.subs-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 20px;
    justify-content: center;
    /* center выравнивал низкие ячейки по центру и усиливал визуальное пересечение с блоком заметок */
    align-items: start;
    margin-bottom: 48px;
    padding-bottom: 24px;
    position: relative;
    z-index: 1;
}
@media (max-width: 1110px) and (min-width: 786px) {
    .subs-cards-grid { gap: 14px; margin-bottom: 40px; padding-bottom: 16px; }
}
@media (max-width: 979px) {
    .subs-cards-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Flip карточек месяц/год — высота должна вмещать самую высокую сторону (год + длинные строки + scale у Премиум) */
.subs-flip {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 700px;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}
@media (max-width: 979px) {
    .subs-flip { height: 640px; max-width: 100%; }
}
@media (max-width: 785px) {
    .subs-flip { height: 600px; }
}
.subs-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
}
.subs-flip-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform, opacity;
    transition: transform 0.4s var(--ease-std), opacity 0.4s var(--ease-std);
}
.subs-flip-inner:not(.subs-flip-inner--year) .subs-flip-face:not(.subs-flip-face--back) {
    transform: translateX(0);
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}
.subs-flip-inner.subs-flip-inner--year .subs-flip-face:not(.subs-flip-face--back) {
    transform: translateX(-100%);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}
.subs-flip-inner:not(.subs-flip-inner--year) .subs-flip-face--back {
    transform: translateX(100%);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}
.subs-flip-inner.subs-flip-inner--year .subs-flip-face--back {
    transform: translateX(0);
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

/* Заметки — ниже карточек в потоке; z-index не выше карточек, чтобы не перекрывать клики при редком переполнении */
.subs-notes {
    max-width: 720px;
    margin: 2.5rem auto 0;
    text-align: center;
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: var(--sw-note-bg);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1.5px solid transparent;
    background-clip: padding-box;
    border-radius: 20px;
    padding: 20px 28px;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.08), 0 6px 20px rgba(59, 130, 246, 0.06), 0 16px 56px rgba(37, 99, 235, 0.04);
}
.subs-notes::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: 21.5px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.4) 0%, rgba(56, 189, 248, 0.28) 30%, rgba(59, 130, 246, 0.1) 50%, rgba(56, 189, 248, 0.28) 70%, rgba(59, 130, 246, 0.4) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}
.subs-note-p {
    font-family: var(--font-ui);
    font-size: var(--ts-base);
    line-height: 20px;
    color: var(--sw-note-p);
    display: block;
    margin: 0;
}
.subs-note-s {
    font-family: var(--font-ui);
    font-size: var(--ts-base);
    line-height: 20px;
    color: var(--sw-note-s);
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sw-note-border);
}

/* ── Features section (moved below tariffs) ── */
.subs-features {
    padding: 3.5rem 0 2rem;
}
.subs-features-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}
.subs-features__title {
    font-size: var(--ts-3xl);
    font-weight: 800;
    color: var(--sw-title);
    margin: 0 0 0.4rem;
    letter-spacing: -0.02em;
}
.subs-features__sub {
    font-size: var(--ts-md);
    color: var(--sw-sub);
    margin: 0 0 2rem;
}

/* Billing toggle */
.subs-bill-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 18px;
}
.subs-bill-toggle {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background: var(--sw-toggle-bg);
    border: 1px solid var(--sw-toggle-border);
    border-radius: 30px;
    padding: 4px;
    gap: 2px;
    width: 420px;
    min-width: 420px;
    height: 50px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 20px rgba(0,0,0,.06);
    cursor: pointer;
}
.subs-bill-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    border-radius: 24px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35), 0 1px 3px rgba(59, 130, 246, 0.15);
    z-index: 0;
    transition: all 0.4s var(--ease-std);
}
.subs-bill-toggle--month .subs-bill-thumb {
    right: 50%;
    width: auto;
}
.subs-bill-toggle--year .subs-bill-thumb {
    left: 50%;
    right: 4px;
    width: auto;
}
.subs-bill-seg {
    position: relative;
    z-index: 1;
    min-height: 100%;
    border-radius: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--sw-toggle-text);
    font-family: var(--font-ui);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.subs-bill-seg--on { color: #fff; font-weight: 600; }
.subs-bill-txt-mob { display: none; }
@media (max-width: 785px) {
    .subs-bill-txt-desk { display: none; }
    .subs-bill-txt-mob { display: flex; font-size: var(--ts-md); font-weight: 600; }
}
.subs-bill-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    color: #fff;
    font-size: var(--ts-xs);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35);
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
}
.subs-bill-seg--right { position: relative; }
@media (max-width: 979px) and (min-width: 786px) {
    .subs-bill-toggle { width: 360px; min-width: 360px; }
}
@media (max-width: 785px) {
    .subs-bill-toggle { width: min(360px, 92vw); min-width: 0; }
}

/* ── Карточка тарифа (SubscriptionCard) ── */
.subs-tcard {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 528px;
    border-radius: 20px;
    padding: 32px 28px 28px;
    font-family: var(--font-ui);
    position: relative;
    overflow: visible;
    transition: transform 0.35s var(--ease-std), box-shadow var(--t-slow);
}
.subs-tcard:hover { transform: translateY(-6px); }

.subs-tcard--start {
    background:
        linear-gradient(90deg, transparent 0%, transparent 10%, #4a9fe0 35%, #38bdf8 50%, #4a9fe0 65%, transparent 90%, transparent 100%) top -1px center / 100% 3px no-repeat,
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(56, 189, 248, 0.12) 0%, transparent 60%),
        linear-gradient(165deg, #152236 0%, #1b3060 45%, #1e406e 100%);
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow: 0 4px 20px rgba(21, 34, 54, 0.25), 0 0 30px rgba(56, 189, 248, 0.07), inset 0 1px 0 rgba(255,255,255,0.08);
}
.subs-tcard--start .subs-tcard-title { color: #f1f5f9; }
.subs-tcard--start .subs-tcard-price { color: #fff; }
.subs-tcard--start .subs-tcard-period { color: #a8cbe6; }
.subs-tcard--start .subs-tcard-ftext { color: #dfe9f2; }
.subs-tcard--start .subs-tcard-ftext strong { color: #f1f5f9; }
.subs-tcard--start .subs-tcard-check { color: #7bbaea; }
.subs-tcard--start .subs-tcard-btn {
    background: linear-gradient(135deg, #5b9bd5 0%, #4a85bf 100%);
    border: none;
    color: #fff;
    box-shadow: 0 4px 16px rgba(91, 155, 213, 0.3);
}
.subs-tcard--start .subs-tcard-btn:hover {
    background: linear-gradient(135deg, #72ade0 0%, #5b9bd5 100%);
}

.subs-tcard--premium {
    background:
        linear-gradient(90deg, transparent 0%, transparent 15%, #3b82f6 40%, #06b6d4 50%, #3b82f6 60%, transparent 85%, transparent 100%) top -1px center / 100% 3px no-repeat,
        linear-gradient(165deg, #0e1f48 0%, #142d65 35%, #1a3a7a 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 20px rgba(14, 31, 72, 0.25), 0 12px 48px rgba(59, 130, 246, 0.1), inset 0 1px 0 rgba(255,255,255,0.05);
    transform: scale(1.04);
    z-index: 2;
}
.subs-tcard--premium:hover { transform: scale(1.04) translateY(-6px); }
.subs-tcard--premium .subs-tcard-title { color: #dbeafe; }
.subs-tcard--premium .subs-tcard-price { color: #fff; }
.subs-tcard--premium .subs-tcard-period { color: #93c5fd; }
.subs-tcard--premium .subs-tcard-ftext { color: #caddf4; }
.subs-tcard--premium .subs-tcard-ftext strong { color: #dbeafe; }
.subs-tcard--premium .subs-tcard-check { color: #60a5fa; }
.subs-tcard--premium .subs-tcard-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}

.subs-tcard--business {
    background: linear-gradient(165deg, #1a1545 0%, #231e5e 35%, #2d2675 100%);
    border: 1px solid rgba(139, 92, 246, 0.25);
    box-shadow: 0 4px 24px rgba(26, 21, 69, 0.3), 0 16px 56px rgba(99, 102, 241, 0.08), inset 0 1px 0 rgba(255,255,255,0.06);
}
.subs-tcard--business .subs-tcard-title { color: #ede9fe; }
.subs-tcard--business .subs-tcard-price { color: #fff; }
.subs-tcard--business .subs-tcard-period { color: #c4b5fd; }
.subs-tcard--business .subs-tcard-ftext { color: #d6cbff; }
.subs-tcard--business .subs-tcard-ftext strong { color: #ede9fe; }
.subs-tcard--business .subs-tcard-check { color: #a78bfa; }
.subs-tcard--business .subs-tcard-divider {
    background: linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, 0.15) 50%, transparent 100%);
}
.subs-tcard--business .subs-tcard-btn {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 50%, #7c3aed 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}

.subs-tcard-popular {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
    color: #fff;
    font-size: var(--ts-base);
    font-weight: 700;
    padding: 5px 18px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    white-space: nowrap;
    z-index: 3;
}

.subs-tcard-title {
    margin: 0 0 16px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--ts-3xl);
    line-height: 28px;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

.subs-tcard-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}
.subs-tcard-old {
    color: #94a3b8;
    font-weight: 400;
    font-size: var(--ts-2xl);
    text-decoration: line-through;
}
.subs-tcard-price {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: var(--ts-5xl);
    line-height: 42px;
    letter-spacing: -0.02em;
}
.subs-tcard-period {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: var(--ts-xl);
    line-height: 20px;
}

.subs-tcard-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 50%, transparent 100%);
    margin-bottom: 20px;
}

.subs-tcard-features {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    min-height: 220px;
    position: relative;
    z-index: 1;
}
.subs-tcard-feat {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--ts-base);
    line-height: 22px;
}
.subs-tcard-check {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.subs-tcard-ficon {
    width: 18px;
    height: 18px;
    display: block;
    filter: brightness(0) saturate(100%) invert(65%) sepia(40%) saturate(400%) hue-rotate(190deg);
}
.subs-tcard--premium .subs-tcard-ficon {
    filter: brightness(0) saturate(100%) invert(60%) sepia(50%) saturate(500%) hue-rotate(200deg);
}
.subs-tcard--business .subs-tcard-ficon {
    filter: brightness(0) saturate(100%) invert(55%) sepia(50%) saturate(500%) hue-rotate(240deg);
}

.subs-tcard-actions { margin-top: auto; position: relative; z-index: 1; }
.subs-tcard-btn {
    width: 100%;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 0 24px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--ts-lg);
    cursor: pointer;
    transition: background var(--t-slow), transform var(--t-smooth);
}
.subs-tcard-btn--current {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    cursor: default;
}
.subs-tcard-btn--current:hover { transform: none; }

@media (max-width: 979px) {
    .subs-tcard { max-width: 350px; min-height: 484px; border-radius: 18px; padding: 28px 20px 22px; }
    .subs-tcard--premium { transform: none; }
    .subs-tcard--premium:hover { transform: translateY(-4px); }
    .subs-tcard:hover { transform: none; }
    .subs-tcard-price { font-size: var(--ts-4xl); line-height: 34px; }
}

/* ── 360px very small screens ── */
@media (max-width: 360px) {
    .subs-adv { padding-left: 10px; padding-right: 10px; }
    .subs-adv-title { font-size: var(--ts-2xl); }
    .subs-tcard { padding: 22px 14px 18px; border-radius: 14px; }
    .subs-tcard-price { font-size: var(--ts-3xl); }
    .subs-billing-toggle { flex-direction: column; gap: 0.35rem; }
    .subs-tcard-btn { font-size: var(--ts-base); padding: 10px 14px; }
}



/* ── components/under-hood.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Under the Hood — FAI HUB
   ═══════════════════════════════════════════════════════════════════ */

.uth {
  --uth-accent: #2f6aff;
  background: #eef3fb;
  color: #0d1017;
  font-family: var(--font-body, 'Hanken Grotesk', sans-serif);
  padding: 0 0 84px;
  position: relative;
  overflow: hidden;
}

.uth__ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.uth__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
}
.uth__orb--a {
  top: 6%; left: -8%;
  width: 46vw; height: 46vw;
  background: radial-gradient(circle, rgba(47,106,255,.20), transparent 60%);
}
.uth__orb--b {
  top: 44%; right: -12%;
  width: 52vw; height: 52vw;
  background: radial-gradient(circle, rgba(124,92,255,.16), transparent 60%);
}

.uth__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

.uth__intro {
  text-align: center;
  padding: 62px 0 0;
}
.uth__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #5a6478;
  text-decoration: none;
  margin-bottom: 18px;
}
.uth__back:hover { color: var(--uth-accent); }
.uth__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--uth-accent);
  font-weight: 600;
}
.uth__title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 60px);
  letter-spacing: -.025em;
  line-height: 1.02;
  margin: 14px 0 0;
  color: #0d1017;
}
.uth__lead {
  font-size: 18px;
  line-height: 1.55;
  color: #56617a;
  max-width: 620px;
  margin: 18px auto 0;
}

.uth__section {
  padding: 72px 0 0;
}
.uth__section-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 700;
  font-size: 38px;
  letter-spacing: -.02em;
  line-height: 1.04;
  margin: 12px 0 0;
  color: #0d1017;
}
.uth__section-desc {
  font-size: 17px;
  line-height: 1.6;
  color: #465a7e;
  margin: 18px 0 0;
  max-width: 520px;
}

.uth__split {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .uth__split { grid-template-columns: 1fr; gap: 28px; }
}

.uth__fact {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: #33425e;
  margin-top: 10px;
}
.uth__fact-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--uth-accent);
  background: #eaf0ff;
  padding: 4px 10px;
  border-radius: 7px;
  min-width: 96px;
  text-align: center;
  flex-shrink: 0;
}

.uth__panel {
  position: relative;
  border: 1px solid #1b2747;
  border-radius: 18px;
  overflow: hidden;
  background: #0a1226;
  box-shadow: 0 40px 80px -44px rgba(12,24,60,.6);
  padding: 22px;
  color: #cdd6e3;
}
.uth__panel-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#13203c 1px, transparent 1px),
    linear-gradient(90deg, #13203c 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .5;
  pointer-events: none;
}
.uth__panel-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #7e92bd;
  margin-bottom: 14px;
}
.uth__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 8px 1px #3ddc84;
}
.uth__graph {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}

.uth__pipeline {
  position: relative;
  max-width: 920px;
  margin: 46px auto 0;
}
.uth__pipeline::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 34px;
  bottom: 40px;
  width: 2px;
  background: linear-gradient(180deg, #2f6aff, #9bb6ea);
}
.uth__step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  padding-bottom: 20px;
}
.uth__step-num {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--uth-accent);
  color: var(--uth-accent);
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 19px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px #eef3fb;
  margin: 0 auto;
}
.uth__step-card {
  background: #fff;
  border: 1px solid #e3e8f0;
  border-radius: 14px;
  padding: 22px 24px;
}
.uth__step-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: #8a98b2;
}
.uth__step-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 6px 0 0;
  color: #0d1017;
}
.uth__step-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #56617a;
  margin: 9px 0 0;
  max-width: 560px;
}
.uth__chip {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #33425e;
  background: #f1f4fb;
  border: 1px solid #e3e8f0;
  padding: 6px 11px;
  border-radius: 8px;
  margin: 12px 6px 0 0;
}

.uth__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}
@media (max-width: 800px) {
  .uth__cards { grid-template-columns: 1fr; }
}
.uth__card {
  background: #fff;
  border: 1px solid #e5e8ee;
  border-radius: 14px;
  padding: 24px;
}
.uth__card-glyph {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #eef2ff;
  color: var(--uth-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
}
.uth__card-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 17px;
  font-weight: 600;
  margin: 16px 0 0;
}
.uth__card-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #626b78;
  margin: 8px 0 0;
}

.uth__cta {
  margin-top: 72px;
  text-align: center;
}
.uth__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 24px;
  background: #2f6aff;
  color: #fff;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
}
.uth__cta-btn:hover { filter: brightness(1.07); color: #fff; }



/* ── components/access-panel.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Access panel — управление доступом в профиле (.ap-*)

   Живёт ВНУТРИ `.fai-root .fai-cab`: карточки берутся готовые
   (`.fai-cab-card`), здесь только их содержимое. Все селекторы
   заперты под `.fai-root` по двум причинам: там объявлены токены
   `--fai-*`, и оттуда же берётся специфичность, достаточная, чтобы
   перебить reset UIKit и MudBlazor-овские правила для input/select.

   Тёмной темы у этого дизайна нет — палитра одна, светлая.
   ═══════════════════════════════════════════════════════════════════ */

/* ───── Вкладки профиля ──────────────────────────────────────── */

/* Сегментированный переключатель в пилюле — тот же приём, что у переключателя
   тарифов на лендинге (`.fai-bill-btn`), чтобы вкладки не выглядели чужими. */
.fai-root .ap-tabs {
    align-self: flex-start;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--fai-border);
    border-radius: 999px;
    background: var(--fai-surface);
    box-shadow: var(--fai-shadow);
}

.fai-root .ap-tab {
    padding: 9px 20px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fai-ink-soft);
    font-size: 13.5px;
    font-weight: 650;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}

.fai-root .ap-tab:hover { color: var(--fai-accent); }

.fai-root .ap-tab--active,
.fai-root .ap-tab--active:hover {
    background: var(--fai-grad);
    color: #fff;
    box-shadow: 0 8px 18px -8px var(--fai-glow);
}

@media (max-width: 640px) {
    .fai-root .ap-tabs { align-self: stretch; }
    .fai-root .ap-tab  { flex: 1; padding: 9px 12px; }
}

/* ───── Карточка и шапка секции ──────────────────────────────── */

.fai-root .ap-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fai-root .ap-head {
    display: flex;
    align-items: center;
    gap: 13px;
}

.fai-root .ap-head__text { flex: 1; min-width: 0; }

.fai-root .ap-head__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fai-ink);
}

.fai-root .ap-head__sub {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--fai-ink-mute);
}

/* Плитка с иконкой — тот же язык, что у `.fai-cab-empty-icon`, только компактнее. */
.fai-root .ap-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--fai-accent-soft);
    color: var(--fai-accent);
}

.fai-root .ap-count {
    flex: none;
    min-width: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--fai-bg-2);
    color: var(--fai-ink-soft);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* ───── Подсекция внутри карточки ────────────────────────────── */

.fai-root .ap-sub {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--fai-border);
}

.fai-root .ap-sub__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.fai-root .ap-sub__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--fai-ink);
}

.fai-root .ap-sub__hint {
    font-size: 12px;
    color: var(--fai-ink-mute);
}

.fai-root .ap-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--fai-ink-mute);
}

/* ───── Кто я: роль и статус ─────────────────────────────────── */

.fai-root .ap-identity { position: relative; overflow: hidden; }

/* Мягкое пятно бренда: карточка роли — первое, на что смотрят, и она
   должна отличаться от остальных без второй границы и второй тени. */
.fai-root .ap-identity__glow {
    position: absolute;
    top: -110px;
    right: -70px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: var(--fai-accent-soft);
    filter: blur(12px);
    pointer-events: none;
}

.fai-root .ap-identity > *:not(.ap-identity__glow) { position: relative; }

.fai-root .ap-identity__chips {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.fai-root .ap-role {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: #fff;
    background: var(--fai-grad);
    box-shadow: 0 8px 18px -8px var(--fai-glow);
}

/* Оттенок по старшинству: заметность плашки — единственный способ
   увидеть «я сейчас под высокими правами» без чтения текста. */
.fai-root .ap-role--user   { background: var(--fai-bg-2); color: var(--fai-ink-soft); box-shadow: none; }
.fai-root .ap-role--editor { background: linear-gradient(135deg, #0f9d76, #34c79a); box-shadow: 0 8px 18px -8px rgba(15,157,118,.45); }
.fai-root .ap-role--mod    { background: linear-gradient(135deg, #2456e2, #3d81db); }
.fai-root .ap-role--tech   { background: linear-gradient(135deg, #6d4bd8, #9070e8); box-shadow: 0 8px 18px -8px rgba(109,75,216,.45); }
.fai-root .ap-role--admin  { background: linear-gradient(135deg, #c2410c, #ef7a3c); box-shadow: 0 8px 18px -8px rgba(194,65,12,.45); }
.fai-root .ap-role--super  { background: linear-gradient(135deg, #7c1d3f, #c2185b); box-shadow: 0 8px 18px -8px rgba(194,24,91,.45); }

/* ───── Плашки ───────────────────────────────────────────────── */

.fai-root .ap-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--fai-border-2);
    background: var(--fai-surface);
    color: var(--fai-ink-soft);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.fai-root .ap-chip--quiet  { border-color: transparent; background: var(--fai-bg-2); color: var(--fai-ink-mute); }
.fai-root .ap-chip--accent { border-color: transparent; background: var(--fai-accent-soft); color: var(--fai-accent); }
.fai-root .ap-chip--ok     { border-color: rgba(15,157,118,.28); background: rgba(15,157,118,.10); color: #0f7a5c; }
.fai-root .ap-chip--warn   { border-color: rgba(194,65,12,.28);  background: rgba(194,65,12,.10);  color: #b3400c; }

.fai-root .ap-chip--stage-dev   { border-color: transparent; background: var(--fai-bg-2);          color: var(--fai-ink-mute); }
.fai-root .ap-chip--stage-alpha { border-color: transparent; background: rgba(109,75,216,.12);     color: #5b3fc4; }
.fai-root .ap-chip--stage-beta  { border-color: transparent; background: var(--fai-accent-soft);   color: var(--fai-accent); }
.fai-root .ap-chip--stage-ga    { border-color: transparent; background: rgba(15,157,118,.12);     color: #0f7a5c; }
.fai-root .ap-chip--stage-off   { border-color: transparent; background: rgba(194,65,12,.12);      color: #b3400c; }

/* Индикатор живости: точка вместо слова там, где слово уже есть рядом. */
.fai-root .ap-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.fai-root .ap-dot--ok  { background: #17a97f; box-shadow: 0 0 0 3px rgba(23,169,127,.16); }
.fai-root .ap-dot--bad { background: #e0672f; box-shadow: 0 0 0 3px rgba(224,103,47,.16); }

/* ───── Пустые состояния ─────────────────────────────────────── */

.fai-root .ap-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px 20px;
    border: 1px dashed var(--fai-border-2);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--fai-bg) 0%, var(--fai-surface) 100%);
    text-align: center;
}

.fai-root .ap-empty .ap-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    margin-bottom: 2px;
}

.fai-root .ap-empty .ap-icon svg { width: 22px; height: 22px; }

.fai-root .ap-empty__title {
    margin: 0;
    font-size: 14px;
    font-weight: 650;
    color: var(--fai-ink);
}

.fai-root .ap-empty__hint {
    margin: 0;
    max-width: 460px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--fai-ink-mute);
}

/* ───── Проекты ──────────────────────────────────────────────── */

.fai-root .ap-projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.fai-root .ap-project {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--fai-border-2);
    border-radius: 14px;
    background: var(--fai-surface);
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fai-root .ap-project:hover {
    transform: translateY(-2px);
    border-color: var(--fai-accent);
    box-shadow: var(--fai-shadow);
}

.fai-root .ap-project--active {
    border-color: var(--fai-accent);
    background: var(--fai-accent-soft);
}

.fai-root .ap-project__mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--fai-grad);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.fai-root .ap-project__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.fai-root .ap-project__name {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--fai-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fai-root .ap-project__meta {
    display: flex;
    gap: 4px;
    font-size: 11.5px;
    color: var(--fai-ink-mute);
}

.fai-root .ap-project__frozen { color: #b3400c; font-weight: 600; }

/* ───── Человек в списке ─────────────────────────────────────── */

.fai-root .ap-person { display: flex; align-items: center; gap: 10px; min-width: 0; }

.fai-root .ap-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fai-bg-2);
    color: var(--fai-ink-soft);
    font-size: 11.5px;
    font-weight: 700;
}

.fai-root .ap-person__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.fai-root .ap-person__name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fai-ink);
}

.fai-root .ap-person__mail {
    font-size: 11.5px;
    color: var(--fai-ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ───── Таблица ──────────────────────────────────────────────── */

/* Обёртка со своим скроллом: горизонтально должна ехать таблица,
   а не страница профиля. */
.fai-root .ap-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--fai-border);
    border-radius: 14px;
}

.fai-root .ap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.fai-root .ap-table thead th {
    padding: 10px 14px;
    background: var(--fai-bg);
    color: var(--fai-ink-mute);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: left;
    white-space: nowrap;
}

.fai-root .ap-table tbody td {
    padding: 10px 14px;
    border-top: 1px solid var(--fai-border);
    color: var(--fai-ink-soft);
    vertical-align: middle;
}

.fai-root .ap-table tbody tr:hover td { background: var(--fai-bg); }

.fai-root .ap-table__act { text-align: right; white-space: nowrap; }

.fai-root .ap-row--muted td { opacity: .55; }

/* Тариф: по строке на продукт — подпись слева, селект справа. Продуктов немного,
   и колонка на каждый развалила бы таблицу на широкую простыню. */
.fai-root .ap-plan {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.fai-root .ap-plan:last-child { margin-bottom: 0; }

.fai-root .ap-plan__product {
    width: 34px;
    flex: none;
    color: var(--fai-ink-mute);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

/* Баланс: сумма и действие в одну строку; при открытой форме там же поле ввода. */
.fai-root .ap-topup {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.fai-root .ap-topup__sum {
    color: var(--fai-ink);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* ───── Поля ввода ───────────────────────────────────────────── */

.fai-root .ap-input,
.fai-root .ap-select {
    height: 38px;
    padding: 0 13px;
    border: 1px solid var(--fai-border-2);
    border-radius: 11px;
    background: var(--fai-surface);
    color: var(--fai-ink);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.fai-root .ap-input::placeholder { color: var(--fai-ink-mute); }

.fai-root .ap-input:focus,
.fai-root .ap-select:focus {
    border-color: var(--fai-accent);
    box-shadow: 0 0 0 3px var(--fai-accent-soft);
}

.fai-root .ap-input:disabled,
.fai-root .ap-select:disabled { opacity: .55; cursor: not-allowed; }

.fai-root .ap-input--grow { flex: 1; min-width: 160px; }

.fai-root .ap-input--sm { height: 32px; width: 96px; padding: 0 10px; font-size: 12px; }

.fai-root .ap-select {
    padding-right: 30px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238493ad' stroke-width='3' 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 11px center;
}

.fai-root .ap-select--sm { height: 32px; font-size: 12px; padding: 0 26px 0 10px; }

/* Селект стадии окрашен так же, как плашка стадии в личном списке: одно и то же
   состояние должно читаться одинаково на обеих вкладках. */
.fai-root .ap-select--stage-alpha { background-color: rgba(109,75,216,.10); color: #5b3fc4;         border-color: transparent; }
.fai-root .ap-select--stage-beta  { background-color: var(--fai-accent-soft); color: var(--fai-accent); border-color: transparent; }
.fai-root .ap-select--stage-ga    { background-color: rgba(15,157,118,.10);  color: #0f7a5c;        border-color: transparent; }
.fai-root .ap-select--stage-off   { background-color: rgba(194,65,12,.10);   color: #b3400c;        border-color: transparent; }

/* ───── Кнопки ───────────────────────────────────────────────── */

.fai-root .ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 17px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--fai-bg-2);
    color: var(--fai-ink-soft);
    font-size: 13px;
    font-weight: 650;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.fai-root .ap-btn:hover:not(:disabled) { transform: translateY(-1px); }
.fai-root .ap-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.fai-root .ap-btn--primary {
    background: var(--fai-grad);
    color: #fff;
    box-shadow: 0 8px 18px -8px var(--fai-glow);
}

.fai-root .ap-btn--ghost {
    background: transparent;
    border-color: var(--fai-border-2);
    color: var(--fai-ink-soft);
}

.fai-root .ap-btn--ghost:hover:not(:disabled) { border-color: var(--fai-accent); color: var(--fai-accent); }

.fai-root .ap-btn--danger { color: #b3400c; }
.fai-root .ap-btn--danger:hover:not(:disabled) { border-color: #e0672f; color: #b3400c; background: rgba(224,103,47,.08); }

.fai-root .ap-btn--sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 9px; }

/* Строка «поле + кнопка»: одна высота у всех детей — иначе кнопка
   уезжает относительно поля, и это первое, что бросается в глаза. */
.fai-root .ap-invite {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

/* ───── Выноска с секретом ───────────────────────────────────── */

.fai-root .ap-callout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--fai-border-2);
    border-left: 3px solid var(--fai-accent);
    border-radius: 12px;
    background: var(--fai-accent-soft);
    font-size: 13px;
    color: var(--fai-ink);
}

.fai-root .ap-code {
    padding: 2px 7px;
    border-radius: 7px;
    background: var(--fai-bg-2);
    color: var(--fai-ink-soft);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
}

.fai-root .ap-code--block {
    display: block;
    padding: 10px 12px;
    background: var(--fai-surface);
    line-height: 1.5;
}

/* ───── Фиче-флаги ───────────────────────────────────────────── */

.fai-root .ap-flags { display: flex; flex-direction: column; gap: 9px; }

.fai-root .ap-flag {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border: 1px solid var(--fai-border);
    border-radius: 14px;
    background: var(--fai-surface);
    transition: border-color .18s ease;
}

.fai-root .ap-flag:hover { border-color: var(--fai-border-2); }
.fai-root .ap-flag--off { background: var(--fai-bg); }
.fai-root .ap-flag--off .ap-flag__title { color: var(--fai-ink-mute); }

.fai-root .ap-flag__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.fai-root .ap-flag__title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fai-ink);
}

.fai-root .ap-flag__main .ap-code { align-self: flex-start; }

/* Админская половина строки переносится под неё целиком: иначе
   селект стадии и список аудитории ломают выравнивание тумблеров. */
.fai-root .ap-flag__admin {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding-top: 11px;
    border-top: 1px dashed var(--fai-border-2);
}

.fai-root .ap-audience { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.fai-root .ap-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--fai-border-2);
    border-radius: 999px;
    background: var(--fai-surface);
    color: var(--fai-ink-soft);
    font-size: 11.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.fai-root .ap-tag span { color: var(--fai-ink-mute); font-size: 13px; line-height: 1; }
.fai-root .ap-tag:hover:not(:disabled) { border-color: #e0672f; color: #b3400c; }
.fai-root .ap-tag:hover:not(:disabled) span { color: #b3400c; }
.fai-root .ap-tag:disabled { opacity: .5; cursor: not-allowed; }

/* ───── Тумблер ──────────────────────────────────────────────── */

.fai-root .ap-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.fai-root .ap-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.fai-root .ap-switch__track {
    position: relative;
    flex: none;
    width: 40px;
    height: 23px;
    border-radius: 999px;
    background: var(--fai-bg-2);
    border: 1px solid var(--fai-border-2);
    transition: background .2s ease, border-color .2s ease;
}

.fai-root .ap-switch__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(20,40,95,.22);
    transition: transform .2s ease;
}

.fai-root .ap-switch input:checked + .ap-switch__track {
    background: var(--fai-grad);
    border-color: transparent;
}

.fai-root .ap-switch input:checked + .ap-switch__track::after { transform: translateX(17px); }

.fai-root .ap-switch input:focus-visible + .ap-switch__track { box-shadow: 0 0 0 3px var(--fai-accent-soft); }

.fai-root .ap-switch input:disabled + .ap-switch__track { opacity: .5; }
.fai-root .ap-switch:has(input:disabled) { cursor: not-allowed; }

.fai-root .ap-switch__text { font-size: 12.5px; font-weight: 600; color: var(--fai-ink-soft); }
.fai-root .ap-switch--label { flex: none; }

/* ───── Строки инфраструктуры (ключи, маршруты) ──────────────── */

.fai-root .ap-rows { display: flex; flex-direction: column; gap: 8px; }

.fai-root .ap-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--fai-border);
    border-radius: 13px;
    background: var(--fai-surface);
}

.fai-root .ap-row--current { border-color: var(--fai-accent); background: var(--fai-accent-soft); }

.fai-root .ap-row__num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--fai-bg-2);
    color: var(--fai-ink-mute);
    font-size: 11.5px;
    font-weight: 700;
}

/* align-items: flex-start — иначе <code> как flex-элемент растягивается
   на всю строку и превращается в серую полосу во всю ширину карточки. */
.fai-root .ap-row__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.fai-root .ap-row__meta { align-self: stretch; }

.fai-root .ap-row__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--fai-ink-mute);
}

.fai-root .ap-row__load { margin-left: auto; font-variant-numeric: tabular-nums; }

.fai-root .ap-row__act { display: flex; align-items: center; gap: 6px; flex: none; }

/* ───── Журнал ───────────────────────────────────────────────── */

.fai-root .ap-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-left: 2px solid var(--fai-border);
}

.fai-root .ap-timeline__item { position: relative; }

.fai-root .ap-timeline__dot {
    position: absolute;
    left: -25px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fai-surface);
    border: 2px solid var(--fai-accent);
}

.fai-root .ap-timeline__body { display: flex; flex-direction: column; gap: 5px; }

.fai-root .ap-timeline__change { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.fai-root .ap-timeline__arrow { color: var(--fai-ink-mute); font-size: 13px; }

.fai-root .ap-timeline__meta {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--fai-ink-mute);
}

/* ───── Загрузка ─────────────────────────────────────────────── */

.fai-root .ap-skeleton {
    height: 20px;
    border-radius: 9px;
    background: linear-gradient(90deg, var(--fai-bg) 25%, var(--fai-bg-2) 37%, var(--fai-bg) 63%);
    background-size: 400% 100%;
    animation: ap-shimmer 1.4s ease infinite;
}

.fai-root .ap-skeleton--sm { height: 13px; width: 62%; }
.fai-root .ap-skeleton--sm:last-child { width: 40%; }

@keyframes ap-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .fai-root .ap-skeleton { animation: none; }
    .fai-root .ap-project:hover,
    .fai-root .ap-btn:hover:not(:disabled) { transform: none; }
}

/* ───── Узкий экран ──────────────────────────────────────────── */

@media (max-width: 640px) {
    .fai-root .ap-projects { grid-template-columns: 1fr; }

    .fai-root .ap-flag { grid-template-columns: 1fr auto; }
    .fai-root .ap-flag .ap-chip--stage { grid-column: 1; justify-self: start; }

    .fai-root .ap-invite > .ap-btn { width: 100%; }

    .fai-root .ap-row { flex-wrap: wrap; }
    .fai-root .ap-row__act { width: 100%; justify-content: flex-end; }

    .fai-root .ap-row__load { margin-left: 0; }
}



/* ───── 6b. BLAZOR COMPAT (MudBlazor overrides) ──────────────── */

/* ── components/blazor-compat.css ── */
/* ═══════════════════════════════════════════════════════════════════
   blazor-compat.css — Blazor / MudBlazor integration overrides
   Стили, специфичные для Blazor-рантайма: сброс MudBlazor-отступов,
   обработка ошибок, sticky-утилита.
   ═══════════════════════════════════════════════════════════════════ */

.mud-main-content {
    padding: 0 !important;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Произошла ошибка.";
}

.sticky-panel {
    position: sticky;
    top: 88px;
}

/* Spacing utilities (legacy Tailwind compat) */
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.pt-14 { padding-top: 56px; }
@media (min-width: 600px) { .pt-14 { padding-top: 64px; } }



/* ───── 7. CONTEXTUAL COLOR RULES (последним — приоритет) ─────── */

/* ── tokens/ux-color-rules.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — [data-color] Component Rules (aif)
   Версия: 1.0.0

   Контекстные правила: применяют --cur-* (через --ux-cur-*) к
   ux-компонентам внутри [data-color]. Сами блоки
   [data-color="..."] описаны в themes.css.

   Подключается ПОСЛЕ ux-* компонентов, чтобы переопределить их.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Карточка ─────────────────────────────────────────────────── */
[data-color] .ux-card:hover {
  border-color: var(--ux-cur-hover-border);
  box-shadow: 0 8px 32px -8px var(--ux-cur-hover-shadow);
}
[data-color] .ux-card--sm:hover {
  box-shadow: 0 6px 24px -6px var(--ux-cur-hover-shadow);
}
[data-color] .ux-card--accent-top {
  border-top-color: var(--ux-cur-top-border);
}

/* ─── Кнопка ───────────────────────────────────────────────────── */
[data-color] .ux-btn {
  background: var(--ux-cur-btn);
  box-shadow: 0 4px 20px -4px var(--ux-cur-btn-shadow);
}

/* ─── Иконка-пилюля ────────────────────────────────────────────── */
[data-color] .ux-icon-pill {
  background: var(--ux-cur-icon);
  box-shadow: 0 4px 16px -4px var(--ux-cur-icon-shadow);
}
[data-color] .ux-icon-pill--lg {
  box-shadow: 0 6px 24px -4px var(--ux-cur-icon-shadow);
}

/* ─── Топбар ───────────────────────────────────────────────────── */
[data-color] .ux-topbar {
  border-bottom-color: var(--ux-cur-topbar-border);
}

/* ─── Полоска теории ────────────────────────────────────────────── */
[data-color] .ux-theory-bar {
  background: var(--ux-cur-bar);
}

/* ─── Значение параметра ────────────────────────────────────────── */
[data-color] .ux-param-val {
  color:      var(--ux-cur);
  background: var(--ux-cur-bg);
}

/* ─── Активная кнопка выбора ────────────────────────────────────── */
[data-color] .ux-choice-btn--on {
  background: var(--ux-cur-choice-active);
}

/* ─── Mono-badge (API-класс) ────────────────────────────────────── */
[data-color] .ux-mono-badge {
  color:      var(--ux-cur);
  background: var(--ux-cur-bg);
}

/* ─── Слайдер ───────────────────────────────────────────────────── */
[data-color] .ux-slider {
  accent-color: var(--ux-cur);
}

/* ──────────────────────────────────────────────────────────────────
   ЯВНЫЕ МОДИФИКАТОРЫ — фиксированный цвет, переопределяет контекст
   ────────────────────────────────────────────────────────────────── */
[data-color] .ux-btn--sky     { background: var(--pal-btn-sky); box-shadow: 0 4px 20px -4px var(--pal-btn-sky-sh); }
[data-color] .ux-btn--indigo  { background: var(--pal-btn-indigo); box-shadow: 0 4px 20px -4px var(--pal-btn-indigo-sh); }
[data-color] .ux-btn--violet  { background: var(--pal-btn-violet); box-shadow: 0 4px 20px -4px var(--pal-btn-violet-sh); }
[data-color] .ux-btn--emerald { background: var(--pal-btn-emerald); box-shadow: 0 4px 20px -4px var(--pal-btn-emerald-sh); }
[data-color] .ux-btn--amber   { background: var(--pal-btn-amber); box-shadow: 0 4px 20px -4px var(--pal-btn-amber-sh); }
[data-color] .ux-btn--pink    { background: var(--pal-btn-pink); box-shadow: 0 4px 20px -4px var(--pal-btn-pink-sh); }

[data-color] .ux-icon-pill--sky     { background: var(--pal-icon-sky); box-shadow: 0 4px 16px -4px var(--pal-icon-sky-sh); }
[data-color] .ux-icon-pill--indigo  { background: var(--pal-icon-indigo); box-shadow: 0 4px 16px -4px var(--pal-icon-indigo-sh); }
[data-color] .ux-icon-pill--violet  { background: var(--pal-icon-violet); box-shadow: 0 4px 16px -4px var(--pal-icon-violet-sh); }
[data-color] .ux-icon-pill--emerald { background: var(--pal-icon-emerald); box-shadow: 0 4px 16px -4px var(--pal-icon-emerald-sh); }
[data-color] .ux-icon-pill--amber   { background: var(--pal-icon-amber); box-shadow: 0 4px 16px -4px var(--pal-icon-amber-sh); }
[data-color] .ux-icon-pill--pink    { background: var(--pal-icon-pink); box-shadow: 0 4px 16px -4px var(--pal-icon-pink-sh); }



/* ───── 8. LIGHT-THEME OVERRIDES (для [data-theme="light"]) ────── */

/* ── tokens/ux-light.css ── */
/* ═══════════════════════════════════════════════════════════════════
   Design Kit — ux-* Light Theme Overrides
   Версия: 1.0.0

   Файл переопределяет жёстко-зашитые тёмные значения в ux-*
   компонентах (rgba(255,255,255,…), линейные градиенты тёмно-синего)
   на кремово-кофейные эквиваленты, активируемые при
   [data-theme="light"].

   Подключается ПОСЛЕ всех ux-* компонентов и ПОСЛЕ
   ux-color-rules.css, чтобы перебить контекстные правила,
   но не цветовые [data-color] (последние перебиваются явными
   модификаторами .ux-btn--sky и т.п. как и раньше).
   ═══════════════════════════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  CHOICE GRID                                                     ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] .ux-choice-btn {
  background: linear-gradient(160deg, #ffffff 0%, var(--b-paper) 100%);
  border-color: var(--b-line-hi);
  color: var(--b-coffee-mid);
  box-shadow: var(--b-shadow-sm);
}
[data-theme="light"] .ux-choice-btn:hover {
  color: var(--b-coffee);
  border-color: rgba(var(--b-gold-rgb), 0.40);
  box-shadow: var(--b-shadow-md);
}
[data-theme="light"] .ux-choice-btn--on {
  color: #fff !important;
  border-color: transparent !important;
  box-shadow:
    0 6px 20px -6px rgba(var(--b-coffee-rgb), 0.30),
    inset 0 0 0 1px rgba(255, 255, 255, 0.30);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  TOOLTIP                                                         ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] .ux-tip {
  color: var(--b-coffee-faint);
}
[data-theme="light"] .ux-tip:hover { color: var(--b-gold-dark); }

[data-theme="light"] .ux-tip::after {
  background: var(--b-coffee);
  color: var(--b-cream);
  border-color: rgba(var(--b-coffee-rgb), 0.20);
  box-shadow: 0 8px 24px rgba(var(--b-coffee-rgb), 0.22);
}
[data-theme="light"] .ux-tip::before        { border-left-color:  var(--b-coffee); }
[data-theme="light"] .ux-tip--right::before { border-left-color:  transparent;     border-right-color:  var(--b-coffee); }
[data-theme="light"] .ux-tip--top::before    { border-top-color:    var(--b-coffee); }
[data-theme="light"] .ux-tip--bottom::before { border-bottom-color: var(--b-coffee); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  EMPTY STATES / 404 / ERROR                                      ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] .ux-empty {
  color: var(--b-coffee-soft);
}
[data-theme="light"] .ux-empty--dashed {
  color: var(--b-coffee-faint);
  border-color: rgba(var(--b-coffee-rgb), 0.20);
  background: rgba(255, 255, 255, 0.45);
}
[data-theme="light"] .ux-empty--dashed p {
  color: var(--b-coffee-soft);
}
[data-theme="light"] .ux-empty a              { color: var(--b-gold-dark); }
[data-theme="light"] .ux-empty a:hover        { color: var(--b-coffee); }
[data-theme="light"] .ux-404-code             { color: rgba(var(--b-gold-rgb), 0.30); }
[data-theme="light"] .ux-404-title            { color: var(--b-coffee); }
[data-theme="light"] .ux-404-link             { color: var(--b-gold-dark); }
[data-theme="light"] .ux-404-link:hover       { color: var(--b-coffee); }
[data-theme="light"] .ux-error-page-title     { color: var(--b-coffee); }
[data-theme="light"] .ux-error-page-msg       { color: var(--b-coffee-soft); }
[data-theme="light"] .ux-error-page-link      { color: var(--b-gold-dark); }
[data-theme="light"] .ux-error-page-link:hover{ color: var(--b-coffee); }

[data-theme="light"] .ux-error-block {
  background: rgba(var(--b-terra-rgb), 0.08);
  border-color: rgba(var(--b-terra-rgb), 0.30);
  color: var(--b-terra);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  BUTTONS / SEG / CLOSE                                           ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] .ux-btn-ghost {
  border-color: var(--b-line-hi);
  background: rgba(var(--b-coffee-rgb), 0.04);
  color: var(--b-coffee-soft);
}
[data-theme="light"] .ux-btn-ghost:hover {
  background: rgba(var(--b-coffee-rgb), 0.08);
  border-color: rgba(var(--b-coffee-rgb), 0.20);
  color: var(--b-coffee);
}
[data-theme="light"] .ux-btn-meta { color: var(--b-coffee-faint); }

[data-theme="light"] .ux-seg {
  border-color: var(--b-line-hi);
  background: var(--b-paper);
}
[data-theme="light"] .ux-seg-btn {
  color: var(--b-coffee-soft);
  border-right-color: var(--b-line);
}
[data-theme="light"] .ux-seg-btn:hover {
  background: rgba(var(--b-gold-rgb), 0.10);
  color: var(--b-coffee);
}
[data-theme="light"] .ux-seg-btn--on {
  background: rgba(var(--b-gold-rgb), 0.16) !important;
  color: var(--b-gold-dark) !important;
}

[data-theme="light"] .ux-close-btn {
  border-color: var(--b-line-hi);
  background: rgba(var(--b-coffee-rgb), 0.04);
  color: var(--b-coffee-soft);
}
[data-theme="light"] .ux-close-btn:hover {
  background: rgba(var(--b-terra-rgb), 0.10);
  border-color: rgba(var(--b-terra-rgb), 0.40);
  color: var(--b-terra);
}

[data-theme="light"] .ux-accordion-toggle {
  color: var(--b-coffee-soft);
}
[data-theme="light"] .ux-accordion-toggle:hover {
  background: rgba(var(--b-coffee-rgb), 0.04);
  color: var(--b-coffee);
}
[data-theme="light"] .ux-accordion-arrow { color: var(--b-coffee-faint); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  CHIP / MONO BADGE                                               ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] .ux-chip {
  background: var(--b-paper);
  border-color: var(--b-line-hi);
  color: var(--b-coffee-mid);
}
[data-theme="light"] .ux-chip--link {
  color: var(--b-gold-dark);
}
[data-theme="light"] .ux-chip--link:hover {
  color: var(--b-coffee);
  border-color: rgba(var(--b-gold-rgb), 0.45);
  background: rgba(var(--b-gold-rgb), 0.10);
}

[data-theme="light"] .ux-mono-badge {
  color: var(--b-gold-dark);
  background: rgba(var(--b-gold-rgb), 0.14);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  FORM CONTROLS                                                   ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] .ux-param-label   { color: var(--b-coffee); }
[data-theme="light"] .ux-param-unit    { color: var(--b-coffee-faint); }

[data-theme="light"] .ux-num-input,
[data-theme="light"] .ux-text-input {
  border-color: var(--b-line-hi);
  background: var(--b-paper-hi);
  color: var(--b-coffee);
}
[data-theme="light"] .ux-num-input:focus,
[data-theme="light"] .ux-text-input:focus {
  border-color: rgba(var(--b-gold-rgb), 0.50);
  box-shadow: 0 0 0 2px rgba(var(--b-gold-rgb), 0.18);
}

[data-theme="light"] .ux-code-input {
  border-color: rgba(var(--b-coffee-rgb), 0.16);
  background: var(--b-cream-deep);
  color: var(--b-coffee);
}
[data-theme="light"] .ux-code-input:focus {
  border-color: rgba(var(--b-gold-rgb), 0.50);
  box-shadow: 0 0 0 3px rgba(var(--b-gold-rgb), 0.18);
}

[data-theme="light"] .ux-slider {
  background: rgba(var(--b-coffee-rgb), 0.10);
  accent-color: var(--b-gold-dark);
}

/* Param value badges — кофейно-золотая палитра */
[data-theme="light"] .ux-param-val--sky     { color: #0369a1; background: rgba(14, 165, 233, 0.12); }
[data-theme="light"] .ux-param-val--indigo  { color: #4338ca; background: rgba(99, 102, 241, 0.12); }
[data-theme="light"] .ux-param-val--violet  { color: #6d28d9; background: rgba(124, 58, 237, 0.12); }
[data-theme="light"] .ux-param-val--emerald { color: #047857; background: rgba(5, 150, 105, 0.14); }
[data-theme="light"] .ux-param-val--amber   { color: #b45309; background: rgba(217, 119, 6, 0.14); }
[data-theme="light"] .ux-param-val--pink    { color: #be185d; background: rgba(219, 39, 119, 0.12); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  PARAMS PANEL / SETTINGS                                         ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] .ux-params-panel {
  background: var(--b-paper);
  border-color: var(--b-line-hi);
}
[data-theme="light"] .ux-params-header  { border-bottom-color: var(--b-line); color: var(--b-coffee); }
[data-theme="light"] .ux-params-header svg { color: var(--b-coffee-faint); }
[data-theme="light"] .ux-settings-body  { border-top-color: var(--b-line); }
[data-theme="light"] .ux-settings-label { color: var(--b-coffee-soft); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  CARD                                                            ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] .ux-card-title  { color: var(--b-coffee); }
[data-theme="light"] .ux-card-desc   { color: var(--b-coffee-soft); }
[data-theme="light"] .ux-card-meta   { color: var(--b-coffee-faint); }
[data-theme="light"] .ux-card-meta-sep { color: var(--b-line-hi); }
[data-theme="light"] .ux-card-arrow  { color: var(--b-coffee-faint); }
[data-theme="light"] .ux-card:hover .ux-card-arrow { color: var(--b-gold-dark); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  OVERLAY (image / modal)                                         ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] .ux-overlay {
  background: rgba(var(--b-coffee-rgb), 0.55);
}
[data-theme="light"] .ux-overlay-box {
  border-color: var(--b-line-hi);
  background: linear-gradient(160deg, var(--b-paper-hi) 0%, var(--b-paper) 100%);
  box-shadow: 0 40px 120px -20px rgba(var(--b-coffee-rgb), 0.35);
}
[data-theme="light"] .ux-overlay-header { border-bottom-color: var(--b-line-hi); }
[data-theme="light"] .ux-overlay-title  { color: var(--b-coffee); }
[data-theme="light"] .ux-overlay-img-wrap {
  background: var(--b-cream);
}
[data-theme="light"] .ux-overlay-img {
  box-shadow: 0 20px 60px -16px rgba(var(--b-coffee-rgb), 0.25);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  CHART / TEXT RESULT                                             ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] .ux-chart-wrap {
  background: var(--b-cream-deep);
  border-color: var(--b-line-hi);
}
[data-theme="light"] .ux-chart-wrap:hover { border-color: rgba(var(--b-gold-rgb), 0.30); }
[data-theme="light"] .ux-chart-expand {
  background: rgba(var(--b-gold-rgb), 0.18);
  border-color: rgba(var(--b-gold-rgb), 0.35);
  color: var(--b-gold-dark);
}

[data-theme="light"] .ux-text-result {
  background: var(--b-cream-deep);
  border-color: var(--b-line-hi);
}
[data-theme="light"] .ux-text-result pre        { color: var(--b-coffee-mid); }
[data-theme="light"] .ux-text-result .so-cmd    { color: var(--b-coffee-soft); }
[data-theme="light"] .ux-text-result .so-result { color: var(--b-success); }
[data-theme="light"] .ux-text-result .so-error  { color: var(--b-terra); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  TOPBAR                                                          ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] .ux-topbar {
  background: rgba(244, 246, 248, 0.92);
  border-bottom-color: var(--b-line-hi);
  color: var(--b-coffee-mid);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ICON-PILL — лёгкое усиление тени на светлом                     ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] .ux-icon-pill {
  box-shadow: 0 4px 16px -4px rgba(var(--b-coffee-rgb), 0.20);
}
[data-theme="light"] .ux-icon-pill--lg {
  box-shadow: 0 6px 24px -4px rgba(var(--b-coffee-rgb), 0.22);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  GRADIENT TEXT (.ux-gradient-text) — мягче на светлом           ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] .ux-gradient-text {
  background: linear-gradient(135deg, var(--b-gold-dark) 0%, var(--b-coffee) 60%, var(--b-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  VERSION BADGE — золотой градиент вместо индиго                  ║
   ╚══════════════════════════════════════════════════════════════════╝ */
[data-theme="light"] .ux-version-badge {
  background: var(--b-grad-gold);
  border-color: rgba(255, 255, 255, 0.40);
  box-shadow: 0 2px 8px -2px rgba(var(--b-gold-rgb), 0.55);
}
[data-theme="light"] .ux-version-badge--float {
  box-shadow: 0 4px 14px -3px rgba(var(--b-gold-rgb), 0.55);
}