/* ── Auth pages aligned with the public landing ───── */
@keyframes authFadeUp {
  from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(8px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes authPanelIn {
  from { opacity: 0; transform: translate3d(24px, 20px, 0) scale(.98); filter: blur(8px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

html,
body {
  min-height: 100%;
}

.auth-body {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, .82fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  padding: 32px max(32px, calc((100vw - 1180px) / 2));
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #111827;
  background:
    linear-gradient(90deg, rgba(17,24,39,.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17,24,39,.04) 1px, transparent 1px),
    radial-gradient(circle at 12% 18%, rgba(20,184,166,.18), transparent 28%),
    radial-gradient(circle at 88% 64%, rgba(124,58,237,.18), transparent 30%),
    linear-gradient(135deg, #edfdfa 0%, #f6f7ff 48%, #fff7ed 100%);
  background-size: 38px 38px, 38px 38px, auto, auto, auto;
  overflow-x: hidden;
}

.auth-body::before {
  content: none;
}

.auth-panel-left,
.auth-panel-right {
  transition: opacity .16s cubic-bezier(.16,1,.3,1), transform .16s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}

.auth-body.page-transitioning .auth-panel-left,
.auth-body.page-transitioning .auth-panel-right {
  opacity: 0;
  transform: translateY(-8px) scale(.992);
}

.auth-panel-left,
.auth-panel-right {
  min-width: 0;
}

.auth-panel-left {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: min(720px, calc(100vh - 64px));
  padding: clamp(1.8rem, 3vw, 3rem);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 32px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 16% 18%, rgba(20,184,166,.32), transparent 30%),
    radial-gradient(circle at 86% 78%, rgba(124,58,237,.32), transparent 36%),
    #111827;
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
  box-shadow: 0 30px 90px rgba(17,24,39,.18);
  backdrop-filter: blur(18px);
  animation: authFadeUp .75s cubic-bezier(.16,1,.3,1) both;
}

.auth-panel-left::before {
  content: "";
  position: absolute;
  inset: 154px -8vw auto auto;
  width: min(620px, 58vw);
  height: min(390px, 40vw);
  transform: rotate(-7deg);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.02)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.11) 0 12px, rgba(255,255,255,0) 12px 24px);
  border: 1px solid rgba(255,255,255,.1);
  pointer-events: none;
}

.auth-panel-left::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 10%;
  width: 260px;
  height: 260px;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(124,58,237,.36), rgba(20,184,166,.28));
  transform: rotate(10deg);
  pointer-events: none;
}

.auth-orb {
  display: none;
}

.auth-topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 58px;
}

.auth-back,
.auth-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.auth-back {
  gap: .45rem;
  min-height: 42px;
  padding: 0 .9rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  font-size: .92rem;
  font-weight: 900;
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.auth-back:hover {
  transform: translateX(-3px);
  border-color: rgba(20,184,166,.5);
  background: rgba(20,184,166,.14);
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
}

.auth-brand {
  gap: .55rem;
  width: fit-content;
  color: #fff;
  text-shadow: 0 12px 32px rgba(0,0,0,.24);
  transition: transform .18s ease, opacity .18s ease;
}

.auth-brand:hover {
  transform: translateY(-2px);
}

.auth-brand-text {
  font-family: 'Sora', 'Manrope', sans-serif;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0;
}

.auth-brand-text span {
  color: #a78bfa;
}

.auth-mobile-brand-text {
  font-family: 'Sora', 'Manrope', sans-serif;
  color: #111827;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.auth-mobile-brand-text span {
  color: #6d28d9;
}

.auth-brand img:first-child,
.auth-mobile-brand-row img:first-child {
  box-shadow: 0 10px 26px rgba(124,58,237,.25);
}

.auth-hero {
  position: relative;
  z-index: 1;
  max-width: 520px;
  animation: authFadeUp .75s cubic-bezier(.16,1,.3,1) .1s both;
}

.auth-hero h2 {
  margin: 0 0 1.1rem;
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: clamp(2.85rem, 4.5vw, 4.45rem);
  line-height: 1.06;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 18px 48px rgba(0,0,0,.22);
}

.auth-hero p {
  max-width: 520px;
  margin: 0;
  color: rgba(226,232,240,.82);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 600;
  line-height: 1.65;
}

.auth-features {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  animation: authFadeUp .75s cubic-bezier(.16,1,.3,1) .18s both;
}

.auth-feature {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 40px;
  padding: 0 .95rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  font-size: .9rem;
  font-weight: 800;
  max-width: 100%;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(20,184,166,.5);
  background: rgba(255,255,255,.14);
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
}

.auth-feature-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #14b8a6;
  box-shadow: 0 0 0 6px rgba(20,184,166,.12);
  flex-shrink: 0;
}

