/* ============================================================
   NeuroDuck — современный адаптивный интерфейс
   ============================================================ */

:root {
  --bg-0: #070a12;
  --bg-1: #0b0f19;
  --surface: rgba(19, 24, 39, 0.72);
  --surface-solid: #131827;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #e9edf7;
  --text-dim: #97a1b8;
  --accent: #6c8cff;
  --accent-2: #a855f7;
  --accent-3: #22d3ee;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  /* Полупрозрачные поверхности — переопределяются в светлой теме */
  --glass-1: rgba(255, 255, 255, 0.04);
  --glass-2: rgba(255, 255, 255, 0.06);
  --glass-3: rgba(255, 255, 255, 0.13);
  --panel: rgba(9, 12, 20, 0.55);
  --panel-strong: rgba(9, 12, 20, 0.72);
  --stage-void: rgba(8, 11, 18, 0.32);
  --menu-bg: rgba(15, 19, 32, 0.96);
  --toast-bg: rgba(21, 27, 44, 0.96);
  /* Цвет линий сетки и базовая непрозрачность. Итоговая альфа =
     base × grid-factor (задаётся настройкой «Интенсивность сетки»). */
  --grid-rgb: 255, 255, 255;
  --grid-base: 0.045;
  --hover-text: #ffffff;
  --code-color: #f9a8d4;
  --blob-opacity: 0.5;
  /* Тинты градиента фона. По умолчанию следуют акценту темы; стиль фона
     (настройка «Стиль градиента фона») переопределяет их. */
  --page-tint-1: color-mix(in srgb, var(--accent) 22%, transparent);
  --page-tint-2: color-mix(in srgb, var(--accent-2) 20%, transparent);
  /* Фон страницы: сначала безопасный цвет, затем вариант на основе тинтов */
  --page-bg: radial-gradient(1200px 800px at 15% -10%, #1a2340 0%, transparent 55%),
             radial-gradient(1000px 700px at 100% 0%, #241a3d 0%, transparent 50%),
             linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  --page-bg: radial-gradient(1200px 800px at 15% -10%, var(--page-tint-1) 0%, transparent 55%),
             radial-gradient(1000px 700px at 100% 0%, var(--page-tint-2) 0%, transparent 50%),
             linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  --shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px rgba(108, 140, 255, 0.28), 0 18px 50px rgba(108, 140, 255, 0.18);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 74px;
  --nav-h-safe: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

/* ------------------------- Светлая тема ------------------------- */
:root[data-theme="light"] {
  --bg-0: #e7ecf6;
  --bg-1: #fbfcff;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-solid: #ffffff;
  --border: rgba(15, 23, 42, 0.1);
  --border-strong: rgba(15, 23, 42, 0.18);
  --text: #0f172a;
  --text-dim: #5c6578;
  --glass-1: rgba(15, 23, 42, 0.035);
  --glass-2: rgba(15, 23, 42, 0.055);
  --glass-3: rgba(15, 23, 42, 0.18);
  --panel: rgba(255, 255, 255, 0.72);
  --panel-strong: rgba(255, 255, 255, 0.88);
  --stage-void: rgba(15, 23, 42, 0.035);
  --menu-bg: rgba(255, 255, 255, 0.98);
  --toast-bg: rgba(255, 255, 255, 0.98);
  --grid-rgb: 15, 23, 42;
  --grid-base: 0.055;
  --hover-text: #0f172a;
  --code-color: #be185d;
  --blob-opacity: 0.28;
  --page-tint-1: color-mix(in srgb, var(--accent) 20%, transparent);
  --page-tint-2: color-mix(in srgb, var(--accent-2) 18%, transparent);
  --page-bg: radial-gradient(1200px 800px at 15% -10%, #dbe4ff 0%, transparent 55%),
             radial-gradient(1000px 700px at 100% 0%, #ece0ff 0%, transparent 50%),
             linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  --page-bg: radial-gradient(1200px 800px at 15% -10%, var(--page-tint-1) 0%, transparent 55%),
             radial-gradient(1000px 700px at 100% 0%, var(--page-tint-2) 0%, transparent 50%),
             linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.16);
  --shadow-glow: 0 0 0 1px rgba(108, 140, 255, 0.2), 0 18px 50px rgba(108, 140, 255, 0.14);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  background: var(--page-bg);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------- Фон ------------------------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--blob-opacity);
  will-change: transform;
}

/* Цвета пятен задаются выбранным стилем градиента (--blob-*), по умолчанию —
   акценты темы. */
.blob--1 {
  width: 46vw; height: 46vw;
  left: -8vw; top: -12vw;
  background: radial-gradient(circle at 30% 30%, var(--blob-1, #4f6bff), transparent 68%);
  animation: float1 18s var(--ease) infinite alternate;
}
.blob--2 {
  width: 40vw; height: 40vw;
  right: -10vw; top: 8vh;
  background: radial-gradient(circle at 60% 40%, var(--blob-2, #a855f7), transparent 68%);
  animation: float2 22s var(--ease) infinite alternate;
}
.blob--3 {
  width: 38vw; height: 38vw;
  left: 30vw; bottom: -16vw;
  background: radial-gradient(circle at 50% 50%, var(--blob-3, #22d3ee), transparent 70%);
  opacity: 0.35;
  animation: float3 26s var(--ease) infinite alternate;
}

@keyframes float1 { to { transform: translate3d(6vw, 5vh, 0) scale(1.12); } }
@keyframes float2 { to { transform: translate3d(-7vw, 8vh, 0) scale(0.9); } }
@keyframes float3 { to { transform: translate3d(5vw, -6vh, 0) scale(1.15); } }

.grid-overlay {
  position: absolute;
  inset: 0;
  /* Итоговая яркость = базовая × интенсивность × усиление предпросмотра.
     calc(clamp(...)) держит альфу в пределах [0, 1]. */
  --grid-alpha: clamp(0, calc(var(--grid-base) * var(--grid-factor, 1) * var(--grid-boost, 1)), 1);
  background-image:
    linear-gradient(rgba(var(--grid-rgb), var(--grid-alpha)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--grid-rgb), var(--grid-alpha)) 1px, transparent 1px);
  background-size: var(--grid-size, 48px) var(--grid-size, 48px);
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
}

/* Сетка скрыта настройкой — убираем её до первой отрисовки */
:root[data-grid-hidden="1"] .grid-overlay { display: none; }

/* Временный показ сетки во время подбора её размера в настройках */
:root[data-grid-preview="1"] .grid-overlay { display: block !important; }

/* Во время подбора сетка ярче, чтобы результат было видно сразу */
:root[data-grid-preview="1"] {
  --grid-boost: 4;
}

/* Анимации интерфейса отключены настройкой */
:root[data-no-anim="1"] *,
:root[data-no-anim="1"] *::before,
:root[data-no-anim="1"] *::after {
  animation: none !important;
  transition: none !important;
}
:root[data-no-anim="1"] .blob { animation: none !important; }

/* Градиент фона отключён настройкой — плоский фон и без цветных пятен */
:root[data-no-gradient="1"] body {
  background: var(--bg-0);
}
:root[data-no-gradient="1"] .blob {
  display: none;
}

/* Стеклянный эффект отключён настройкой: убираем размытие фона (backdrop-filter)
   и делаем полупрозрачные поверхности непрозрачными. Это даёт «плоский»
   интерфейс и заметно снижает нагрузку на GPU. */
:root[data-no-glass="1"] *,
:root[data-no-glass="1"] *::before,
:root[data-no-glass="1"] *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Непрозрачные подложки вместо полупрозрачного «стекла» (тёмная тема) */
:root[data-no-glass="1"] {
  --glass-1: #10141f;
  --glass-2: #141926;
  --glass-3: #1c2233;
  --panel: #0d111c;
  --panel-strong: #0d111c;
  --surface: #131827;
  --menu-bg: #0f1320;
  --toast-bg: #151b2c;
}
/* Непрозрачные подложки вместо полупрозрачного «стекла» (светлая тема) */
:root[data-no-glass="1"][data-theme="light"] {
  --glass-1: #f1f4fb;
  --glass-2: #e9eef8;
  --glass-3: #dde4f2;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --surface: #ffffff;
  --menu-bg: #ffffff;
  --toast-bg: #ffffff;
}

/* ------------------------- Сцена ------------------------- */
.stage {
  position: relative;
  z-index: 2;
  height: calc(100% - var(--nav-h-safe));
  overflow: hidden;
}

/* ------------------------- Окна рабочей области ------------------------- */
.app-window {
  position: absolute;
  left: 0;
  top: 0;
  width: min(440px, calc(100vw - 32px));
  height: min(620px, calc(100vh - var(--nav-h-safe) - 32px));
  transform: translate3d(0, 0, 0);
  transform-origin: center center;
  display: flex;
  flex-direction: column;
  /* Сплошная поверхность вместо «стекла»: постоянный backdrop-filter на
     каждом окне — самый тяжёлый эффект для композитора. При прокрутке
     содержимого окна размытие фона пересчитывается на каждом кадре, из-за
     чего модули подтормаживают. Плоская подложка визуально почти неотличима,
     но прокрутка становится гладкой. */
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft), var(--shadow-glow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
  /* Изоляция окна: перерисовка его содержимого не выходит за границы окна
     и не заставляет браузер пересчитывать раскладку всей страницы. */
  contain: layout paint style;
  will-change: transform, width, height;
  animation: windowIn 0.75s var(--ease) both;
  transition: box-shadow 0.35s var(--ease);
}

@keyframes windowIn {
  from { opacity: 0; scale: 0.94; }
  to   { opacity: 1; scale: 1; }
}

.app-window.is-dragging,
.app-window.is-resizing {
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(108, 140, 255, 0.5), 0 22px 60px rgba(108, 140, 255, 0.3);
  transition: none;
}
.app-window.is-dragging .chat-window__bar { cursor: grabbing; }
.app-window.is-resizing { user-select: none; }

/* Подсветка только что добавленного модуля (без перезапуска анимации появления) */
.app-window.is-flash {
  box-shadow: var(--shadow-soft),
              0 0 0 3px rgba(108, 140, 255, 0.6),
              0 0 44px rgba(108, 140, 255, 0.45);
}

/* Скрытое состояние — окно полностью убирается с рабочей области */
.app-window[data-state="closed"] { display: none; }

/* ---------------------- Свёрнутое (только шапка) ---------------------- */
.app-window.is-minimized {
  height: auto !important;
  min-height: 0 !important;
  /* Обрезаем содержимое по скруглённым границам: иначе декоративная линия
     и размытый фон выступают за края окна-шапки. */
  overflow: hidden;
  /* Оставляем сплошной фон без «стекла» — на свёрнутой шапке размытие
     выглядит как светлая кайма вокруг окна. */
  background: var(--surface-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-soft);
}
/* Заголовок свёрнутого окна — тоже сплошной, без полупрозрачного градиента */
.app-window.is-minimized .chat-window__bar { background: var(--surface-solid); }
/* Верхняя бегущая линия у свёрнутого окна не нужна */
.app-window.is-minimized::before { display: none; }
/* Режимные окна не проигрывают анимацию появления (она масштабирует окно) */
.app-window.is-maximized,
.app-window.is-fullscreen { animation: none; }
.app-window.is-minimized > .module-body,
.app-window.is-minimized > .chat-window__body,
.app-window.is-minimized > .composer,
.app-window.is-minimized > .ai-settings,
.app-window.is-minimized > .resize-handle { display: none !important; }
.app-window.is-minimized .chat-window__bar {
  height: 48px;
  border-bottom: none;
}
/* У свёрнутого окна кнопки «свернуть» показывает «развернуть» */
.app-window.is-minimized .win-min-btn svg { transform: rotate(0deg); }

/* --------------------- Развёрнутое (на всю область) -------------------- */
.app-window.is-maximized {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  border-radius: 0;
  border-color: transparent;
}
.app-window.is-maximized .resize-handle { display: none; }
.app-window.is-maximized .chat-window__bar {
  height: 56px;
  cursor: default;
}

/* ------------------------- Полноэкранный режим ------------------------ */
.app-window.is-fullscreen,
.app-window:fullscreen {
  /* Фиксируем на весь экран — перекрывает даже нижнее меню.
     Работает и как фолбэк, если Fullscreen API запрещён браузером. */
  position: fixed;
  inset: 0;
  z-index: 900;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none;
  max-height: none;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  border-radius: 0;
  border: none;
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.app-window.is-fullscreen .resize-handle,
.app-window:fullscreen .resize-handle { display: none; }
.app-window.is-fullscreen .chat-window__bar,
.app-window:fullscreen .chat-window__bar { cursor: default; }
/* Светящуюся линию сверху в полноэкранном режиме убираем — она лишняя */
.app-window.is-fullscreen::before,
.app-window:fullscreen::before { display: none; }

/* Светящаяся линия сверху */
.app-window::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), var(--accent-3), transparent);
  background-size: 200% 100%;
  animation: shimmer 6s linear infinite;
  z-index: 3;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ------------------------- Заголовок окна ------------------------- */
.chat-window__bar {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  cursor: grab;
  background: linear-gradient(180deg, var(--glass-2), var(--glass-1));
  border-bottom: 1px solid var(--border);
  touch-action: none;
}
.chat-window__bar:active { cursor: grabbing; }

.chat-window__title { display: flex; align-items: center; gap: 11px; min-width: 0; }

.status-dot {
  width: 9px; height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
  animation: liveDot 2.2s ease-out infinite;
}
@keyframes liveDot {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
/* Индикатор при недостатке средств: красный, без «пульсации онлайн» */
.status-dot.is-error {
  background: #f87171;
  animation: none;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25);
}
/* Отступ цветного индикатора AI Assistant внутри шапки окна модуля */
.module-chat__dot { margin-right: 8px; }

.chat-window__titles { display: flex; flex-direction: column; min-width: 0; }
.chat-window__titles strong { font-size: 14.5px; font-weight: 650; }
.chat-window__titles small {
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-window__tools { display: flex; gap: 4px; }
/* Кнопка активного режима окна (развёрнуто / свёрнуто / полный экран) */
.chat-window__tools .icon-btn.is-active {
  color: var(--accent);
  background: transparent;
  border-color: var(--accent);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  color: var(--text-dim);
  background: transparent;
  border: 2px solid var(--border-strong);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.22s var(--ease);
}
.icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.icon-btn:hover {
  color: var(--hover-text);
  background: transparent;
  border-color: var(--border-strong);
  transform: scale(1.08);
}
.icon-btn:active { transform: scale(0.94); }

/* Пульсация кнопки «Редактировать через ИИ» у пустого модуля —
   наглядно показывает, куда нажать, чтобы наполнить шаблон. */
.icon-btn.ai-edit-btn.is-pulsing {
  color: var(--accent);
  background: transparent;
  border: 2px solid var(--accent);
  animation: aiEditPulse 1.8s ease-in-out infinite;
}
@keyframes aiEditPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent);
    transform: scale(1.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .icon-btn.ai-edit-btn.is-pulsing { animation: none; }
}

/* ------------------------- Тело чата ------------------------- */
.chat-window__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--stage-void);
}

.messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Прокрутка изолирована в отдельном слое и не дёргает раскладку окна. */
  contain: layout paint style;
}

.messages::-webkit-scrollbar { width: 8px; }
.messages::-webkit-scrollbar-track { background: transparent; }
.messages::-webkit-scrollbar-thumb {
  background: var(--glass-3);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.messages::-webkit-scrollbar-thumb:hover { background: rgba(108, 140, 255, 0.45); background-clip: content-box; }

/* Сообщения */
.msg {
  display: flex;
  gap: 9px;
  max-width: 88%;
  animation: msgIn 0.45s var(--ease) both;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.msg--user { align-self: flex-end; flex-direction: row-reverse; }
.msg--ai { align-self: flex-start; }

.msg__avatar {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 10px;
  color: #fff;
}
.msg--ai .msg__avatar {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 18px rgba(108, 140, 255, 0.35);
}
.msg--user .msg__avatar {
  background: linear-gradient(135deg, #2dd4bf, #22d3ee);
  box-shadow: 0 6px 18px rgba(34, 211, 238, 0.3);
}

.msg__bubble {
  position: relative;
  padding: 10px 13px;
  font-size: 14px;
  line-height: 1.55;
  border-radius: var(--radius-md);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.msg__text { display: inline; }
.msg--ai .msg__bubble {
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-top-left-radius: 6px;
}
.msg--user .msg__bubble {
  /* Без цветовой заливки — только контур (акцент темы). */
  background: transparent;
  border: 1px solid var(--accent);
  border-top-right-radius: 6px;
  color: var(--text);
}

.msg__time {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  opacity: 0.55;
}

/* Индикатор печати */
.typing {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px 6px;
}
.typing.hidden { display: none; }

.typing__avatar {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.typing__dots {
  display: inline-flex;
  gap: 5px;
  padding: 11px 14px;
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-top-left-radius: 6px;
}
.typing__dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: dotBounce 1.25s ease-in-out infinite;
}
.typing__dots i:nth-child(2) { animation-delay: 0.15s; }
.typing__dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes dotBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* ------------------------- Поле ввода ------------------------- */
.composer {
  flex: 0 0 auto;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Плашка «Редактируем: …» над полем ввода */
.ai-edit-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 8px;
  padding: 6px 8px 6px 10px;
  border: 1px solid rgba(108, 140, 255, 0.45);
  border-radius: var(--radius-sm, 10px);
  background: rgba(108, 140, 255, 0.12);
  color: var(--text, #e8ecf6);
  font-size: 12.5px;
  line-height: 1.3;
}
.ai-edit-badge.hidden { display: none; }
.ai-edit-badge__icon { color: #6c8cff; font-size: 13px; }
.ai-edit-badge__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-edit-badge__text strong { color: #6c8cff; }
.ai-edit-badge__clear {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(108, 140, 255, 0.5);
  border-radius: 6px;
  background: transparent;
  color: var(--muted, #9aa4bd);
  cursor: pointer;
  font-size: 12px;
  transition: border-color 0.2s var(--ease, ease), color 0.2s var(--ease, ease);
}
.ai-edit-badge__clear:hover { border-color: #6c8cff; color: var(--text, #e8ecf6); }

.composer__field {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.composer__field:focus-within {
  border-color: rgba(108, 140, 255, 0.7);
  background: rgba(108, 140, 255, 0.08);
  box-shadow: 0 0 0 4px rgba(108, 140, 255, 0.14);
}

#input {
  flex: 1 1 auto;
  min-height: 24px;
  max-height: 120px;
  padding: 8px 0;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  overflow-y: auto;
}
#input::placeholder { color: var(--text-dim); }

.send-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  color: var(--accent);
  background: transparent;
  border: 2px solid var(--accent);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), opacity 0.25s var(--ease);
}
.send-btn svg { width: 17px; height: 17px; fill: currentColor; }
.send-btn:hover { transform: translateY(-2px) scale(1.05); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.send-btn:active { transform: scale(0.94); }
.send-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.composer__hint {
  margin: 8px 2px 0;
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.8;
}

/* Второй чат: тело окна — полноценный чат-лейаут без полей .module-body.
   Шапка/лента/поле ввода занимают всю высоту окна, как у основного чата. */
.module-body--chat {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.module-body--chat .chat-window__body { min-height: 0; }
.module-body--chat .composer { margin-top: auto; }

/* Подпись статуса второго чата в шапке окна */
.module-chat__status { font-size: 11.5px; color: var(--text-dim); }

/* Поле ввода второго чата (аналог #input для встроенного чата) */
.composer__input {
  flex: 1 1 auto;
  min-height: 24px;
  max-height: 120px;
  padding: 8px 0;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  overflow-y: auto;
}
.composer__input::placeholder { color: var(--text-dim); }

/* ------------------------- Файлы: вложения и скачивание ------------------------- */
/* Скрытый input[type=file] — загрузка запускается из панели «Файлы» */
.composer__file { display: none; }

/* Кнопка-скрепка в поле ввода. По умолчанию скрыта: на широких экранах
   загрузка идёт из правой колонки «Файлы». Показывается только на узких
   экранах (≤560px), где эта колонка скрыта (см. медиа-блок ниже). */
.composer__attach {
  display: none;
  flex: 0 0 auto;
  /* Скрепка центрируется по вертикали относительно поля ввода (у поля
     align-items: flex-end, иначе кнопка «уезжает» вниз). */
  align-self: center;
  place-items: center;
  width: 36px; height: 36px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.composer__attach svg {
  display: block;
  width: 17px;
  height: 17px;
}
.composer__attach:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.composer__attach:active { transform: scale(0.94); }

/* Панель прикреплённых к отправке файлов */
.composer-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 2px 8px;
}
.composer-attachments.hidden { display: none; }

/* Чип файла (в панели ввода, в сообщении и как кнопка скачивания) */
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.attach-chip__icon { flex: 0 0 auto; font-size: 12px; }
.attach-chip__name {
  min-width: 0;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-chip__size { flex: 0 0 auto; font-size: 10.5px; color: var(--text-dim); }
.attach-chip__remove {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 10px;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.attach-chip__remove:hover { color: #ff6b6b; background: rgba(255, 107, 107, 0.14); }

/* Вложения внутри сообщения */
.msg__files,
.msg__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.attach-chip--static { cursor: default; }

/* Кнопка скачивания файла, созданного ИИ */
.download-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.download-chip__icon { flex: 0 0 auto; }
.download-chip__name {
  min-width: 0;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
}
.download-chip:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  transform: translateY(-1px);
}
.download-chip:active { transform: scale(0.97); }

/* ------------------------- Предпросмотр файла ------------------------- */
.file-preview-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  max-height: min(760px, calc(100vh - 40px));
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  animation: windowIn 0.3s var(--ease) both;
}
.file-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--glass-2), var(--glass-1));
}
.file-preview__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.file-preview__meta-wrap { min-width: 0; }
.file-preview__meta-wrap strong {
  display: block;
  font-size: 14px;
  font-weight: 660;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-preview__meta-wrap small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-dim); }
.file-preview__badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px; height: 32px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 9px;
}
.file-preview__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.file-preview__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 16px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  tab-size: 2;
}
.file-preview__body--empty { color: var(--text-dim); font-family: inherit; font-style: italic; }
.file-preview__body--image {
  display: grid;
  place-items: center;
  padding: 20px;
  font-family: inherit;
  white-space: normal;
}
.file-preview__img { max-width: 100%; max-height: 70vh; border-radius: var(--radius-md); }

/* ------------------------- Редактор файла (личный кабинет) ------------------------- */
.file-edit-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: min(760px, calc(100vh - 40px));
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  animation: windowIn 0.3s var(--ease) both;
}
.file-edit__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--glass-2), var(--glass-1));
}
.file-edit__head strong { font-size: 14px; font-weight: 660; }
.file-edit__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}
.file-edit__textarea {
  min-height: 300px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre;
  overflow: auto;
}
.file-edit__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

/* ------------------------- Вкладка «Файлы» личного кабинета ------------------------- */
.dash-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.dash-files__empty {
  margin: 0;
  padding: 18px 12px;
  font-size: 12.5px;
  color: var(--text-dim);
  text-align: center;
}
.dash-file {
  display: flex;
  flex-direction: column;
  padding: 9px 10px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.dash-file-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dash-file:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
/* Обложка аудио в списке файлов (вместо значка расширения). */
.dash-file__cover {
  position: relative;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 32%, transparent),
    color-mix(in srgb, var(--accent) 10%, transparent));
  border: 1px solid var(--border);
}
.dash-file__cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dash-file__cover-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--accent) 75%, var(--text-dim));
}
.dash-file__cover-note svg { width: 20px; height: 20px; }
.dash-file__cover:not(.is-empty) .dash-file__cover-note { display: none; }
/* Кастомный плеер аудиофайла в стиле Music Generator — отдельной строкой. */
.dash-file__player-wrap {
  width: 100%;
  margin-top: 8px;
}
.dash-file__player-wrap .music-player { width: 100%; }
.dash-file-wrap--audio .dash-file__info { flex: 1 1 140px; }
/* Аудио и обложка в окне предпросмотра файла. */
.file-preview__body--audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px;
}
.file-preview__cover {
  width: min(240px, 60%);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  object-fit: cover;
}
.file-preview__audio { width: 100%; max-width: 480px; }
.dash-file__info { flex: 1 1 120px; min-width: 0; }
.dash-file__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-file__meta { margin-top: 2px; font-size: 10.5px; color: var(--text-dim); }
.dash-file__actions { flex: 0 0 auto; display: flex; gap: 4px; }
.dash-file__btn {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.dash-file__btn svg { width: 15px; height: 15px; }
.dash-file__btn:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.dash-file__btn--danger:hover {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.5);
  background: rgba(255, 107, 107, 0.12);
}

