/*
 * FINXO LK — Light Theme Variables
 * ==================================
 * Светлая тема для личного кабинета.
 * Переопределяет переменные из variables.css.
 *
 * Design: Clean Light Intelligence
 * Принципы:
 *   — Белый/светло-серый фон, не слепящий
 *   — Тёмный текст с хорошим контрастом
 *   — Акцентный синий (#2563eb) — тот же бренд Finxo
 *   — Карточки с лёгкой тенью вместо тёмных бордеров
 *   — Зелёный/красный для финансовых данных — насыщеннее
 */

:root {
  /* ============================================================
     BACKGROUNDS
  ============================================================ */
  --bg:           #f0f4f8;   /* основной фон страницы — тёплый светло-серый */
  --bg-panel:     #ffffff;   /* фон панелей / сайдбара — белый */
  --bg-card:      #ffffff;   /* фон карточек — белый */
  --bg-card-h:    #f8fafc;   /* фон карточки при hover */
  --bg-inner:     #f1f5f9;   /* фон внутренних секций */
  --bg-ticker:    #1e293b;   /* тикер оставляем тёмным — контраст с хедером */

  /* ============================================================
     BORDERS
  ============================================================ */
  --bd:           #e2e8f0;   /* основная граница */
  --bd-card:      #e2e8f0;   /* граница карточки */
  --bd-hover:     #cbd5e1;   /* граница при hover */

  /* ============================================================
     TEXT
  ============================================================ */
  --text-h:       #0f172a;   /* заголовки — почти чёрный */
  --text-b:       #334155;   /* основной текст — тёмно-серый */
  --text-m:       #64748b;   /* второстепенный текст — средний серый */
  --text-dim:     rgba(15, 23, 42, 0.4);   /* приглушённый */
  --text-dim2:    rgba(15, 23, 42, 0.6);   /* полупрозрачный */

  /* ============================================================
     ACCENT — BLUE (основной акцент)
     Насыщеннее чем в тёмной теме — лучше читается на белом
  ============================================================ */
  --blue:         #2563eb;
  --blue-h:       #1d4ed8;
  --blue-dim:     rgba(37, 99, 235, 0.08);
  --blue-bd:      rgba(37, 99, 235, 0.25);

  /* ============================================================
     ACCENT — CYAN (кредиты / hero)
  ============================================================ */
  --cyan:         #0284c7;   /* насыщенный синий-cyan для светлого фона */
  --cyan-dark:    #0369a1;
  --cyan-dim:     rgba(2, 132, 199, 0.07);
  --cyan-dim2:    rgba(2, 132, 199, 0.09);
  --cyan-dim3:    rgba(2, 132, 199, 0.11);
  --cyan-bd:      rgba(2, 132, 199, 0.2);
  --cyan-bd2:     rgba(2, 132, 199, 0.25);
  --cyan-bd3:     rgba(2, 132, 199, 0.35);
  --cyan-glow:    0 0 20px rgba(2, 132, 199, 0.2);
  --cyan-glow-h:  0 0 30px rgba(2, 132, 199, 0.35);

  /* ============================================================
     ACCENT — GREEN (вклады / savings / доходы)
  ============================================================ */
  --green:        #16a34a;   /* насыщенный зелёный */
  --green-dim:    rgba(22, 163, 74, 0.08);
  --green-bd:     rgba(22, 163, 74, 0.25);
  --neon-green:   #15803d;   /* тёмно-зелёный (на светлом фоне neon не нужен) */
  --neon-green-dim:  rgba(21, 128, 61, 0.08);
  --neon-green-dim2: rgba(21, 128, 61, 0.10);
  --neon-green-bd:   rgba(21, 128, 61, 0.15);
  --neon-green-bd2:  rgba(21, 128, 61, 0.3);

  /* ============================================================
     ACCENT — PURPLE (скоринг / ипотека)
  ============================================================ */
  --purple:       #7c3aed;
  --neon-purple:  #8b5cf6;
  --purple-dim:   rgba(124, 58, 237, 0.07);
  --purple-dim2:  rgba(124, 58, 237, 0.09);
  --purple-bd:    rgba(124, 58, 237, 0.2);
  --purple-bd2:   rgba(124, 58, 237, 0.25);
  --purple-glow:  rgba(124, 58, 237, 0.2);

  /* ============================================================
     ACCENT — ORANGE (инвестиции)
  ============================================================ */
  --orange:       #ea580c;
  --orange-dim:   rgba(234, 88, 12, 0.08);
  --orange-bd:    rgba(234, 88, 12, 0.2);

  /* ============================================================
     ACCENT — AMBER / RED
  ============================================================ */
  --amber:        #d97706;
  --amber-dim:    rgba(217, 119, 6, 0.08);
  --amber-bd:     rgba(217, 119, 6, 0.25);
  --red:          #dc2626;
  --red-dim:      rgba(220, 38, 38, 0.08);
  --red-bd:       rgba(220, 38, 38, 0.25);
  --teal:         #0d9488;

  /* ============================================================
     HERO (на светлом фоне hero меняется)
  ============================================================ */
  --hero-bg-opacity:    0.06;
  --hero-overlay:       linear-gradient(135deg, rgba(240,244,248,0.97) 0%, rgba(240,244,248,0.85) 50%, rgba(240,244,248,0.95) 100%);
  --hero-glow-1-color:  #2563eb;
  --hero-glow-1-opacity: 0.06;
  --hero-glow-2-color:  #7c3aed;
  --hero-glow-2-opacity: 0.05;

  /* ============================================================
     HERO BADGE
  ============================================================ */
  --hero-badge-bg:      rgba(37, 99, 235, 0.07);
  --hero-badge-bd:      rgba(37, 99, 235, 0.2);
  --hero-badge-color:   var(--blue);

  /* ============================================================
     GRADIENT TEXT
  ============================================================ */
  --gradient-text: linear-gradient(135deg, #2563eb, #7c3aed);

  /* ============================================================
     BUTTONS
  ============================================================ */
  --btn-primary-bg:     linear-gradient(135deg, var(--blue), #1d4ed8);
  --btn-primary-color:  #ffffff;
  --btn-primary-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
  --btn-primary-shadow-h: 0 6px 24px rgba(37, 99, 235, 0.45);

  /* ============================================================
     PRODUCT CARDS
  ============================================================ */
  --product-credit-color:  var(--cyan);
  --product-credit-bg:     var(--cyan-dim2);
  --product-credit-bd:     var(--cyan-bd2);

  --product-deposit-color: var(--green);
  --product-deposit-bg:    var(--green-dim);
  --product-deposit-bd:    var(--green-bd);

  --product-mortgage-color: var(--purple);
  --product-mortgage-bg:    var(--purple-dim);
  --product-mortgage-bd:    var(--purple-bd);

  --product-invest-color:  var(--amber);
  --product-invest-bg:     var(--amber-dim);
  --product-invest-bd:     var(--amber-bd);

  /* ============================================================
     SAVINGS WIDGET
  ============================================================ */
  --savings-bg:       rgba(240, 244, 248, 0.9);
  --savings-bd:       rgba(22, 163, 74, 0.15);
  --savings-amount-color: var(--green);
  --savings-badge-bg: rgba(22, 163, 74, 0.08);
  --savings-line-color: #16a34a;

  /* ============================================================
     FEATURES BADGE
  ============================================================ */
  --features-badge-bg:    var(--purple-dim);
  --features-badge-bd:    var(--purple-bd2);
  --features-badge-color: var(--purple);

  /* ============================================================
     FEATURE ICONS
  ============================================================ */
  --feat-icon-1-bg:    var(--purple-dim);
  --feat-icon-1-bd:    var(--purple-bd);
  --feat-icon-1-color: var(--purple);

  --feat-icon-2-bg:    var(--cyan-dim2);
  --feat-icon-2-bd:    var(--cyan-bd2);
  --feat-icon-2-color: var(--cyan);

  --feat-icon-3-bg:    var(--green-dim);
  --feat-icon-3-bd:    var(--green-bd);
  --feat-icon-3-color: var(--green);

  --feat-icon-4-bg:    var(--orange-dim);
  --feat-icon-4-bd:    var(--orange-bd);
  --feat-icon-4-color: var(--orange);

  /* ============================================================
     AI CHAT WIDGET
  ============================================================ */
  --chat-bg:          rgba(255, 255, 255, 0.95);
  --chat-bd:          rgba(37, 99, 235, 0.12);
  --chat-avatar-bg:   linear-gradient(135deg, #7c3aed, #2563eb);
  --chat-bubble-ai-bg: rgba(124, 58, 237, 0.06);
  --chat-bubble-ai-bd: rgba(124, 58, 237, 0.15);
  --chat-bubble-user-bg: rgba(37, 99, 235, 0.07);
  --chat-bubble-user-bd: rgba(37, 99, 235, 0.18);

  /* ============================================================
     SECTION LABEL
  ============================================================ */
  --label-bg:    rgba(37, 99, 235, 0.07);
  --label-bd:    rgba(37, 99, 235, 0.2);
  --label-color: var(--blue);

  /* ============================================================
     SHADOWS — на светлом фоне тени важнее бордеров
  ============================================================ */
  --shadow-card:  0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.08);
  --shadow-glow-blue:  0 0 20px rgba(37, 99, 235, 0.2);
  --shadow-glow-green: 0 0 20px rgba(22, 163, 74, 0.2);
  --shadow-glow-cyan:  0 0 20px rgba(2, 132, 199, 0.2);

  /* ============================================================
     CARD RATE & AMOUNT COLORS
  ============================================================ */
  --card-rate-color:   var(--green);
  --card-rate-bg:      rgba(22, 163, 74, 0.07);
  --card-rate-bd:      rgba(22, 163, 74, 0.2);

  --card-amount-color: var(--cyan);
}

/* ============================================================
   LK LIGHT — специфичные переопределения для ЛК
   Некоторые компоненты требуют дополнительной настройки
   под светлый фон
============================================================ */

/* Тикер — оставляем тёмным для контраста */
.site-ticker {
  background: #1e293b !important;
}

/* ============================================================
   NAVBAR — точные цвета как на proto.finxo.ru
   Фон: rgba(15,17,23,0.95) | Лого: #f1f5f9 | Ссылки: #94a3b8 | Primary: #4f8ef7
============================================================ */

/* Фон навбара — тёмный */
.nav {
  background: rgba(15, 17, 23, 0.95) !important;
  border-bottom: 1px solid rgb(35, 43, 62) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* Логотип */
.logo {
  color: #f1f5f9 !important;
}
.logo em {
  color: #4f8ef7 !important;
}

/* Навигационные ссылки */
.nl {
  color: #94a3b8 !important;
}
.nl:hover {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,.06) !important;
}
.nl.on {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,.08) !important;
}

/* Кнопка «Войти» */
.btn-ghost,
#nav-login-btn {
  color: #94a3b8 !important;
}
.btn-ghost:hover,
#nav-login-btn:hover {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,.07) !important;
}

