/* ============================================================
   MM-AUTH — «Мудромашина» брендинг auth-страницы (DEV-2510-05, Фаза 2)
   Подключается ТОЛЬКО в login.html (не влияет на workbench).
   Референс: rzf-ui dark+lime punch (#d5ff40 / hover #e0ff66 / active #c0ff20).
   Селекторы — по живому DOM прода (recon DEV-2510-05):
     шейп div.backd > div.bg-image > div.panel-base.panel
     кнопка button.antiButton.contrast
     лого div.flex-row-center[style*=fixed] > svg + span.fs-title
   Всё через !important: стили бандла инжектятся в <head> ПОСЛЕ этой ссылки.
   ============================================================ */

/* ── 1. Лого: SVG-Huly скрыть, «М»-иконка + текст «Мудромашина» ──
   DEV-2510-06: текст меньше (1.05rem), иконка больше (44px), выравнивание —
   inline-flex + align-items:center (никаких vertical-align — «горизонт» не скачет).
   Скоуп div.backd (контейнер auth-экрана) — правила неактивны в воркбенче */
div.backd .bg-image > .flex-row-center[style*='fixed'] svg {
  display: none !important;
}
div.backd .bg-image > .flex-row-center[style*='fixed'] .fs-title {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: 0 !important;
  line-height: 1 !important;
}
div.backd .bg-image > .flex-row-center[style*='fixed'] .fs-title::before {
  content: '';
  display: block !important;
  flex: 0 0 auto;
  width: 44px !important;
  height: 44px !important;
  margin-right: 0 !important;
  background: url('/mm-auth/mm-logo-m.png') center / contain no-repeat;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}

/* ── 2. Шейп auth: приглушённый lime + глассморфизм ── */
div.backd .panel-base.panel {
  background: rgba(213, 255, 64, 0.12) !important;
  backdrop-filter: blur(26px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.25) !important;
  border-radius: 24px !important;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.5),
    0 6px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  /* dark-набор переменных ВНУТРИ панели: текст/инпуты читаемы на тёмном стекле
     (класс .white светлой темы перекрыт наследованием — .panel ближе в DOM) */
  --theme-caption-color: #ffffff;
  --theme-content-color: rgba(255, 255, 255, 0.82);
  --theme-dark-color: rgba(255, 255, 255, 0.6);
  --theme-darker-color: rgba(255, 255, 255, 0.45);
  --theme-halfcontent-color: rgba(255, 255, 255, 0.5);
  --theme-link-color: #d5ff40;
  --theme-caret-color: #d5ff40;
  --theme-button-default: rgba(255, 255, 255, 0.05);
  --theme-button-pressed: rgba(255, 255, 255, 0.12);
  --theme-button-focused: rgba(255, 255, 255, 0.08);
  --theme-button-border: rgba(213, 255, 64, 0.28);
  --theme-list-divider-color: rgba(213, 255, 64, 0.35);
}
/* нижний слой стекла (::after, синий radial в исходнике) → lime-тонированный тёмный градиент */
div.backd .panel-base.panel::after {
  background:
    linear-gradient(150deg, rgba(213, 255, 64, 0.17) 0%, rgba(10, 13, 5, 0.42) 46%, rgba(213, 255, 64, 0.11) 100%),
    radial-gradient(161.92% 96.11% at 11.33% 3.89%, #2a3313 0%, #10140a 100%) !important;
  border-radius: inherit !important;
}
/* conic-рамка (::before) → lime-свечение */
div.backd .panel-base.panel::before {
  background: linear-gradient(
      135deg,
      rgba(213, 255, 64, 0.6),
      rgba(255, 255, 255, 0.16) 32%,
      rgba(213, 255, 64, 0.38) 58%,
      rgba(255, 255, 255, 0.1) 78%,
      rgba(213, 255, 64, 0.45)
    )
    border-box !important;
  border-radius: inherit !important;
}

/* ── 3. Кнопки: lime punch + чёрный шрифт (не сливается) ── */
div.backd button.antiButton.contrast {
  background-color: #d5ff40 !important;
  border-color: #d5ff40 !important;
  color: #06070a !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: 0 10px 28px rgba(213, 255, 64, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
div.backd button.antiButton.contrast:hover {
  background-color: #e0ff66 !important;
}
div.backd button.antiButton.contrast:active,
div.backd button.antiButton.contrast.pressed {
  background-color: #c0ff20 !important;
}
div.backd button.antiButton.contrast:disabled {
  background-color: rgba(213, 255, 64, 0.22) !important;
  border-color: transparent !important;
  color: rgba(0, 0, 0, 0.4) !important;
  box-shadow: none !important;
}

/* ── 4. Ссылки панели (табы/Восстановить/Войти с кодом/гость): светлые + lime-hover ── */
div.backd .panel-base.panel a {
  color: rgba(255, 255, 255, 0.82) !important;
  transition: color 0.15s ease;
}
div.backd .panel-base.panel a:hover {
  color: #d5ff40 !important;
}
div.backd .panel-base.panel a.selected {
  color: #ffffff !important;
}

/* ── 5. Статус-бар: прозрачный ТОЛЬКО на auth-экране (:has(.backd) — в воркбенче неактивно);
      фото фона — на весь экран ── */
#ui-root:has(div.backd) .antiStatusBar,
#ui-root:has(div.backd) .antiStatusBar button {
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* DEV-2510-06: база под auth-экраном тёмная (на мобилке светлую тему-подложку не видно) */
body:has(div.backd),
#ui-root:has(div.backd) {
  background: #0a0d06 !important;
}
/* DEV-2510-06: фон-арт — строго по центру (как в макете), full-bleed на любом экране;
   .bg-image — страховочный CSS-фон (если <picture> не отрисовался, арт всё равно есть) */
div.backd img.back-image {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}
div.backd .bg-image {
  background: #0a0d06 url('/img/5731352d5d0e5216002640f98ed67570.webp') center / cover no-repeat !important;
}

/* ── 6. Мобилка (<=768px, панель без .panel): lime-тёмный градиент ПОВЕРХ арта фона ──
   DEV-2510-06: на мобилке раньше был плоский градиент без картинки — теперь арт
   просвечивает сквозь тёмный lime-градиент. Оверлой — на .bg-image (он ДОЧЕРНИЙ .paneld
   и рисуется ВЫШЕ его фона; затемнять надо именно его) */
div.backd.paneld {
  background: #0c1006 !important;
}
div.backd.paneld .bg-image {
  background:
    linear-gradient(160deg, rgba(16, 22, 8, 0.86) 0%, rgba(28, 36, 14, 0.9) 55%, rgba(10, 14, 5, 0.94) 100%),
    url('/img/5731352d5d0e5216002640f98ed67570.webp') center / cover no-repeat !important;
}
div.backd.paneld img.back-image {
  display: none !important;
}
div.backd.paneld .panel-base {
  background: rgba(213, 255, 64, 0.1) !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
  border-radius: 20px !important;
  --theme-caption-color: #ffffff;
  --theme-content-color: rgba(255, 255, 255, 0.82);
  --theme-dark-color: rgba(255, 255, 255, 0.6);
  --theme-link-color: #d5ff40;
  --theme-caret-color: #d5ff40;
  --theme-button-default: rgba(255, 255, 255, 0.05);
  --theme-button-pressed: rgba(255, 255, 255, 0.12);
  --theme-button-focused: rgba(255, 255, 255, 0.08);
  --theme-button-border: rgba(213, 255, 64, 0.28);
  --theme-list-divider-color: rgba(213, 255, 64, 0.35);
}