/* ==========================================================================
   Lumo — вход и экран согласия, на системе lumo/*.

   Обе страницы — одна форма посреди экрана, поэтому лежат в одном файле.
   Фон тот же, что на витрине сайта: свет из фирменного градиента логотипа
   и «пол» в перспективе. Человек приходит сюда с главной, и переход не
   должен выглядеть как переход в другую систему.

   Имена id принадлежат pages/admin_login.js и pages/admin_consent.js:
   loginForm, submitBtn, password, pwToggle, consentCheck, acceptBtn,
   logoutBtn, errorBox.
   ========================================================================== */

/* Класс .lm несёт отступы под ленту и рейку админки (88px сверху, 78px слева).
   На публичных страницах каркаса нет — сбрасываем, иначе содержимое стоит со
   сдвигом от края. Специфичность (0,2,1) перебивает body.lm без !important. */
body.lm.au{ padding-top: 0; padding-left: 0; }

.au{
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  position: relative; overflow: hidden;
  background: var(--lm-bg);

  --au-brand-1: #6d5ef0;
  --au-brand-2: #3b82f6;
  --au-brand-3: #22d3ee;
}

/* ---------------- Фон ---------------- */
.au-bg{ position: absolute; inset: 0; pointer-events: none; }
.au-bg__glow{
  position: absolute; inset: -20% -10% -30%;
  background:
    radial-gradient(52% 56% at 76% 10%,
      color-mix(in srgb, var(--au-brand-1) 24%, transparent) 0%,
      color-mix(in srgb, var(--au-brand-2) 17%, transparent) 36%,
      color-mix(in srgb, var(--au-brand-3) 9%, transparent) 58%,
      transparent 78%),
    radial-gradient(44% 40% at 12% 88%,
      color-mix(in srgb, var(--au-brand-2) 12%, transparent) 0%,
      transparent 72%);
}
.au-bg__floor{
  position: absolute; left: 50%; bottom: -30px; translate: -50% 0;
  width: 230%; height: 560px;
  background-image:
    repeating-linear-gradient(to right, color-mix(in srgb, var(--lm-accent) 26%, transparent) 0 1px, transparent 1px 104px),
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--lm-accent) 22%, transparent) 0 1px, transparent 1px 104px);
  transform: perspective(460px) rotateX(70deg);
  transform-origin: 50% 100%;
  mask-image:
    linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 44%, transparent 88%),
    radial-gradient(84% 100% at 50% 100%, #000 30%, transparent 96%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

/* ---------------- Карточка ---------------- */
.au-card{
  position: relative;
  width: min(400px, 100%);
  padding: 28px 28px 24px;
  border: 1px solid var(--lm-border); border-radius: var(--lm-radius-lg);
  background: var(--lm-surface);
  box-shadow: var(--lm-shadow-panel);
}
.au-card--wide{ width: min(480px, 100%); }

.au-brand{
  display: inline-flex; align-items: center; gap: 10px;
  color: inherit; margin-bottom: 22px;
}
.au-brand img{ width: 32px; height: 32px; border-radius: 9px; }
.au-brand b{ font-size: var(--lm-text-lg); font-weight: 680; letter-spacing: -.015em; }

.au-title{ font-size: 22px; font-weight: 680; letter-spacing: -.02em; }
.au-sub{ margin-top: 6px; font-size: var(--lm-text-md); color: var(--lm-muted); line-height: 1.5; }

/* ---------------- Форма ---------------- */
.au-form{ display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.au-field{ display: flex; flex-direction: column; gap: 6px; }
.au-field label{ font-size: var(--lm-text-sm); font-weight: 620; color: var(--lm-muted); }

/* Поле пароля с кнопкой «показать» внутри. */
.au-pw{ position: relative; display: flex; }
.au-pw .lm-input{ width: 100%; padding-right: 84px; }
.au-pw__toggle{
  position: absolute; right: 5px; top: 50%; translate: 0 -50%;
  height: 26px; padding: 0 10px; border-radius: var(--lm-radius-xs);
  color: var(--lm-muted); font-size: var(--lm-text-xs); font-weight: 620;
  background: var(--lm-surface-3);
}
.au-pw__toggle:hover{ color: var(--lm-text); }

.au-input{ min-height: 40px; }

.au-error{
  padding: 10px 12px; border-radius: var(--lm-radius-sm);
  background: var(--lm-danger-soft); color: var(--lm-danger);
  border: 1px solid color-mix(in srgb, var(--lm-danger) 32%, transparent);
  font-size: var(--lm-text-sm); line-height: 1.45;
}
.au-error[hidden]{ display: none; }

.au-submit{ min-height: 42px; justify-content: center; font-size: var(--lm-text-md); }
.au-ghost{ min-height: 38px; justify-content: center; }

.au-back{
  display: inline-block; margin-top: 18px;
  font-size: var(--lm-text-sm); color: var(--lm-muted);
}
.au-back:hover{ color: var(--lm-accent); }

/* ---------------- Экран согласия ---------------- */
.au-links{ display: flex; flex-wrap: wrap; gap: 8px; }
.au-links a{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: var(--lm-radius-sm);
  border: 1px solid var(--lm-border); background: var(--lm-surface-2);
  font-size: var(--lm-text-sm); font-weight: 620; color: var(--lm-text);
}
.au-links a:hover{ border-color: color-mix(in srgb, var(--lm-accent) 40%, var(--lm-border)); color: var(--lm-accent); }

.au-consent{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 13px; border-radius: var(--lm-radius-sm);
  border: 1px solid var(--lm-border); background: var(--lm-surface-2);
  font-size: var(--lm-text-sm); line-height: 1.5; cursor: pointer;
}
.au-consent input{ margin-top: 2px; width: 16px; height: 16px; accent-color: var(--lm-accent); flex: 0 0 auto; }
.au-consent:has(input:checked){
  border-color: color-mix(in srgb, var(--lm-accent) 45%, var(--lm-border));
  background: var(--lm-accent-soft);
}

@media (max-width: 480px){
  .au{ padding: 16px; align-items: flex-start; padding-top: 48px; }
  .au-card{ padding: 22px 20px 20px; }
}