/* ------------------------- AI Assistant: сплит «чат + файлы» ------------------------- */
/* Слева — чат, справа — библиотека файлов. */
.assistant-split {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}
.assistant-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.assistant-col--chat {
  flex: 1 1 auto;
  min-width: 0;
}
.assistant-col--files {
  flex: 0 0 210px;
  width: 210px;
  background: var(--panel);
}

/* Подсветка окна при перетаскивании файлов внутрь (drag & drop) */
.app-window.is-dropping {
  box-shadow: var(--shadow-soft),
              0 0 0 3px var(--accent),
              0 0 44px color-mix(in srgb, var(--accent) 50%, transparent);
}
.app-window.is-dropping::after {
  content: "Отпустите — файлы и папки загрузятся";
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: inherit;
  pointer-events: none;
}

/* Перетаскиваемый разделитель между чатом и панелью «Файлы» */
.assistant-divider {
  flex: 0 0 7px;
  position: relative;
  cursor: ew-resize;
  touch-action: none;
  background: transparent;
}
.assistant-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 1px;
  background: var(--border);
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.assistant-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: var(--border-strong);
  opacity: 0;
  transition: opacity 0.2s var(--ease), background 0.2s var(--ease);
}
.assistant-divider:hover::before,
.assistant-divider.is-dragging::before {
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
}
.assistant-divider:hover::after,
.assistant-divider.is-dragging::after {
  opacity: 1;
  background: var(--accent);
}

/* Панель навигации по папкам: кнопка «назад» и хлебные крошки */
.assistant-files__nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--glass-1);
}
.assistant-files__nav.hidden { display: none; }
.assistant-files__back {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.assistant-files__back svg { width: 14px; height: 14px; }
.assistant-files__back:hover:not(:disabled) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.assistant-files__back:disabled { opacity: 0.4; cursor: default; }

.assistant-files__crumbs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.assistant-files__crumbs::-webkit-scrollbar { display: none; }
.assistant-files__crumb {
  flex: 0 0 auto;
  padding: 2px 5px;
  font: inherit;
  font-size: 11.5px;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.assistant-files__crumb:hover { color: var(--text); background: var(--glass-2); }
.assistant-files__crumb.is-current { color: var(--text); font-weight: 600; }
.assistant-files__sep { flex: 0 0 auto; font-size: 11px; color: var(--text-dim); opacity: 0.6; }

/* Шапка правой колонки: заголовок, счётчик и кнопка загрузки */
.assistant-files__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border-bottom: 1px solid var(--border);
}
.assistant-files__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
}
.assistant-files__count {
  flex: 0 0 auto;
  min-width: 18px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: var(--accent);
  border-radius: 9px;
}
.assistant-files__count.hidden { display: none; }
.assistant-files__upload {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.assistant-files__upload svg { width: 15px; height: 15px; }
.assistant-files__upload:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* Кнопка «Очистить все файлы» */
.assistant-files__clear {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.assistant-files__clear svg { width: 15px; height: 15px; }
.assistant-files__clear:hover {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.5);
  background: rgba(255, 107, 107, 0.12);
}

/* Список файлов */
.file-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
}
.file-list.hidden { display: none; }
.file-list__empty {
  margin: 0;
  padding: 24px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-dim);
}
.file-list__empty.hidden { display: none; }

.file-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.file-row:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.file-row:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* Прикреплённый к сообщению файл — заметная рамка и галочка */
.file-row.is-attached {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.file-row.is-attached::after {
  content: "✓";
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.file-row__badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px; height: 28px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.file-row__badge--ai {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
}
/* Папка: отличаем от файла фоном и курсором-указателем */
.file-row--folder .file-row__badge--folder {
  font-size: 16px;
  background: var(--glass-2);
  border-color: var(--border);
}
.file-row--folder .file-row__name { color: var(--accent); }

.file-row__info { flex: 1 1 80px; min-width: 0; }
.file-row__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row__meta { margin-top: 1px; font-size: 10.5px; color: var(--text-dim); }

.file-row__actions { flex: 0 0 auto; display: flex; gap: 4px; }
.file-row__btn {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.file-row__btn svg { width: 15px; height: 15px; }
.file-row__btn:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.file-row__btn--danger:hover {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.5);
  background: rgba(255, 107, 107, 0.12);
}

/* Узкое окно: прячем правую колонку, чтобы не сжимать чат */
@media (max-width: 560px) {
  .assistant-col--files,
  .assistant-divider { display: none; }
  /* Правая колонка «Файлы» скрыта — загрузку отдаём кнопке-скрепке
     прямо в поле ввода, иначе прикрепить файл было бы нечем. */
  .composer__attach { display: grid; }
  /* Скрепка стоит слева — уменьшаем левый отступ поля ввода,
     рассчитанный на текст без кнопки. */
  .composer__field { padding-left: 6px; gap: 6px; }
}

/* ------------------------- AI Assistant: роли ------------------------- */
/* Кнопка активной роли и кнопка добавления роли в шапке окна. */
.role-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
/* Кнопки ролей по центру шапки окна (независимо от заголовка и инструментов). */
.role-controls--center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  max-width: 45%;
}
/* Узкое окно: центрирование отключаем — кнопки ролей встают в обычный поток
   шапки, чтобы не перекрывать заголовок и кнопки управления окном. */
@container modwin (max-width: 480px) {
  .module-window[data-module="ai-chat-2"] .role-controls--center {
    position: static;
    transform: none;
    max-width: none;
    order: 2;
    flex: 0 1 auto;
  }
  /* Порядок: заголовок → роли → кнопки управления окном. */
  .module-window[data-module="ai-chat-2"] .chat-window__bar { gap: 6px; padding: 0 8px; }
  .module-window[data-module="ai-chat-2"] .chat-window__tools { order: 3; flex: 0 0 auto; }
  .module-window[data-module="ai-chat-2"] .chat-window__title { flex: 1 1 auto; min-width: 0; }
  .module-window[data-module="ai-chat-2"] .chat-window__titles { min-width: 0; }
  .module-window[data-module="ai-chat-2"] .chat-window__titles strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .module-window[data-module="ai-chat-2"] .module-chat__status { display: none; }
  .module-window[data-module="ai-chat-2"] .role-chip {
    max-width: 110px;
    flex: 0 1 auto;
    min-width: 0;
  }
}
/* Очень узкое окно: прячем второстепенные кнопки окна, оставляя роли видимыми. */
@container modwin (max-width: 360px) {
  .module-window[data-module="ai-chat-2"] .win-min-btn,
  .module-window[data-module="ai-chat-2"] .win-max-btn { display: none; }
  .module-window[data-module="ai-chat-2"] .role-chip { max-width: 86px; }
}
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 150px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.role-chip.hidden { display: none; }
.role-chip:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  transform: translateY(-1px);
}
.role-chip:active { transform: scale(0.97); }
.role-chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.role-add-btn { flex: 0 0 auto; }

/* Выпадающее меню ролей */
.role-menu {
  position: fixed;
  z-index: 60;
  min-width: 220px;
  max-width: 300px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.role-menu.hidden { display: none; }
.role-menu__head {
  padding: 6px 8px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.role-menu__empty {
  margin: 0;
  padding: 10px 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.role-menu__item {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
}
.role-menu__item.is-current { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.role-menu__pick {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.role-menu__pick:hover { background: var(--glass-2); }
.role-menu__dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
}
.role-menu__item.is-current .role-menu__dot { background: var(--accent); }
.role-menu__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.role-menu__act {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  padding: 0;
  color: var(--text);
  background: var(--glass-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.role-menu__act svg { width: 12px; height: 12px; fill: currentColor; }
.role-menu__act:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  transform: translateY(-1px);
}
/* Кнопка удаления — заметный красный оттенок уже в обычном состоянии */
.role-menu__act--danger {
  color: #ff7b7b;
  background: rgba(255, 107, 107, 0.14);
  border-color: rgba(255, 107, 107, 0.4);
}
.role-menu__act--danger:hover {
  color: #fff;
  background: #ff5c5c;
  border-color: #ff5c5c;
}
.role-menu__add {
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--accent);
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.role-menu__add:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Карточка редактора роли */
.role-card {
  display: flex;
  flex-direction: column;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg, 18px);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.role-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  overflow-y: auto;
}
.role-card__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}
.role-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}

/* ------------------------- Resize handles ------------------------- */
/* Ручки лежат ВНУТРИ границ окна (у окна overflow:hidden),
   поэтому их легко поймать курсором и они не обрезаются. */
.resize-handle {
  position: absolute;
  z-index: 6;
  touch-action: none;
}
.resize-handle--n  { top: 0;    left: 12px;  right: 118px; height: 7px; cursor: ns-resize; }
.resize-handle--s  { bottom: 0; left: 12px;  right: 12px;  height: 7px; cursor: ns-resize; }
.resize-handle--w  { left: 0;   top: 72px;   bottom: 12px; width: 7px;  cursor: ew-resize; }
.resize-handle--e  { right: 0;  top: 72px;   bottom: 12px; width: 7px;  cursor: ew-resize; }
.resize-handle--nw { top: 0;    left: 0;     width: 14px;  height: 14px; cursor: nwse-resize; }
.resize-handle--ne { top: 0;    right: 0;    width: 14px;  height: 14px; cursor: nesw-resize; }
.resize-handle--sw { bottom: 0; left: 0;     width: 16px;  height: 16px; cursor: nesw-resize; }
.resize-handle--se { bottom: 0; right: 0;    width: 16px;  height: 16px; cursor: nwse-resize; }

.resize-handle--se::after,
.resize-handle--sw::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 9px; height: 9px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.25s var(--ease);
}
.resize-handle--se::after { right: 5px; border-right: 2px solid rgba(255, 255, 255, 0.3); }
.resize-handle--sw::after { left: 5px; border-left: 2px solid rgba(255, 255, 255, 0.3); }
.app-window:hover .resize-handle--se::after { border-color: rgba(108, 140, 255, 0.9); }
.app-window:hover .resize-handle--sw::after { border-color: rgba(108, 140, 255, 0.9); }

/* ------------------------- Нижняя панель с кнопкой чата ------------------------- */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  height: var(--nav-h-safe);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-strong);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  animation: navIn 0.7s var(--ease) both;
}

@keyframes navIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.bottom-nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), var(--accent-3), transparent);
  background-size: 200% 100%;
  animation: shimmer 6s linear infinite;
}

.bottom-nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* ------------------------- Номера рабочих пространств в нижнем меню ------------------------- */
.space-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  overflow-x: auto;
  max-width: 60%;
  /* Отступы сверху/снизу: без них вертикальные эффекты кнопок (тени,
     сдвиг при наведении) обрезаются границей overflow-контейнера. */
  padding: 4px 2px;
  scrollbar-width: none;
}
.space-tabs::-webkit-scrollbar { display: none; }
.space-tabs.hidden { display: none; }

.space-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}
.space-tab:hover {
  color: var(--hover-text);
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px var(--border-strong);
}
/* Активное пространство выделяется акцентной рамкой и цветом — без заливки. */
.space-tab.is-active {
  color: var(--accent);
  border-color: var(--accent);
}
.space-tab--add {
  color: var(--accent);
  border-style: dashed;
  font-weight: 600;
}

/* ------------------------- Кнопка и меню добавления модулей ------------------------- */
.bottom-nav__tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Кнопка «Модуль» — по центру нижней панели (translate не конфликтует
   с transform в :hover/:active). */
.bottom-nav__inner > .module-add-btn {
  position: absolute;
  left: 50%;
  translate: -50% 0;
}

.module-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: box-shadow 0.25s var(--ease),
              background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.module-add-btn:hover {
  color: var(--hover-text);
  background: transparent;
  border-color: rgba(108, 140, 255, 0.8);
}
.module-add-btn span[aria-hidden] { font-size: 16px; line-height: 1; }

/* ------------------------- Модалка «Библиотека модулей» ------------------------- */
.module-modal {
  position: fixed;
  inset: 0;
  z-index: 205;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 7, 14, 0.62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: modalFade 0.2s var(--ease) both;
}
.module-modal.hidden { display: none; }

@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.module-modal__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: min(760px, calc(100vh - 40px));
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  animation: windowIn 0.3s var(--ease) both;
  transition: max-width 0.3s var(--ease), max-height 0.3s var(--ease);
}

/* Развёрнутое окно библиотеки: почти на весь экран */
.module-modal__card.is-expanded {
  max-width: min(1280px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
}
/* Кнопка разворота активна, когда окно развёрнуто */
.module-modal__head .icon-btn[aria-pressed="true"] {
  color: var(--accent);
  background: transparent;
  border-color: var(--accent);
}

.module-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--glass-2), var(--glass-1));
}
.module-modal__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.module-modal__head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.module-modal__title strong { display: block; font-size: 15.5px; font-weight: 680; }
.module-modal__title small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); }
.module-modal__badge {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  font-size: 18px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 11px;
}

.module-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 18px;
}
/* Поиск по библиотеке модулей */
.module-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.module-search__icon {
  position: absolute;
  left: 13px;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  color: var(--text-dim);
  pointer-events: none;
}
.module-search__icon svg { width: 18px; height: 18px; fill: currentColor; }
.module-search__input {
  width: 100%;
  height: 44px;
  padding: 0 42px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--glass-1);
  border: 1.5px solid var(--border-strong);
  border-radius: 12px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.module-search__input::placeholder { color: var(--text-dim); }
.module-search__input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--glass-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.module-search__clear {
  position: absolute;
  right: 10px;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  padding: 0;
  font-size: 13px;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.module-search__clear:hover { color: var(--text); background: var(--glass-2); }
.module-search__clear.hidden { display: none; }

.module-modal__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.module-modal__section-title {
  display: block;
  font-size: 11.5px;
  font-weight: 680;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.module-modal__count {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.module-modal__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 20px;
  text-align: center;
}
.module-modal__empty.hidden { display: none; }
.module-modal__empty-icon { font-size: 34px; opacity: 0.75; }
.module-modal__empty-title { margin: 6px 0 0; font-size: 15px; font-weight: 660; color: var(--text); }
.module-modal__empty-text { margin: 0; font-size: 12.5px; color: var(--text-dim); }

.module-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

/* Развёрнутое окно — карточки чуть просторнее, но всё ещё плотная раскладка */
.module-modal__card.is-expanded .module-modal__grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.module-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px 42px 14px 12px;
  color: var(--text);
  background: var(--glass-1);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease),
              background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.module-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--module-accent) 80%, transparent);
  background: var(--glass-2);
}
.module-card:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--module-accent) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--module-accent) 28%, transparent);
}
/* Включённый (открытый на рабочей области) модуль выделяем ярче */
.module-card.is-active {
  border-color: var(--module-accent);
  background: color-mix(in srgb, var(--module-accent) 16%, var(--glass-1));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--module-accent) 45%, transparent),
              0 8px 22px -10px color-mix(in srgb, var(--module-accent) 70%, transparent);
}
.module-card.is-active .module-card__icon {
  background: color-mix(in srgb, var(--module-accent) 32%, transparent);
  border-color: color-mix(in srgb, var(--module-accent) 75%, transparent);
}
.module-card.is-active::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  width: 3px;
  height: calc(100% - 24px);
  border-radius: 0 3px 3px 0;
  background: var(--module-accent);
}
.module-card.hidden { display: none; }

