/* =====================================================================
   CYBERX v86 — stable auth transitions
   Keeps the original composition, but prevents vertical layout jumps.
===================================================================== */

.account-page--auth{
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-top:clamp(104px, 10vw, 138px) !important;
  padding-bottom:clamp(64px, 7vw, 96px) !important;
}

.account-page--auth .account-auth{
  align-items:start !important;
}

/* The intro is anchored to its own rhythm and never re-centers on form changes. */
.account-page--auth .account-auth__intro{
  min-height:260px;
  padding-top:clamp(22px, 4vw, 58px);
}

.account-page--auth .account-auth-card{
  position:relative;
  min-height:580px;
  overflow:hidden;
  transform:translateZ(0);
}

/* Animated tab marker without shifting the button labels. */
.account-page--auth .account-tabs{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.account-page--auth .account-tabs::before{
  content:"";
  position:absolute;
  inset:6px auto 6px 6px;
  z-index:0;
  width:calc(50% - 10px);
  border-radius:999px;
  background:
    linear-gradient(135deg, #ff0033, #c60027);
  box-shadow:0 10px 28px rgba(255,0,51,.25);
  transform:translateX(0);
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}

.account-page--auth [data-account-auth][data-auth-active="register"] .account-tabs::before{
  transform:translateX(calc(100% + 8px));
}

.account-page--auth .account-tabs button{
  position:relative;
  z-index:1;
  background:transparent !important;
  transition:color .22s ease;
}

.account-page--auth .account-tabs button.is-active{
  color:#fff !important;
}

/* Fixed stage height removes layout shifts. Forms crossfade and slide softly. */
.account-form-stage{
  position:relative;
  min-height:480px;
}

.account-page--auth .account-form{
  position:absolute;
  inset:0;
  display:grid !important;
  align-content:start;
  gap:14px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(20px, 0, 0);
  transition:
    opacity .28s ease,
    transform .38s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear .38s;
  will-change:transform, opacity;
}

.account-page--auth .account-form.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(0, 0, 0);
  transition:
    opacity .30s ease .04s,
    transform .40s cubic-bezier(.22,.61,.36,1) .04s,
    visibility 0s;
}

.account-page--auth [data-auth-active="register"] .account-form[data-auth-panel="login"]{
  transform:translate3d(-20px, 0, 0);
}

.account-page--auth .account-form__head{
  min-height:82px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.account-page--auth .account-form__head p{
  max-width:420px;
  margin-bottom:0 !important;
}

/* A quiet scan line makes the swap feel intentional, without affecting form layout. */
.account-form-stage::after{
  content:"";
  position:absolute;
  top:0;
  left:-22%;
  width:18%;
  height:100%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg, transparent, rgba(255,0,51,.14), transparent);
  transform:skewX(-16deg);
}

.account-page--auth [data-auth-switching="true"] .account-form-stage::after{
  animation:authScan .48s ease-out;
}

@keyframes authScan{
  0%{ left:-22%; opacity:0; }
  24%{ opacity:.9; }
  100%{ left:110%; opacity:0; }
}

@media (max-width:980px){
  .account-page--auth .account-auth{
    align-items:stretch !important;
  }

  .account-page--auth .account-auth__intro{
    min-height:auto;
    padding-top:0;
  }

  .account-page--auth .account-auth-card{
    min-height:580px;
  }
}

@media (max-width:680px){
  .account-page--auth{
    display:block;
    min-height:auto;
    padding-top:88px !important;
  }

  .account-page--auth .account-auth-card{
    min-height:580px;
    padding:16px !important;
    border-radius:24px !important;
  }

  .account-form-stage{
    min-height:480px;
  }

  .account-page--auth .account-form{
    gap:12px;
  }

  .account-page--auth .account-form__head{
    min-height:72px;
  }

  .account-page--auth .account-tabs button{
    font-size:.64rem !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .account-page--auth .account-tabs::before,
  .account-page--auth .account-form,
  .account-form-stage::after{
    transition:none !important;
    animation:none !important;
  }
}