.auth-panel-right {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(720px, calc(100vh - 64px));
}

.auth-mobile-hero {
  display: none;
}

.auth-form-wrap {
  width: 100%;
  max-width: 460px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid rgba(17,24,39,.09);
  border-radius: 28px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 30px 90px rgba(17,24,39,.14);
  backdrop-filter: blur(18px);
  animation: authPanelIn .75s cubic-bezier(.16,1,.3,1) .12s both;
}

.auth-form-header {
  margin-bottom: 1.7rem;
}

.auth-form-header h1 {
  margin: 0 0 .45rem;
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: clamp(2rem, 3vw, 2.65rem);
  line-height: 1.08;
  color: #111827;
}

.auth-form-header p {
  margin: 0;
  color: #6b7280;
  font-size: .98rem;
  font-weight: 600;
}

.auth-domain-notice,
.auth-verify-intro {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: -0.55rem 0 1.2rem;
  padding: .85rem .95rem;
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(236,72,153,.16), transparent 42%) padding-box,
    radial-gradient(circle at 78% 0%, rgba(124,58,237,.16), transparent 40%) padding-box,
    radial-gradient(circle at 100% 100%, rgba(6,182,212,.13), transparent 38%) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.88)) padding-box,
    linear-gradient(115deg, rgba(236,72,153,.32), rgba(124,58,237,.34), rgba(6,182,212,.3)) border-box;
  box-shadow: 0 14px 34px rgba(17,24,39,.07);
}

.auth-domain-notice img,
.auth-verify-intro img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  padding: .28rem;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 24px rgba(17,24,39,.08);
  flex-shrink: 0;
}

.auth-domain-notice div,
.auth-verify-intro div {
  display: grid;
  gap: .1rem;
  min-width: 0;
}

.auth-domain-notice span,
.auth-verify-intro span {
  color: rgba(17,24,39,.55);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.auth-domain-notice strong,
.auth-verify-intro strong {
  color: #111827;
  font-size: .92rem;
  font-weight: 900;
  line-height: 1.25;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1rem;
}

.auth-field label {
  color: #374151;
  font-size: .82rem;
  font-weight: 800;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  left: .95rem;
  top: 50%;
  display: flex;
  color: #9ca3af;
  pointer-events: none;
  transform: translateY(-50%);
  transition: color .18s ease, transform .18s ease;
}

.auth-input-wrap:focus-within .auth-input-icon {
  color: #0f766e;
  transform: translateY(-50%) scale(1.06);
}

.auth-input,
input[type=text].auth-input,
input[type=email].auth-input,
input[type=password].auth-input {
  width: 100%;
  height: 52px;
  padding: 0 1rem 0 2.9rem !important;
  border: 1.5px solid rgba(17,24,39,.1);
  border-radius: 16px;
  outline: none;
  background: rgba(248,250,252,.86);
  color: #111827;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.auth-input::placeholder {
  color: #9ca3af;
  font-weight: 600;
}

.auth-input:hover:not(:focus) {
  transform: translateY(-1px);
  border-color: rgba(20,184,166,.35);
  background: #fff;
}

.auth-input:focus {
  border-color: #14b8a6;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(20,184,166,.12);
}

.auth-input.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,.1);
}