/* Ручка перетаскивания карточки библиотеки */
.module-card__grip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 14px;
  margin-left: -3px;
  color: var(--text-dim);
  opacity: 0.55;
  cursor: grab;
  transition: opacity 0.2s var(--ease);
}
.module-card__grip svg { width: 15px; height: 15px; fill: currentColor; }
.module-card:hover .module-card__grip { opacity: 1; }

/* Состояния перетаскивания */
.module-card--draggable { cursor: grab; }
.module-card.is-dragging { opacity: 0.45; cursor: grabbing; }
.module-card.is-drop-target { border-color: var(--accent); }
.module-card.is-drop-before { box-shadow: -3px 0 0 0 var(--accent); }
.module-card.is-drop-after { box-shadow: 3px 0 0 0 var(--accent); }

/* Закреплённый модуль (AI Assistant): всегда первый, не двигается и не удаляется */
.module-card--pinned {
  border-color: color-mix(in srgb, var(--module-accent) 60%, transparent);
  cursor: default;
}
.module-card--pinned:hover { transform: none; }
.module-card--pinned .module-card__grip { opacity: 0.85; cursor: default; color: var(--module-accent); }
.module-card--pinned .module-card__grip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.module-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  font-size: 22px;
  color: var(--module-accent);
  background: color-mix(in srgb, var(--module-accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--module-accent) 50%, transparent);
  border-radius: 10px;
}

.module-card__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.module-card__title { font-size: 14.5px; font-weight: 650; line-height: 1.25; }


/* Действия — в правом верхнем углу, чтобы не мешать чтению названия */
.module-card__actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  align-items: center;
  gap: 1px;
  padding: 1px;
  background: var(--menu-bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.module-card:hover .module-card__actions,
.module-card:focus-within .module-card__actions { display: flex; }

.module-card__action {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  padding: 0;
  color: var(--text-dim);
  background: transparent;
  border: 2px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.module-card__action svg { width: 14px; height: 14px; fill: currentColor; }
.module-card__action:hover { color: var(--text); border-color: var(--accent); }
.module-card__action--danger:hover { color: #fca5a5; border-color: rgba(248, 113, 113, 0.6); }

.module-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: linear-gradient(0deg, var(--glass-2), var(--glass-1));
}

/* Размеры и отступы совпадают с кнопкой «Убрать все модули»
   (.module-modal__clear), чтобы кнопки в подвале были одного размера. */
.module-modal__create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 2px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
/* Анимация — только подсветка, без transforms (как у кнопки «Модуль»
   в нижнем навигационном меню). */
.module-modal__create:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

.module-modal__restore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.module-modal__restore:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
.module-modal__restore.hidden { display: none; }

.module-modal__clear {
  padding: 9px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #fca5a5;
  background: transparent;
  border: 2px solid rgba(248, 113, 113, 0.6);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.module-modal__clear:hover { background: rgba(248, 113, 113, 0.16); border-color: rgba(248, 113, 113, 0.6); }

@media (max-width: 720px) {
  .module-modal { padding: 12px; }
  .module-modal__grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ------------------------- Поля пользовательского модуля ------------------------- */
.custom-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.custom-field__label {
  font-size: 11.5px;
  font-weight: 620;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.custom-field__control {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.custom-field__control:focus {
  border-color: rgba(108, 140, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(108, 140, 255, 0.18);
}
.custom-field__control--area { resize: vertical; min-height: 84px; line-height: 1.5; }
select.custom-field__control { cursor: pointer; }
.custom-field__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.custom-field__check input { width: 16px; height: 16px; accent-color: var(--accent); }

/* Код-модуль: изолированный Shadow DOM на всё тело окна (без iframe) */
.module-body--code { padding: 0; overflow: hidden; }
.module-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 120px;
  border: none;
  background: transparent;
  overflow: auto;
}
.module-shadow { overflow: auto; }

/* Окно с код-модулем (графики, canvas, WebGL): убираем backdrop-blur.
   Полупрозрачное окно с backdrop-filter заставляет композитор размывать
   содержимое под ним на каждом кадре анимации модуля — это один из
   главных источников нагрузки на CPU/GPU. */
.app-window.has-code-window {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--surface-solid);
}
/* Canvas внутри модуля не влияет на раскладку страницы — ограничиваем
   область перерисовки отдельным слоем композитора. */
.app-window.has-code-window .module-shadow {
  contain: content;
}

/* Пока на рабочей области есть код-модуль, гасим тяжёлые декоративные
   эффекты фона и анимации: они конкурируют с модулем за кадры. */
:root.has-code-module .blob {
  animation: none;
  filter: blur(60px);
  opacity: calc(var(--blob-opacity) * 0.7);
}
:root.has-code-module .app-window:not(.has-code-window) {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Анимации интерфейса не должны крутиться, если вкладка не видна. */
:root.is-page-hidden *,
:root.is-page-hidden *::before,
:root.is-page-hidden *::after {
  animation-play-state: paused !important;
}

/* ------------------------- Редактор модуля ------------------------- */
.custom-card { width: min(620px, calc(100vw - 32px)); }
.custom-card__body { padding: 14px 18px 18px; }
.custom-editor__meta { display: grid; gap: 10px; margin-bottom: 14px; }

.custom-editor__section-title {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 680;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.custom-editor__accents { margin-bottom: 14px; }
/* Сетка из 9 колонок заполняет всю ширину карточки — без «хвоста»
   пустого места справа и с ровными рядами при любом числе цветов. */
.custom-editor__accent-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
}
.custom-editor__swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 22px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: inset 0 -8px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease),
              box-shadow 0.18s var(--ease), filter 0.18s var(--ease);
}
.custom-editor__swatch:hover { transform: scale(1.08); filter: brightness(1.12); }
.custom-editor__swatch.is-active {
  border-color: var(--text);
  box-shadow: inset 0 -8px 16px rgba(0, 0, 0, 0.18),
              0 0 0 3px color-mix(in srgb, var(--text) 30%, transparent);
}

/* Сетка выбора иконки: 12 колонок заполняют ширину карточки целиком. */
.custom-editor__icon-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
}
.custom-editor__icon {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 24px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--text-dim);
  background: var(--glass-1);
  border: 2px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease), background 0.18s var(--ease);
}
.custom-editor__icon:hover {
  color: var(--text);
  transform: scale(1.08);
  border-color: var(--border-strong);
}
.custom-editor__icon.is-active {
  color: var(--module-accent, var(--accent));
  border-color: var(--module-accent, var(--accent));
  background: color-mix(in srgb, var(--module-accent, var(--accent)) 18%, transparent);
}

.custom-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ------------------------- Окна модулей ------------------------- */
.module-window .chat-window__bar { cursor: grab; }

/* Окно — контейнер для container-запросов: реагируем на ширину самого окна,
   а не вьюпорта (окно можно свободно растягивать). */
.module-window { container-type: inline-size; container-name: modwin; }

/* Кнопка «Редактировать через ИИ» (иконка-искра) — по центру шапки окна.
   Центрируем через margin, а не transform: transform занят анимациями
   наведения и пульсации (.icon-btn:hover / .is-pulsing). */
.module-window .chat-window__bar .ai-edit-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -15px 0 0 -15px;
}

/* В узком окне центрированная кнопка наезжала бы на кнопки справа.
   Тогда возвращаем её в обычный поток — внутри группы инструментов. */
@container modwin (max-width: 420px) {
  .module-window .chat-window__bar .ai-edit-btn {
    position: static;
    left: auto;
    top: auto;
    margin: 0;
  }
}

/* Название модуля в шапке: в обычном состоянии занимает свободное место,
   при нехватке ширины обрезается многоточием, а при сильном сжатии окна
   полностью прячется — иначе наезжает на кнопки управления окном. */
.module-window .chat-window__title { flex: 1 1 auto; min-width: 0; }
.module-window .chat-window__titles strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@container modwin (max-width: 320px) {
  .module-window .chat-window__titles { display: none; }
}

/* Окно, выбранное для правки через ИИ */
.module-window.is-ai-target {
  box-shadow: 0 0 0 2px rgba(108, 140, 255, 0.85),
              0 0 0 6px rgba(108, 140, 255, 0.18),
              var(--shadow-soft, 0 18px 40px rgba(0, 0, 0, 0.4));
}
.module-window.is-ai-target .chat-window__bar {
  background: linear-gradient(90deg, rgba(108, 140, 255, 0.22), transparent 60%);
}

.module-accent {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  font-size: 16px;
  color: var(--module-accent);
  border-radius: 10px;
  background: rgba(108, 140, 255, 0.24);
  background: color-mix(in srgb, var(--module-accent) 22%, transparent);
  border: 1px solid rgba(108, 140, 255, 0.5);
  border-color: color-mix(in srgb, var(--module-accent) 60%, transparent);
  box-shadow: 0 6px 18px rgba(108, 140, 255, 0.35);
}

.module-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overflow: auto;
  background: var(--stage-void);
  /* Прокрутка модуля рисуется отдельным слоем композитора и не влияет
     на раскладку остальной страницы — заметно снижает подтормаживание
     длинных списков (задачи, ссылки, RSS, файлы и т. п.). */
  contain: layout paint style;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.module-error { color: #fca5a5; font-size: 13px; }

/* Плейсхолдер пустого модуля: заметная анимированная подсказка */
.module-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 18px;
  text-align: center;
  animation: emptyIn 0.5s var(--ease) both;
}
@keyframes emptyIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.module-empty__icon {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 26px rgba(108, 140, 255, 0.4);
  animation: emptyPulse 2.6s ease-in-out infinite;
}
.module-empty__icon svg { width: 30px; height: 30px; fill: currentColor; }
@keyframes emptyPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 26px rgba(108, 140, 255, 0.4); }
  50%      { transform: scale(1.08); box-shadow: 0 14px 34px rgba(168, 85, 247, 0.55); }
}

.module-empty__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
}

.module-empty__text {
  margin: 0;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
}

@media (prefers-reduced-motion: reduce) {
  .module-empty,
  .module-empty__icon { animation: none; }
}

/* Заметки */
.module-notes {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 12px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: none;
  outline: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.module-notes:focus {
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.14);
}

