:root {
  --auth-brand: #1877f2;
  --auth-brand-hover: #0d66d0;
  --auth-bg: #f3f6fb;
  --auth-card: #fff;
  --auth-ink: #152238;
  --auth-muted: #718096;
  --auth-line: #dce5f1;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.auth-page {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: radial-gradient(ellipse at 50% 4%, rgba(24, 119, 242, .12), transparent 42%), var(--auth-bg);
  color: var(--auth-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.dark-mode.auth-page {
  --auth-bg: #0b1220;
  --auth-card: #101a2d;
  --auth-ink: #e7edf8;
  --auth-muted: #91a2bd;
  --auth-line: #22314d;
  background: radial-gradient(ellipse at 50% 4%, rgba(24, 119, 242, .14), transparent 42%), var(--auth-bg);
  color: var(--auth-ink);
}
.auth-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 72px 18px 28px;
}
.auth-language { position: fixed; top: 16px; right: max(16px, env(safe-area-inset-right)); z-index: 5; }
.auth-language .lang-switch { width: auto; min-width: 132px; border-color: var(--auth-line); border-radius: 12px; background-color: var(--auth-card); color: var(--auth-ink); }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--auth-ink); font-size: 1.35rem; font-weight: 800; text-decoration: none; }
.auth-brand img { width: 42px; height: 42px; object-fit: contain; }
.auth-brand:hover { color: var(--auth-brand); }
.auth-card {
  width: min(100%, 470px);
  padding: clamp(24px, 5vw, 38px);
  border: 1px solid var(--auth-line);
  border-radius: 24px;
  background: var(--auth-card);
  box-shadow: 0 22px 70px rgba(23, 48, 83, .1);
}
.dark-mode .auth-card { box-shadow: 0 24px 72px rgba(0, 0, 0, .28); }
.auth-card__intro { margin-bottom: 26px; text-align: center; }
.auth-card__intro h1 { margin: 0; color: var(--auth-brand); font-size: clamp(1.8rem, 5vw, 2.15rem); font-weight: 800; letter-spacing: -.035em; }
.auth-card__intro p { margin: 7px 0 0; color: var(--auth-muted); font-size: .94rem; }
.auth-form-wrap, .input__box { width: 100%; }
.auth-form-wrap .form-floating > .form-control {
  min-height: 58px;
  border-color: var(--auth-line);
  border-radius: 13px;
  background: var(--auth-bg);
  color: var(--auth-ink);
  box-shadow: none;
}
.auth-form-wrap .auth-password-field > .form-control { padding-right: 54px; }
.auth-eye-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 6;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--auth-muted);
  font-size: 1.1rem;
}
.auth-eye-toggle:hover, .auth-eye-toggle:focus-visible { background: rgba(24, 119, 242, .1); color: var(--auth-brand); outline: none; }
.auth-form-wrap .form-floating > .form-control:focus { border-color: var(--auth-brand); background: var(--auth-card); box-shadow: 0 0 0 .22rem rgba(24, 119, 242, .15); }
.auth-form-wrap .form-floating > label { color: var(--auth-muted); }
.auth-form-wrap .form-floating > .form-control:focus ~ label,
.auth-form-wrap .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--auth-brand); }
.dark-mode .auth-form-wrap .form-control { color-scheme: dark; }
.dark-mode .auth-form-wrap .form-floating > label::after { background: transparent; }
.auth-page .form-control:-webkit-autofill,
.auth-page .form-control:-webkit-autofill:hover,
.auth-page .form-control:-webkit-autofill:focus,
.auth-page .form-control:autofill {
  -webkit-text-fill-color: var(--auth-ink) !important;
  caret-color: var(--auth-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--auth-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--auth-bg) inset !important;
}
.auth-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  border-color: var(--auth-brand);
  border-radius: 13px;
  background: var(--auth-brand);
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(24, 119, 242, .2);
}
.auth-submit:hover, .auth-submit:focus-visible { border-color: var(--auth-brand-hover); background: var(--auth-brand-hover); }
.auth-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 22px 0 0; color: var(--auth-muted); text-align: center; }
.auth-switch a { color: var(--auth-brand); font-weight: 650; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-footer { color: var(--auth-muted); font-size: .8rem; }
.auth-alert { display: none; margin: 8px 0 12px; padding: 12px 14px; border: 1px solid #f4c7ce; border-radius: 12px; background: #fff1f2; color: #a61e36; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.auth-alert:not(:empty) { display: block; }
.dark-mode .auth-alert { border-color: rgba(255, 107, 129, .28); background: rgba(169, 30, 54, .14); color: #ff9aa9; }
.auth-referral { border-radius: 12px; }
.dark-mode .auth-referral { border-color: rgba(55, 147, 255, .28); background: rgba(24, 119, 242, .14); color: #abd0ff; }
@media (max-width: 575.98px) {
  .auth-shell { justify-content: center; gap: 16px; padding: 76px 16px 22px; }
  .auth-brand { font-size: 1.2rem; }
  .auth-brand img { width: 36px; height: 36px; }
  .auth-card { padding: 24px 20px; border-radius: 20px; }
  .auth-card--register { margin-block: auto; }
}