.auth-toggle-pw {
  position: absolute;
  right: .75rem;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.auth-toggle-pw:hover {
  color: #111827;
  background: #eef2ff;
  transform: translateY(-50%) scale(1.04);
}

.auth-field-error {
  min-height: 1rem;
  color: #ef4444;
  font-size: .78rem;
  font-weight: 700;
}

.auth-field-hint {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  margin-top: .05rem;
  padding: 0 .7rem;
  border: 1px solid rgba(20,184,166,.16);
  border-radius: 999px;
  color: #64748b;
  background: rgba(236,253,245,.75);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.2;
}

.auth-field-hint strong {
  color: #0f766e;
  margin-right: .25rem;
}

.auth-field-hint[hidden] {
  display: none !important;
}

.auth-error-banner,
.auth-success-banner {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: 1.15rem;
  padding: .85rem 1rem;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: .88rem;
  font-weight: 700;
}

.auth-error-banner {
  background: rgba(254,242,242,.9);
  border-color: #fecaca;
  color: #991b1b;
}

.auth-success-banner {
  background: linear-gradient(135deg, rgba(240,253,250,.94), rgba(255,255,255,.88));
  border-color: rgba(20,184,166,.28);
  color: #0f766e;
  box-shadow: 0 14px 34px rgba(15,118,110,.08);
}

.auth-error-banner svg,
.auth-success-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.auth-route-transition {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(124,58,237,.18), transparent 32%),
    rgba(248,250,252,.72);
  backdrop-filter: blur(0);
  transition: opacity .34s cubic-bezier(.16,1,.3,1), backdrop-filter .34s ease;
}

.auth-route-transition.active {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(16px);
}

.auth-route-card {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.1rem;
  border-radius: 22px;
  color: #111827;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 26px 70px rgba(15,23,42,.16);
  transform: translateY(12px) scale(.96);
  transition: transform .34s cubic-bezier(.16,1,.3,1);
}

.auth-route-transition.active .auth-route-card {
  transform: translateY(0) scale(1);
}

.auth-route-card img {
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(124,58,237,.18);
}

.auth-route-card span {
  font-family: 'Sora', 'Manrope', sans-serif;
  font-weight: 800;
}

.auth-unverified-banner {
  margin-bottom: 1.15rem;
  padding: .95rem;
  border: 1px solid rgba(234,179,8,.26);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(254,249,195,.9), rgba(255,255,255,.82));
  color: #713f12;
  box-shadow: 0 14px 34px rgba(113,63,18,.08);
}

.auth-unverified-banner > div:last-child {
  display: grid;
  gap: .35rem;
}

.auth-unverified-icon {
  float: left;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: .05rem .8rem .4rem 0;
  border-radius: 14px;
  color: #854d0e;
  background: rgba(255,255,255,.68);
}

.auth-unverified-banner p {
  margin: 0;
  color: #422006;
  font-size: .92rem;
  font-weight: 900;
}

.auth-unverified-banner small {
  display: block;
  color: #713f12;
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.45;
}

.auth-inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin-top: .25rem;
}

.auth-inline-action,
.auth-text-button {
  border: 0;
  background: transparent;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
}

.auth-inline-action {
  min-height: 34px;
  padding: 0 .85rem;
  border-radius: 999px;
  color: #fff;
  background: #111827;
  font-size: .78rem;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(17,24,39,.18);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-inline-action:hover {
  transform: translateY(-2px);
  background: #0f172a;
  box-shadow: 0 16px 32px rgba(17,24,39,.22);
}

.auth-inline-action:disabled,
.auth-text-button:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.auth-inline-status {
  color: #64748b;
  font-size: .78rem;
  font-weight: 800;
}

@keyframes authFormOut {
  from { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  to   { opacity: 0; transform: translate3d(0, -10px, 0); filter: blur(3px); }
}

.auth-form-exit {
  animation: authFormOut .18s cubic-bezier(.4,0,1,1) both;
  pointer-events: none;
}

.auth-verify-section {
  animation: authPanelIn .45s cubic-bezier(.16,1,.3,1) both;
}

.auth-verify-intro {
  margin-top: -0.75rem;
}

.auth-code-input,
input[type=text].auth-code-input {
  padding: 0 1rem !important;
  letter-spacing: .34em;
  text-align: center;
  font-size: 1.45rem;
  font-weight: 900;
}

.auth-resend-row {
  margin-top: 1rem;
  color: #64748b;
  text-align: center;
  font-size: .9rem;
  font-weight: 750;
}

.auth-text-button {
  padding: .25rem .2rem;
  color: #0f766e;
  font-size: .9rem;
  font-weight: 900;
  transition: color .18s ease, transform .18s ease;
}

.auth-text-button:hover {
  color: #111827;
  transform: translateY(-1px);
}

.auth-submit {
  position: relative;
  width: 100%;
  height: 54px;
  margin-top: .45rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  box-shadow: 0 16px 34px rgba(17,24,39,.2);
  cursor: pointer;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translateX(-120%);
  transition: transform .55s ease;
}

.auth-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(17,24,39,.26);
}

.auth-submit:hover::after {
  transform: translateX(120%);
}

.auth-submit:active {
  transform: translateY(0) scale(.99);
}

.auth-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

.auth-switch {
  margin-top: 1.35rem;
  color: #6b7280;
  text-align: center;
  font-size: .92rem;
  font-weight: 700;
}

.auth-switch a {
  color: #4f46e5;
  font-weight: 900;
  text-decoration: none;
}

.auth-switch a:hover {
  color: #0f766e;
  text-decoration: underline;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .25rem 0 1rem;
  color: #6b7280;
  font-size: .9rem;
  font-weight: 800;
}

.auth-remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #14b8a6;
  cursor: pointer;
}