/* Кнопка «Начать бесплатно» */
.btn-primary,
#nav-register-btn {
  background: #4f8ef7 !important;
  color: #ffffff !important;
}
.btn-primary:hover,
#nav-register-btn:hover {
  background: #3a7ef6 !important;
}

/* Мобильное меню */
.nav-mobile {
  background: rgba(15, 17, 23, 0.98) !important;
  border-top: 1px solid rgb(35, 43, 62) !important;
}
.nav-mobile .nl {
  color: #94a3b8 !important;
}
.nav-mobile .nl:hover {
  color: #f1f5f9 !important;
  background: rgba(255,255,255,.06) !important;
}

/* Гамбургер */
.nav-toggle svg {
  stroke: #94a3b8 !important;
}

/* Аватар пользователя в навбаре */
.nav-user-name {
  color: #f1f5f9 !important;
}
.nav-user-btn svg {
  color: #94a3b8 !important;
}

/***************/

/* Сайдбар ЛК */
.lk-sidebar {
  background: #ffffff !important;
  border-right: 1px solid var(--bd) !important;
  box-shadow: 2px 0 8px rgba(0,0,0,.04) !important;
}

/* Карточки ЛК */
.lk-stat-card,
.lk-card,
.product-card,
.goal-card {
  box-shadow: var(--shadow-card) !important;
  border-color: var(--bd-card) !important;
}

