/* ============================================================================
   Help me — общий слой темы: светлая / тёмная (liquid glass, в стиле iOS).
   Подключается на всех страницах кабинета. Тёмная тема ремапит уже
   использованные Tailwind-утилиты через [data-theme="dark"] (выше по
   специфичности, чем одиночный класс — !important не нужен).
   Палитра и моушн синтезированы из скилов impeccable / emil / taste.
   ============================================================================ */

:root {
  /* — нейтрали (светлая) — */
  --bg: #F5F6F7;
  --bg-tint: #F7F8F8;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --ink: #0E1512;
  --ink-soft: #2B3530;
  --ink-muted: #4C5B54;
  --ink-faint: #6B7A72;
  --border: rgba(14, 21, 18, 0.10);
  --border-strong: rgba(14, 21, 18, 0.16);
  --border-glass: rgba(255, 255, 255, 0.6);
  /* — акцент (бренд-зелёный, в обеих темах) — */
  --accent: #10B24A;
  --accent-hover: #0E9F42;
  --accent-ink: #FFFFFF;
  --accent-tint: rgba(16, 178, 74, 0.10);
  --accent-tint-strong: rgba(16, 178, 74, 0.16);
  --on-tint: #0A6E2E;
  --ring: rgba(16, 178, 74, 0.45);
  /* — тени — */
  --shadow-sm: 0 1px 2px rgba(14, 21, 18, 0.06);
  --shadow-md: 0 1px 2px rgba(14, 21, 18, 0.05), 0 8px 24px rgba(14, 21, 18, 0.08);
  --shadow-lg: 0 4px 8px rgba(14, 21, 18, 0.06), 0 18px 40px rgba(14, 21, 18, 0.12);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  /* — стекло — */
  --glass-blur: blur(20px) saturate(180%);
  /* — статусные оттенки (фон-плашки / текст) — */
  --s-red-bg: rgba(229, 57, 53, 0.10);   --s-red-ink: #B42318;  --s-red-strong: #E53935;
  --s-amber-bg: rgba(199, 123, 18, 0.12); --s-amber-ink: #9A5B00; --s-amber-strong: #E0A23A;
  --s-green-bg: rgba(16, 178, 74, 0.12);  --s-green-ink: #0A6E2E; --s-green-strong: #10B24A;
  --s-blue-bg: rgba(37, 99, 201, 0.10);   --s-blue-ink: #1E4FA3;  --s-blue-strong: #2563C9;
  --s-violet-bg: rgba(124, 92, 224, 0.12);--s-violet-ink: #5B45B0;--s-violet-strong: #8A6BF0;
  --s-slate-bg: rgba(51, 65, 85, 0.12);   --s-slate-ink: #334155; --s-slate-strong: #64748B;
}

:root[data-theme="dark"] {
  /* Нейтральная чёрная база (без зелёного тинта). Зелёный — только акцент. */
  --bg: #08090B;
  --bg-tint: #08090B;
  /* Карточки — жидкое стекло (полупрозрачная подложка + блюр в правилах ниже). */
  --surface: rgba(255, 255, 255, 0.055);
  --surface-2: rgba(255, 255, 255, 0.085);
  --surface-solid: #15171C;
  --glass-bg: rgba(18, 20, 25, 0.55);
  --glass-bg-strong: rgba(20, 22, 28, 0.66);
  --ink: rgba(255, 255, 255, 0.94);
  --ink-soft: rgba(255, 255, 255, 0.80);
  --ink-muted: rgba(255, 255, 255, 0.56);
  --ink-faint: rgba(255, 255, 255, 0.38);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-glass: rgba(255, 255, 255, 0.16);
  /* Яркий зелёный как в логотипе — акценты. */
  --accent: #10B24A;
  --accent-bright: #2EE06A;
  --accent-hover: #16C658;
  --accent-ink: #04140A;
  --accent-tint: rgba(46, 224, 106, 0.14);
  --accent-tint-strong: rgba(46, 224, 106, 0.22);
  --on-tint: #5EE489;
  --ring: rgba(46, 224, 106, 0.50);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 38px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-lg: 0 8px 22px rgba(0, 0, 0, 0.55), 0 30px 64px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* Статусы на чёрном (нейтральнее, чем раньше) */
  --s-red-bg: rgba(255, 107, 102, 0.15);   --s-red-ink: #FF9C98;  --s-red-strong: #FF6B66;
  --s-amber-bg: rgba(224, 162, 58, 0.16);   --s-amber-ink: #F2C57C; --s-amber-strong: #E0A23A;
  --s-green-bg: rgba(46, 224, 106, 0.15);   --s-green-ink: #5EE489; --s-green-strong: #10B24A;
  --s-blue-bg: rgba(91, 155, 255, 0.15);    --s-blue-ink: #9CC0FF;  --s-blue-strong: #5B9BFF;
  --s-violet-bg: rgba(168, 139, 250, 0.16); --s-violet-ink: #C9B6FF;--s-violet-strong: #A88BFA;
  --s-slate-bg: rgba(148, 163, 184, 0.16);  --s-slate-ink: #C3CDDA; --s-slate-strong: #94A3B8;
}

