/* ============================================================
   KARTLIFT — Ночная тема (theme-dark.css)
   ------------------------------------------------------------
   Активируется атрибутом data-theme="dark" на <html>.
   Inline-скрипт в <head> ставит атрибут до рендера → нет FOUC.

   Палитра (контраст проверен на bg-base #0b0d12):
     text-primary   #e7ebf3  →  ~13:1   (AAA для любого размера)
     text-secondary #a8b1c4  →  ~7.5:1  (AAA)
     text-muted     #8b94a8  →  ~5.4:1  (AA)
     ❌ #64748B (slate-500) НЕ используем — провал контраста.

   Принцип: переопределяем только видимые Tailwind utility-классы,
   которые реально встречаются в HTML. Акцентные кнопки
   (orange/purple gradient) не трогаем — они ярко контрастны.
   ============================================================ */

:root[data-theme="dark"] {
  --kl-bg-base:       #0b0d12;   /* главный фон страницы */
  --kl-bg-surface:    #161a23;   /* карточки, header */
  --kl-bg-surface-2:  #1f2530;   /* поля ввода, hover */
  --kl-bg-surface-3:  #2a3142;   /* выделенные плашки */
  --kl-border:        #2a3142;   /* границы */
  --kl-border-strong: #3a4155;   /* акцентные границы */
  --kl-text:          #e7ebf3;   /* основной текст */
  --kl-text-soft:     #a8b1c4;   /* вторичный (≥14px) */
  --kl-text-muted:    #8b94a8;   /* подписи (только ≥12px) */
  --kl-accent-orange: #ff8f33;   /* +яркость, читабельно на тёмном */
  --kl-accent-purple: #a78bfa;
  --kl-success:       #34d399;
  --kl-warn:          #fbbf24;
  --kl-danger:        #f87171;

  color-scheme: dark;
}

/* ─── BODY / GLOBAL ───────────────────────────────────────── */
[data-theme="dark"] body {
  background-color: var(--kl-bg-base) !important;
  color: var(--kl-text) !important;
}

/* ─── BACKGROUNDS ─────────────────────────────────────────── */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-white\/95,
[data-theme="dark"] .bg-white\/90,
[data-theme="dark"] .bg-white\/80,
[data-theme="dark"] .bg-white\/70,
[data-theme="dark"] .bg-white\/60,
[data-theme="dark"] .bg-white\/50,
[data-theme="dark"] .bg-white\/40,
[data-theme="dark"] .bg-white\/30,
[data-theme="dark"] .bg-white\/20,
[data-theme="dark"] .bg-white\/10 { background-color: var(--kl-bg-surface) !important; }