.auth-remember label {
  cursor: pointer;
  user-select: none;
}

.auth-pw-rules {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .6rem;
}

.auth-pw-rule {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  min-height: 30px;
  padding: 0 .7rem;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 999px;
  background: rgba(248,250,252,.9);
  color: #8a94a6;
  font-size: .74rem;
  font-weight: 800;
  line-height: 1;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.auth-pw-rule.met {
  color: #047857;
  border-color: #99f6e4;
  background: #ecfdf5;
  transform: translateY(-1px);
}

.auth-pw-rule svg {
  flex-shrink: 0;
}

@media (max-width: 980px) {
  .auth-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1.25rem;
    padding: 18px;
  }

  .auth-panel-left {
    min-height: auto;
    padding: 1rem;
    border-radius: 24px;
  }

  .auth-panel-left::before,
  .auth-panel-left::after,
  .auth-hero,
  .auth-features {
    display: none;
  }

  .auth-brand {
    min-height: 46px;
  }

  .auth-panel-right {
    width: 100%;
    min-height: auto;
    align-items: start;
  }

  .auth-form-wrap {
    max-width: 100%;
    border-radius: 24px;
  }
}

@media (max-width: 540px) {
  .auth-body {
    padding: 20px 14px;
    overflow-x: hidden;
    justify-content: center;
    gap: 0;
  }

  /* Strip dark panel to topbar-only on small mobile */
  .auth-panel-left {
    background: none;
    min-height: 0;
    padding: 0;
    border-radius: 0;
  }

  .auth-panel-left::before,
  .auth-panel-left::after {
    display: none;
  }

  .auth-hero,
  .auth-features {
    display: none;
  }

  .auth-topbar {
    min-height: 48px;
    padding: 0 4px;
  }

  .auth-back {
    color: var(--text);
    background: rgba(0, 0, 0, .06);
    border-color: rgba(0, 0, 0, .1);
    font-size: .82rem;
    min-height: 36px;
    padding: 0 .75rem;
  }

  .auth-back:hover {
    color: var(--text);
    background: rgba(0, 0, 0, .1);
  }

  .auth-back svg path {
    stroke: currentColor;
  }

  .auth-brand {
    display: none;
  }

  .auth-panel-right {
    min-height: 0;
  }

  .auth-form-wrap {
    padding: 1.4rem 1.1rem;
    border-radius: 20px;
    overflow: hidden;
  }

  .auth-form-header {
    margin-bottom: 1.1rem;
  }

  .auth-form-header h1 {
    font-size: 1.35rem;
  }

  .auth-form-header p {
    font-size: .84rem;
  }

  .auth-domain-notice,
  .auth-verify-intro {
    padding: .55rem .75rem;
    margin: 0 0 1rem;
    gap: .6rem;
  }

  .auth-domain-notice img,
  .auth-verify-intro img {
    width: 32px;
    height: 32px;
  }

  .auth-domain-notice strong,
  .auth-verify-intro strong {
    font-size: .84rem;
  }

  .auth-field {
    gap: .4rem;
    margin-bottom: .85rem;
  }

  .auth-input,
  input[type=text].auth-input,
  input[type=email].auth-input,
  input[type=password].auth-input {
    height: 44px;
    font-size: 16px;
  }

  .auth-pw-rules {
    gap: .35rem;
    margin-top: .45rem;
  }

  .auth-pw-rule {
    min-height: 26px;
    padding: 0 .5rem;
    font-size: .67rem;
  }

  .auth-remember {
    margin: .4rem 0 .8rem;
    font-size: .84rem;
  }

  .auth-submit {
    height: 46px;
    margin-top: .35rem;
  }

  .auth-switch {
    margin-top: .9rem;
    font-size: .82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-panel-left,
  .auth-hero,
  .auth-features,
  .auth-form-wrap {
    animation: none !important;
  }

  .auth-feature,
  .auth-input,
  .auth-submit,
  .auth-toggle-pw,
  .auth-pw-rule {
    transition: none !important;
  }
}

/* ── Password Reset / Forgot Password pages ──────────────────── */

@keyframes spinnerSpin {
  to { transform: rotate(360deg); }
}

.auth-reset-body {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.reset-card {
  width: 100%;
  max-width: 420px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid rgba(17,24,39,.09);
  border-radius: 28px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 30px 90px rgba(17,24,39,.14);
  backdrop-filter: blur(18px);
  animation: authPanelIn .75s cubic-bezier(.16,1,.3,1) .08s both;
}

.reset-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}

.reset-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: #111827;
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  transition: transform .18s ease, opacity .18s ease;
}

