/* ==========================================================================
   Log in / Create account / Forgot password / Reset password
   — redesign approved 1 Oct 2026

   One card of one fixed size for every mode, so moving between the pages
   never makes it jump: the content starts at the top and the switch link is
   pinned to the bottom (.au-foot). Left: a light panel with three pictures
   (hidden under 900px). Classes are prefixed au-; resets use :where() so they
   never outrank a component rule.
   ========================================================================== */
.au-page {
  --au-brand: #2563eb;
  --au-brand-hover: #1d4ed8;
  --au-ink: #0f172a;
  --au-ink-2: #334155;
  --au-muted: #64748b;
  --au-faint: #94a3b8;
  --au-line: #e5e8ee;
  --au-soft: #f7f8fa;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding-bottom: 0;
  background: var(--au-soft);
  color: var(--au-ink);
}
:where(.au-page) :where(h1, p) { margin: 0; }
:where(.au-page) a { color: inherit; text-decoration: none; }
:where(.au-page) :focus-visible { outline: 2px solid var(--au-brand); outline-offset: 2px; border-radius: 6px; }
.au-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---------- minimal top bar ---------- */
.au-top__in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.au-top__logo img { display: block; height: 30px; width: auto; }
.au-top__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--au-ink-2); }
.au-top__back:hover { color: var(--au-brand); }

/* ---------- the card ---------- */
.au-main { flex: 1; display: grid; place-items: center; padding: 8px 24px 32px; }
.au-card { display: grid; grid-template-columns: minmax(0, 1fr) 460px; width: min(1060px, 100%); min-height: 640px; overflow: hidden; background: #fff; border: 1px solid var(--au-line); border-radius: 24px; box-shadow: 0 30px 70px -40px rgba(15, 23, 42, .35); }

/* left: three pictures + what InvitePoster is */
.au-visual { position: relative; display: flex; flex-direction: column; padding: 40px 40px 30px; overflow: hidden; background: linear-gradient(160deg, #eef3ff 0%, #f4f2ff 100%); }
.au-visual__title { font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: var(--au-ink); }
.au-visual__title span { color: var(--au-brand); }
.au-visual__sub { max-width: 420px; margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--au-muted); }
.au-fan { position: relative; flex: none; height: 250px; margin: auto 0; }
.au-fan img { position: absolute; left: 50%; bottom: 8px; display: block; width: 150px; height: auto; border: 3px solid #fff; border-radius: 14px; box-shadow: 0 18px 36px -16px rgba(15, 23, 42, .45); }
.au-fan--1 img { width: 190px; transform: translateX(-50%); }
.au-fan--2 img:nth-child(1) { transform: translateX(-50%) translateX(-78px) rotate(-6deg); }
.au-fan--2 img:nth-child(2) { transform: translateX(-50%) translateX(78px) rotate(6deg); }
.au-fan--3 img:nth-child(1) { transform: translateX(-50%) translateX(-135px) rotate(-8deg); }
.au-fan--3 img:nth-child(2) { z-index: 2; bottom: 0; width: 176px; transform: translateX(-50%); }
.au-fan--3 img:nth-child(3) { transform: translateX(-50%) translateX(135px) rotate(8deg); }
.au-points { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(37, 99, 235, .12); font-size: 13.5px; font-weight: 700; color: var(--au-ink-2); }
.au-points span { display: inline-flex; align-items: center; gap: 7px; }
.au-points svg { flex-shrink: 0; color: var(--au-brand); }

/* right: the form */
.au-form { display: flex; flex-direction: column; padding: 36px 40px 26px; }
.au-form h1 { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--au-ink); }
.au-sub { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--au-muted); }
.au-alert { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 13.5px; line-height: 1.45; }
.au-alert ul { margin: 0; padding-left: 18px; }
.au-alert--ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.au-note { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: #eef3ff; color: #1e40af; font-size: 12.5px; line-height: 1.45; }
.au-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; margin-top: 20px; border: 1px solid var(--au-line); border-radius: 12px; background: #fff; font-size: 15px; font-weight: 700; color: var(--au-ink); transition: border-color .15s, background .15s; }
.au-google:hover { border-color: var(--au-ink-2); background: var(--au-soft); }
.au-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--au-faint); }
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--au-line); }
.au-fields { margin: 0; }
.au-field { margin-top: 10px; }
.au-field label { display: block; margin-bottom: 5px; font-size: 13.5px; font-weight: 700; color: var(--au-ink-2); }
.au-field input { display: block; width: 100%; height: 44px; margin: 0; padding: 0 14px; border: 1px solid var(--au-line); border-radius: 12px; background: #fff; font: inherit; font-size: 15px; color: var(--au-ink); outline: 0; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.au-field input::placeholder { color: var(--au-faint); }
.au-field input:focus { border-color: var(--au-brand); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.au-pw { position: relative; display: block; }
.au-pw input { padding-right: 46px; }
.au-eye { position: absolute; top: 50%; right: 5px; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--au-faint); cursor: pointer; }
.au-eye:hover { background: var(--au-soft); color: var(--au-ink-2); }
.au-eye[hidden], .au-eye .au-eye__off, .au-eye.is-on .au-eye__on { display: none; }
.au-eye.is-on .au-eye__off { display: block; }
.au-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.au-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 13.5px; }
.au-row > a { font-weight: 700; color: var(--au-brand); }
.au-check, .au-terms { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--au-ink-2); cursor: pointer; }
.au-check input, .au-terms input { flex-shrink: 0; width: 16px; height: 16px; margin: 0; accent-color: var(--au-brand); }
.au-terms { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; font-size: 13px; line-height: 1.5; }
.au-terms input { margin-top: 2px; }
.au-terms a, .au-fine a { font-weight: 700; color: var(--au-brand); }
.au-submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 18px; border: 0; border-radius: 12px; background: var(--au-brand); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: background .15s; }
.au-submit:hover { background: var(--au-brand-hover); }
.au-foot { margin-top: auto; padding-top: 16px; text-align: center; }
.au-switch { font-size: 14px; color: var(--au-muted); }
.au-switch a { font-weight: 700; color: var(--au-brand); }
.au-fine { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--au-faint); }

/* ---------- slim footer ---------- */
.au-ft__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 16px 24px 20px; font-size: 12.5px; color: var(--au-muted); }
.au-ft nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.au-ft a:hover { color: var(--au-ink); }

/* ---------- tablet / phone ---------- */
@media (max-width: 900px) {
  .au-card { grid-template-columns: minmax(0, 1fr); max-width: 480px; min-height: 0; }
  .au-visual { display: none; }
  .au-foot { margin-top: 0; padding-top: 18px; }
}
@media (max-width: 560px) {
  .au-page { background: #fff; }
  .au-wrap { padding: 0 16px; }
  .au-top__in { height: 58px; }
  .au-main { place-items: start center; padding: 0 0 24px; }
  .au-card { border: 0; border-radius: 0; box-shadow: none; }
  .au-form { padding: 14px 16px 8px; }
  .au-form h1 { font-size: 23px; }
  .au-pair { grid-template-columns: minmax(0, 1fr); }
  .au-ft__in { justify-content: center; padding: 16px; text-align: center; }
}