[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-neutral-50  { background-color: var(--kl-bg-base) !important; }

[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] .bg-gray-100    { background-color: var(--kl-bg-surface-2) !important; }

[data-theme="dark"] .bg-slate-200,
[data-theme="dark"] .bg-gray-200    { background-color: var(--kl-bg-surface-3) !important; }

[data-theme="dark"] .bg-slate-800,
[data-theme="dark"] .bg-slate-900,
[data-theme="dark"] .bg-gray-900    { background-color: #050709 !important; }

/* Цветные «soft» плашки → тёмные с лёгким оттенком, читаемый текст */
[data-theme="dark"] .bg-orange-50   { background-color: rgba(255,143,51,0.12) !important; }
[data-theme="dark"] .bg-orange-100  { background-color: rgba(255,143,51,0.18) !important; }
[data-theme="dark"] .bg-purple-50   { background-color: rgba(167,139,250,0.10) !important; }
[data-theme="dark"] .bg-purple-100  { background-color: rgba(167,139,250,0.16) !important; }
[data-theme="dark"] .bg-pink-50,
[data-theme="dark"] .bg-pink-100    { background-color: rgba(236,72,153,0.14) !important; }
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-blue-100    { background-color: rgba(59,130,246,0.14) !important; }
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-green-100   { background-color: rgba(52,211,153,0.14) !important; }
[data-theme="dark"] .bg-yellow-50,
[data-theme="dark"] .bg-yellow-100  { background-color: rgba(251,191,36,0.14) !important; }
[data-theme="dark"] .bg-amber-50,
[data-theme="dark"] .bg-amber-100,
[data-theme="dark"] .bg-amber-200   { background-color: rgba(245,158,11,0.14) !important; }
[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .bg-red-100     { background-color: rgba(248,113,113,0.14) !important; }

/* Градиенты — все *-50/100 пары, оба порядка (from↔to). Покрывает Hero-плашки лендинга,
   «AI-заполнить за меня» (purple→orange), реф-блоки, и пр. */
[data-theme="dark"] .from-orange-50, [data-theme="dark"] .to-orange-50,
[data-theme="dark"] .via-orange-50  { --tw-gradient-from: rgba(255,143,51,0.10) !important; --tw-gradient-via: rgba(255,143,51,0.10) !important; --tw-gradient-to: rgba(255,143,51,0.10) !important; }
[data-theme="dark"] .from-orange-100,[data-theme="dark"] .to-orange-100,
[data-theme="dark"] .via-orange-100 { --tw-gradient-from: rgba(255,143,51,0.18) !important; --tw-gradient-via: rgba(255,143,51,0.18) !important; --tw-gradient-to: rgba(255,143,51,0.18) !important; }
[data-theme="dark"] .from-purple-50, [data-theme="dark"] .to-purple-50,
[data-theme="dark"] .via-purple-50  { --tw-gradient-from: rgba(167,139,250,0.10) !important; --tw-gradient-via: rgba(167,139,250,0.10) !important; --tw-gradient-to: rgba(167,139,250,0.10) !important; }
[data-theme="dark"] .from-purple-100,[data-theme="dark"] .to-purple-100,
[data-theme="dark"] .via-purple-100 { --tw-gradient-from: rgba(167,139,250,0.18) !important; --tw-gradient-via: rgba(167,139,250,0.18) !important; --tw-gradient-to: rgba(167,139,250,0.18) !important; }
[data-theme="dark"] .from-pink-50,   [data-theme="dark"] .to-pink-50,
[data-theme="dark"] .via-pink-50    { --tw-gradient-from: rgba(236,72,153,0.12) !important; --tw-gradient-via: rgba(236,72,153,0.12) !important; --tw-gradient-to: rgba(236,72,153,0.12) !important; }
[data-theme="dark"] .from-pink-100,  [data-theme="dark"] .to-pink-100,
[data-theme="dark"] .via-pink-100   { --tw-gradient-from: rgba(236,72,153,0.18) !important; --tw-gradient-via: rgba(236,72,153,0.18) !important; --tw-gradient-to: rgba(236,72,153,0.18) !important; }
[data-theme="dark"] .from-blue-50,   [data-theme="dark"] .to-blue-50,
[data-theme="dark"] .via-blue-50    { --tw-gradient-from: rgba(59,130,246,0.12) !important; --tw-gradient-via: rgba(59,130,246,0.12) !important; --tw-gradient-to: rgba(59,130,246,0.12) !important; }
[data-theme="dark"] .from-blue-100,  [data-theme="dark"] .to-blue-100,
[data-theme="dark"] .via-blue-100   { --tw-gradient-from: rgba(59,130,246,0.18) !important; --tw-gradient-via: rgba(59,130,246,0.18) !important; --tw-gradient-to: rgba(59,130,246,0.18) !important; }
[data-theme="dark"] .from-green-50,  [data-theme="dark"] .to-green-50,
[data-theme="dark"] .via-green-50   { --tw-gradient-from: rgba(52,211,153,0.12) !important; --tw-gradient-via: rgba(52,211,153,0.12) !important; --tw-gradient-to: rgba(52,211,153,0.12) !important; }
[data-theme="dark"] .from-yellow-50, [data-theme="dark"] .to-yellow-50,
[data-theme="dark"] .via-yellow-50  { --tw-gradient-from: rgba(251,191,36,0.12) !important; --tw-gradient-via: rgba(251,191,36,0.12) !important; --tw-gradient-to: rgba(251,191,36,0.12) !important; }
[data-theme="dark"] .from-white,     [data-theme="dark"] .to-white,
[data-theme="dark"] .via-white      { --tw-gradient-from: var(--kl-bg-base) !important; --tw-gradient-via: var(--kl-bg-base) !important; --tw-gradient-to: var(--kl-bg-base) !important; }

/* ─── TEXT COLORS ─────────────────────────────────────────── */
[data-theme="dark"] .text-brand-dark,
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-black     { color: var(--kl-text) !important; }

[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700  { color: #d6dceb !important; }

[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-gray-600  { color: var(--kl-text-soft) !important; }

[data-theme="dark"] .text-brand-gray,
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-gray-500  { color: var(--kl-text-soft) !important; } /* было #64748B → подняли на ~+30% яркости */

[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-gray-400  { color: var(--kl-text-muted) !important; }

[data-theme="dark"] .text-slate-300,
[data-theme="dark"] .text-gray-300  { color: var(--kl-text-muted) !important; }

/* Цветные акценты — поднимаем яркость для тёмного фона */
[data-theme="dark"] .text-purple-700,
[data-theme="dark"] .text-purple-800,
[data-theme="dark"] .text-purple-900 { color: #c4b5fd !important; }
[data-theme="dark"] .text-purple-600 { color: var(--kl-accent-purple) !important; }
[data-theme="dark"] .text-orange-700,
[data-theme="dark"] .text-orange-800 { color: #ffb273 !important; }
[data-theme="dark"] .text-orange-600,
[data-theme="dark"] .text-brand-orange-dark { color: var(--kl-accent-orange) !important; }
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-800   { color: #93c5fd !important; }
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-800  { color: #6ee7b7 !important; }
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800    { color: #fca5a5 !important; }
[data-theme="dark"] .text-yellow-700,
[data-theme="dark"] .text-yellow-800 { color: #fcd34d !important; }

/* ─── BORDERS ─────────────────────────────────────────────── */
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200 { border-color: var(--kl-border) !important; }

[data-theme="dark"] .border-slate-300,
[data-theme="dark"] .border-slate-400 { border-color: var(--kl-border-strong) !important; }

[data-theme="dark"] .border-white       { border-color: var(--kl-border) !important; }

[data-theme="dark"] .border-purple-200,
[data-theme="dark"] .border-purple-300 { border-color: rgba(167,139,250,0.35) !important; }
[data-theme="dark"] .border-orange-200,
[data-theme="dark"] .border-orange-300 { border-color: rgba(255,143,51,0.35) !important; }
[data-theme="dark"] .border-pink-200,
[data-theme="dark"] .border-pink-300   { border-color: rgba(236,72,153,0.35) !important; }
[data-theme="dark"] .border-blue-200,
[data-theme="dark"] .border-blue-300   { border-color: rgba(59,130,246,0.35) !important; }
[data-theme="dark"] .border-green-200,
[data-theme="dark"] .border-green-300  { border-color: rgba(52,211,153,0.35) !important; }
[data-theme="dark"] .border-red-200,
[data-theme="dark"] .border-red-300    { border-color: rgba(248,113,113,0.35) !important; }

/* divide-* (между пунктами списков и т.п.) */
[data-theme="dark"] .divide-slate-100 > * + *,
[data-theme="dark"] .divide-slate-200 > * + * { border-color: var(--kl-border) !important; }

/* ─── INPUTS / TEXTAREA / SELECT ──────────────────────────── */
/* input:not([type]) — браузер считает text, но селектор [type="text"] его не ловит,
   если атрибут type явно не указан в HTML. Распространённый кейс — readonly-инпуты
   типа реф-ссылки на дашборде. */
[data-theme="dark"] input:not([type]),
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--kl-bg-surface-2) !important;
  border-color: var(--kl-border) !important;
  color: var(--kl-text) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--kl-text-muted) !important; opacity: 1; }

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--kl-accent-orange) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,143,51,0.25) !important;
}

/* Disabled */
[data-theme="dark"] input:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] button:disabled { opacity: 0.55; }

/* ─── SHADOWS ─────────────────────────────────────────────── */
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xl,
[data-theme="dark"] .shadow-2xl { box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6), 0 2px 6px -2px rgba(0,0,0,0.4) !important; }

/* ─── HOVER STATES ────────────────────────────────────────── */
[data-theme="dark"] .hover\:bg-slate-50:hover,
[data-theme="dark"] .hover\:bg-gray-50:hover     { background-color: var(--kl-bg-surface-2) !important; }
[data-theme="dark"] .hover\:bg-slate-100:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover    { background-color: var(--kl-bg-surface-3) !important; }
[data-theme="dark"] .hover\:bg-orange-50:hover   { background-color: rgba(255,143,51,0.20) !important; }
[data-theme="dark"] .hover\:bg-purple-50:hover,
[data-theme="dark"] .hover\:bg-purple-100:hover  { background-color: rgba(167,139,250,0.22) !important; }
[data-theme="dark"] .hover\:text-brand-dark:hover { color: var(--kl-text) !important; }

/* ─── HEADER / NAV (sticky) ───────────────────────────────── */
[data-theme="dark"] header { background-color: rgba(22,26,35,0.92) !important; backdrop-filter: blur(8px); }
[data-theme="dark"] header.bg-white,
[data-theme="dark"] header.bg-white\/95 { background-color: rgba(22,26,35,0.92) !important; }

/* ─── PHOTO MODAL / OVERLAYS ──────────────────────────────── */
[data-theme="dark"] .bg-black\/50,
[data-theme="dark"] .bg-black\/60,
[data-theme="dark"] .bg-black\/70,
[data-theme="dark"] .bg-black\/80 { background-color: rgba(0,0,0,0.82) !important; }

/* ─── CHECKBOX / RADIO ────────────────────────────────────── */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] { accent-color: var(--kl-accent-orange); }

/* ─── SCROLLBAR (хром-подобные) ───────────────────────────── */
[data-theme="dark"] *::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"] *::-webkit-scrollbar-track { background: var(--kl-bg-base); }
[data-theme="dark"] *::-webkit-scrollbar-thumb { background: var(--kl-bg-surface-3); border-radius: 8px; }
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: var(--kl-border-strong); }

/* ─── TOGGLE BUTTON (☀/🌙) ─────────────────────────────────── */
.kl-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-size: 16px;
  line-height: 1;
  color: #0F172A;
  user-select: none;
}
.kl-theme-toggle:hover { background: #f8fafc; }
[data-theme="dark"] .kl-theme-toggle {
  background: var(--kl-bg-surface-2);
  border-color: var(--kl-border);
  color: var(--kl-text);
}
[data-theme="dark"] .kl-theme-toggle:hover { background: var(--kl-bg-surface-3); }

/* Skeleton loaders, если есть */
[data-theme="dark"] .animate-pulse > * { background-color: var(--kl-bg-surface-2) !important; }

/* Brand-orange / brand-purple фоны кнопок не трогаем — они контрастные */

/* ─── PATCHES для inline <style> внутри страниц ───────────────
   Эти стили объявлены непосредственно в HTML после нашего <link>
   → перебивают тему по правилу каскада (равная специфичность,
   но позже в DOM). Поэтому здесь явные override.
   ─────────────────────────────────────────────────────────── */

/* dashboard.html — топ-бар статистики (баланс / создано / куплено) */
[data-theme="dark"] .stat-num     { color: var(--kl-text) !important; }
[data-theme="dark"] .stat-divider { background: var(--kl-border) !important; }
[data-theme="dark"] .module-card:hover { box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6) !important; }

/* generate.html / adult.html — drop-zone и hover-плашки в светло-оранжевый */
[data-theme="dark"] .drop-zone               { background: var(--kl-bg-surface) !important; border-color: var(--kl-border) !important; }
[data-theme="dark"] .drop-zone:hover,
[data-theme="dark"] .drop-zone.drag          { background: rgba(255,143,51,0.12) !important; border-color: var(--kl-accent-orange) !important; }
[data-theme="dark"] .scene-card.active,
[data-theme="dark"] .style-card.active,
[data-theme="dark"] .layout-card.active,
[data-theme="dark"] .aspect-btn.active,
[data-theme="dark"] .quality-btn.active      { background: rgba(255,143,51,0.14) !important; border-color: var(--kl-accent-orange) !important; }
[data-theme="dark"] .check-mark:hover        { background: rgba(255,143,51,0.18) !important; border-color: var(--kl-accent-orange) !important; }
[data-theme="dark"] .bank-card.selected      { border-color: var(--kl-accent-orange) !important; box-shadow: 0 0 0 3px rgba(255,143,51,0.25) !important; }
[data-theme="dark"] .step-locked > .step-lock-overlay { background: linear-gradient(180deg, rgba(11,13,18,0.55), rgba(11,13,18,0.85)) !important; }
[data-theme="dark"] .step-lock-overlay .pill { background: var(--kl-bg-surface) !important; color: var(--kl-accent-orange) !important; border-color: var(--kl-accent-orange) !important; }