/* ============================================================
   AFSL — AUTHENTICATION
   ============================================================ */

.auth {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
}

/* ─── LEFT: brand panel ─── */

.auth-brand {
  position: relative;
  background: var(--g-navy);
  padding: var(--s-12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: var(--on-dark-soft);
}
.auth-brand::before {
  content: "";
  position: absolute;
  right: -22%; top: -18%;
  width: 74%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(189,145,75,.24), transparent 66%);
}
.auth-brand::after {
  content: "";
  position: absolute;
  left: -18%; bottom: -66%;
  width: 92%; aspect-ratio: 2/1;
  border-radius: 50%;
  border-top: 1px solid rgba(189,145,75,.3);
}
.auth-brand > * { position: relative; z-index: 1; }

.auth-logo img { height: 54px; width: auto; }

.auth-brand-copy { max-width: 440px; }
.auth-brand-copy h2 {
  color: #fff;
  font-size: clamp(1.75rem, 3vw, var(--fs-3xl));
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 48;
}
.auth-brand-copy h2 em { font-style: italic; color: var(--gold-300); }
.auth-brand-copy p { margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--on-dark-faint); }

.auth-perks { display: grid; gap: var(--s-4); margin-top: var(--s-10); }
.auth-perk { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.auth-perk i {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(189,145,75,.18);
  border: 1px solid rgba(189,145,75,.34);
  flex: none;
}
.auth-perk svg { width: 14px; height: 14px; color: var(--gold-300); }

.auth-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--on-dark-faint);
}
.auth-foot a:hover { color: #fff; }

/* ─── RIGHT: form panel ─── */

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-12) var(--s-8);
  background: var(--paper);
  overflow-y: auto;
}
.auth-box { width: 100%; max-width: 430px; }

.auth-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: var(--s-10);
  transition: color var(--t-fast) var(--e-out);
}
.auth-back:hover { color: var(--navy); }
.auth-back svg { width: 15px; height: 15px; transition: transform var(--t-base) var(--e-out); }
.auth-back:hover svg { transform: translateX(-3px); }

.auth-mobile-logo { display: none; margin-bottom: var(--s-8); }
.auth-mobile-logo img { height: 44px; width: auto; }

.auth-head { margin-bottom: var(--s-8); }
.auth-head h1 {
  font-size: var(--fs-2xl);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32;
}
.auth-head p { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-soft); }

.auth-tabs { margin-bottom: var(--s-8); }

.auth-pane { display: none; }
.auth-pane.is-active { display: block; animation: paneIn .38s var(--e-out); }
@keyframes paneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.auth-gen {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 7px;
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--gold-700);
  transition: color var(--t-fast) var(--e-out);
}
.auth-gen:hover { color: var(--navy); }
.auth-gen svg { width: 14px; height: 14px; transition: transform var(--t-base) var(--e-spring); }
.auth-gen:hover svg { transform: rotate(180deg); }

.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.auth-forgot { font-size: var(--fs-xs); font-weight: 700; color: var(--navy); }
.auth-forgot:hover { color: var(--gold-700); }

.auth-alt {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.auth-alt a { font-weight: 700; color: var(--navy); }
.auth-alt a:hover { color: var(--gold-700); }

.auth-switch {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--mist);
  border-radius: var(--r-md);
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.auth-switch svg { width: 17px; height: 17px; color: var(--navy); flex: none; }
.auth-switch a { font-weight: 700; color: var(--navy); }

/* ─── Responsive ─── */

@media (max-width: 960px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-mobile-logo { display: block; }
  .auth-panel { min-height: 100svh; padding: var(--s-8) var(--s-6); align-items: flex-start; }
  .auth-box { margin-top: var(--s-4); }
}