.reset-brand:hover {
  transform: translateY(-1px);
  opacity: .82;
}

.reset-brand > span > span {
  color: #6d28d9;
}

.reset-nav-link {
  color: #6b7280;
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
  display: inline-block;
}

.reset-nav-link:hover {
  color: #111827;
  transform: translateX(-2px);
}

.reset-icon-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 1.25rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(124,58,237,.15));
  border: 1px solid rgba(124,58,237,.18);
  color: #7c3aed;
}

.reset-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.reset-header h1 {
  margin: 0 0 .5rem;
  font-family: 'Sora', 'Manrope', sans-serif;
  font-size: clamp(1.55rem, 3vw, 1.9rem);
  line-height: 1.1;
  color: #111827;
}

.reset-header p {
  margin: 0;
  color: #6b7280;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.55;
}

.reset-warning {
  display: inline-block;
  margin-top: .5rem;
  padding: .3rem .7rem;
  border: 1px solid rgba(234,179,8,.28);
  border-radius: 8px;
  background: rgba(254,243,199,.7);
  color: #92400e;
  font-size: .8rem;
  font-weight: 800;
}

.reset-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.reset-field {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 800;
  color: #374151;
}

.reset-input {
  width: 100%;
  height: 52px;
  padding: 0 1rem !important;
  border: 1.5px solid rgba(17,24,39,.1);
  border-radius: 16px;
  outline: none;
  background: rgba(248,250,252,.86);
  color: #111827;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  box-sizing: border-box;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.reset-input::placeholder {
  color: #9ca3af;
  font-weight: 600;
}

.reset-input:hover:not(:focus) {
  transform: translateY(-1px);
  border-color: rgba(99,102,241,.35);
  background: #fff;
}

.reset-input:focus {
  border-color: #6366f1;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}

/* Submit buttons */
.reset-submit {
  position: relative;
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 16px 34px rgba(79,70,229,.28);
  cursor: pointer;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.reset-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translateX(-120%);
  transition: transform .55s ease;
}

.reset-submit:hover:not(:disabled)::after {
  transform: translateX(120%);
}

.reset-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(79,70,229,.36);
}

.reset-submit:active:not(:disabled) {
  transform: translateY(0) scale(.99);
}

.reset-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}

.reset-submit.is-loading {
  pointer-events: none;
}

.reset-submit-rose {
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  box-shadow: 0 16px 34px rgba(124,58,237,.28);
}

.reset-submit-rose:hover:not(:disabled) {
  box-shadow: 0 22px 44px rgba(124,58,237,.38);
}

/* Spinner inside button */
.btn-spinner {
  display: none;
  width: 17px;
  height: 17px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spinnerSpin .7s linear infinite;
  flex-shrink: 0;
}

