/* ═══════════════════════════════════════════════════════════════════
   ICE LOGIX · Светлая тема
   Подключается ПОСЛЕ ice-screens.css и действует только при html.light-theme.
   Принцип: тот же макет, что у тёмной темы, но на «ледяном» светлом фоне:
   фон — холодный светло-серый, карточки — белые с тонкой рамкой,
   один синий акцент, стекло только в шапке, нижнем меню и панели действия.
   Почти всё приложение берёт цвета из --rd-*, поэтому основная работа —
   новые значения переменных. Ниже них — только места, где цвет вписан вручную.
   ═══════════════════════════════════════════════════════════════════ */

html.light-theme {
  color-scheme: light;

  /* поверхности */
  --rd-bg: #F1F4F9;
  --rd-s1: #FFFFFF;
  --rd-s2: #F5F7FB;
  --rd-s3: #E8EDF4;
  --rd-line: #E3E8F0;
  --rd-line-2: #CDD6E3;

  /* текст */
  --rd-tx: #0B1220;
  --rd-tx2: #4B5769;
  --rd-tx3: #5F6B7E;

  /* синий: заливка та же, текст и иконки темнее, чтобы читались на белом */
  --rd-blue: #1F6FE0;
  --rd-blue-hi: #2F86F5;
  --rd-b300: #1559C4;
  --rd-b400: #1A6BDB;
  --rd-tint: rgba(31, 111, 224, 0.08);
  --rd-tint-2: rgba(31, 111, 224, 0.14);

  /* смысловые: темнее, чем в тёмной теме, иначе тонут на белом */
  --rd-ok: #0B7A45;
  --rd-warn: #8F5600;
  --rd-bad: #C4243A;

  /* стекло: молочное, со светлой кромкой */
  --rd-glass-bg: rgba(255, 255, 255, 0.74);
  --rd-glass-line: rgba(15, 23, 42, 0.07);
  --rd-glass-shadow: 0 10px 30px rgba(20, 40, 80, 0.12), 0 1px 3px rgba(20, 40, 80, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* мягкая тень карточек: в светлой теме без неё белое сливается с фоном */
  --rd-card-shadow: 0 1px 2px rgba(20, 40, 80, 0.05);

  /* старые переменные слоёв glassmorphism / arctic */
  --text-primary: var(--rd-tx);
  --text-secondary: var(--rd-tx2);
  --text-muted: var(--rd-tx3);
  --glass-bg: var(--rd-s1);
  --glass-bg-strong: var(--rd-s1);
  --glass-border: var(--rd-line);
  --glass-border-strong: var(--rd-line-2);
}

/* ─── Основа ─── */
html.light-theme, html.light-theme body, html.light-theme #app { background: var(--rd-bg) !important; }
html.light-theme body { color: var(--rd-tx) !important; }
html.light-theme ::selection { background: rgba(31, 111, 224, 0.2); }

/* ─── Шапка ─── */
html.light-theme body .user-avatar { border: 1px solid rgba(15, 23, 42, 0.1) !important; box-shadow: none !important; }
html.light-theme body .balance-island { background: rgba(15, 23, 42, 0.045) !important; border: 0 !important; }
html.light-theme body .app-header .icon-btn { color: var(--rd-tx2) !important; }
html.light-theme body #notifBadge { border: 2px solid #fff; box-sizing: content-box; }

/* ─── Нижнее меню ─── */
html.light-theme body .tab-item { color: var(--rd-tx3) !important; }
html.light-theme body .tab-item.active { color: var(--rd-b400) !important; }
html.light-theme body .tab-item.active .tab-icon { background: var(--rd-tint-2); }
html.light-theme body .tab-item.center-calc-tab { color: var(--rd-tx3) !important; }
html.light-theme body .tab-item.center-calc-tab.active { color: var(--rd-b400) !important; }
html.light-theme body .tab-item.center-calc-tab .tab-icon {
  box-shadow: 0 0 0 4px #fff, 0 10px 20px rgba(31, 111, 224, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 8px rgba(0, 20, 60, 0.25) !important;
}
html.light-theme body .tab-item.center-calc-tab.active .tab-icon {
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(31, 111, 224, 0.22), 0 10px 20px rgba(31, 111, 224, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
html.light-theme body #tabCartBadge, html.light-theme body #cartBadge { border-color: #fff !important; color: #fff !important; }

/* ─── Карточки: белые, тонкая рамка, едва заметная тень ─── */
html.light-theme .rd-card, html.light-theme .rd-mode,
html.light-theme body .glass-card, html.light-theme body .review-card, html.light-theme body .course-card,
html.light-theme body .rate-tracker-card, html.light-theme body .wb-cart-card {
  box-shadow: var(--rd-card-shadow) !important;
}
/* выбранное / главное: синий тинт поверх белого */
html.light-theme .rd-mode-main, html.light-theme .st-theme.on { background: linear-gradient(var(--rd-tint), var(--rd-tint)), var(--rd-s1); }
html.light-theme .rd-mode-main { border-color: rgba(31, 111, 224, 0.32); }
html.light-theme .rd-row:active { background: var(--rd-s2); }

/* быстрые действия на главной */
html.light-theme body .story-card:not(.marketplace-story) .story-icon { box-shadow: var(--rd-card-shadow) !important; }

/* площадки-рулетка */
html.light-theme body .marketplaces-capsule { box-shadow: var(--rd-card-shadow); }

/* переключатель: белая ручка с тенью, как в iOS */
html.light-theme .rd-switch span { background: #DDE3EC; border-color: transparent; }
html.light-theme .rd-switch span::after { background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); }

/* переключатели вкладок: белая «таблетка» на сером треке */
html.light-theme .fn-seg { background: var(--rd-s3); border-color: transparent; }
html.light-theme .fn-seg button.on { background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
html.light-theme .st-tabs button.on { background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }

/* поля ввода: белые на сером фоне, на белой карточке — серые */
html.light-theme body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
html.light-theme body textarea, html.light-theme body select { color: var(--rd-tx); }
html.light-theme body select option { background: #fff; color: var(--rd-tx); }

/* окна и шторки */
html.light-theme body .glass-modal-overlay { background: rgba(15, 23, 42, 0.38) !important; }
html.light-theme body .glass-modal { border-color: var(--rd-line) !important; box-shadow: 0 24px 60px rgba(20, 40, 80, 0.22) !important; }
html.light-theme body .full-screen-modal-overlay { background: var(--rd-bg) !important; }

/* фото товаров: подложка, пока картинка грузится */
html.light-theme body .product-card > div:first-child { background: var(--rd-s3); }

/* светлая кнопка на светлом фоне получает рамку */
html.light-theme .rd-btn-light { border: 1px solid var(--rd-line-2); }

/* ═══ Разметка на Tailwind в старых экранах ═══
   Белый текст и белые полупрозрачные подложки в тёмной теме → тёмный текст и
   тёмные полупрозрачные подложки в светлой. На сплошных цветных заливках
   (кнопки, бейджи, баннеры) белый текст возвращаем ниже. */
html.light-theme .text-white, html.light-theme .text-white\/90, html.light-theme .text-white\/80,
html.light-theme .hover\:text-white:hover { color: var(--rd-tx) !important; }
html.light-theme .text-white\/70, html.light-theme .text-white\/60 { color: var(--rd-tx2) !important; }
html.light-theme .text-white\/50, html.light-theme .text-white\/40 { color: var(--rd-tx3) !important; }
html.light-theme .text-white\/30, html.light-theme .text-white\/20, html.light-theme .text-white\/10 { color: rgba(11, 18, 32, 0.32) !important; }
html.light-theme .text-slate-200, html.light-theme .text-slate-300, html.light-theme .text-gray-200, html.light-theme .text-gray-300 { color: var(--rd-tx2) !important; }
html.light-theme .text-slate-400, html.light-theme .text-slate-500, html.light-theme .text-gray-400, html.light-theme .text-gray-500 { color: var(--rd-tx3) !important; }

html.light-theme .bg-white\/5, html.light-theme .hover\:bg-white\/5:hover { background-color: rgba(15, 23, 42, 0.035) !important; }
html.light-theme .bg-white\/10, html.light-theme .hover\:bg-white\/10:hover { background-color: rgba(15, 23, 42, 0.06) !important; }
html.light-theme .bg-white\/15, html.light-theme .hover\:bg-white\/15:hover { background-color: rgba(15, 23, 42, 0.08) !important; }
html.light-theme .bg-white\/20, html.light-theme .hover\:bg-white\/20:hover { background-color: rgba(15, 23, 42, 0.1) !important; }

html.light-theme .border-white\/5, html.light-theme .border-white\/10, html.light-theme .border-white\/15 { border-color: var(--rd-line) !important; }
html.light-theme .border-white\/20, html.light-theme .border-white\/30, html.light-theme .hover\:border-white\/20:hover { border-color: var(--rd-line-2) !important; }
html.light-theme .divide-white\/5 > * + *, html.light-theme .divide-white\/10 > * + * { border-color: var(--rd-line) !important; }

/* тёмные «карточки» на Tailwind */
html.light-theme .bg-slate-950, html.light-theme .bg-slate-900, html.light-theme .bg-slate-800,
html.light-theme .bg-slate-950\/40, html.light-theme .bg-slate-950\/60, html.light-theme .bg-slate-950\/80,
html.light-theme .bg-slate-900\/40, html.light-theme .bg-slate-900\/50, html.light-theme .bg-slate-900\/60,
html.light-theme .bg-slate-900\/80, html.light-theme .bg-slate-900\/90, html.light-theme .bg-slate-900\/95,
html.light-theme .bg-slate-800\/50, html.light-theme .bg-slate-800\/80, html.light-theme .bg-\[\#1e293b\],
html.light-theme .bg-\[\#1a2333\], html.light-theme .bg-\[\#0f172a\]\/95,
html.light-theme .bg-black\/20, html.light-theme .bg-black\/30 {
  background-color: var(--rd-s1) !important;
}
html.light-theme [class*="from-slate-9"], html.light-theme [class*="from-slate-8"] { background-image: none !important; background-color: var(--rd-s1) !important; }

/* смысловые цвета текста */
html.light-theme .text-red-300, html.light-theme .text-red-400, html.light-theme .text-red-500,
html.light-theme .text-rose-300, html.light-theme .text-rose-400 { color: var(--rd-bad) !important; }
html.light-theme .text-green-300, html.light-theme .text-green-400, html.light-theme .text-emerald-300, html.light-theme .text-emerald-400 { color: var(--rd-ok) !important; }
html.light-theme .text-amber-300, html.light-theme .text-amber-400, html.light-theme .text-yellow-300, html.light-theme .text-yellow-400,
html.light-theme .text-orange-300, html.light-theme .text-orange-400 { color: var(--rd-warn) !important; }

/* белый текст на сплошных цветных заливках остаётся белым.
   Затемнения под окнами (bg-black/60) сюда не входят: они оборачивают всё окно с белой карточкой. */
html.light-theme :is(.bg-blue-500, .bg-blue-600, .bg-cyan-400, .bg-cyan-500, .bg-cyan-600, .bg-sky-500, .bg-indigo-500, .bg-purple-500, .bg-purple-600,
  .bg-red-500, .bg-red-600, .bg-rose-500, .bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600, .bg-amber-500, .bg-orange-500,
  .btn-primary, .buyNowBtn, .banner-slide, .rd-btn:not(.rd-btn-ghost):not(.rd-btn-tonal):not(.rd-btn-light):not(.rd-btn-danger),
  [class*="from-"]:not([class*="/"]):not([class*="from-slate"]), [class*="from-[#"], [style*="linear-gradient"])
  :is(.text-white, .text-white\/90, .text-white\/80) { color: #fff !important; }
html.light-theme :is(.bg-blue-500, .bg-blue-600, .bg-cyan-400, .bg-cyan-500, .bg-cyan-600, .bg-sky-500, .bg-indigo-500, .bg-purple-500, .bg-purple-600,
  .bg-red-500, .bg-red-600, .bg-rose-500, .bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600, .bg-amber-500, .bg-orange-500,
  .btn-primary, .buyNowBtn, .banner-slide, [class*="from-"]:not([class*="/"]):not([class*="from-slate"]), [class*="from-[#"], [style*="linear-gradient"])
  :is(.text-white\/70, .text-white\/60, .text-white\/50, .text-white\/40) { color: rgba(255, 255, 255, 0.72) !important; }
html.light-theme :is(.bg-blue-500, .bg-blue-600, .bg-cyan-400, .bg-cyan-500, .bg-cyan-600, .bg-sky-500, .bg-indigo-500, .bg-purple-500, .bg-purple-600,
  .bg-red-500, .bg-red-600, .bg-rose-500, .bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600, .bg-amber-500, .bg-orange-500,
  .bg-black, [class*="bg-black/"], .btn-primary, .buyNowBtn, [class*="from-"]:not([class*="/"]):not([class*="from-slate"]), [class*="from-[#"]):is(.text-white, .text-white\/90, .text-white\/80) { color: #fff !important; }

/* ═══ Экраны (ice-screens.css): цвета, вписанные вручную ═══ */
html.light-theme .hm-mp-tile { box-shadow: 0 0 0 1px var(--rd-line), var(--rd-card-shadow); }
html.light-theme .hb-dots i:not(.on) { background: rgba(15, 23, 42, 0.18); }
html.light-theme .hm-hub, html.light-theme .hb-slide { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 26px -16px rgba(31, 111, 224, 0.55); }

/* затемнение под окнами: в светлой теме мягче */
html.light-theme .rd-sheet-backdrop { background: rgba(15, 23, 42, 0.36); }
html.light-theme .fixed.inset-0:is(.bg-black\/40, .bg-black\/50, .bg-black\/60, .bg-black\/70, .bg-black\/80, .bg-black\/85, .bg-black\/90) { background-color: rgba(15, 23, 42, 0.4) !important; }
html.light-theme .rd-sheet { box-shadow: 0 -10px 40px rgba(20, 40, 80, 0.14); }

/* онбординг-сторис (onboarding.js): дорожки прогресса и кнопка закрытия */
html.light-theme { --ob-track: rgba(15, 23, 42, 0.12); --ob-btn: rgba(15, 23, 42, 0.06); }
html.light-theme .ice-slide-glow { opacity: 0.55; }

/* Тёмные «герои» (баннер курса, магазин бонусов, акции) остаются тёмными в обеих темах,
   поэтому внутри них возвращаем значения переменных тёмной темы: иначе тёмно-синий текст ложится на тёмно-синий фон */
html.light-theme body :is(.banner-slide-cny, .bs-hero, .bs-media, .pr-banner) {
  --rd-tx: #F3F6FB; --rd-tx2: #A3AFC2; --rd-tx3: #7C899D;
  --rd-b300: #8CC6FF; --rd-b400: #4DA3FF;
  --rd-tint: rgba(77, 163, 255, 0.13); --rd-tint-2: rgba(77, 163, 255, 0.22);
  --rd-ok: #3DD68C; --rd-warn: #FFC24A; --rd-bad: #FF6B7A;
}

/* логотипы КРОК / ЕРИП / Оплати нарисованы белым под тёмную тему: на светлой переворачиваем яркость, оттенок сохраняем */
html.light-theme .pm-logo-krok, html.light-theme .pm-logo-erip, html.light-theme .pm-logo-oplati { filter: invert(1) hue-rotate(180deg); }