/* Калькулятор */
.calc__display {
  flex: 0 0 auto;
  padding: 12px 14px;
  text-align: right;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.calc__expr { min-height: 18px; font-size: 13px; color: var(--text-dim); word-break: break-all; }
.calc__result { font-size: 26px; font-weight: 700; letter-spacing: 0.5px; word-break: break-all; }

.calc__pad {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.calc__key {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.calc__key:hover { background: rgba(168, 85, 247, 0.18); border-color: var(--accent); }
.calc__key:active { transform: scale(0.95); }
.calc__key--fn { color: #fca5a5; border-color: rgba(248, 113, 113, 0.5); }
.calc__key--equals {
  grid-column: span 4;
  color: var(--accent);
  background: transparent;
  border: 2px solid var(--accent);
}
.calc__key--equals:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* Часы */
.clock__time {
  margin-top: auto;
  font-size: clamp(30px, 12vw, 44px);
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.clock__date { text-align: center; font-size: 13px; color: var(--text-dim); text-transform: capitalize; }
.clock__zone { margin-bottom: auto; text-align: center; font-size: 12px; color: var(--text-dim); opacity: 0.75; }

/* Задачи */
.tasks__form { flex: 0 0 auto; display: flex; gap: 8px; }
.tasks__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
}
.tasks__input:focus { border-color: rgba(245, 158, 11, 0.6); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14); }
.tasks__add {
  flex: 0 0 auto;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #f59e0b;
  background: transparent;
  border: 2px solid rgba(245, 158, 11, 0.7);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.tasks__add:hover { background: rgba(245, 158, 11, 0.16); }
.tasks__add:active { transform: scale(0.95); }

.tasks__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tasks__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  animation: msgIn 0.3s var(--ease) both;
}
.tasks__item.is-done .tasks__text { text-decoration: line-through; color: var(--text-dim); }
.tasks__check { flex: 0 0 auto; width: 16px; height: 16px; accent-color: #f59e0b; cursor: pointer; }
.tasks__text { flex: 1 1 auto; font-size: 13.5px; line-height: 1.4; word-break: break-word; }
.tasks__del {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-dim);
  background: transparent;
  border: 2px solid var(--border-strong);
  border-radius: 7px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.tasks__del:hover { color: #fca5a5; border-color: rgba(248, 113, 113, 0.6); }
.tasks__empty { padding: 8px 2px; font-size: 12.5px; color: var(--text-dim); }
.tasks__meta { flex: 0 0 auto; font-size: 11.5px; color: var(--text-dim); }

/* Генератор паролей */
.pw__output {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.pw__code {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  color: var(--code-color);
  word-break: break-all;
}
.pw__copy {
  flex: 0 0 auto;
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #f472b6;
  background: transparent;
  border: 2px solid rgba(244, 114, 182, 0.6);
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.pw__copy:hover { background: rgba(244, 114, 182, 0.32); }

.pw__row { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-dim); }
.pw__label { flex: 0 0 auto; }
.pw__range { flex: 1 1 auto; accent-color: #f472b6; }
.pw__len { flex: 0 0 auto; min-width: 24px; text-align: right; font-weight: 700; color: var(--text); }

.pw__options { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pw__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pw__opt input { accent-color: #f472b6; cursor: pointer; }

.pw__gen {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 11px 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  color: #f472b6;
  background: transparent;
  border: 2px solid rgba(244, 114, 182, 0.7);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.pw__gen:hover { background: rgba(244, 114, 182, 0.16); }
.pw__gen:active { transform: scale(0.97); }

/* Общие элементы новых модулей */
.pomo__mode, .hab__name, .cv__label, .cal__label, .cur__row,
.tr__label, .ex__cat, .ip__key, .rss__status, .jt__status,
.rx__count, .sm__out, .tr__out, .pr__preview, .cur__status {
  color: var(--text-dim);
  font-size: 12.5px;
}
.cv__select, .cur__select, .ex__select, .tr__select, .cd__mode {
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  outline: none;
}
.pomo__btn, .hab__add, .lnk__add, .cur__refresh, .wx__go, .rss__add,
.ip__refresh, .tr__btn, .sm__btn, .pr__add, .jt__btn, .df__btn, .cd__btn,
.ex__add {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.12s var(--ease), border-color 0.2s var(--ease);
}
.pomo__btn:hover, .hab__add:hover, .lnk__add:hover, .cur__refresh:hover, .wx__go:hover,
.rss__add:hover, .ip__refresh:hover, .tr__btn:hover, .sm__btn:hover, .pr__add:hover,
.jt__btn:hover, .df__btn:hover, .cd__btn:hover, .ex__add:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.pomo__btn:active, .hab__add:active, .lnk__add:active, .jt__btn:active,
.df__btn:active, .cd__btn:active, .ex__add:active { transform: scale(0.96); }
.pomo__btn--primary {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Помодоро */
.pomo__mode { text-align: center; text-transform: uppercase; letter-spacing: 1px; font-size: 11.5px; }
.pomo__time {
  margin: auto 0;
  text-align: center;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.pomo__cycles { text-align: center; }
.pomo__controls { display: flex; gap: 8px; justify-content: center; }

/* Привычки */
.hab__form, .lnk__form, .rss__form, .wx__form { display: flex; gap: 8px; flex-wrap: wrap; }
.hab__input, .lnk__input, .rss__input, .wx__input, .pr__input, .pr__search, .ex__input, .cur__input, .cv__input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  outline: none;
}
.hab__input:focus, .lnk__input:focus, .rss__input:focus, .wx__input:focus,
.pr__input:focus, .pr__search:focus, .ex__input:focus, .cv__input:focus,
.tr__src:focus, .sm__src:focus, .jt__area:focus, .rx__text:focus,
.df__area:focus, .cd__area:focus, .rx__pattern:focus, .rx__flags:focus,
.pr__text:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.hab__list, .ex__list { flex: 1 1 auto; min-height: 0; overflow: auto; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hab__item, .ex__item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--glass-1);
}
.hab__check {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent; color: var(--text);
  cursor: pointer; font-size: 13px; line-height: 1;
}
.hab__check.is-done { background: #34d399; border-color: #34d399; color: #06231a; }
.hab__name { flex: 1 1 auto; color: var(--text); font-size: 13.5px; }
.hab__streak { flex: 0 0 auto; font-size: 12.5px; color: #f59e0b; }
.hab__del, .lnk__del, .ex__del {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; font-size: 15px; line-height: 1;
}
.hab__del:hover, .lnk__del:hover, .ex__del:hover { color: #fca5a5; border-color: rgba(248, 113, 113, 0.6); }
.hab__empty, .lnk__empty, .rss__item, .df__same { padding: 8px 2px; font-size: 12.5px; color: var(--text-dim); }

/* Конвертер */
.cv__row { display: flex; align-items: center; gap: 8px; }
.cv__label { flex: 0 0 auto; }
.cv__row .cv__select, .cv__row .cv__input { flex: 1 1 auto; }
.cv__arrow { color: var(--text-dim); }
.cv__out {
  margin-top: auto;
  padding: 12px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--glass-1);
}

/* Календарь */
.cal__head { display: flex; align-items: center; gap: 8px; }
.cal__nav {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: var(--glass-1); border: 1px solid var(--border); color: var(--text); font-size: 16px;
}
.cal__nav:hover { border-color: var(--accent); }
.cal__label { flex: 1 1 auto; text-align: center; text-transform: capitalize; color: var(--text); font-weight: 600; }
.cal__grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; align-content: start; }
.cal__dow { text-align: center; font-size: 11px; color: var(--text-dim); padding: 2px 0; }
.cal__cell {
  aspect-ratio: 1; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12.5px;
  background: var(--glass-1); border: 1px solid var(--border); color: var(--text);
}
.cal__cell--empty { background: transparent; border: none; cursor: default; }
.cal__cell:hover { border-color: var(--accent); }
.cal__cell.is-today { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); font-weight: 700; }

/* Быстрые ссылки */
.lnk__list { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.lnk__card { display: flex; align-items: center; gap: 8px; }
.lnk__link {
  flex: 1 1 auto; padding: 9px 11px; text-decoration: none; color: var(--text); font-size: 13.5px;
  background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lnk__link:hover { border-color: var(--accent); }

/* Валюты / погода / RSS / IP */
.cur__row { font-weight: 600; }
.cur__out {
  padding: 12px; text-align: center; font-size: 22px; font-weight: 700; color: var(--text);
  background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.rss__feeds { display: flex; flex-wrap: wrap; gap: 6px; }
.rss__chip-wrap { display: inline-flex; align-items: center; }
.rss__chip {
  font: inherit; font-size: 12px; color: var(--text); cursor: pointer;
  background: var(--glass-1); border: 1px solid var(--border);
  border-radius: 999px 0 0 999px; padding: 5px 10px;
}
.rss__chip.is-active { background: color-mix(in srgb, var(--accent) 26%, transparent); border-color: var(--accent); }
.rss__chip-del {
  cursor: pointer; padding: 5px 8px; font-size: 13px; color: var(--text-dim);
  background: var(--glass-1); border: 1px solid var(--border); border-left: none;
  border-radius: 0 999px 999px 0;
}
.rss__chip-del:hover { color: #fca5a5; }
.rss__list { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.rss__item { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px; background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rss__title { color: var(--text); font-size: 13.5px; text-decoration: none; }
.rss__title:hover { color: var(--accent); }
.rss__date { font-size: 11px; color: var(--text-dim); }
.ip__box { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.ip__row { display: flex; gap: 10px; padding: 7px 9px; background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ip__key { flex: 0 0 110px; }
.ip__val { flex: 1 1 auto; color: var(--text); font-size: 13px; word-break: break-word; }

/* ИИ-утилиты: переводчик, суммаризатор */
.tr__row { display: flex; align-items: center; gap: 8px; }
.tr__select { flex: 1 1 auto; }
.tr__src, .sm__src, .pr__text {
  flex: 0 0 auto; min-height: 90px; resize: vertical;
  font: inherit; font-size: 13px; line-height: 1.5; color: var(--text);
  background: var(--glass-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px; outline: none;
}
.sm__src, .pr__text { min-height: 120px; }
.tr__out, .sm__out {
  flex: 1 1 auto; min-height: 60px; padding: 10px; white-space: pre-wrap; word-break: break-word;
  color: var(--text); font-size: 13px; line-height: 1.55;
  background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.tr__history { flex: 0 0 auto; max-height: 80px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.tr__hist { font-size: 11.5px; color: var(--text-dim); border-bottom: 1px dashed var(--border); padding-bottom: 3px; }

/* Библиотека промптов */
.pr__form { display: flex; flex-direction: column; gap: 8px; }
.pr__list { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.pr__card { padding: 10px; background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pr__title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.pr__preview { max-height: 52px; overflow: hidden; margin: 4px 0 8px; font-size: 12px; line-height: 1.45; color: var(--text-dim); white-space: pre-wrap; }
.pr__actions { display: flex; gap: 8px; }
.pr__send, .pr__del {
  font: inherit; font-size: 12px; cursor: pointer; padding: 5px 10px;
  color: var(--text); background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.pr__send:hover { border-color: var(--accent); color: var(--accent); }
.pr__del:hover { border-color: rgba(248, 113, 113, 0.6); color: #fca5a5; }

/* JSON / Regex / кодек / diff / расходы / токены */
.jt__row, .cd__row { display: flex; gap: 8px; flex-wrap: wrap; }
.jt__area, .cd__area, .rx__text, .df__area {
  flex: 1 1 auto; min-height: 110px; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.5; color: var(--text);
  background: var(--glass-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px; outline: none;
}
.df__area { min-height: 90px; }
.jt__status.is-ok { color: #34d399; }
.jt__status.is-err { color: #fca5a5; }
.rx__top { display: flex; align-items: center; gap: 4px; }
.rx__slash { color: var(--text-dim); }
.rx__pattern, .rx__flags {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--text); background: var(--glass-1);
  border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; outline: none;
}
.rx__pattern { flex: 1 1 auto; min-width: 0; }
.rx__flags { flex: 0 0 70px; }
.rx__out { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.rx__match { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; background: var(--glass-1); border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; }
.rx__idx { color: var(--text-dim); flex: 0 0 auto; }
.rx__val { color: var(--text); flex: 1 1 auto; word-break: break-all; font-family: ui-monospace, monospace; }
.rx__groups { color: var(--accent); font-size: 11.5px; }
.df__out { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; font-family: ui-monospace, monospace; font-size: 12px; }
.df__line { padding: 2px 6px; white-space: pre-wrap; word-break: break-all; }
.df__line--del { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }
.df__line--add { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
.ex__total { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--text); }
.ex__chart { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; }
.ex__bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ex__bar-row .ex__cat { flex: 0 0 90px; }
.ex__bar { height: 12px; min-width: 2px; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.ex__sum { flex: 0 0 auto; color: var(--text-dim); }
.ex__amt { flex: 0 0 auto; color: var(--text); font-weight: 600; }

/* Погода — визуальная hero-карточка и прогноз */
.wx__status { flex: 0 0 auto; min-height: 16px; font-size: 12px; color: var(--text-dim); }

.wx__hero {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(150deg, #2563eb, #1e3a8a 70%);
  box-shadow: 0 12px 30px rgba(30, 58, 138, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background 0.5s var(--ease);
}
.wx__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.28), transparent 42%);
  pointer-events: none;
}
.wx__hero--clear { background: linear-gradient(150deg, #0ea5e9, #0369a1 72%); }
.wx__hero--cloud { background: linear-gradient(150deg, #64748b, #334155 72%); }
.wx__hero--fog   { background: linear-gradient(150deg, #94a3b8, #475569 72%); }
.wx__hero--rain  { background: linear-gradient(150deg, #3b82f6, #1e3a8a 72%); }
.wx__hero--storm { background: linear-gradient(150deg, #6366f1, #312e81 60%, #1e1b4b); }
.wx__hero--snow  { background: linear-gradient(150deg, #60a5fa, #c7d2fe 120%); color: #0f172a; }
.wx__hero--loading { background: linear-gradient(120deg, #334155, #475569, #334155); background-size: 200% 100%; animation: wxShimmer 1.4s linear infinite; }
@keyframes wxShimmer { from { background-position: 0 0; } to { background-position: -200% 0; } }

.wx__hero-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wx__hero-place { min-width: 0; }
.wx__hero-city { font-size: 16px; font-weight: 700; letter-spacing: 0.2px; }
.wx__hero-country { margin-top: 2px; font-size: 12px; opacity: 0.8; }
.wx__hero-icon { font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25)); }
.wx__hero-main { position: relative; display: flex; flex-direction: column; gap: 2px; }
.wx__hero-temp { font-size: 64px; font-weight: 800; line-height: 0.95; letter-spacing: -2px; }
.wx__hero-desc { font-size: 15px; font-weight: 600; opacity: 0.95; }
.wx__hero-feels { font-size: 12.5px; opacity: 0.8; }

.wx__metrics {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 2px;
}
.wx__metric {
  padding: 8px 6px;
  text-align: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.wx__metric-icon { font-size: 15px; }
.wx__metric-val { margin-top: 2px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.wx__metric-label { margin-top: 1px; font-size: 10.5px; opacity: 0.8; }

.wx__days {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}
.wx__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  text-align: center;
  border-radius: 14px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.wx__day:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.wx__day-name { font-size: 11.5px; font-weight: 600; color: var(--text); text-transform: capitalize; }
.wx__day-icon { font-size: 24px; line-height: 1; }
.wx__day-temps { display: flex; align-items: center; gap: 6px; width: 100%; }
.wx__day-min, .wx__day-max { font-size: 12px; font-variant-numeric: tabular-nums; }
.wx__day-min { color: var(--text-dim); }
.wx__day-max { color: var(--text); font-weight: 700; }
.wx__day-bar {
  position: relative;
  flex: 1 1 auto;
  height: 5px;
  min-width: 24px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.wx__day-fill {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #f59e0b);
}
.wx__day-desc { font-size: 10.5px; color: var(--text-dim); }

/* ------------------------- Уведомление ------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h-safe) + 18px);
  z-index: 80;
  max-width: min(420px, calc(100vw - 32px));
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 550;
  color: var(--text);
  background: var(--toast-bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(108, 140, 255, 0.25);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.toast.hidden { display: none; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------- Индикатор офлайн-режима ---------------------- */
.offline-bar {
  position: fixed;
  left: 50%;
  top: 14px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.35;
  color: var(--text);
  background: var(--toast-bg);
  border: 1px solid rgba(245, 158, 11, 0.55);
  border-radius: 14px;
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(245, 158, 11, 0.25);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translate(-50%, -16px);
  opacity: 0;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.offline-bar.hidden { display: none; }
.offline-bar.is-visible { opacity: 1; transform: translate(-50%, 0); }
.offline-bar__icon { font-size: 15px; color: #f59e0b; }
.offline-bar__text { flex: 1 1 auto; min-width: 0; }
.offline-bar__retry {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.offline-bar__retry:hover { background: rgba(245, 158, 11, 0.28); }
.offline-bar__retry:active { transform: scale(0.96); }
.offline-bar__retry:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 520px) {
  .offline-bar { top: auto; bottom: calc(var(--nav-h-safe) + 18px); font-size: 12px; }
}

/* ------------------------- Менеджер рабочих пространств ------------------------- */
.settings-group__hint {
  margin: 2px 0 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.spaces-controls.hidden { display: none; }

.spaces-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spaces-empty {
  margin: 0;
  padding: 10px 0;
  font-size: 12.5px;
  color: var(--text-dim);
}

.space-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--glass-2);
}
.space-row.is-active { border-color: var(--accent); }

.space-row__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 9px;
  color: var(--text);
  background: var(--panel-strong);
}
.space-row.is-active .space-row__num {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.space-row__name {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.space-row__name:focus {
  outline: none;
  border-color: var(--accent);
}

.space-row__open,
.space-row__del {
  flex: 0 0 auto;
  height: 32px;
  font: inherit;
  font-size: 12.5px;
  border-radius: 9px;
  cursor: pointer;
  transition: opacity 0.2s var(--ease), background 0.2s var(--ease);
}
.space-row__open {
  padding: 0 12px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-strong);
}
.space-row__open:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.space-row__open:disabled { opacity: 0.4; cursor: default; }

.space-row__del {
  width: 32px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
}
.space-row__del:hover:not(:disabled) { color: #fff; background: #e5484d; border-color: transparent; }
.space-row__del:disabled { opacity: 0.3; cursor: default; }

.spaces-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 38px;
  margin-top: 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.spaces-create:hover { border-color: var(--accent); background: var(--glass-2); }

/* ------------------------- Настройки ------------------------- */
.settings-btn { width: 38px; height: 38px; border: 2px solid var(--border-strong); }
.settings-btn svg { width: 18px; height: 18px; }
.settings-btn[aria-expanded="true"] {
  color: var(--accent);
  background: transparent;
  border-color: var(--accent);
}

/* Панель настроек — центрированное модальное окно (как «Библиотека модулей»).
   Отступы такие же, как у остальных окон: 20px по краям. */
.settings-panel {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 20px;
  background: rgba(4, 7, 14, 0.62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: modalFade 0.2s var(--ease) both;
}
.settings-panel.hidden { display: none; }

/* Во время подбора размера сетки убираем затемнение оверлея,
   чтобы изменения сетки были видны на рабочей области. */
.settings-panel.is-adjusting {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
.settings-panel.is-adjusting .settings-card { pointer-events: auto; }

.settings-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  /* Тот же вертикальный размер, что и у остальных окон
     («Библиотека модулей», админ-панель). */
  height: min(760px, calc(100vh - 40px));
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  animation: windowIn 0.3s var(--ease) both;
}

.settings-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 18px;
}

.settings-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--glass-2), var(--glass-1));
}
.settings-panel__head strong { font-size: 15.5px; font-weight: 680; }

.settings-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.settings-group__title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.theme-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.theme-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  border: 2px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.22s var(--ease);
}
.theme-switch button:hover { border-color: var(--border-strong); }
.theme-switch button:hover { color: var(--text); }
.theme-switch button.is-active {
  color: var(--accent);
  background: transparent;
  border: 2px solid var(--accent);
}

.accent-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
.accent-swatch {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.accent-swatch:hover { transform: scale(1.1); }
.accent-swatch.is-active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--menu-bg), 0 0 0 3px rgba(108, 140, 255, 0.5);
}

.settings-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.settings-custom input[type="color"] {
  width: 42px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
}
.settings-custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.settings-custom input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }

/* Ползунок размера сетки */
.settings-custom--range { cursor: default; }
.settings-custom input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 4px;
  margin: 0 4px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
}
.settings-custom input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 2px solid var(--menu-bg);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border-strong);
}
.settings-custom input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 2px solid var(--menu-bg);
  border-radius: 50%;
}
.settings-range__value {
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

/* Переключатель (чекбокс-тумблер) */
.settings-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.settings-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.settings-toggle__track {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  background: var(--border-strong);
  border-radius: 999px;
  transition: background 0.22s var(--ease);
}
.settings-toggle__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.22s var(--ease);
}
.settings-toggle input:checked + .settings-toggle__track { background: var(--accent); }
.settings-toggle input:checked + .settings-toggle__track::after { transform: translateX(16px); }
.settings-toggle input:focus-visible + .settings-toggle__track {
  box-shadow: 0 0 0 2px var(--menu-bg), 0 0 0 3px rgba(108, 140, 255, 0.5);
}
.settings-toggle__label { flex: 1; }

/* Скрытая сетка рабочей области */
.bg.is-grid-hidden .grid-overlay { display: none; }

.settings-reset {
  display: block;
  width: 100%;
  padding: 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.22s var(--ease);
}
.settings-reset:hover { color: #fca5a5; border-color: rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.12); }

.ai-openai { display: flex; flex-direction: column; gap: 10px; }
.ai-openai.hidden { display: none; }

.ai-field { display: flex; flex-direction: column; gap: 5px; }
.ai-field__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ai-field__control {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), background 0.22s var(--ease);
}
.ai-field__control:focus {
  border-color: rgba(108, 140, 255, 0.7);
  background: rgba(108, 140, 255, 0.08);
  box-shadow: 0 0 0 4px rgba(108, 140, 255, 0.14);
}
select.ai-field__control { cursor: pointer; }
select.ai-field__control option { color: #0f172a; }
.ai-field__control--area { resize: vertical; min-height: 62px; line-height: 1.5; }

/* --- Таблица цен моделей в админ-панели --- */
.admin-pricing {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-pricing__empty {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
}
.admin-pricing__row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.admin-pricing__row input {
  min-width: 0;
}
.admin-pricing__remove {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: #fca5a5;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.admin-pricing__remove:hover {
  color: #fff;
  border-color: rgba(248, 113, 113, 0.85);
  background: rgba(248, 113, 113, 0.14);
}
.admin-pricing__head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.admin-pricing__actions { display: flex; }
.admin-pricing__actions .ai-btn { width: auto; }
/* Кнопка «Обновить список моделей» под полем модели: не растягивается. */
.admin-model-refresh { width: auto; align-self: flex-start; }

.ai-hint {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.ai-hint.is-ok { color: #34d399; }
.ai-hint.is-error { color: #fca5a5; }
.ai-hint code {
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--code-color);
  background: var(--glass-2);
  border-radius: 5px;
}

.ai-status {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}
.ai-status.is-ok { color: #34d399; }
.ai-status.is-error { color: #fca5a5; }

.ai-settings__actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

.ai-btn {
  flex: 1 1 auto;
  padding: 10px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 620;
  border: 2.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
              border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.ai-btn:active { transform: scale(0.97); }
.ai-btn--ghost {
  color: var(--text-dim);
  background: transparent;
  border-color: var(--border-strong);
}
.ai-btn--ghost:hover { color: var(--text); border-color: var(--text-dim); }
.ai-btn--danger {
  color: #fca5a5;
  background: transparent;
  border-color: rgba(248, 113, 113, 0.55);
}
.ai-btn--danger:hover { background: transparent; border-color: rgba(248, 113, 113, 0.85); }
.ai-btn--primary {
  color: var(--accent);
  background: transparent;
  border-color: var(--accent);
}
.ai-btn--primary:hover { background: transparent; border-color: color-mix(in srgb, var(--accent) 80%, #fff); }
.ai-btn:disabled { opacity: 0.5; cursor: progress; }

/* Кнопка «Пополнить» в личном кабинете — компактнее, не растягивается
   на всю ширину блока действий. */
#dashTopupSubmit {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 6px 15px;
  font-size: 12px;
  border-width: 2px;
}

/* Кнопки-иконки: без заливки, контур жирнее. */
.icon-btn { border-width: 2.5px; }
.icon-btn:hover { border-color: var(--accent); }

/* ------------------------- Админ-панель ------------------------- */
.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  /* Те же отступы сверху/снизу, что и у окна «Библиотека модулей». */
  padding: 20px;
  background: rgba(4, 7, 14, 0.62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: modalFade 0.2s var(--ease) both;
}
.admin-modal.hidden { display: none; }

.admin-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  /* Фиксированная высота: все вкладки выглядят как одно окно и
     не «прыгают» по размеру при переключении.
     Тот же вертикальный размер, что и у «Библиотеки модулей». */
  height: min(760px, calc(100vh - 40px));
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  animation: windowIn 0.3s var(--ease) both;
  transition: max-width 0.3s var(--ease), height 0.3s var(--ease);
}

/* Развёрнутое окно админ-панели: почти на весь экран */
.admin-card.is-expanded {
  max-width: min(1200px, calc(100vw - 40px));
  height: calc(100vh - 40px);
}

.admin-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--glass-2), var(--glass-1));
}
.admin-card__title { display: flex; align-items: center; gap: 10px; }
.admin-card__title strong { font-size: 15.5px; font-weight: 680; }
.admin-card__head-actions { display: flex; align-items: center; gap: 8px; }
/* Кнопка разворота активна, когда окно развёрнуто */
.admin-card .icon-btn[aria-pressed="true"] {
  color: var(--accent);
  background: transparent;
  border-color: var(--accent);
}
.admin-card__shield {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  font-size: 16px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 10px;
}

/* Встроенная админ-панель (вкладка «Админ» личного кабинета) */
#adminPanel { gap: 14px; }
.admin-tabs {
  display: flex;
  /* Полоса подвкладок не сжимается по высоте при высоком содержимом
     активной подвкладки (иначе подписи «Настройки подключения» и др. обрезались). */
  flex: 0 0 auto;
  gap: 4px;
  padding: 0 2px 2px;
  border-bottom: 1px solid var(--border);
  /* Вкладки не должны сжиматься и переносить текст: при нехватке места
     контейнер прокручивается по горизонтали. */
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
#adminPanel .admin-tab { padding: 0; }
.admin-tab-btn {
  /* flex: 0 0 auto запрещает сжатие; nowrap не даёт тексту переноситься —
     иначе подписи вроде «Настройки подключения» ломались на две строки
     и вкладки «сужались». */
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.admin-tab-btn:hover { color: var(--text); }
.admin-tab-btn.is-active {
  color: var(--hover-text);
  border-bottom-color: var(--accent);
}

.admin-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 18px;
}

.admin-tab { display: none; flex-direction: column; gap: 12px; }
.admin-tab.is-active { display: flex; }

/* Пользователи */
.admin-users { display: flex; flex-direction: column; gap: 8px; }
.admin-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.admin-user__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.admin-user__email { font-size: 13.5px; font-weight: 600; word-break: break-all; }
.admin-user__meta { font-size: 11.5px; color: var(--text-dim); }
.admin-user__balance { color: var(--text); font-weight: 600; }
.admin-user__actions { display: flex; gap: 6px; flex: 0 0 auto; }

.admin-mini-btn {
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 2.5px solid var(--border-strong);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.admin-mini-btn:hover { border-color: rgba(108, 140, 255, 0.85); color: var(--hover-text); }
.admin-mini-btn--danger { color: #fca5a5; }
.admin-mini-btn--danger:hover { border-color: rgba(248, 113, 113, 0.85); background: transparent; }

.admin-empty { margin: 0; font-size: 12.5px; color: var(--text-dim); }

/* Статистика */
.admin-usage { display: flex; flex-direction: column; gap: 16px; }
.admin-usage__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.admin-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.admin-stat--accent {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.admin-stat__value {
  font-size: 19px;
  font-weight: 720;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.admin-stat__label { font-size: 11.5px; color: var(--text-dim); }

/* --- Подвкладка «Обзор»: сводный дашборд администратора --- */
.admin-hero {
  position: relative;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background:
    radial-gradient(320px 160px at 100% 0%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
  overflow: hidden;
}
.admin-hero__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.admin-hero__text { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.admin-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.admin-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.admin-hero__btn {
  padding: 9px 16px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--glass-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.admin-hero__btn:hover {
  color: var(--hover-text);
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  transform: translateY(-1px);
}

/* Сетка ключевых метрик обзора */
.admin-overview-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
/* Двухколоночные панели обзора */
.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.admin-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--glass-1);
}
.admin-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-panel__title { margin: 0; font-size: 13.5px; font-weight: 680; color: var(--text); }

/* Секция статистики с заголовком */
.admin-sec { display: flex; flex-direction: column; gap: 10px; }
.admin-sec__title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
}

/* График по дням */
.admin-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Переключатель метрики графика */
.admin-chart__switch {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  align-self: flex-start;
  /* Кнопок может быть до шести (запросы/токены/стоимость/доход/прибыль):
     разрешаем перенос и не даём полосе выпирать за границы контейнера. */
  flex-wrap: wrap;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.admin-chart__switch-btn {
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  /* Кнопки не сжимаются и не переносят текст — текст всегда в одну строку. */
  flex: 0 0 auto;
  white-space: nowrap;
}
.admin-chart__switch-btn:hover { color: var(--text); }
.admin-chart__switch-btn.is-active {
  color: var(--accent);
  background: transparent;
  border-color: var(--accent);
}

.admin-chart__canvas { width: 100%; }
.admin-chart__svg { display: block; width: 100%; height: 200px; }

/* Столбцы */
.admin-chart__bar {
  fill: var(--accent);
  opacity: 0.55;
  transition: opacity 0.2s var(--ease);
}
.admin-chart__bar:hover { opacity: 0.9; }
.admin-chart__bar--peak { fill: var(--accent-2); opacity: 0.95; }

/* Сетка, средняя линия и подписи осей */
.admin-chart__grid { stroke: var(--border); stroke-width: 1; }
.admin-chart__avg {
  stroke: var(--accent-3);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.75;
}
.admin-chart__ylab,
.admin-chart__xlab {
  font-size: 10px;
  fill: var(--text-dim);
}
.admin-chart__peak {
  font-size: 11px;
  font-weight: 700;
  fill: var(--text);
}

/* Разбивка по моделям */
.admin-model {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.admin-model__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.admin-model__name { font-size: 13px; font-weight: 620; word-break: break-all; }
.admin-model__cost { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.admin-model__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--glass-2);
  overflow: hidden;
}
.admin-model__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.admin-model__meta { font-size: 11.5px; color: var(--text-dim); }

/* Таблица биллинга */
.admin-billing { display: flex; flex-direction: column; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.admin-billing__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto auto auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  font-size: 12.5px;
  background: var(--glass-1);
  border-bottom: 1px solid var(--border);
}
.admin-billing__row:last-child { border-bottom: none; }
.admin-billing__row--head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  background: var(--glass-2);
}
.admin-billing__email { min-width: 0; word-break: break-all; }
.admin-billing__num { text-align: right; white-space: nowrap; color: var(--text-dim); }
.admin-billing__cost { color: var(--accent); font-weight: 700; }
.admin-billing__actions { display: flex; justify-content: flex-end; }
.admin-billing__reset-all { display: flex; justify-content: flex-end; padding: 12px 12px 2px; }

/* --- Панель поиска и фильтр пользователей --- */
.admin-users-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 220px;
}
.admin-search__icon {
  position: absolute;
  left: 12px;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  color: var(--text-dim);
  pointer-events: none;
}
.admin-search__icon svg { width: 18px; height: 18px; fill: currentColor; }
.admin-search__input {
  width: 100%;
  height: 42px;
  padding: 0 40px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--glass-1);
  border: 1.5px solid var(--border-strong);
  border-radius: 12px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.admin-search__input::placeholder { color: var(--text-dim); }
.admin-search__input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--glass-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.admin-search__clear {
  position: absolute;
  right: 10px;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  padding: 0;
  font-size: 13px;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.admin-search__clear:hover { color: var(--text); background: var(--glass-2); }
.admin-search__clear.hidden { display: none; }

.admin-filter {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex: 0 0 auto;
}
.admin-filter__btn {
  padding: 7px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  border: 2.5px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.admin-filter__btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.admin-filter__btn.is-active {
  color: var(--hover-text);
  background: transparent;
  border-color: var(--accent);
}

/* Чипы-сводка по пользователям */
.admin-users-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.admin-chip--admin {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
}
.admin-chip--muted { color: var(--text-dim); }

/* --- Пагинация (список пользователей и биллинг) --- */
.admin-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--glass-1);
}
.admin-pager__info { font-size: 12px; color: var(--text-dim); }
.admin-pager__controls { display: flex; gap: 6px; flex: 0 0 auto; }
.admin-pager__btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 7px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.admin-pager__btn:hover:not(:disabled) {
  color: var(--hover-text);
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
}
.admin-pager__btn:disabled { opacity: 0.45; cursor: default; }

/* Поиск в таблице биллинга */
.admin-billing__search { padding: 4px 12px 10px; }
.admin-billing__search .admin-search__input { width: 100%; }

/* Карточки пользователей: аватар + бейдж роли */
.admin-user__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}
.admin-user__avatar--admin {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}
.admin-user--admin {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.06);
}
.admin-user__email-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.admin-role-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text-dim);
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.admin-role-badge--admin {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.5);
}

/* --- Donut-диаграммы распределения --- */
.admin-donut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.admin-donut-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.admin-donut-card__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
.admin-donut {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.admin-donut__svg { flex: 0 0 auto; }
.admin-donut__seg { transition: opacity 0.18s var(--ease); }
.admin-donut__seg:hover { opacity: 0.82; }
.admin-donut__center-val {
  font-size: 18px;
  font-weight: 750;
  fill: var(--text);
}
.admin-donut__center-lab {
  font-size: 10px;
  fill: var(--text-dim);
}
.admin-donut__legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 130px;
}
.admin-donut__legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.admin-donut__dot {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: 3px;
}
.admin-donut__legend-label {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-donut__legend-val {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .admin-user { flex-wrap: wrap; }
  .admin-user__actions { width: 100%; justify-content: flex-end; }
  .admin-billing__row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .admin-billing__row span:nth-child(2),
  .admin-billing__row span:nth-child(3),
  .admin-billing__row span:nth-child(4),
  .admin-billing__row span:nth-child(6) { display: none; }
}

/* Плавная смена темы */
body, .bottom-nav, .app-window, .settings-panel, .module-modal__card, .toast {
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
              color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

/* ------------------------- Адаптивность ------------------------- */
@media (max-width: 720px) {
  .module-add-btn__label { display: none; }
  .module-add-btn { padding: 0 10px; }
  .bottom-nav__tools { gap: 6px; }

  .app-window {
    border-radius: 20px;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }

  .app-window[data-state="fullscreen"] {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    border-radius: 0;
    border: none;
  }

  .msg { max-width: 92%; }
  .blob { filter: blur(70px); }
}

@media (max-width: 420px) {
  .chat-window__titles strong { font-size: 13.5px; }
  .chat-window__titles small { font-size: 10.5px; }
  .messages { padding: 12px 10px 6px; }
  .composer { padding: 10px 10px 12px; }
  .msg__bubble { font-size: 13.5px; }
}

/* ------------------------- Аккаунт и вход ------------------------- */
.account-btn.hidden { display: none; }

.account-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 13px;
  border-radius: 999px;
  border: 2px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
  white-space: nowrap;
}
.account-btn:hover { border-color: var(--text-dim); background: var(--glass-2); }
.account-btn:active { transform: scale(0.97); }
.account-btn__icon { font-size: 15px; line-height: 1; opacity: 0.85; }
.account-btn.is-signed-in {
  border-color: var(--accent);
  background: transparent;
  color: var(--hover-text);
}
.account-btn.is-signed-in .account-btn__icon { opacity: 1; color: var(--accent); }

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 7, 14, 0.6);
  backdrop-filter: blur(6px);
}
.auth-modal.hidden { display: none; }

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.auth-card__head strong { font-size: 15px; font-weight: 650; }

.auth-card__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-card__form.hidden { display: none; }

.auth-card__profile {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-card__profile.hidden { display: none; }

.auth-card__email {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--hover-text);
  word-break: break-all;
}

.auth-card__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.auth-card__status {
  margin: 0;
  min-height: 16px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.auth-card__status.is-ok { color: #34d399; }
.auth-card__status.is-error { color: #fca5a5; }

.auth-card__switch {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-dim);
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

/* ------------------------- Подтверждение удаления ------------------------- */
.confirm-card {
  width: min(380px, calc(100vw - 32px));
  padding: 22px 20px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow-soft);
  text-align: center;
  animation: modalFade 0.2s var(--ease) both;
}
.confirm-card__icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 12px;
  color: #fca5a5;
  border-radius: 16px;
  background: rgba(248, 113, 113, 0.16);
  border: 1px solid rgba(248, 113, 113, 0.5);
}
.confirm-card__icon svg { width: 26px; height: 26px; fill: currentColor; }
.confirm-card__title { display: block; font-size: 16px; font-weight: 680; color: var(--text); }
.confirm-card__text {
  margin: 8px 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  word-break: break-word;
}
.confirm-card__actions { display: flex; gap: 10px; }

.auth-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.auth-link:hover { text-decoration: underline; }

/* ============================================================
   Личный кабинет
   ============================================================ */
.dash-modal {
  position: fixed;
  inset: 0;
  z-index: 208;
  display: grid;
  place-items: center;
  /* Те же отступы сверху/снизу, что и у окна «Библиотека модулей». */
  padding: 20px;
  background: rgba(4, 7, 14, 0.62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: modalFade 0.2s var(--ease) both;
}
.dash-modal.hidden { display: none; }

.dash-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 780px;
  /* Тот же вертикальный размер, что и у «Библиотеки модулей». */
  height: min(760px, calc(100vh - 40px));
  background: var(--surface-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  animation: windowIn 0.3s var(--ease) both;
  transition: max-width 0.3s var(--ease), height 0.3s var(--ease);
}
.dash-card.is-expanded {
  max-width: min(1200px, calc(100vw - 40px));
  height: calc(100vh - 40px);
}

/* Шапка с аватаром */
.dash-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Шапка не должна сжиматься по высоте: иначе при высоком содержимом
     активной вкладки (например, «Настройки подключения») она «съедается». */
  flex: 0 0 auto;
  padding: 18px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(420px 160px at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--glass-2), var(--glass-1));
}
.dash-head__identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dash-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px; height: 54px;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: dashAvatarIn 0.5s var(--ease) both;
}
@keyframes dashAvatarIn {
  from { transform: scale(0.6) rotate(-12deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
.dash-head__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-head__name {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-head__meta { font-size: 12px; color: var(--text-dim); }
.dash-head__actions { display: flex; align-items: center; gap: 6px; }
.dash-card .icon-btn[aria-pressed="true"] {
  color: var(--accent);
  background: transparent;
  border-color: var(--accent);
}
.dash-card .icon-btn.is-spinning svg { animation: dashSpin 0.9s linear infinite; }
@keyframes dashSpin { to { transform: rotate(360deg); } }

/* Вкладки */
.dash-tabs {
  display: flex;
  gap: 4px;
  /* Полоса вкладок не сжимается: при высоком содержимом вкладки она
     схлопывалась до нуля и подписи «Обзор/Статистика/…» обрезались. */
  flex: 0 0 auto;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* Равномерное распределение: каждая вкладка получает одинаковую долю
     ширины (flex: 1 1 0). При добавлении новых вкладок в разметку они
     автоматически делят место поровну без правок CSS. */
  flex: 1 1 0;
  min-width: 0;
  /* Запрещаем перенос подписи, но позволяем содержимому обрезаться,
     чтобы на узких экранах вкладки сжимались равномерно. */
  white-space: nowrap;
  overflow: hidden;
  padding: 10px 10px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
/* Иконка папки на вкладке «Файлы» — в размер текста вкладок */
.dash-tab__icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}
.dash-tab:hover { color: var(--text); }
.dash-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
/* Вкладка «Админ» скрыта для обычных пользователей */
.dash-tab.hidden { display: none; }

/* Тело */
.dash-body {
  /* flex-basis: 0 — тело забирает только свободное место и не «давит»
     на шапку и вкладки, заставляя их сжиматься. */
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}
.dash-tab-panel { display: none; flex-direction: column; gap: 16px; }
.dash-tab-panel.is-active { display: flex; animation: dashPanelIn 0.28s var(--ease) both; }
@keyframes dashPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero-блок */
.dash-hero {
  position: relative;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background:
    radial-gradient(320px 160px at 100% 0%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
  overflow: hidden;
}
.dash-hero__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.dash-hero__text { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.dash-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--glass-2);
}
.dash-chip--ok { color: #34d399; border-color: color-mix(in srgb, #34d399 45%, transparent); }
.dash-chip--warn { color: #fbbf24; border-color: color-mix(in srgb, #fbbf24 45%, transparent); }

/* Витрина баланса — крупный, заметный блок наверху кабинета */
.dash-balance__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px 22px;
  border-radius: var(--radius-lg, 18px);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background:
    radial-gradient(520px 200px at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--glass-2)), var(--glass-1));
  box-shadow: 0 14px 40px -18px color-mix(in srgb, var(--accent) 70%, transparent);
  overflow: hidden;
  animation: dashStatIn 0.4s var(--ease) both;
}
.dash-balance__card::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.dash-balance__card--empty {
  border-color: rgba(248, 113, 113, 0.6);
  background:
    radial-gradient(520px 200px at 0% 0%, rgba(248, 113, 113, 0.25), transparent 70%),
    linear-gradient(135deg, rgba(248, 113, 113, 0.14), var(--glass-1));
  box-shadow: 0 14px 40px -18px rgba(248, 113, 113, 0.7);
}
.dash-balance__card--empty::after {
  background: linear-gradient(180deg, #f87171, #ef4444);
}
.dash-balance__left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-balance__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dash-balance__value {
  font-size: 34px;
  font-weight: 780;
  line-height: 1.05;
  letter-spacing: 0.4px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dash-balance__hint { font-size: 12.5px; color: var(--text-dim); }
.dash-balance__card--empty .dash-balance__hint { color: #fca5a5; font-weight: 600; }
.dash-balance__right { flex: 0 0 auto; }
.dash-balance__topup {
  padding: 6px 15px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: transparent;
  border: 2px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.dash-balance__topup:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 80%, #fff); }
.dash-balance__topup:active { transform: scale(0.97); }

/* Быстрые суммы пополнения */
.dash-topup-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dash-topup-chip {
  padding: 8px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  background: transparent;
  border: 2.5px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.dash-topup-chip:hover {
  color: var(--hover-text);
  border-color: var(--accent);
  background: transparent;
}

/* Раздача баланса в админ-панели */
.admin-grant-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Метрики-карточки */
.dash-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.dash-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--glass-1);
  overflow: hidden;
  animation: dashStatIn 0.4s var(--ease) both;
}
.dash-stat::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: 0.75;
}
.dash-stat--accent {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.dash-stat__value {
  font-size: 21px;
  font-weight: 740;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.dash-stat__label { font-size: 11.5px; color: var(--text-dim); }
@keyframes dashStatIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Панели */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 720px) { .dash-grid { grid-template-columns: 1fr; } }

.dash-panel {
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--glass-1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-panel--danger { border-color: rgba(248, 113, 113, 0.4); }
.dash-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-panel__title { margin: 0; font-size: 13.5px; font-weight: 680; color: var(--text); }
.dash-panel__hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); }

/* Сворачиваемая секция: заголовок-кнопка со стрелкой */
.dash-panel__head--toggle {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  border-radius: 8px;
}
.dash-panel__head--toggle:hover .dash-panel__title { color: var(--accent); }
.dash-panel__head--toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dash-panel__chevron { display: inline-flex; flex: 0 0 auto; color: var(--text-dim); }
.dash-panel__chevron svg { width: 18px; height: 18px; fill: currentColor; transition: transform 0.2s var(--ease); }
.dash-panel.is-collapsed .dash-panel__chevron svg { transform: rotate(-90deg); }
/* В свёрнутом виде показываем только 5 последних операций */
.dash-panel.is-collapsed .dash-recent__row:nth-child(n + 6) { display: none; }
.dash-recent__more {
  align-self: flex-start;
  margin-top: 2px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--glass-2);
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.dash-recent__more:hover { color: var(--accent); border-color: var(--accent); }
.dash-panel:not(.is-collapsed) .dash-recent__more { display: none; }

/* Линейный график активности за 30 дней */
.dash-line { display: flex; flex-direction: column; }
.dash-line__canvas { width: 100%; }
.dash-line__svg { display: block; width: 100%; height: 240px; }
.dash-line__grid { stroke: var(--border); stroke-width: 1; }
.dash-line__ylab,
.dash-line__xlab { font-size: 10px; fill: var(--text-dim); }
.dash-line__area { fill: url(#dashLineFill); }
.dash-line__path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.dash-line__dot {
  fill: var(--accent);
  transition: r 0.15s var(--ease);
}
.dash-line__dot--zero { fill: var(--border-strong); }
.dash-line__dot--peak { fill: var(--accent-2); stroke: var(--text); stroke-width: 1.2; }
.dash-line__dot:hover { stroke: var(--text); stroke-width: 1.5; }
.dash-line__peak { font-size: 11px; font-weight: 700; fill: var(--accent-2); }
.dash-line__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}
.dash-line__stat b { color: var(--text); font-weight: 700; }

/* Список последних операций */
.dash-recent { display: flex; flex-direction: column; gap: 2px; }
.dash-recent__row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.7fr;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 12.5px;
  align-items: center;
}
.dash-recent__row:nth-child(even) { background: var(--glass-1); }
.dash-recent__time { color: var(--text-dim); font-size: 11.5px; }
.dash-recent__tokens { text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.dash-recent__cost { text-align: right; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

.dash-empty {
  margin: 0;
  padding: 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong);
}

/* Инфо-строки аккаунта */
.dash-info { display: flex; flex-direction: column; gap: 2px; }
.dash-info__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.dash-info__row:last-child { border-bottom: none; }
.dash-info__key { color: var(--text-dim); }
.dash-info__val { color: var(--text); font-weight: 600; word-break: break-all; text-align: right; }

.dash-form { display: flex; flex-direction: column; gap: 12px; }

/* Прогресс-бар лимита пространств */
.dash-progress { height: 8px; border-radius: 999px; background: var(--glass-2); overflow: hidden; }
.dash-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.6s var(--ease);
}

/* Адаптив нижней панели */
@media (max-width: 620px) {
  .account-btn__label { display: none; }
  .account-btn { padding: 0 10px; }
  .dash-card { height: calc(100vh - 24px); }
  .dash-metrics { grid-template-columns: repeat(2, 1fr); }
  .dash-recent__row { grid-template-columns: 1.3fr 0.8fr 0.7fr; }
  .dash-recent__time { display: none; }
}

/* ------------------------- Дополнительные модули ------------------------- */
/* Общие элементы новых модулей (nm__*) */
.nm__big {
  flex: 0 0 auto;
  text-align: center;
  font-size: 30px;
  font-weight: 750;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  padding: 6px 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nm__label { flex: 0 0 auto; font-size: 12.5px; color: var(--text-dim); }
.nm__row { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nm__field {
  flex: 1 1 120px;
  min-width: 0;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
}
.nm__field:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.nm__btn {
  flex: 0 0 auto;
  padding: 8px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.nm__btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.nm__btn:active { transform: scale(0.96); }
.nm__btn--primary {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.nm__area {
  flex: 0 0 auto;
  min-height: 90px;
  resize: vertical;
  padding: 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
}
.nm__area:focus { border-color: var(--accent); }
.nm__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nm__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  font-size: 13px;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nm__del {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.nm__del:hover { color: #fca5a5; border-color: rgba(248, 113, 113, 0.6); }
.nm__out { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }

/* Секундомер */
.sw__time { font-size: 40px; }
.sw__lap { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }

/* Мировые часы */
.wc__city { flex: 1 1 auto; font-weight: 600; }
.wc__date { flex: 0 0 auto; font-size: 11.5px; color: var(--text-dim); }
.wc__time { flex: 0 0 auto; min-width: 78px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }

/* Обратный отсчёт */
.nm__big + .nm__label { text-align: center; }

/* ИМТ */
.bmi__out { flex: 0 0 auto; text-align: center; font-size: 14px; font-weight: 650; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.bmi__out.is-low { color: #38bdf8; border-color: rgba(56, 189, 248, 0.5); }
.bmi__out.is-ok { color: #34d399; border-color: rgba(52, 211, 153, 0.5); }
.bmi__out.is-warn { color: #f59e0b; border-color: rgba(245, 158, 11, 0.5); }
.bmi__out.is-bad { color: #fca5a5; border-color: rgba(248, 113, 113, 0.5); }

/* Чаевые, кредит, проценты, разница дат */
.tip__out, .loan__out, .pc__out, .dc__out { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.tip__val, .loan__val, .pc__val, .dc__val { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Системы счисления, CSS-единицы */
.bh__out, .cu__out { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.bh__val, .cu__val { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer; word-break: break-all; text-align: right; }
.bh__val:hover, .cu__val:hover { text-decoration: underline; }

/* Цвет */
.ct__picker { flex: 0 0 auto; width: 100%; height: 44px; padding: 2px; background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.ct__preview { flex: 0 0 auto; height: 64px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.ct__out { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.ct__val { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer; }
.ct__val:hover { text-decoration: underline; }

/* Градиент */
.gg__range { flex: 1 1 auto; accent-color: var(--accent); }
.gg__angle { flex: 0 0 auto; min-width: 46px; text-align: right; font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.gg__preview { flex: 0 0 auto; height: 90px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.gg__code { flex: 0 0 auto; padding: 8px 10px; font-size: 12px; color: var(--text); background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm); word-break: break-all; }

/* Палитра */
.pal__grid { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; align-content: start; }
.pal__cell {
  position: relative;
  height: 56px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 4px;
  transition: transform 0.2s var(--ease);
}
.pal__cell:hover { transform: translateY(-2px); }
.pal__hex { font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }

/* Markdown */
.md__out { flex: 1 1 auto; min-height: 120px; overflow: auto; padding: 10px; font-size: 13px; line-height: 1.6; color: var(--text); background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.md__out h1, .md__out h2, .md__out h3, .md__out h4, .md__out h5, .md__out h6 { margin: 8px 0 4px; }
.md__out p { margin: 6px 0; }
.md__out code { padding: 1px 5px; background: var(--glass-2); border-radius: 4px; font-family: ui-monospace, monospace; font-size: 12px; }
.md__out a { color: var(--accent); }
.md__out blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--accent); color: var(--text-dim); }
.md__out li { margin-left: 18px; }

/* CSV */
.csv__wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.csv__table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.csv__table th, .csv__table td { padding: 6px 9px; text-align: left; border: 1px solid var(--border); color: var(--text); }
.csv__table th { background: var(--glass-2); font-weight: 700; }
.csv__table tr:nth-child(even) td { background: var(--glass-1); }

/* Хеш */
.hs__out { flex: 0 0 auto; padding: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; color: var(--accent); background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm); word-break: break-all; }

/* Надёжность пароля */
.ps__bar { flex: 0 0 auto; height: 10px; border-radius: 999px; background: var(--glass-2); overflow: hidden; }
.ps__fill { height: 100%; width: 0; border-radius: 999px; transition: width 0.3s var(--ease), background 0.3s var(--ease); }
.ps__fill.is-weak { background: #ef4444; }
.ps__fill.is-mid { background: #f59e0b; }
.ps__fill.is-good { background: #38bdf8; }
.ps__fill.is-strong { background: #34d399; }
.ps__label { flex: 0 0 auto; font-size: 12.5px; color: var(--text-dim); }
.ps__mark { flex: 0 0 auto; width: 16px; text-align: center; color: var(--text-dim); }
.ps__mark.is-ok { color: #34d399; }

/* Коды клавиш */
.kc__out { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.kc__val { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Предпросмотр шрифта */
.fp__preview { flex: 1 1 auto; min-height: 100px; overflow: auto; padding: 12px; line-height: 1.4; color: var(--text); background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm); word-break: break-word; }

/* Эмодзи */
.em__recent { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
.em__grid { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; align-content: start; }
.em__btn { aspect-ratio: 1; font-size: 20px; background: var(--glass-1); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: transform 0.15s var(--ease); }
.em__btn:hover { transform: scale(1.15); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Счётчик текста */
.ts__area { min-height: 120px; }
.ts__out { flex: 0 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ts__cell { padding: 8px; text-align: center; background: var(--glass-1); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ts__num { font-size: 18px; font-weight: 720; color: var(--accent); font-variant-numeric: tabular-nums; }
.ts__label { margin-top: 2px; font-size: 11px; color: var(--text-dim); }

/* Римские цифры */
.rn__out { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }

/* Карточки */
.fc__card {
  flex: 1 1 auto;
  min-height: 140px;
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
  background: var(--glass-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.2s var(--ease);
}
.fc__card:hover { transform: translateY(-2px); border-color: var(--accent); }
.fc__card.is-flipped { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.fc__side { font-size: 17px; font-weight: 620; line-height: 1.4; color: var(--text); word-break: break-word; }
.fc__side--a { color: var(--accent); }

/* Канбан */
.kb__wrap { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; gap: 10px; }
.kb__col { flex: 1 1 0; min-width: 160px; display: flex; flex-direction: column; gap: 8px; }
.kb__head { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-dim); }
.kb__list { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.kb__card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  font-size: 13px;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.kb__text { flex: 1 1 auto; word-break: break-word; }
.kb__move { flex: 0 0 auto; display: flex; gap: 2px; }
.kb__mv {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.kb__mv:hover { color: var(--accent); border-color: var(--accent); }
.kb__card .nm__del { width: 22px; height: 22px; }

/* Уважение к предпочтениям пользователя */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Мобильная адаптация
   ============================================================
   Единый блок адаптивных правил. Логика окон не меняется: окна
   по-прежнему перетаскиваются и растягиваются (JS задаёт inline
   width/height/transform), но на мобильных их размеры ограничиваются
   через max-width/max-height, а интерактивные элементы получают
   touch-friendly зоны касания.

   Точки перелома:
     • 561–900px — планшет: уменьшенные модалки и отступы;
     • ≤560px    — телефон: модалки почти на весь экран, зоны 44px;
     • ≤400px    — узкий телефон: одно-колоночные сетки, компактная панель.
   ============================================================ */

/* iOS не должен масштабировать текст при повороте экрана */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Точки касания: убираем задержку 300 мс и «залипание» двойного тапа */
button,
.icon-btn,
.tab,
.space-tab,
[role="button"] { touch-action: manipulation; }

/* ---------------------- Планшет: 561–900px ---------------------- */
@media (max-width: 900px) {
  /* Модальные окна чуть плотнее, чтобы помещались целиком */
  .settings-panel,
  .admin-modal,
  .dash-modal,
  .module-modal { padding: 16px; }

  .module-modal__card,
  .settings-card,
  .admin-card,
  .dash-card {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }

  /* Двухколоночные панели обзора переходят в одну колонку */
  .admin-overview-grid { grid-template-columns: 1fr; }
}

/* ---------------------- Телефон: ≤560px ---------------------- */
@media (max-width: 560px) {
  /* Динамическая единица высоты: на мобильных адресная строка браузера
     то появляется, то исчезает — 100dvh корректнее 100vh. */
  :root {
    --nav-h: 62px;
    /* Базовые отступы модалок с учётом «безопасных зон» (вырез, жест-бар) */
    --safe-b: env(safe-area-inset-bottom, 0px);
  }

  /* ---------------- Нижняя панель ---------------- */
  .bottom-nav {
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .bottom-nav__inner {
    gap: 8px;
  }
  /* Зоны касания в панели — не меньше 44px по высоте */
  .module-add-btn {
    height: 42px;
    padding: 0 12px;
    font-size: 13px;
  }
  .settings-btn { width: 42px; height: 42px; }
  .account-btn { height: 42px; padding: 0 11px; }
  .space-tab {
    min-width: 38px;
    height: 38px;
    padding: 0 9px;
  }
  /* Полоса пространств не должна заходить под центральную кнопку «＋ Модуль».
     Кнопка жёстко центрирована (left:50%), поэтому ограничиваем правую границу
     полосы половиной ширины панели минус место под кнопку и зазор. Скролл —
     внутри этой зоны (overflow-x уже задан у .space-tabs). */
  .space-tabs { max-width: calc(50% - 34px); }

  /* ---------------- Окна рабочей области ---------------- */
  /* JS задаёт inline width/height — ограничиваем их max-значениями.
     Отступ 12px по краям оставляет видимую рамку и удобный край для ресайза. */
  .app-window {
    max-width: calc(100vw - 12px);
    max-height: calc(100dvh - var(--nav-h-safe) - 12px);
    border-radius: 18px;
  }
  /* Развёрнутое и полноэкранное окна занимают всю область — снимаем
     мобильные ограничения размера, иначе max-width сузит их. */
  .app-window.is-maximized,
  .app-window.is-fullscreen,
  .app-window:fullscreen {
    max-width: none;
    max-height: none;
  }

  /* Док-колонка свёрнутых окон: на всю ширину устройства, друг под другом.
     Геометрию задаёт JS (applyMobileDock), здесь лишь снимаем мобильные лимиты
     ширины и «стекло» — свёрнутая шапка сплошная (см. .is-minimized). */
  .app-window.is-docked {
    max-width: none;
    max-height: none;
    border-radius: 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .app-window.is-docked .resize-handle { display: none; }
  /* Свёрнутые окна в док-колонке — над остальными, но не перекрывают шапки. */
  .app-window.is-docked { z-index: 7; }
  /* Шапку свёрнутого окна в доке можно тянуть — курсор-«лапка». */
  .app-window.is-docked .chat-window__bar { cursor: grab; }
  /* При перетаскивании окно следует за пальцем и слегка всплывает. */
  .app-window.is-docked.is-dragging {
    z-index: 8 !important;
    box-shadow: var(--shadow-soft), 0 12px 32px -8px rgba(0, 0, 0, 0.5);
    opacity: 0.92;
  }
  /* Метка-цель: сосед, перед которым встанет перетаскиваемое окно.
     У окна overflow:hidden, поэтому линия рисуется внутри верхней кромки. */
  .app-window.is-docked.is-dock-target::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--accent);
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .app-window.is-docked.is-dragging { transition: none; }
  }

  /* Раскладка «пополам»: сверху — редактируемый модуль (видно, что правишь),
     снизу — ИИ-генератор/агент. Геометрию задаёт JS (applyMobileSplit), здесь
     лишь снимаем мобильные лимиты ширины, отключаем ресайз и ускоряем отрисовку. */
  .app-window.is-split-top,
  .app-window.is-split-bottom {
    max-width: none;
    max-height: none;
    border-radius: 14px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .app-window.is-split-top .resize-handle,
  .app-window.is-split-bottom .resize-handle { display: none; }
  /* Верхнее окно (шаблон) — основной фокус, нижнее (генератор) — рабочий ввод. */
  .app-window.is-split-top { z-index: 5; }
  .app-window.is-split-bottom { z-index: 6; }

  /* Увеличенные зоны захвата ручек ресайза «под палец» */
  .resize-handle--e,
  .resize-handle--w { width: 12px; }
  .resize-handle--n,
  .resize-handle--s { height: 12px; }
  .resize-handle--nw,
  .resize-handle--ne,
  .resize-handle--sw,
  .resize-handle--se { width: 22px; height: 22px; }

  /* Шапка окна и инструменты: крупнее кликабельные кнопки */
  .chat-window__bar { height: 56px; padding: 0 10px; gap: 6px; }
  .chat-window__tools { gap: 2px; }
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn svg { width: 17px; height: 17px; }
  /* Кнопка полноэкранного режима на мобильных не нужна — прячем её,
     чтобы не загромождать узкую шапку окна (и у модулей, и у чата). */
  .win-full-btn,
  #chatFullBtn { display: none; }

  /* ---------------- Чат ---------------- */
  .messages { padding: 14px 12px 8px; }
  .msg { max-width: 94%; }
  .composer { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .send-btn { width: 42px; height: 42px; }
  /* Поле ввода — 16px, иначе iOS зумит страницу при фокусе */
  #input,
  .composer__input { font-size: 16px; }
  .composer__hint { display: none; }

  /* ---------------- Модальные окна почти на весь экран ---------------- */
  .settings-panel,
  .admin-modal,
  .auth-modal,
  .dash-modal,
  .module-modal {
    padding: 8px;
    align-items: stretch;
  }
  .settings-card,
  .admin-card,
  .dash-card,
  .module-modal__card,
  .custom-card,
  .role-card,
  .file-preview-card {
    max-width: 100%;
    width: 100%;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
  }
  .settings-card,
  .admin-card,
  .dash-card,
  .module-modal__card {
    height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px));
  }
  /* Плоские диалоги (без растягивания по высоте) */
  .auth-card,
  .confirm-card {
    max-width: 100%;
  }
  .auth-card { padding: 18px; }
  .confirm-card { width: calc(100vw - 24px); }

  /* Внутренние отступы модалок компактнее */
  .settings-panel__body,
  .admin-card__body,
  .dash-body,
  .module-modal__body { padding: 14px; }
  .settings-panel__head,
  .module-modal__head,
  .admin-card__head,
  .dash-head { padding: 14px; }

  /* Полосы вкладок — горизонтально скроллируемые, без сжатия подписей
     (эти же свойства проверяет tests/admin-style.test.js). */
  .dash-tabs,
  .admin-tabs { padding-left: 10px; padding-right: 10px; }
  .dash-tab { padding: 10px 12px; font-size: 12.5px; }
  .admin-tab-btn { padding: 9px 12px; font-size: 12.5px; }

  /* ---------------- Поля ввода: 16px против iOS-зума ---------------- */
  .ai-field__control,
  input[type="email"],
  input[type="password"],
  input[type="text"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  select,
  textarea,
  .module-search__input,
  .admin-search__input,
  .space-row__name,
  .custom-field__control,
  .tasks__input,
  .nm__field,
  .nm__area,
  .hab__input,
  .lnk__input,
  .rss__input,
  .wx__input,
  .pr__input,
  .pr__search,
  .ex__input,
  .cur__input,
  .cv__input,
  .tr__src,
  .sm__src,
  .pr__text,
  .jt__area,
  .cd__area,
  .rx__text,
  .rx__pattern,
  .df__area { font-size: 16px; }

  /* ---------------- Сетки контента в одну колонку ---------------- */
  .dash-metrics { grid-template-columns: repeat(2, 1fr); }
  .admin-overview-metrics { grid-template-columns: repeat(2, 1fr); }
  .admin-usage__summary { grid-template-columns: repeat(2, 1fr); }
  .module-modal__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* Тулбар пользователей — в столбик */
  .admin-users-toolbar { flex-direction: column; align-items: stretch; }
  .admin-filter { align-self: flex-start; }

  /* Биллинг-таблица админа: оставляем ключевые колонки */
  .admin-billing__row { grid-template-columns: minmax(0, 1fr) auto; }
  .admin-billing__row span:nth-child(n + 3) { display: none; }

  /* Роли AI Assistant: выпадающее меню не шире экрана */
  .role-menu { min-width: 0; max-width: calc(100vw - 24px); }

  /* Фоновые пятна легче — меньше нагрузки на мобильный GPU */
  .blob { filter: blur(60px); }

  /* Встроенные модули: ряды полей переносятся, поля — на всю ширину */
  .nm__row,
  .cv__row,
  .tr__row,
  .hab__form,
  .lnk__form,
  .rss__form,
  .wx__form { flex-wrap: wrap; }
  .nm__field,
  .cv__input,
  .cv__select,
  .tr__src { flex: 1 1 100%; }
  .ip__key { flex-basis: 84px; }

  /* Кнопки модулей — крупнее для пальца */
  .pomo__btn,
  .hab__add,
  .lnk__add,
  .cur__refresh,
  .wx__go,
  .rss__add,
  .ip__refresh,
  .tr__btn,
  .sm__btn,
  .pr__add,
  .jt__btn,
  .df__btn,
  .cd__btn,
  .ex__add { padding: 10px 13px; }
}

/* ---------------------- Узкий телефон: ≤400px ---------------------- */
@media (max-width: 400px) {
  :root { --nav-h: 58px; }

  /* Компактная нижняя панель */
  .bottom-nav { padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav__inner { gap: 6px; }
  .module-add-btn { height: 38px; padding: 0 8px; gap: 4px; }
  .space-tab { min-width: 34px; height: 34px; padding: 0 7px; }
  /* Ещё компактнее освобождаем место под центральную кнопку «＋ Модуль». */
  .space-tabs { max-width: calc(50% - 28px); }
  .settings-btn,
  .account-btn { height: 38px; }
  .settings-btn { width: 38px; }

  /* Кнопки окна ещё компактнее */
  .icon-btn { width: 32px; height: 32px; }
  .icon-btn svg { width: 16px; height: 16px; }
  .chat-window__bar { height: 52px; padding: 0 8px; gap: 4px; }

  /* Сообщения и ввод */
  .messages { padding: 12px 10px 6px; gap: 10px; }
  .msg__bubble { font-size: 13.5px; padding: 9px 11px; }
  .chat-window__titles strong { font-size: 13.5px; }
  .chat-window__titles small { display: none; }

  /* Модалки — во весь экран без горизонтальных отступов */
  .settings-panel,
  .admin-modal,
  .auth-modal,
  .dash-modal,
  .module-modal { padding: 6px; }
  .settings-panel__body,
  .admin-card__body,
  .dash-body,
  .module-modal__body { padding: 12px; }

  /* Сетки — уже одной колонкой на самых узких экранах */
  .dash-metrics,
  .admin-overview-metrics,
  .admin-usage__summary { grid-template-columns: 1fr; }
  .module-modal__grid { grid-template-columns: 1fr; }

  /* Карточки модулей: действия всегда видны (нет hover на тач-экранах) */
  .module-card__actions { display: flex; }
  .module-card { padding-right: 76px; }
  .module-modal__foot { flex-wrap: wrap; }
  .module-modal__create,
  .module-modal__restore,
  .module-modal__clear { flex: 1 1 auto; justify-content: center; }

  /* Библиотека модулей: одна колонка карточек */
  .auth-card__switch { flex-wrap: wrap; }

  /* Крупные заголовки значений — чуть меньше */
  .dash-balance__value { font-size: 28px; }
  .dash-avatar { width: 46px; height: 46px; font-size: 21px; }
}

/* ============================================================
   Техническое обслуживание
   ============================================================ */

/* Переключатель «Закрыть сайт» в настройках подключения */
.ai-field--toggle {
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--glass-1);
}
.ai-field--toggle .ai-field__label {
  flex: 1 1 180px;
  margin-bottom: 0;
  letter-spacing: 0;
}
.ai-field--toggle .ai-hint {
  flex: 1 1 100%;
  margin-left: 34px;
}
.ai-toggle {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Полноэкранная заглушка для обычных пользователей */
.maintenance-screen {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 7, 14, 0.72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  animation: modalFade 0.2s var(--ease) both;
}
.maintenance-screen.hidden { display: none; }
.maintenance-card {
  width: min(440px, calc(100vw - 32px));
  padding: 26px 22px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: var(--surface-solid);
  box-shadow: var(--shadow-soft);
  text-align: center;
  animation: modalFade 0.2s var(--ease) both;
}
.maintenance-card__icon {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 12px;
}
.maintenance-card__title {
  display: block;
  font-size: 18px;
  font-weight: 690;
  color: var(--text);
}
.maintenance-card__text {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
  word-break: break-word;
  white-space: pre-wrap;
}
.maintenance-card__hint {
  margin: 12px 0 18px;
  font-size: 12px;
  color: var(--text-dim);
  opacity: 0.8;
}
.maintenance-card__hint:empty { display: none; }
.maintenance-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.maintenance-card__actions .ai-btn { width: auto; }
/* Кнопка «Войти» нужна только гостю; вошедшему показываем лишь «Выйти». */
.maintenance-screen.is-signed-in #maintenanceLogin { display: none; }

/* Пока открыта форма входа со страницы обслуживания, пропускаем клики к ней
   сквозь заглушку. */
.maintenance-screen.is-login { pointer-events: none; }
.maintenance-screen.is-login .maintenance-card { pointer-events: auto; }

/* Форма входа, открытая ПОВЕРХ заглушки техобслуживания: поднимаем её выше
   (у .maintenance-screen z-index 320), иначе админ не смог бы войти. */
.auth-modal.is-over-maintenance { z-index: 360; }

/* ============================================================
   Лендинг NeuroDuck — рекламный модуль рабочей области.
   Неймспейс классов — `ld__`. Все анимации уважают настройку
   «Анимации интерфейса» (html[data-noAnim]) и prefers-reduced-motion.
   ============================================================ */
.ld {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text);
  /* Единый контейнер сайта: одинаковые отступы по краям и скругление. */
  padding: 16px;
  border-radius: 22px;
  border: 1px solid var(--border-strong);
  background: var(--page-bg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  overflow: clip;
}

/* Верхняя навигация */
.ld__nav {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin: -16px -16px 0;
  background: var(--panel-strong);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  border-top-left-radius: 21px;
  border-top-right-radius: 21px;
}
.ld__nav-brand { display: flex; align-items: center; gap: 8px; }
.ld__logo-mark { font-size: 20px; line-height: 1; }
.ld__logo-text {
  font-weight: 750;
  letter-spacing: 0.3px;
  background: linear-gradient(135deg, var(--accent-3), var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Hero */
.ld__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 34px 0 26px;
  text-align: center;
  overflow: hidden;
}
.ld__glow {
  position: absolute;
  top: -90px;
  left: 50%;
  width: 460px;
  height: 460px;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent), transparent 62%);
  filter: blur(46px);
  pointer-events: none;
  animation: ldFloat 9s ease-in-out infinite;
}
.ld__glow--2 {
  left: auto;
  right: -120px;
  top: 20px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 62%);
  animation-delay: -3s;
}
.ld__badge {
  position: relative;
  display: inline-block;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--glass-1);
}
.ld__title {
  position: relative;
  margin: 4px 0 0;
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.ld__grad {
  background: linear-gradient(120deg, var(--accent-3), var(--accent), var(--accent-2), var(--accent-3));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ldShimmer 6s linear infinite;
}
.ld__lead {
  position: relative;
  max-width: 540px;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
/* Метрики */
.ld__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-top: 6px;
}
.ld__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ld__stat-num {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ld__stat-label { font-size: 11.5px; color: var(--text-dim); }

/* Мини-демо чата */
.ld__demo {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-top: 10px;
  text-align: left;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.ld__demo-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--glass-1);
}
.ld__demo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.ld__demo-dot:nth-child(1) { background: #f87171; }
.ld__demo-dot:nth-child(2) { background: #fbbf24; }
.ld__demo-dot:nth-child(3) { background: #34d399; }
.ld__demo-title { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.ld__demo-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.ld__bubble {
  max-width: 84%;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 14px;
}
.ld__bubble.is-user {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  border-bottom-right-radius: 4px;
}
.ld__bubble.is-ai {
  align-self: flex-start;
  color: var(--text);
  background: var(--glass-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.ld__typing { display: flex; gap: 4px; padding: 2px 4px; }
.ld__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: ldBounce 1.2s infinite ease-in-out;
}
.ld__typing i:nth-child(2) { animation-delay: 0.15s; }
.ld__typing i:nth-child(3) { animation-delay: 0.3s; }

/* Секции */
.ld__section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 34px 0;
}
.ld__section--alt {
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  background: var(--glass-1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ld__section-head { display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; }
.ld__kicker {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
}
.ld__h2 { margin: 0; font-size: clamp(20px, 4vw, 27px); font-weight: 800; letter-spacing: -0.3px; }
.ld__section-lead { margin: 0; max-width: 520px; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

/* Сетка возможностей */
.ld__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.ld__feature {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ld__feature:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 22%, transparent);
}
.ld__feature-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 19px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--accent-2) 28%, transparent));
  border: 1px solid var(--border-strong);
}
.ld__feature-title { margin: 0; font-size: 14.5px; font-weight: 700; }
.ld__feature-text { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }

/* Полезные функции: список преимуществ с тегами */
.ld__benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.ld__benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ld__benefit:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 20%, transparent);
}
.ld__benefit-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 19px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent-2) 26%, transparent));
  border: 1px solid var(--border-strong);
}
.ld__benefit-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ld__benefit-tag {
  align-self: flex-start;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 999px;
}
.ld__benefit-title { margin: 0; font-size: 14px; font-weight: 700; }
.ld__benefit-text { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }

/* Плитки модулей */
.ld__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.ld__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.ld__tile:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--accent);
  background: var(--glass-2);
}
.ld__tile-icon { font-size: 20px; line-height: 1; }
.ld__tile-name { font-size: 11.5px; color: var(--text-dim); text-align: center; }

/* Тарифы */
.ld__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ld__plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ld__plan--featured {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
  box-shadow: var(--shadow-glow);
}
.ld__plan:hover { transform: translateY(-4px); }
.ld__plan-name { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); }
.ld__plan-price {
  font-size: 26px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ld__plan-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; flex: 1 1 auto; }
.ld__plan-item { position: relative; padding-left: 20px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.ld__plan-item::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
/* Финальный призыв */
.ld__final {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 30px 18px;
  text-align: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--panel-strong);
  overflow: hidden;
}
.ld__final-title { margin: 0; font-size: clamp(19px, 4vw, 25px); font-weight: 800; }
.ld__final-text { margin: 0 0 6px; font-size: 13.5px; color: var(--text-dim); }

/* Подвал */
.ld__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 0 0;
  margin: 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}
.ld__footer-brand { font-weight: 700; color: var(--text); }
.ld__footer-note { color: var(--text-dim); opacity: 0.85; }

/* Контент над фоном */
.ld__nav, .ld__hero, .ld__section,
.ld__showcase, .ld__final, .ld__footer { position: relative; z-index: 1; }

/* Полоса доверия */
.ld__trust {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: center;
  margin-top: 4px;
}
.ld__trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.ld__trust-dot { font-size: 13px; }

/* Бейдж популярного тарифа */
.ld__plan { position: relative; }
.ld__plan-badge {
  position: absolute;
  top: -11px;
  right: 14px;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Градиентная витрина */
.ld__showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 38px 20px;
  text-align: center;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(140% 140% at 0% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 55%),
    radial-gradient(140% 140% at 100% 100%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 55%),
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-3) 12%, transparent));
  border: 1px solid var(--border-strong);
  overflow: hidden;
}
.ld__showcase-title {
  margin: 0;
  font-size: clamp(20px, 4.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.4px;
  background: linear-gradient(120deg, var(--accent-3), var(--accent), var(--accent-2), var(--accent-3));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ldShimmer 7s linear infinite;
}
.ld__showcase-text { margin: 0 0 6px; max-width: 560px; font-size: 13.5px; line-height: 1.65; color: var(--text-dim); }

/* Scroll-reveal */
.ld__reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.ld__reveal.is-visible { opacity: 1; transform: none; }

/* Анимации */
@keyframes ldShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes ldFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(22px); }
}
@keyframes ldBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.55; }
  40% { transform: translateY(-4px); opacity: 1; }
}
/* Выключение анимаций: настройка «Анимации интерфейса» и системная опция */
html[data-noAnim] .ld__glow,
html[data-noAnim] .ld__grad,
html[data-noAnim] .ld__typing i,
html[data-noAnim] .ld__showcase-title { animation: none; }
html[data-noAnim] .ld__reveal { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .ld__glow, .ld__grad, .ld__typing i,
  .ld__showcase-title { animation: none; }
  .ld__reveal { opacity: 1; transform: none; transition: none; }
}

/* Узкие окна модуля */
@media (max-width: 560px) {
  .ld__stats { grid-template-columns: 1fr; }
}

/* ============================================================
   ULTRA-слой: яркий ультрасовременный дизайн лендинга.
   Переопределяет базовое оформление: насыщенные градиенты,
   неоновые обводки, анимированные границы и контрастные секции.
   Идёт ПОСЛЕ базовых правил, поэтому намеренно их усиливает.
   ============================================================ */
.ld {
  --ld-neon-1: #6c8cff;
  --ld-neon-2: #a855f7;
  --ld-neon-3: #22d3ee;
  --ld-neon-4: #f472b6;
  --ld-card-bg: linear-gradient(160deg, rgba(108, 140, 255, 0.16), rgba(168, 85, 247, 0.10) 45%, rgba(34, 211, 238, 0.12));
  --ld-card-br: rgba(255, 255, 255, 0.14);
}

/* Яркая анимированная градиентная подложка всего лендинга */
.ld::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 12% 6%, color-mix(in srgb, var(--ld-neon-1) 30%, transparent), transparent 60%),
    radial-gradient(55% 45% at 92% 18%, color-mix(in srgb, var(--ld-neon-2) 30%, transparent), transparent 62%),
    radial-gradient(50% 40% at 78% 82%, color-mix(in srgb, var(--ld-neon-3) 24%, transparent), transparent 62%),
    radial-gradient(45% 40% at 22% 92%, color-mix(in srgb, var(--ld-neon-4) 22%, transparent), transparent 62%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%;
  animation: ldMeshShift 18s ease-in-out infinite alternate;
  opacity: 0.9;
}

/* Насыщенная градиентная сетка поверх подложки */
.ld::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ld-neon-3) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ld-neon-2) 12%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(80% 60% at 50% 0%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 30%, transparent 100%);
  animation: ldGridDrift 22s linear infinite;
  opacity: 0.5;
}

/* Неоновый градиентный бордюр по краю шапки */
.ld__nav {
  background: linear-gradient(90deg,
    rgba(108, 140, 255, 0.22), rgba(168, 85, 247, 0.20), rgba(34, 211, 238, 0.22));
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ld-neon-3) 45%, transparent),
              0 12px 34px rgba(0, 0, 0, 0.28);
}
.ld__logo-text {
  background: linear-gradient(120deg, #22d3ee, #6c8cff, #a855f7, #f472b6, #22d3ee);
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ldShimmer 5s linear infinite;
  font-weight: 800;
}
/* Hero: яркий заголовок и неоновые акценты */
.ld__hero {
  background:
    radial-gradient(80% 60% at 50% -10%, color-mix(in srgb, var(--ld-neon-2) 26%, transparent), transparent 65%);
}
.ld__title {
  font-size: clamp(30px, 7vw, 48px);
  letter-spacing: -1.2px;
  text-shadow: 0 8px 40px rgba(108, 140, 255, 0.35);
}
.ld__grad {
  background: linear-gradient(120deg, #22d3ee, #6c8cff, #a855f7, #f472b6, #22d3ee);
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ldShimmer 4.5s linear infinite;
}
.ld__badge {
  color: #fff;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box,
    linear-gradient(120deg, #22d3ee, #a855f7, #f472b6) border-box;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--ld-neon-2) 35%, transparent);
  animation: ldFloatY 5s ease-in-out infinite;
}
.ld__lead { font-size: 15.5px; color: color-mix(in srgb, var(--text-dim) 55%, #fff); }

/* Стеклянные карточки с неоновой обводкой и градиентным свечением */
.ld__feature,
.ld__plan,
.ld__stat,
.ld__tile,
.ld__trust-item {
  background: var(--ld-card-bg), var(--panel);
  border: 1px solid var(--ld-card-br);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
              0 14px 40px rgba(0, 0, 0, 0.30);
}
.ld__feature { position: relative; overflow: hidden; }
.ld__feature::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(130deg, var(--ld-neon-1), var(--ld-neon-2), var(--ld-neon-3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.ld__feature:hover::before { opacity: 1; }
.ld__feature:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 26px 60px color-mix(in srgb, var(--ld-neon-2) 40%, transparent);
}
.ld__feature-icon {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.35), rgba(168, 85, 247, 0.35));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--ld-neon-1) 45%, transparent);
  animation: ldIconFloat 4s ease-in-out infinite;
}

/* Заголовки секций — яркий градиентный текст (читаемый в обеих темах) */
.ld__h2, .ld__final-title {
  background: linear-gradient(120deg, var(--ld-neon-1), var(--ld-neon-2) 45%, var(--ld-neon-3) 75%, var(--ld-neon-4));
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ldShimmer 7s linear infinite;
}
:root[data-theme="light"] .ld__h2,
:root[data-theme="light"] .ld__final-title {
  background: linear-gradient(120deg, #4338ca, #7c3aed 45%, #0891b2 75%, #be185d);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-theme="light"] .ld__grad {
  background: linear-gradient(120deg, #0891b2, #4338ca, #7c3aed, #be185d, #0891b2);
  background-size: 320% 100%;
}
:root[data-theme="light"] .ld__logo-text {
  background: linear-gradient(120deg, #0891b2, #4338ca, #7c3aed, #be185d, #0891b2);
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-theme="light"] .ld__lead,
:root[data-theme="light"] .ld__section-lead { color: #3f4759; }
.ld__kicker {
  padding: 5px 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(120deg, rgba(108, 140, 255, 0.35), rgba(168, 85, 247, 0.35));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ld-neon-2) 30%, transparent);
}
.ld__section-lead { color: color-mix(in srgb, var(--text-dim) 45%, #fff); }

/* Контрастная альтернативная секция с ярким градиентом */
.ld__section--alt {
  background:
    radial-gradient(70% 80% at 8% 0%, color-mix(in srgb, var(--ld-neon-1) 22%, transparent), transparent 60%),
    radial-gradient(70% 80% at 100% 100%, color-mix(in srgb, var(--ld-neon-2) 22%, transparent), transparent 60%),
    var(--glass-1);
  border-top: 1px solid color-mix(in srgb, var(--ld-neon-3) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ld-neon-2) 30%, transparent);
}

/* Плитки модулей — быстрый отклик и неоновый ховер */
.ld__tile:hover {
  transform: translateY(-5px) scale(1.08) rotate(-1.5deg);
  border-color: color-mix(in srgb, var(--ld-neon-3) 70%, transparent);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--ld-neon-3) 40%, transparent);
}

/* Тарифы: выраженный featured-план с анимированной рамкой */
.ld__plan--featured {
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--ld-neon-2) 30%, transparent), transparent 62%),
    var(--panel-strong);
  border-color: transparent;
  box-shadow: 0 26px 70px color-mix(in srgb, var(--ld-neon-2) 45%, transparent);
}
.ld__plan--featured:hover { transform: translateY(-8px) scale(1.02); }
.ld__plan-price {
  background: linear-gradient(135deg, #22d3ee, #a855f7, #f472b6);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ldShimmer 6s linear infinite;
}
.ld__plan-badge { animation: ldFloatY 3.5s ease-in-out infinite; }

/* Градиентная витрина — максимально яркая */
.ld__showcase {
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--ld-neon-3) 34%, transparent), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--ld-neon-2) 36%, transparent), transparent 55%),
    radial-gradient(90% 90% at 50% 120%, color-mix(in srgb, var(--ld-neon-4) 30%, transparent), transparent 60%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--ld-neon-2) 40%, transparent);
  animation: ldBorderGlow 6s ease-in-out infinite;
}

/* Финальный блок и подвал */
.ld__final {
  background:
    radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--ld-neon-2) 34%, transparent), transparent 62%),
    radial-gradient(120% 130% at 50% 120%, color-mix(in srgb, var(--ld-neon-3) 28%, transparent), transparent 62%),
    var(--panel-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.ld__footer { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ld-neon-2) 12%, transparent), transparent); }

/* Дополнительные анимации */
@keyframes ldMeshShift {
  0% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
  100% { background-position: 40% 20%, 60% 30%, 70% 70%, 30% 80%; }
}
@keyframes ldGridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 46px 46px, 46px 46px; }
}
@keyframes ldFloatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes ldIconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-3deg); }
}
@keyframes ldBorderGlow {
  0%, 100% { box-shadow: 0 30px 80px color-mix(in srgb, var(--ld-neon-2) 34%, transparent); }
  50% { box-shadow: 0 34px 96px color-mix(in srgb, var(--ld-neon-3) 55%, transparent); }
}

/* Отключение ультра-анимаций согласно настройкам */
html[data-noAnim] .ld::before,
html[data-noAnim] .ld::after,
html[data-noAnim] .ld__logo-text,
html[data-noAnim] .ld__badge,
html[data-noAnim] .ld__feature-icon,
html[data-noAnim] .ld__h2,
html[data-noAnim] .ld__final-title,
html[data-noAnim] .ld__plan-price,
html[data-noAnim] .ld__plan-badge,
html[data-noAnim] .ld__showcase,
html[data-noAnim] .ld__grad { animation: none; }
html[data-noAnim] .ld__grad,
html[data-noAnim] .ld__h2,
html[data-noAnim] .ld__final-title { color: var(--text); -webkit-text-fill-color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .ld::before, .ld::after, .ld__logo-text, .ld__badge,
  .ld__feature-icon, .ld__h2, .ld__final-title,
  .ld__plan-price, .ld__plan-badge, .ld__showcase, .ld__grad { animation: none; }
}

/* ============================================================
   Режим без стекла и анимаций для лендинга NeuroDuck (.ld).
   Убирает backdrop-blur, бесконечные анимации и тяжёлые эффекты
   (низкая нагрузка на CPU/GPU), делает поверхности плоскими,
   а кнопки — стабильными (без сдвигов и масштабирования).
   ============================================================ */

/* 1. Любые анимации и переходы внутри модуля-лендинга отключены. */
.ld,
.ld *,
.ld *::before,
.ld *::after {
  animation: none !important;
  transition: none !important;
}

/* 2. Никакого стеклянного размытия фона. */
.ld,
.ld *,
.ld *::before,
.ld *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 3. Крупные декоративные слои фона не рисуются вовсе. */
.ld__glow {
  display: none !important;
}

/* 4. Градиентные подложки лендинга (.ld::before / .ld::after) — статичные. */
.ld::before { animation: none !important; }
.ld::after  { animation: none !important; }

/* 5. Плоские непрозрачные поверхности вместо полупрозрачного «стекла». */
.ld__feature,
.ld__benefit,
.ld__plan,
.ld__stat,
.ld__tile,
.ld__trust-item {
  background: var(--surface-solid) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.ld__showcase,
.ld__final {
  box-shadow: none !important;
}

/* 6. Кнопки стабильны: без сдвигов, масштабирования и свечения. */
.ld__tile,
.ld__feature,
.ld__benefit {
  transform: none !important;
}
.ld__tile:hover,
.ld__feature:hover,
.ld__benefit:hover,
.ld__plan--featured:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* 7. Анимированные градиентные обводки/иконки — фиксируем без движения. */
.ld__showcase,
.ld__plan-badge,
.ld__feature-icon,
.ld__badge {
  animation: none !important;
}
.ld__feature::before { display: none !important; }

/* 8. Плашка «печатает» в мини-демо — без прыгающих точек. */
.ld__typing i { animation: none !important; opacity: 0.55; }

/* 9. Нижние блоки лендинга (витрина и финальный призыв) — акцентный
   градиент по запросу. Текст остаётся читаемым за счёт контрастных надписей. */
.ld__showcase,
.ld__final {
  background: linear-gradient(145deg, #35406e, #57307f) !important;
  border-color: transparent !important;
}
.ld__showcase .ld__showcase-text,
.ld__final .ld__final-text {
  color: rgba(255, 255, 255, 0.88);
}
/* Градиентный текст заголовков на градиентном фоне нечитаем — заливаем белым. */
.ld__showcase .ld__showcase-title,
.ld__final .ld__final-title {
  background: none !important;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
.ld__showcase .ld__kicker {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
}

/* =========================================================
   МОДУЛЬ «УСТРОЙСТВО» (device-bridge)
   Двухпанельное окно: слева чат с ИИ-агентом, справа файлы
   устройства и панель команд. Акцент — #38bdf8.
   ========================================================= */
.module-body--device {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.device-split {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  gap: 0;
}
.device-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.device-col--chat { flex: 1 1 50%; }
.device-col--files {
  flex: 0 0 46%;
  border-left: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  background: rgba(0, 0, 0, 0.12);
}
.device-col--chat .chat-window__body { min-height: 0; }
.device-col--chat .composer { margin-top: auto; }

/* --- Блок подключения устройства (установка агента) --- */
.device-pair {
  padding: 12px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  background: rgba(56, 189, 248, 0.08);
}
.device-pair__title { display: block; margin-bottom: 4px; }
.device-pair__hint { margin: 0 0 8px; font-size: 12px; opacity: 0.75; }

/* --- Блок установки агента --- */
.device-install__row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.device-install__steps {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.5;
}
.device-install__step { margin-bottom: 2px; }

/* --- Панель пути --- */
.device-dirbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  font-size: 12px;
}
.device-dirbar__path {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
  direction: rtl;
  text-align: left;
}
.device-upbtn,
.device-dirbar__new {
  flex: 0 0 auto;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  background: var(--field, rgba(255, 255, 255, 0.06));
  color: inherit;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}
.device-upbtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; }
.device-upbtn svg { width: 15px; height: 15px; }

/* --- Список файлов --- */
.device-list {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 80px;
}
.device-empty { padding: 14px; font-size: 13px; opacity: 0.7; }
.device-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
}
.device-row:hover { background: rgba(56, 189, 248, 0.1); }
.device-row__icon { flex: 0 0 auto; }
.device-row__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-row__meta { flex: 0 0 auto; font-size: 11px; opacity: 0.6; }
.device-row__actions { flex: 0 0 auto; display: flex; gap: 2px; }
.device-row__act {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 5px;
  font-size: 13px;
  opacity: 0.75;
}
.device-row__act:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; }
.device-row__act--danger:hover { background: rgba(239, 68, 68, 0.25); }

/* --- Панель команд --- */
.device-cmd {
  flex: 0 0 auto;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  padding: 8px 10px 10px;
}
.device-cmd__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.device-cmd__title { font-size: 12px; }
.device-cmd__stop {
  border: 1px solid rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.2);
  color: inherit;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.device-cmd__form { display: flex; gap: 6px; }
.device-cmd__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  background: var(--field, rgba(255, 255, 255, 0.06));
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
}
.device-cmd__run {
  flex: 0 0 auto;
  width: 36px;
  border: none;
  border-radius: 8px;
  background: var(--module-accent, #38bdf8);
  color: #04121d;
  font-size: 14px;
  cursor: pointer;
}
.device-cmd__out {
  margin: 8px 0 0;
  max-height: 150px;
  overflow: auto;
  padding: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
.device-cmd__err { color: #fca5a5; }
.device-cmd__note { color: #93c5fd; opacity: 0.85; }
.device-cmd__prompt { color: #86efac; }

/* --- Кнопки и редактор --- */
.device-btn {
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  background: var(--field, rgba(255, 255, 255, 0.06));
  color: inherit;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
}
.device-btn--primary {
  background: var(--module-accent, #38bdf8);
  color: #04121d;
  border-color: transparent;
  font-weight: 600;
}
.device-editor {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.45);
  z-index: 20;
}
.device-editor__card {
  display: flex;
  flex-direction: column;
  width: min(640px, 96%);
  max-height: 90%;
  border-radius: 12px;
  background: var(--surface, #131a2b);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.14));
  overflow: hidden;
}
.device-editor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.1));
}
.device-editor__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-editor__close {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
}
.device-editor__text {
  flex: 1 1 auto;
  min-height: 240px;
  resize: none;
  border: none;
  outline: none;
  padding: 12px;
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
}
.device-editor__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.1));
}

/* Мобильные: панели друг под другом, командная панель компактнее. */
@media (max-width: 700px) {
  .device-split { flex-direction: column; }
  .device-col--chat { flex: 1 1 auto; min-height: 45%; }
  .device-col--files {
    flex: 1 1 auto;
    min-height: 40%;
    border-left: none;
    border-top: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  }
  .device-cmd__out { max-height: 110px; }
}

/* ============================================================
   МОДУЛЬ «MUSIC GENERATOR» (music-generator)
   Слева — рельс вкладок и панель инструментов, справа — независимый
   ИИ-чат модуля. Оформление согласовано с темой (--accent, панели).
   ============================================================ */
.module-body--music { padding: 0; }
.music-split {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 0;
}
.music-col--tools {
  flex: 1 1 62%;
  min-width: 0;
  display: flex;
  min-height: 0;
}
.music-col--chat {
  flex: 0 0 38%;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: color-mix(in srgb, var(--panel) 60%, transparent);
}

/* --- Рельс вкладок слева от панели --- */
.music-rail {
  flex: 0 0 148px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  background: color-mix(in srgb, var(--panel-strong) 70%, transparent);
  overflow-y: auto;
}

/* --- Раздвижные перегородки --- */
.music-splitter {
  flex: 0 0 auto;
  width: 6px;
  cursor: col-resize;
  position: relative;
  background: transparent;
  transition: background 0.15s var(--ease);
  touch-action: none;
}
.music-splitter::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--border);
  transition: background 0.15s var(--ease), width 0.15s var(--ease);
}
.music-splitter:hover::before,
.music-splitter.is-dragging::before {
  width: 2px;
  background: var(--accent);
}
.music-splitter:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.music-rail__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 10px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.music-rail__tab:hover { color: var(--text); background: var(--glass-2); }
.music-rail__tab.is-active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.music-rail__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.music-rail__icon svg { width: 18px; height: 18px; }
.music-rail__label { flex: 1 1 auto; }

/* --- Панель контента --- */
.music-panel {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px;
  overflow-y: auto;
}
.music-form { display: flex; flex-direction: column; gap: 12px; }
.music-form__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.music-form__hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-dim); }
.music-field { display: flex; flex-direction: column; gap: 5px; }
/* Поля формы, скрываемые переключателями режима (custom / instrumental). */
.music-field.hidden { display: none; }

/* Тумблер-переключатель (switch) */
.music-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.music-switch__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.music-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 40px; height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-dim) 35%, transparent);
  border: 1px solid var(--border);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.music-switch__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s var(--ease);
}
.music-switch__label { font-size: 12.5px; color: var(--text); }
.music-switch__input:checked + .music-switch__track {
  background: var(--accent);
  border-color: var(--accent);
}
.music-switch__input:checked + .music-switch__track .music-switch__thumb {
  transform: translateX(18px);
}
.music-switch__input:focus-visible + .music-switch__track {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.music-field__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.music-field__label { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.music-field__control {
  width: 100%;
  padding: 9px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--glass-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  resize: vertical;
}
.music-field__control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.music-field__control--file { padding: 6px; }

.music-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--glass-1);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.music-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.music-btn:active { transform: scale(0.97); }
.music-btn:disabled { opacity: 0.5; cursor: progress; }
.music-btn--primary {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Кнопка генерации в состоянии выполнения: спиннер и мягкое «дыхание» —
   единственный индикатор прогресса (отдельной плашки/кнопки «Отмена» нет). */
.music-btn.is-busy {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  animation: musicBtnPulse 1.6s ease-in-out infinite;
}
.music-btn.is-busy::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-top-color: var(--accent);
  animation: musicSpin 0.8s linear infinite;
}
@keyframes musicBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 30%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); }
}

.music-btn--wide { width: 100%; padding: 10px; font-size: 13.5px; }
.music-btn--danger {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.08);
}
.music-btn--danger:hover { border-color: #f87171; background: rgba(248, 113, 113, 0.16); }

/* --- История генераций модуля --- */
.music-history__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.music-history { display: flex; flex-direction: column; gap: 10px; }
.music-history__empty { font-size: 12.5px; color: var(--text-dim); padding: 10px 0; }
.music-history__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--glass-1);
}
.music-history__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.music-history__kind { font-size: 12.5px; font-weight: 650; color: var(--text); }
.music-history__date { font-size: 11px; color: var(--text-dim); }
.music-history__status {
  margin-left: auto;
  font-size: 11px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.music-history__status.is-running { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.music-history__status.is-done { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); }
.music-history__status.is-error { color: #fca5a5; border-color: rgba(248, 113, 113, 0.4); }
.music-history__status.is-canceled { color: var(--text-dim); }
.music-history__summary {
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.music-history__error { font-size: 12px; color: #fca5a5; }
.music-history__text {
  margin: 0;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  color: var(--text);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 60%, transparent);
}
.music-history__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Результаты и плеер --- */
.music-results { display: flex; flex-direction: column; gap: 10px; }
.music-result-group { display: flex; flex-direction: column; gap: 10px; }
.music-result-group__title {
  font-size: 12px;
  font-weight: 650;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.music-notes { display: flex; flex-direction: column; gap: 6px; }
.music-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--glass-1);
}

/* Шапка дорожки: обложка + метаданные */
.music-track__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.music-track__cover {
  flex: 0 0 auto;
  position: relative;
  width: 52px; height: 52px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 30%, transparent),
    color-mix(in srgb, var(--accent) 10%, transparent));
  border: 1px solid var(--border);
}
.music-track__cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.music-track__cover .music-player__cover-note { position: static; }
.music-track__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.music-track__title { font-size: 13px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-track__tags { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-track__dur { font-size: 11px; color: var(--text-dim); }
.music-track__stored { align-self: flex-start; margin-top: 2px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.music-track__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

/* --- Современный плеер --- */
.music-player {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel) 70%, transparent),
    color-mix(in srgb, var(--panel-strong) 55%, transparent));
}
.music-player__audio { display: none; }
.music-player__cover {
  flex: 0 0 auto;
  position: relative;
  width: 44px; height: 44px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 32%, transparent),
    color-mix(in srgb, var(--accent) 10%, transparent));
}
.music-player__cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.music-player__cover-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: color-mix(in srgb, var(--accent) 75%, var(--text-dim));
}
.music-player__cover-note svg { width: 22px; height: 22px; }
.music-track__cover .music-player__cover-note svg { width: 26px; height: 26px; }

/* --- Эквалайзер «под музыку»: анимированные столбики при проигрывании --- */
.music-player__eq {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  width: 26px;
  opacity: 0.35;
  transition: opacity 0.25s var(--ease);
}
.music-player.is-playing .music-player__eq { opacity: 1; }
.music-player__eq-bar {
  flex: 1 1 auto;
  height: 20%;
  min-height: 3px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--accent-3, #22d3ee), var(--accent));
  transform-origin: bottom;
}
.music-player.is-playing .music-player__eq-bar { animation: musicEq 0.9s ease-in-out infinite; }
.music-player.is-playing .music-player__eq-bar:nth-child(1) { animation-duration: 0.72s; animation-delay: -0.15s; }
.music-player.is-playing .music-player__eq-bar:nth-child(2) { animation-duration: 0.96s; animation-delay: -0.4s; }
.music-player.is-playing .music-player__eq-bar:nth-child(3) { animation-duration: 0.6s;  animation-delay: -0.05s; }
.music-player.is-playing .music-player__eq-bar:nth-child(4) { animation-duration: 1.05s; animation-delay: -0.55s; }
.music-player.is-playing .music-player__eq-bar:nth-child(5) { animation-duration: 0.82s; animation-delay: -0.28s; }
@keyframes musicEq {
  0%, 100% { height: 18%; }
  50% { height: 92%; }
}
@media (prefers-reduced-motion: reduce) {
  .music-player.is-playing .music-player__eq-bar { animation: none; height: 60%; }
}

/* --- Кнопка play: без сплошной заливки + «кольцо-пульс» при проигрывании --- */
.music-player__play-wrap {
  flex: 0 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
}
.music-player__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--accent);
  /* Сплошной заливки нет: только тонкая акцентная рамка. */
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform 0.15s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.music-player__play:hover {
  transform: scale(1.06);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.music-player__play:active { transform: scale(0.95); }
.music-player__play svg { width: 20px; height: 20px; }
/* Индикатор загрузки: пока трек буферизуется, иконку play заменяет
   вращающееся кольцо — понятно, что нажатие принято и идёт подготовка. */
.music-player__play.is-loading svg { opacity: 0; }
.music-player__play.is-loading::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent);
  animation: musicPlaySpin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .music-player__play.is-loading::after { animation: none; border-top-color: var(--accent); }
}
/* «Кольцо» вокруг кнопки: при проигрывании по нему бежит градиент.
   Кнопка не масштабируется — крутится только цветной контур. */
.music-player__play-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from 0deg,
    #22d3ee, #a855f7, #f472b6, #f59e0b, #34d399, #22d3ee);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.music-player.is-playing .music-player__play-pulse {
  opacity: 1;
  animation: musicPlaySpin 2.2s linear infinite;
}
.music-player.is-playing .music-player__play {
  color: var(--accent);
  border-color: transparent;
}
@keyframes musicPlaySpin { to { transform: rotate(360deg); } }
/* Разноцветное свечение плеера (градиент) во время проигрывания. */
.music-player.is-playing {
  border-color: transparent;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--panel) 70%, transparent),
      color-mix(in srgb, var(--panel-strong) 55%, transparent)) padding-box,
    linear-gradient(115deg, #22d3ee, #a855f7, #f472b6, #f59e0b, #22d3ee) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: musicPlayerGlow 6s linear infinite;
}
@keyframes musicPlayerGlow { to { background-position: 0 0, 300% 0; } }
/* Разноцветные столбики эквалайзера «под музыку». */
.music-player.is-playing .music-player__eq-bar:nth-child(1) { background: linear-gradient(180deg, #22d3ee, var(--accent)); }
.music-player.is-playing .music-player__eq-bar:nth-child(2) { background: linear-gradient(180deg, #a855f7, var(--accent)); }
.music-player.is-playing .music-player__eq-bar:nth-child(3) { background: linear-gradient(180deg, #f472b6, var(--accent)); }
.music-player.is-playing .music-player__eq-bar:nth-child(4) { background: linear-gradient(180deg, #f59e0b, var(--accent)); }
.music-player.is-playing .music-player__eq-bar:nth-child(5) { background: linear-gradient(180deg, #34d399, var(--accent)); }
@media (prefers-reduced-motion: reduce) {
  .music-player.is-playing .music-player__play-pulse { animation: none; opacity: 0.6; }
  .music-player.is-playing { animation: none; }
}

.music-player__controls { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.music-player__time {
  flex: 0 0 auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  min-width: 34px;
  text-align: center;
}

/* Слайдеры (перемотка и громкость) */
.music-player__seek,
.music-player__volume {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  cursor: pointer;
  outline: none;
}
.music-player__seek {
  flex: 1 1 auto;
  min-width: 60px;
  background: linear-gradient(to right,
    var(--accent) 0%, var(--accent) var(--nd-seek, 0%),
    color-mix(in srgb, var(--text-dim) 35%, transparent) var(--nd-seek, 0%));
}
.music-player__volume {
  flex: 0 0 72px;
  background: color-mix(in srgb, var(--text-dim) 35%, transparent);
}
.music-player__seek::-webkit-slider-thumb,
.music-player__volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.music-player__seek::-moz-range-thumb,
.music-player__volume::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
}

.music-player__volume-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.music-player__volume-btn:hover { color: var(--text); }
.music-player__volume-btn.is-muted { color: #f87171; }
.music-player__volume-btn svg { width: 18px; height: 18px; }

.music-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.music-task__spinner {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: musicSpin 0.8s linear infinite;
}
.music-task__text { flex: 1 1 auto; font-size: 12.5px; color: var(--text); }
@keyframes musicSpin { to { transform: rotate(360deg); } }

.music-empty, .music-note { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.music-error {
  margin: 0;
  font-size: 12.5px;
  color: #fca5a5;
  padding: 8px 10px;
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 8px;
  background: rgba(248, 113, 113, 0.08);
}

/* Селекторы в финальном тексте имеют приоритет над панелью. */

/* --- Админ-подвкладка «Music API» --- */
.admin-music-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 14px);
  background: var(--glass-1);
}
.admin-music-hero.is-ok {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.admin-music-hero__dot {
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #f87171;
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.18);
}
.admin-music-hero__dot.is-on {
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
}
.admin-music-hero__text { display: flex; flex-direction: column; gap: 2px; }
.admin-music-hero__sub { font-size: 12px; color: var(--text-dim); }

/* Стоимость генерации: цены операций Music API (₽) */
.admin-music-pricing {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 14px);
  background: var(--glass-1);
}
.admin-music-pricing__head { margin-bottom: 12px; }
.admin-music-pricing__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.admin-music-pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* --- Адаптив --- */
@media (max-width: 900px) {
  .music-col--tools { flex: 1 1 58%; }
  .music-col--chat { flex: 0 0 42%; min-width: 220px; }
}
@media (max-width: 700px) {
  .music-split { flex-direction: column; }
  /* Вертикальная раскладка: горизонтальные перегородки не нужны, а заданные
     перетаскиванием ширины сбрасываем (иначе панели зафиксируются). */
  .music-splitter { display: none; }
  .music-col--tools { flex: 1 1 auto !important; min-height: 52%; }
  .music-col--chat {
    flex: 1 1 auto !important;
    min-height: 42%;
    border-top: 1px solid var(--border);
  }
  .music-rail {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 6px;
    padding: 8px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .music-rail__tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 12px;
    min-height: 42px;
  }
  .music-col--tools { flex-direction: column; }
  .music-panel { padding: 12px; }
  /* Эквалайзер на узких экранах скрываем — экономим место. */
  .music-player__eq { display: none; }
}
@media (max-width: 400px) {
  .music-track__actions { gap: 6px; }
  .music-btn { padding: 8px 12px; }
}

/* ============================================================
   Оптимизация прокрутки модулей
   ------------------------------------------------------------
   У каждого модуля внутри окна есть собственный скролл-контейнер
   (списки задач, ссылок, RSS, файлов, заметок и т. п.). По умолчанию
   браузер считает прокрутку любого из них изменением, влияющим на всю
   страницу, и пересчитывает раскладку всех открытых окон — именно это
   даёт подтормаживание при скролле. Возвращаем контейнерам
   изолированный слой отрисовки: их прокрутка больше не дёргает
   остальную рабочую область.
   ============================================================ */
.module-body,
.module-body--code,
.module-shadow,
.module-modal__body,
.messages,
.chat-window__body,
.tasks__list,
.hab__list, .ex__list,
.lnk__list,
.rss__list,
.ip__box,
.tr__history,
.pr__list,
.rx__out,
.df__out,
.nm__list, .nm__out,
.tip__out, .loan__out, .pc__out, .dc__out,
.bh__out, .cu__out, .ct__out,
.pal__grid,
.md__out,
.csv__wrap,
.fp__preview,
.em__grid,
.kb__wrap, .kb__list,
.file-preview__body,
.file-edit__body,
.settings-panel__body,
.admin-card__body {
  /* Изоляция: перерисовка при прокрутке не выходит за границы контейнера
     и не запускает пересчёт раскладки соседних окон. */
  contain: layout paint style;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Плавный отклик прокрутки на тач-устройствах без «догоняющей» анимации. */
.module-body, .messages, .module-modal__body, .file-preview__body {
  scroll-behavior: auto;
}

/* Бесконечные декоративные анимации (эквалайзер, «живые» индикаторы)
   не должны крутиться у скрытых и свёрнутых элементов — их кадры
   отнимают время у композитора при прокрутке. */
.app-window.is-minimized *,
.app-window[data-state="closed"] *,
.hidden * {
  animation-play-state: paused !important;
}

/* Системная настройка «уменьшить движение»: полностью гасим декоративные
   бесконечные анимации, оставляя интерфейс рабочим. */
@media (prefers-reduced-motion: reduce) {
  .status-dot,
  .app-window::before,
  .bottom-nav::before,
  .blob {
    animation: none !important;
  }
}

/* Режим прокрутки: пока пользователь крутит содержимое (класс вешает app.js
   на время жеста), пульсации и бегущие подсветки встают на паузу. Кадры
   композитора целиком уходят на сдвиг слоя прокрутки — скролл гладкий.
   Через animation-play-state (а не none) анимации просто замирают и
   продолжают с того же места, без рывка. */
:root.is-scrolling .status-dot,
:root.is-scrolling .app-window::before,
:root.is-scrolling .bottom-nav::before,
:root.is-scrolling .icon-btn.ai-edit-btn.is-pulsing,
:root.is-scrolling .module-empty,
:root.is-scrolling .typing b,
:root.is-scrolling .ld__badge {
  animation-play-state: paused !important;
}