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

/* ── 0. Шрифт вордмарка: Cormorant 600 (DEV-2510-07, cyrillic+latin subsets) ── */
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/mm-auth/fonts/cormorant-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/mm-auth/fonts/cormorant-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 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-family: 'Cormorant', 'IBM Plex Sans', serif !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !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;
}
/* DEV-2510-07: фон-арт — ПУЛЕНЕПРОБИВАЕМЫЙ: <picture> бандла прячем целиком (его md5-URL
   кэшируется браузером на ГОД и Ctrl+Shift+R в SPA не бастит runtime-инжекнутые картинки —
   именно поэтому владелец видел старый синий арт). Наш арт отдаём из НОВОГО URL
   /mm-auth/bg-go.webp (никогда не кэшировался) через CSS-фон .bg-image */
div.backd img.back-image {
  display: none !important;
}
div.backd .bg-image {
  background: #0a0d06 url('/mm-auth/bg-go.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('/mm-auth/bg-go.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);
}

/* ── 7. Кнопки провайдеров Яндекс ID / Сбер ID (DEV-2510-07, Фаза 3: HTML-only заглушки).
   DOM создаёт /mm-auth/mm-auth.js — вставляет 2 кнопки в родной пустой grid соц-слота ── */
div.backd .panel-base.panel .grid[data-mm-providers] {
  display: grid !important; /* страховка: бандл-класс .grid может не доехать */
  margin-top: 0.35rem !important;
}
div.backd .panel-base.panel button.mm-provider {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 0.75rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(213, 255, 64, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
div.backd .panel-base.panel button.mm-provider:hover {
  background: rgba(213, 255, 64, 0.1) !important;
  border-color: rgba(213, 255, 64, 0.55) !important;
  color: #ffffff !important;
}
div.backd .panel-base.panel button.mm-provider .mm-p-ico {
  display: inline-flex;
  flex: 0 0 auto;
}
div.backd .panel-base.panel button.mm-provider .mm-p-ico svg {
  width: 19px;
  height: 19px;
}

/* ── 8. Гостевая кнопка — крупная (DEV-2510-07, Фаза 3).
   DEV-2510-08 (правка владельца): контейнер .actions прижат к границам шейпа —
   возвращаем боковые отступы РАВНЫ паддингу формы (padding: 4rem 5rem →
   margin-inline: 5rem), чтобы «Войти с кодом» и гостевая кнопка стояли
   вровень с инпутами и кнопкой «Вход» выше ── */
div.backd .panel-base.panel .actions {
  margin-inline-start: 5rem !important;
  margin-inline-end: 5rem !important;
  width: auto;
}
div.backd .panel-base.panel .actions .login-as-guest a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  margin-top: 0.45rem;
  padding: 0 1rem !important;
  background: rgba(213, 255, 64, 0.07) !important;
  border: 1px solid rgba(213, 255, 64, 0.45) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
div.backd .panel-base.panel .actions .login-as-guest a:hover {
  background: rgba(213, 255, 64, 0.16) !important;
  border-color: #d5ff40 !important;
  color: #d5ff40 !important;
}

/* ── 9. Мобилка (панель .panel-base БЕЗ .panel внутри .paneld): дублируем правила
   провайдеров и гостевой кнопки для мобильного DOM (DEV-2510-07) ── */
div.backd.paneld .panel-base .grid[data-mm-providers] {
  display: grid !important;
  margin-top: 0.35rem !important;
}
div.backd.paneld .panel-base button.mm-provider {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 0.75rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(213, 255, 64, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}
div.backd.paneld .panel-base button.mm-provider:hover {
  background: rgba(213, 255, 64, 0.1) !important;
  border-color: rgba(213, 255, 64, 0.55) !important;
}
/* DEV-2510-08: мобилка — form padding 0.25rem 1.25rem, поэтому отступ 1.25rem
   (бандл сам ставит inline margin-inline-start: 1.25rem — согласуем и торец) */
div.backd.paneld .panel-base .actions {
  margin-inline-start: 1.25rem !important;
  margin-inline-end: 1.25rem !important;
  width: auto;
}
div.backd.paneld .panel-base .actions .login-as-guest a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  margin-top: 0.45rem;
  padding: 0 1rem !important;
  background: rgba(213, 255, 64, 0.07) !important;
  border: 1px solid rgba(213, 255, 64, 0.45) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
div.backd.paneld .panel-base .actions .login-as-guest a:hover {
  background: rgba(213, 255, 64, 0.16) !important;
  border-color: #d5ff40 !important;
  color: #d5ff40 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. WORKBENCH THEME (DEV-2510-08, правка владельца №3): фирменные цвета
   UI платформы. Кнопки #205dc2 → lime #b7e200 (+ чёрный текст), основной фон
   #050505, второстепенный #0d0d0d, hover/выделение всего кликабельного — lime.
   Механика: CSS-переменные Huly резолвятся в момент использования, поэтому
   переопределение деклараций переменных с !important перекрашивает бандл
   без пересборки. Скоуп:
     html.theme-dark #ui-root:not(:has(div.backd))  — только тёмная тема
     (класс на <html>, Theme.svelte) и ТОЛЬКО воркбенч (auth-экран div.backd
     исключён: его glass-переменные не задеваем).
   Кнопки — вне theme-скоупа: lime-кнопки читаемы в обеих темах.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 10.1 Кнопки: primary #205dc2 → lime punch #b7e200 + чёрный шрифт (обе темы) */
#ui-root:not(:has(div.backd)),
#ui-root:not(:has(div.backd)) * {
  --primary-button-default: #b7e200 !important;
  --primary-button-hovered: #c6f526 !important;
  --primary-button-pressed: #a2cc00 !important;
  --primary-button-focused: #b7e200 !important;
  --primary-button-color: #06070a !important;
  --primary-button-content-color: rgba(0, 0, 0, 0.78) !important;
  --primary-button-outline: #b7e200 !important;
  --primary-button-transparent: rgba(183, 226, 0, 0.2) !important;
  --primary-edit-border-color: #b7e200 !important;
}

/* 10.2 Тёмная тема: фоны #050505 / #0d0d0d + lime-hover на кликабельном */
html.theme-dark #ui-root:not(:has(div.backd)),
html.theme-dark #ui-root:not(:has(div.backd)) * {
  /* фоны: основной холст #050505, второстепенные поверхности #0d0d0d */
  --theme-drawing-bg-color: #050505 !important;
  --theme-bg-color: #050505 !important;
  --theme-back-color: #050505 !important;
  --theme-statusbar-color: #050505 !important;
  --theme-inbox-activity-bgcolor: #050505 !important;
  --theme-navpanel-color: #0d0d0d !important;
  --theme-panel-color: #0d0d0d !important;
  --theme-comp-header-color: #0d0d0d !important;
  --theme-popup-color: #0d0d0d !important;
  --theme-popup-trans-color: #0d0d0dee !important;
  --theme-dialog-background-color: #0d0d0d !important;
  --theme-list-row-color: #0d0d0d !important;
  --theme-list-subheader-color: #0d0d0d !important;
  --theme-list-button-color: #0d0d0d !important;
  --theme-link-button-color: #0d0d0d !important;
  --theme-table-header-color: #0d0d0d !important;
  --theme-table-row-color: #0d0d0d !important;
  --theme-popup-deactivated: #0d0d0d !important;
  --accent-bg-color: #0d0d0d !important;
  --theme-bg-divider-color: #161616 !important;
  --theme-code-bg-color: #101408 !important;

  /* hover / выделение всего кликабельного → lime (#b7e200 поверх тёмного) */
  --highlight-hover: rgba(183, 226, 0, 0.13) !important;
  --highlight-select: rgba(183, 226, 0, 0.18) !important;
  --highlight-select-hover: rgba(183, 226, 0, 0.24) !important;
  --highlight-select-border: rgba(183, 226, 0, 0.4) !important;
  --menu-bg-select: rgba(183, 226, 0, 0.15) !important;
  --menu-bg-select-trans: rgba(183, 226, 0, 0.35) !important;
  --theme-navpanel-hovered: rgba(183, 226, 0, 0.1) !important;
  --theme-navpanel-selected: rgba(183, 226, 0, 0.17) !important;
  --theme-popup-hover: rgba(183, 226, 0, 0.12) !important;
  --theme-list-button-hover: rgba(183, 226, 0, 0.12) !important;
  --theme-link-button-hover: rgba(183, 226, 0, 0.12) !important;
  --theme-breadcrumb-hovered: rgba(183, 226, 0, 0.08) !important;
  --theme-editbox-focus-color: rgba(183, 226, 0, 0.06) !important;
  --theme-editbox-focus-border: #b7e200 !important;

  /* акценты, ссылки, фокус, caret — lime */
  --theme-link-color: #b7e200 !important;
  --theme-state-primary-color: #b7e200 !important;
  --theme-state-primary-background-color: rgba(183, 226, 0, 0.14) !important;
  --theme-state-primary-border-color: rgba(183, 226, 0, 0.26) !important;
  --theme-tablist-plain-color: #b7e200 !important;
  --theme-caret-color: #b7e200 !important;
  --theme-toggle-on-bg-color: #b7e200 !important;
  --theme-toggle-on-bg-hover: #a2cc00 !important;
  --theme-calendar-today-bgcolor: rgba(183, 226, 0, 0.1) !important;
  --theme-calendar-event-handle-color: #b7e200 !important;
  --theme-calendar-zone: rgba(183, 226, 0, 0.1) !important;
  --theme-mention-bg-color: rgba(183, 226, 0, 0.1) !important;
  --theme-mention-focused-bg-color: rgba(183, 226, 0, 0.2) !important;
  --theme-inbox-people-counter-bgcolor: rgba(183, 226, 0, 0.14) !important;
  --theme-inbox-people-notify: #b7e200 !important;
}

/* 10.3 База страницы воркбенча (вне auth-экрана) — фирменный чёрный */
body:not(:has(div.backd)) {
  background: #050505 !important;
}


/* 10.2 DEV-2510-11 №5: ПРАВИЛЬНЫЕ имена переменных бандла (10.1 ссылался на несуществующие
   --primary-button-* из другой версии темы). Кнопки .hulyButton.primary: lime bg уже в бандле,
   здесь - тёмный текст/иконки на lime + страховочные переопределения правильных vars. */
#ui-root:not(:has(div.backd)) .hulyButton.primary span,
#ui-root:not(:has(div.backd)) .hulyButton.primary .icon {
  color: #06070a !important;
}
#ui-root:not(:has(div.backd)),
#ui-root:not(:has(div.backd)) * {
  --button-primary-BackgroundColor: #b7e200 !important;
  --button-primary-hover-BackgroundColor: #c6f526 !important;
  --button-primary-active-BackgroundColor: #a2cc00 !important;
  --button-primary-loading-LabelColor: #06070a !important;
  --selector-active-BackgroundColor: #b7e200 !important;
  --theme-toggle-on-bg-color: #b7e200 !important;
  --theme-toggle-on-bg-hover: #9fc000 !important;
}