/* Вход повторяет страницу входа BBB (test.bebetterbar.ru): размеры сняты замером 16.10.2026. */
.auth {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.auth-form { width: 100%; max-width: 500px; animation: authIn 700ms cubic-bezier(.2, .9, .2, 1) both; transform-origin: 50% 40%; }
.auth-form hgroup { margin: 0 0 64px; text-align: center; animation: authFade 900ms ease both 120ms; }
.auth-form h1 {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0; font: 600 48px/57.6px var(--font-display); color: var(--text);
}
.auth-form h1 img { display: block; width: 50px; height: 50px; flex: none; }
.auth-form hgroup p { margin: 24px 0 0; font: 500 18px/1.4 var(--font-display); color: var(--text-muted); }

.auth-field { display: block; margin: 0 0 40px; animation: authUp 700ms cubic-bezier(.2, .9, .2, 1) both 160ms; }
.auth-field + .auth-field { animation-delay: 240ms; }
.auth-field input {
  display: block; width: 100%; height: 50px; padding: 0 16px;
  border: 1px solid #fff; border-radius: 72px; background: transparent;
  color: #fff; font: 400 16px/1.5 Arial, Helvetica, sans-serif;
  outline: none; transition: border-color 150ms ease, box-shadow 150ms ease;
}
.auth-field input::placeholder { color: rgb(255 255 255 / 55%); }
.auth-field input:focus, .auth-field input:focus-visible { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgb(207 240 28 / 18%); }
/* автозаполнение браузера не красит поле в белое */
.auth-field input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px #1d0a4a inset; caret-color: #fff; }

.auth-submit {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 50px; border: 0; border-radius: 28px;
  background: var(--lime); color: var(--night);
  font: 500 16px/1 var(--font-display); cursor: pointer;
  transition: background-color 150ms ease;
}
.auth-submit:hover { background: var(--lime-hover); }
.auth-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(207 240 28 / 35%); }
.auth-submit:disabled { opacity: .7; cursor: default; }

.auth-error {
  margin: -40px 0 24px; padding: 12px 16px; border-radius: 14px;
  background: rgb(239 68 68 / 12%); border: 1px solid rgb(239 68 68 / 35%);
  color: #fca5a5; font-size: 14px; line-height: 1.4; text-align: center;
}

@keyframes authIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes authFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes authUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 599px) {
  .auth-form h1 { font-size: 36px; line-height: 44px; }
  .auth-form h1 img { width: 40px; height: 40px; }
  .auth-form hgroup { margin-bottom: 40px; }
  .auth-form hgroup p { font-size: 15px; margin-top: 16px; }
  .auth-field { margin-bottom: 20px; }
  .auth-error { margin-top: -16px; }
}