/* Дефолт по системе, если пользователь ещё не выбрал (inline-бутстрап ставит data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

/* ================== Базовый фон / типографика ================== */
:root[data-theme="dark"] body { background-color: var(--bg); color: var(--ink); }
:root[data-theme="dark"] body::before {
  /* Глубина чёрного: лёгкий верхний блик (для стекла) + еле заметный зелёный угол. */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80rem 56rem at 50% -28%, rgba(255, 255, 255, 0.035), transparent 60%),
    radial-gradient(44rem 30rem at 104% -6%, rgba(46, 224, 106, 0.055), transparent 55%);
}

/* ================== Тёмный ремап нейтралей ================== */
/* Карточки/панели — жидкое стекло: полупрозрачная подложка + блюр + кромка. */
:root[data-theme="dark"] .bg-white {
  background-color: var(--surface);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--border);
}
:root[data-theme="dark"] .hover\:bg-white:hover,
:root[data-theme="dark"] .focus\:bg-white:focus { background-color: var(--surface-2); }
:root[data-theme="dark"] .bg-white\/80,
:root[data-theme="dark"] .bg-white\/90,
:root[data-theme="dark"] .bg-white\/95,
:root[data-theme="dark"] .hover\:bg-white\/80:hover { background-color: var(--glass-bg-strong); }
:root[data-theme="dark"] .bg-brand-light,
:root[data-theme="dark"] .bg-brand-light\/30,
:root[data-theme="dark"] .bg-brand-light\/40,
:root[data-theme="dark"] .bg-\[\#F5F6F7\] { background-color: var(--bg); }
:root[data-theme="dark"] .bg-gray-50,
:root[data-theme="dark"] .bg-gray-50\/50,
:root[data-theme="dark"] .bg-gray-50\/60,
:root[data-theme="dark"] .bg-gray-50\/70,
:root[data-theme="dark"] .bg-gray-50\/90 { background-color: rgba(255, 255, 255, 0.03); }
:root[data-theme="dark"] .bg-gray-100,
:root[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: rgba(255, 255, 255, 0.06); }
:root[data-theme="dark"] .hover\:bg-gray-50:hover,
:root[data-theme="dark"] .hover\:bg-gray-50\/40:hover { background-color: rgba(255, 255, 255, 0.05); }
:root[data-theme="dark"] .bg-gray-200 { background-color: rgba(255, 255, 255, 0.10); }
:root[data-theme="dark"] .bg-gray-300,
:root[data-theme="dark"] .bg-gray-300\/70,
:root[data-theme="dark"] .bg-gray-400 { background-color: rgba(255, 255, 255, 0.18); }

/* Текст */
:root[data-theme="dark"] .text-gray-900,
:root[data-theme="dark"] .text-gray-800,
:root[data-theme="dark"] .text-slate-900,
:root[data-theme="dark"] .text-slate-800,
:root[data-theme="dark"] .text-brand-dark,
:root[data-theme="dark"] .text-\[\#2B1208\] { color: var(--ink); }
:root[data-theme="dark"] .text-gray-700,
:root[data-theme="dark"] .hover\:text-gray-700:hover { color: var(--ink-soft); }
:root[data-theme="dark"] .text-gray-600,
:root[data-theme="dark"] .text-gray-500,
:root[data-theme="dark"] .hover\:text-gray-600:hover { color: var(--ink-muted); }
:root[data-theme="dark"] .text-gray-400,
:root[data-theme="dark"] .text-gray-300 { color: var(--ink-faint); }
:root[data-theme="dark"] .placeholder\:text-gray-400::placeholder,
:root[data-theme="dark"] .placeholder-gray-400::placeholder { color: var(--ink-faint); }
:root[data-theme="dark"] .hover\:text-brand-dark:hover { color: var(--ink); }

/* Бордеры / кольца нейтральные */
:root[data-theme="dark"] .border-gray-100,
:root[data-theme="dark"] .border-gray-200,
:root[data-theme="dark"] .border-gray-300,
:root[data-theme="dark"] .after\:border-gray-300::after,
:root[data-theme="dark"] .border-white\/90 { border-color: var(--border); }
:root[data-theme="dark"] .hover\:border-gray-200:hover,
:root[data-theme="dark"] .hover\:border-gray-300:hover { border-color: var(--border-strong); }
:root[data-theme="dark"] .ring-gray-200,
:root[data-theme="dark"] .ring-gray-200\/70,
:root[data-theme="dark"] .ring-gray-200\/80,
:root[data-theme="dark"] .ring-gray-400\/50 { --tw-ring-color: var(--border); }

/* Тени — глубже на тёмном */
:root[data-theme="dark"] .shadow-sm,
:root[data-theme="dark"] .lg\:shadow-sm { box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .shadow-md { box-shadow: var(--shadow-md); }
:root[data-theme="dark"] .shadow-lg,
:root[data-theme="dark"] .shadow-xl { box-shadow: var(--shadow-lg); }
:root[data-theme="dark"] .hover\:shadow-md:hover { box-shadow: var(--shadow-md); }
:root[data-theme="dark"] .hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }

/* Градиентные стопы (бело-серые) → тёмные */
:root[data-theme="dark"] .from-white,
:root[data-theme="dark"] .from-gray-50 { --tw-gradient-from: var(--surface) var(--tw-gradient-from-position); }
:root[data-theme="dark"] .via-white { --tw-gradient-via: var(--surface-2); }
:root[data-theme="dark"] .to-white,
:root[data-theme="dark"] .to-gray-100,
:root[data-theme="dark"] .to-gray-100\/50 { --tw-gradient-to: var(--surface-2) var(--tw-gradient-to-position); }

/* ================== Акцент (зелёный) ================== */
:root[data-theme="dark"] .bg-brand-green { background-color: var(--accent); }
:root[data-theme="dark"] .hover\:bg-brand-green\/90:hover,
:root[data-theme="dark"] .peer-checked\:bg-brand-green { background-color: var(--accent); }
:root[data-theme="dark"] .text-brand-green,
:root[data-theme="dark"] .hover\:text-brand-green:hover,
:root[data-theme="dark"] .group-hover\:text-brand-green,
:root[data-theme="dark"] .marker\:text-brand-green { color: var(--accent); }
:root[data-theme="dark"] .text-\[\#10B24A\] { color: var(--accent); }
:root[data-theme="dark"] .bg-brand-green\/5,
:root[data-theme="dark"] .hover\:bg-brand-green\/5:hover { background-color: var(--accent-tint); }
:root[data-theme="dark"] .bg-brand-green\/10,
:root[data-theme="dark"] .bg-brand-green\/15,
:root[data-theme="dark"] .hover\:bg-brand-green\/10:hover,
:root[data-theme="dark"] .group-hover\:bg-brand-green\/10 { background-color: var(--accent-tint-strong); }
:root[data-theme="dark"] .border-brand-green { border-color: var(--accent); }
:root[data-theme="dark"] .border-brand-green\/20,
:root[data-theme="dark"] .border-brand-green\/30,
:root[data-theme="dark"] .border-brand-green\/40,
:root[data-theme="dark"] .border-brand-green\/50 { border-color: rgba(31, 203, 92, 0.4); }
/* «зелёный текст на зелёной плашке» — не серый */
:root[data-theme="dark"] .bg-brand-green\/10.text-brand-green,
:root[data-theme="dark"] .bg-brand-green\/5.text-brand-green { color: var(--on-tint); }

/* ================== Статусные плашки (hue → токен) ================== */
/* красный / rose */
:root[data-theme="dark"] .bg-red-50, :root[data-theme="dark"] .bg-red-100,
:root[data-theme="dark"] .hover\:bg-red-50:hover, :root[data-theme="dark"] .hover\:bg-red-50\/40:hover,
:root[data-theme="dark"] .hover\:bg-red-100\/80:hover { background-color: var(--s-red-bg); }
:root[data-theme="dark"] .text-red-600, :root[data-theme="dark"] .text-red-900, :root[data-theme="dark"] .text-red-950,
:root[data-theme="dark"] .text-red-400, :root[data-theme="dark"] .text-rose-500,
:root[data-theme="dark"] .hover\:text-red-600:hover, :root[data-theme="dark"] .hover\:text-red-500:hover { color: var(--s-red-ink); }
:root[data-theme="dark"] .bg-red-500, :root[data-theme="dark"] .bg-red-600,
:root[data-theme="dark"] .hover\:bg-red-600:hover, :root[data-theme="dark"] .bg-rose-400\/80 { background-color: var(--s-red-strong); color: #2A0A08; }
:root[data-theme="dark"] .border-red-200, :root[data-theme="dark"] .border-red-400, :root[data-theme="dark"] .border-red-500,
:root[data-theme="dark"] .hover\:border-red-300:hover { border-color: rgba(255, 107, 102, 0.45); }
/* янтарь */
:root[data-theme="dark"] .bg-amber-50, :root[data-theme="dark"] .bg-amber-50\/40, :root[data-theme="dark"] .bg-amber-100,
:root[data-theme="dark"] .hover\:bg-amber-100:hover, :root[data-theme="dark"] .hover\:bg-amber-100\/80:hover { background-color: var(--s-amber-bg); }
:root[data-theme="dark"] .text-amber-700, :root[data-theme="dark"] .text-amber-800, :root[data-theme="dark"] .text-amber-900, :root[data-theme="dark"] .text-amber-950 { color: var(--s-amber-ink); }
:root[data-theme="dark"] .bg-amber-500 { background-color: var(--s-amber-strong); color: #2A1A02; }
:root[data-theme="dark"] .border-amber-100, :root[data-theme="dark"] .border-amber-200, :root[data-theme="dark"] .border-amber-300, :root[data-theme="dark"] .border-amber-400, :root[data-theme="dark"] .border-amber-500 { border-color: rgba(224, 162, 58, 0.4); }
/* зелёный / emerald статус */
:root[data-theme="dark"] .bg-green-100, :root[data-theme="dark"] .bg-emerald-50, :root[data-theme="dark"] .bg-emerald-100,
:root[data-theme="dark"] .hover\:bg-emerald-100\/80:hover { background-color: var(--s-green-bg); }
:root[data-theme="dark"] .text-green-700, :root[data-theme="dark"] .text-green-800, :root[data-theme="dark"] .text-emerald-600, :root[data-theme="dark"] .text-emerald-800, :root[data-theme="dark"] .text-emerald-900, :root[data-theme="dark"] .text-emerald-950 { color: var(--s-green-ink); }
:root[data-theme="dark"] .bg-emerald-600 { background-color: var(--s-green-strong); color: #06210F; }
:root[data-theme="dark"] .border-emerald-400, :root[data-theme="dark"] .border-emerald-500 { border-color: rgba(31, 203, 92, 0.4); }
/* синий / sky */
:root[data-theme="dark"] .bg-blue-50, :root[data-theme="dark"] .bg-blue-100, :root[data-theme="dark"] .bg-sky-100,
:root[data-theme="dark"] .hover\:bg-blue-100\/80:hover { background-color: var(--s-blue-bg); }
:root[data-theme="dark"] .text-blue-400, :root[data-theme="dark"] .text-blue-700, :root[data-theme="dark"] .text-blue-800, :root[data-theme="dark"] .text-blue-900, :root[data-theme="dark"] .text-blue-950, :root[data-theme="dark"] .text-sky-700, :root[data-theme="dark"] .text-sky-800 { color: var(--s-blue-ink); }
:root[data-theme="dark"] .bg-blue-500, :root[data-theme="dark"] .bg-blue-600 { background-color: var(--s-blue-strong); color: #07142B; }
:root[data-theme="dark"] .border-blue-200, :root[data-theme="dark"] .border-blue-400, :root[data-theme="dark"] .border-blue-500 { border-color: rgba(91, 155, 255, 0.4); }
/* фиолет / purple */
:root[data-theme="dark"] .bg-violet-50, :root[data-theme="dark"] .bg-violet-50\/40, :root[data-theme="dark"] .bg-violet-100, :root[data-theme="dark"] .bg-purple-100,
:root[data-theme="dark"] .hover\:bg-violet-50:hover, :root[data-theme="dark"] .hover\:bg-violet-100\/90:hover { background-color: var(--s-violet-bg); }
:root[data-theme="dark"] .text-violet-700, :root[data-theme="dark"] .text-violet-800, :root[data-theme="dark"] .text-violet-900, :root[data-theme="dark"] .text-violet-950, :root[data-theme="dark"] .text-purple-800 { color: var(--s-violet-ink); }
:root[data-theme="dark"] .bg-violet-500, :root[data-theme="dark"] .bg-violet-600, :root[data-theme="dark"] .bg-purple-500 { background-color: var(--s-violet-strong); color: #160A2B; }
:root[data-theme="dark"] .border-violet-200, :root[data-theme="dark"] .border-violet-400, :root[data-theme="dark"] .border-violet-500 { border-color: rgba(168, 139, 250, 0.4); }
/* slate */
:root[data-theme="dark"] .bg-slate-100, :root[data-theme="dark"] .bg-slate-200,
:root[data-theme="dark"] .hover\:bg-slate-200\/90:hover { background-color: var(--s-slate-bg); }
:root[data-theme="dark"] .bg-slate-700 { background-color: var(--s-slate-strong); color: #0B1220; }
:root[data-theme="dark"] .border-slate-500, :root[data-theme="dark"] .border-slate-700 { border-color: rgba(148, 163, 184, 0.4); }

/* Тёмный ремап для 3 client-страниц на arbitrary-hex */
:root[data-theme="dark"] .bg-\[\#222222\] { background-color: var(--surface-2); }

/* ================== Liquid glass на «хроме» ================== */
/* Сайдбар, прилипающие шапки, плавающие бары, модалки — матовое стекло.
   Блюр только на фиксированных/плавающих поверхностях (перф). */
:root[data-theme="dark"] aside,
:root[data-theme="dark"] .bg-white\/80,
:root[data-theme="dark"] .bg-white\/90,
:root[data-theme="dark"] .bg-white\/95 {
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--border);
}
/* Модальные карточки (overlay .fixed.inset-0 → прямой потомок-карточка) */
:root[data-theme="dark"] .fixed.inset-0 > div,
:root[data-theme="dark"] [class*="z-[8"] > .bg-white,
:root[data-theme="dark"] [class*="z-[9"] > .bg-white {
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lg), var(--glass-inset);
}
/* Светлая тема: лёгкое стекло на прилипающих полупрозрачных барах */
.bg-white\/80, .bg-white\/90, .bg-white\/95 {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* Фолбэк без backdrop-filter — непрозрачные поверхности (контраст не зависит от блюра) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root[data-theme="dark"] aside,
  :root[data-theme="dark"] .bg-white\/80,
  :root[data-theme="dark"] .bg-white\/90,
  :root[data-theme="dark"] .bg-white\/95,
  :root[data-theme="dark"] .fixed.inset-0 > div { background-color: var(--surface); }
}

/* ================== Мобильный скролл (Android/Samsung) ================== */
/* Партнёрский кабинет — фикс-высота app-shell (lg:h-screen + lg:overflow-hidden):
   в режиме «версия для ПК» на телефоне (ширина ≥1024) окно не скроллится, а внутренний
   <main> часто залипает. На любых touch-устройствах принудительно скроллим body. */
@media (pointer: coarse) {
  .lg\:overflow-hidden { overflow: visible !important; }
  .lg\:h-screen { height: auto !important; }
  .lg\:max-h-screen { max-height: none !important; }
  .lg\:min-h-0 { min-height: 0 !important; }
  html, body { overflow-x: hidden; }
}

/* ============ Админка на мобиле: только нижнее меню (без верхнего бара) ============ */
@media (max-width: 1023px) {
  #admin-mobile-topbar { display: none !important; }
  #admin-main { padding-top: 1rem !important; padding-bottom: 5.5rem !important; }
}

/* ============ Мобильный канбан: стадии горизонтально, листать пальцем ============ */
@media (max-width: 767px) {
  #admin-clients-kanban-view > div,
  #admin-payments-kanban-view > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 0.5rem;
    padding-bottom: 0.5rem;
  }
  #admin-clients-kanban-view .clients-kanban-col,
  #admin-payments-kanban-view .payments-kanban-col {
    flex: 0 0 87% !important;
    scroll-snap-align: center;
  }
}

/* ================== Единые отступы навигации сайдбара ================== */
/* Разные кабинеты использовали px-4 py-3 / px-3 py-2 / text-sm vs base — рамки
   «скакали». Приводим пункты меню к одному ритму во всех контурах. */
aside nav a[href],
aside nav .admin-nav,
aside nav button[data-admin-section] {
  padding: 0.6rem 0.85rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.25 !important;
  gap: 0.7rem !important;
  border-radius: 0.75rem !important;
}
aside nav a[href] > svg,
aside nav .admin-nav > svg,
aside nav button[data-admin-section] > svg {
  width: 1.25rem !important; height: 1.25rem !important; flex-shrink: 0;
}

/* ================== Универсальная полировка (обе темы) ================== */
/* Тактильный отклик нажатия на любых кнопках/нав-элементах */
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):active,
  [role="button"]:not([aria-disabled="true"]):active,
  a[class*="rounded"]:active,
  .support-conv-item:active { transform: scale(0.97); }
}
button, [role="button"], a[class*="rounded-xl"], a[class*="rounded-lg"] {
  transition: transform 0.13s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
/* Кросс-фейд токенов только в момент переключения темы (класс ставит JS) */
:root.theme-anim,
:root.theme-anim body,
:root.theme-anim aside,
:root.theme-anim main,
:root.theme-anim section,
:root.theme-anim header,
:root.theme-anim a,
:root.theme-anim button,
:root.theme-anim input,
:root.theme-anim textarea,
:root.theme-anim select,
:root.theme-anim span,
:root.theme-anim div,
:root.theme-anim p,
:root.theme-anim h1, :root.theme-anim h2, :root.theme-anim h3 {
  transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease, fill 0.28s ease !important;
}

/* ================== Переключатель темы (инжектится JS) ================== */
#helpme-theme-toggle {
  position: fixed; left: 18px; bottom: 18px; z-index: 2147483000;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; cursor: pointer; color: var(--ink);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-md), var(--glass-inset);
  transition: transform 0.16s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease, background-color 0.2s ease;
}
#helpme-theme-toggle:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg), var(--glass-inset); }
#helpme-theme-toggle:active { transform: scale(0.94); }
#helpme-theme-toggle svg { width: 20px; height: 20px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease; }
#helpme-theme-toggle .ht-sun { display: none; }
#helpme-theme-toggle .ht-moon { display: block; }
:root[data-theme="dark"] #helpme-theme-toggle .ht-sun { display: block; }
:root[data-theme="dark"] #helpme-theme-toggle .ht-moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: 0.12s !important; animation-duration: 0.01ms !important; }
  button:not(:disabled):active, [role="button"]:active, .support-conv-item:active { transform: none !important; }
  #helpme-theme-toggle:hover { transform: none; }
}