.lk-stat-card:hover,
.lk-card:hover,
.product-card:hover,
.goal-card:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,.12) !important;
  border-color: var(--bd-hover) !important;
}

/* Чат — светлый фон */
.lk-chat-messages {
  background: #f8fafc !important;
  border-color: var(--bd) !important;
}

.lk-chat-header,
.lk-chat-prompts,
.lk-chat-input-wrap {
  background: #ffffff !important;
  border-color: var(--bd) !important;
}

/* Форма входа */
.lk-login-card {
  background: #ffffff !important;
  border-color: var(--bd-card) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.10) !important;
}

/* Пользователь в сайдбаре */
.lk-user-card {
  background: #f8fafc !important;
  border-color: var(--bd) !important;
}

/* Прогресс-бар фон */
.progress-bar {
  background: rgba(0,0,0,.07) !important;
}

/* Транзакции — разделитель */
.tx-item {
  border-bottom-color: rgba(0,0,0,.05) !important;
}

/* Рекомендации */
.rec-item {
  background: #f8fafc !important;
  border-color: var(--bd) !important;
}

/* Scoring factors */
.scoring-factor {
  border-bottom-color: rgba(0,0,0,.06) !important;
}

/* Профиль hero */
.profile-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
  border-color: var(--bd-card) !important;
}

/* Мобильная навигация */
.lk-mobile-nav {
  background: #ffffff !important;
  border-top-color: var(--bd) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08) !important;
}

/* Dropdown меню */
.nav-dropdown {
  background: #ffffff !important;
  border-color: var(--bd-card) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
}

.nav-dropdown-header {
  border-bottom-color: var(--bd) !important;
}

/* Поля форм */
.lk-login-input,
.lk-chat-input,
.profile-field input,
.sms-digit {
  background: #f8fafc !important;
  border-color: var(--bd) !important;
  color: var(--text-h) !important;
}

/* Внутренние секции */
.lk-bg-inner,
[style*="var(--bg-inner)"] {
  background: var(--bg-inner) !important;
}

/* ============================================================
   NAVBAR — остаётся тёмным как на основном сайте Finxo
   (никаких переопределений не нужно)
============================================================ */

/* ============================================================
   TICKER — удалён из ЛК (нет в header.php)
============================================================ */

/* ============================================================
   КНОПКИ — адаптация под светлый фон
============================================================ */
.btn-outline {
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

.btn-outline:hover {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
  background: var(--blue-dim) !important;
}

/* ============================================================
   ФОРМЫ — поля ввода
============================================================ */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--blue-bd) !important;
  box-shadow: 0 0 0 3px var(--blue-dim) !important;
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important;
}

/* ============================================================
   TOAST
============================================================ */
#finxo-toast {
  background: #1e293b !important;
  color: #f1f5f9 !important;
}