/* Публичные страницы (вход, приглашение, сброс пароля): карточка `.login`.
   Подключается из app/web/templates/_public_base.html поверх checker-ui.css;
   app.css на этих страницах НЕ грузится — сброс задаём сами (иначе input
   width:100% + padding вылезает за форму на мобиле, PWA). */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
body {
  display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px;
  /* Лёгкая бренд-атмосфера сверху — без кричащего градиента. */
  background:
    radial-gradient(130% 80% at 50% -20%, rgba(99, 46, 230, .10), transparent 55%),
    var(--bg-light);
}
.login {
  width: 100%; max-width: 380px; padding: 32px 26px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(26, 26, 26, .04), 0 24px 60px -28px rgba(26, 26, 26, .35);
  animation: loginRise .55s cubic-bezier(.2, .8, .2, 1) both;
}
.login__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 24px; }
.login__brand svg { height: 44px; color: var(--brand-violet); }
.login__brand b { font: 600 20px/1 var(--font-sans); letter-spacing: -.01em; }
.login__brand span { display: block; margin-top: 4px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .02em; color: var(--text-tertiary); }
.login__brand span a { color: var(--brand-violet); text-decoration: underline; text-underline-offset: 2px; }
.login__brand span a:hover { color: var(--brand-violet-hover); }
.login__title { font: 600 22px/1.1 var(--font-sans); letter-spacing: -.02em; }
.login__sub { margin: 4px 0 20px; font: 500 12px/1.4 var(--font-mono); color: var(--text-tertiary); letter-spacing: .02em; }
.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 7px; font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.field input {
  width: 100%; height: 50px; padding: 0 14px; font: 400 16px var(--font-sans);
  border: 1px solid var(--border); border-radius: 11px; background: var(--bg-subtle);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.field input:focus { outline: none; border-color: var(--brand-violet); background: var(--bg); box-shadow: 0 0 0 3px rgba(99, 46, 230, .14); }
/* Кнопка-действие: и <button>, и <a> (line-height центрирует текст ссылки). */
.login__btn {
  display: block; width: 100%; min-height: 50px; margin-top: 6px; border: none; border-radius: 11px; cursor: pointer;
  background: var(--brand-amber); color: var(--text-primary); font: 600 16px var(--font-sans);
  text-align: center; text-decoration: none; line-height: 50px; padding: 0;
  box-shadow: 0 8px 20px -10px rgba(253, 185, 19, .9); transition: transform 120ms ease, background 150ms ease;
}
.login__btn:hover { background: var(--brand-amber-hover); }
.login__btn:active { transform: scale(.985); }
/* Второстепенная ссылка под формой («Забыли пароль?», «← Вернуться ко входу»). */
.login__alt { display: block; margin-top: 16px; text-align: center; font: 500 12px/1 var(--font-mono); letter-spacing: .02em; color: var(--text-tertiary); text-decoration: none; }
.login__alt:hover { color: var(--brand-violet); text-decoration: underline; text-underline-offset: 2px; }
@keyframes loginRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .login { animation: none; } .login__btn:active { transform: none; } }