/* Тумблер темы (общий: лендинг + дашборд) + светлые оверрайды лендинга.
   Сегментная пилюля ☀/🌙 (как системные свитчи): активный сегмент — фирменный градиент.
   Тема живёт на <html data-theme="dark|light">, ставится до рендера theme-init.js. */

.theme-switch {
  position: fixed; top: 14px; right: 18px; z-index: 120;
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 999px; background: rgba(20, 14, 34, 0.55);
  border: 1px solid rgba(199, 161, 255, 0.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
:root[data-theme="light"] .theme-switch { background: rgba(255, 255, 255, 0.78); border-color: #E2D2F7; }
/* Сегменты: в /app — <button> (JS), на лендинге — <a> (ссылки /api/v1/theme, без JS) */
.theme-switch button, .theme-switch a {
  width: 30px; height: 30px; border-radius: 999px; border: none; cursor: pointer;
  display: grid; place-items: center; padding: 0; background: transparent; text-decoration: none;
  color: rgba(255, 255, 255, 0.6); transition: background .15s, color .15s;
}
:root[data-theme="light"] .theme-switch button,
:root[data-theme="light"] .theme-switch a { color: rgba(51, 37, 78, 0.5); }
.theme-switch button svg, .theme-switch a svg { width: 16px; height: 16px; display: block; }
.theme-switch button.active, .theme-switch a.active {
  background: linear-gradient(135deg, #B78CFF, #FF6ED4); color: #fff;
  box-shadow: 0 2px 10px rgba(255, 110, 212, 0.4);
}
/* Вариант «в потоке» (лендинг: внутри навбара, а не поверх контента) */
.theme-switch.static { position: static; }
/* Мобайл-дашборд: рельс становится верхней полосой → уводим свитч в левый нижний угол
   (правый нижний занят подписью-signature). На лендинге он static — не затрагивается. */
@media (max-width: 760px) {
  .theme-switch:not(.static) { top: auto; bottom: 14px; right: auto; left: 14px; }
}

/* ============================================================================
   Светлая тема ЛЕНДИНГА (Milkshake): точечные оверрайды скомпилированных
   Tailwind-утилит, которые реально используются в index.html. На дашборде
   этих классов нет → блок инертен. Тёмный лендинг = как есть (дефолт).
   ========================================================================== */
:root[data-theme="light"] body.bg-\[\#0a0a0f\] { background-color: #FBF7FF; }
:root[data-theme="light"] .text-white { color: #33254E; }
:root[data-theme="light"] .text-white\/90 { color: rgba(51, 37, 78, 0.9); }
:root[data-theme="light"] .text-white\/70 { color: rgba(51, 37, 78, 0.7); }
:root[data-theme="light"] .text-white\/60 { color: rgba(51, 37, 78, 0.6); }
:root[data-theme="light"] .text-white\/55 { color: rgba(51, 37, 78, 0.55); }
:root[data-theme="light"] .text-white\/40 { color: rgba(51, 37, 78, 0.42); }
:root[data-theme="light"] .hover\:text-white\/70:hover { color: rgba(51, 37, 78, 0.75); }
:root[data-theme="light"] .border-white\/10 { border-color: #E2D2F7; }
:root[data-theme="light"] .border-white\/5 { border-color: #EFE3FC; }
:root[data-theme="light"] .bg-white\/5 { background-color: #F3ECFC; }
:root[data-theme="light"] .hover\:bg-white\/10:hover { background-color: #EFE3FC; }
:root[data-theme="light"] .glass { background: rgba(255, 255, 255, 0.72); border-color: #EFE3FC; }
:root[data-theme="light"] .text-fuchsia-300 { color: #9D5CFF; }
:root[data-theme="light"] .text-amber-300 { color: #D97706; }
:root[data-theme="light"] .text-rose-300 { color: #E05B78; }
/* Google-кнопка остаётся белой → на светлом фоне даём ей рамку и мягкую тень */
:root[data-theme="light"] .bg-white { border: 1px solid #E2D2F7; }
:root[data-theme="light"] .shadow-black\/40 { --tw-shadow-color: rgba(157, 92, 255, 0.18); --tw-shadow: var(--tw-shadow-colored); }