.reset-submit.is-loading .btn-spinner {
  display: block;
}

/* Toast */
.auth-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  z-index: 100;
  min-width: 240px;
  max-width: 90vw;
  padding: .8rem 1.2rem;
  border-radius: 16px;
  background: #111827;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 24px 60px rgba(17,24,39,.28);
  transform: translateX(-50%) translateY(calc(100% + 2rem));
  opacity: 0;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}

.auth-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.auth-toast.success {
  background: linear-gradient(135deg, #059669, #0d9488);
}

.auth-toast.error {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

/* Code boxes (5-char reset code) */
.code-grid {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin: .25rem 0;
}

.code-box {
  width: 56px;
  height: 64px;
  border: 1.5px solid rgba(17,24,39,.14);
  border-radius: 14px;
  background: rgba(248,250,252,.86);
  color: #111827;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 1.6rem;
  font-weight: 900;
  text-align: center;
  outline: none;
  caret-color: #7c3aed;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.code-box:focus {
  border-color: rgba(124,58,237,.45);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}

.code-box.filled {
  border-color: #7c3aed;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}

/* Page exit transition for reset pages */
.auth-reset-body .reset-card {
  transition: opacity .16s cubic-bezier(.16,1,.3,1), transform .16s cubic-bezier(.16,1,.3,1);
}

.auth-reset-body.page-transitioning .reset-card {
  opacity: 0;
  transform: translateY(-8px) scale(.992);
}

/* Two-step visibility */
.reset-step {
  display: none;
}

.reset-step.active {
  display: block;
  animation: authPanelIn .38s cubic-bezier(.16,1,.3,1) both;
}

@keyframes resetStepOut {
  from { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  to   { opacity: 0; transform: translate3d(0, -10px, 0); filter: blur(3px); }
}

.reset-step-exit {
  display: block !important;
  animation: resetStepOut .18s cubic-bezier(.4,0,1,1) both;
  pointer-events: none;
}

/* Password input + eye toggle */
.reset-password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.reset-password-wrap .reset-input {
  padding-right: 3rem !important;
}

.reset-eye {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.reset-eye:hover {
  color: #111827;
  background: #eef2ff;
}

/* Strength indicator */
.reset-strength {
  margin-top: -.25rem;
}

.strength-bars {
  display: flex;
  gap: .4rem;
  margin-bottom: .7rem;
}

.strength-bars span {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: rgba(17,24,39,.1);
  transition: background .22s ease;
}

.reset-strength[data-score="1"] .strength-bars span:nth-child(1) { background: #ef4444; }
.reset-strength[data-score="2"] .strength-bars span:nth-child(-n+2) { background: #f59e0b; }
.reset-strength[data-score="3"] .strength-bars span:nth-child(-n+3) { background: #eab308; }
.reset-strength[data-score="4"] .strength-bars span { background: #22c55e; }

.strength-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem .75rem;
}

.strength-checks div {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .79rem;
  font-weight: 800;
  color: #9ca3af;
}

.strength-checks div::before {
  content: "✗";
  font-size: .75rem;
  flex-shrink: 0;
}

.strength-checks div.passed {
  color: #047857;
}

.strength-checks div.passed::before {
  content: "✓";
  color: #059669;
}

/* Footer note */
.reset-footer-note {
  margin-top: 1.25rem;
  text-align: center;
  color: #9ca3af;
  font-size: .84rem;
  font-weight: 700;
}

.reset-footer-note a {
  color: #6366f1;
  font-weight: 900;
  text-decoration: none;
}

.reset-footer-note a:hover {
  text-decoration: underline;
  color: #4f46e5;
}

@media (max-width: 540px) {
  .auth-reset-body {
    padding: 1rem .75rem;
  }

  .reset-card {
    padding: 1.15rem;
  }

  .code-box {
    width: 46px;
    height: 56px;
    font-size: 1.35rem;
    border-radius: 12px;
  }

  .code-grid {
    gap: .3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reset-card,
  .reset-step {
    animation: none !important;
  }

  .reset-input,
  .reset-submit,
  .reset-eye,
  .code-box,
  .strength-bars span,
  .strength-checks div {
    transition: none !important;
  }
}