/* =========================================================
   MOVEDONE AUTH
   ========================================================= */

.auth-page {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(255, 90, 79, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(255, 138, 113, 0.08),
      transparent 30%
    ),
    var(--md-cream);
}


.auth-back {
  margin-left: auto;

  color: var(--md-muted);

  font-size: 0.86rem;

  font-weight: 750;
}


.auth-main {
  padding: 70px 0 100px;
}


.auth-layout {
  width:
    min(
      1080px,
      calc(100% - 32px)
    );

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(420px, 0.75fr);

  gap: 80px;

  align-items: center;
}


/* =========================================================
   INTRO
   ========================================================= */

.auth-intro {
  max-width: 580px;
}


.auth-eyebrow {
  display: inline-flex;

  padding:
    8px 12px;

  margin-bottom: 20px;

  border-radius: 999px;

  background:
    var(--md-coral-soft);

  color:
    var(--md-coral-dark);

  font-size: 0.78rem;

  font-weight: 850;
}


.auth-intro h1 {
  margin: 0;

  font-size:
    clamp(
      3.4rem,
      6vw,
      5.6rem
    );

  line-height: 0.93;

  letter-spacing:
    -0.065em;
}


.auth-intro h1 span {
  color:
    var(--md-coral);
}


.auth-intro > p {
  max-width: 540px;

  margin:
    24px 0 0;

  color:
    var(--md-muted);

  font-size: 1.05rem;

  line-height: 1.65;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.auth-benefits {
  display: grid;

  gap: 17px;

  margin-top: 34px;
}


.auth-benefit {
  display: grid;

  grid-template-columns:
    34px 1fr;

  gap: 13px;

  align-items: start;
}


.auth-benefit > span {
  width: 30px;
  height: 30px;

  display: grid;

  place-items: center;

  border-radius: 10px;

  background:
    var(--md-green-soft);

  color:
    var(--md-green);

  font-size: 0.8rem;

  font-weight: 950;
}


.auth-benefit strong {
  display: block;

  margin-bottom: 3px;

  font-size: 0.91rem;
}


.auth-benefit small {
  display: block;

  color:
    var(--md-muted);

  font-size: 0.8rem;

  line-height: 1.45;
}


/* =========================================================
   EXISTING MOVE PREVIEW
   ========================================================= */

.auth-move-preview {
  margin-top: 34px;

  padding: 18px;

  display: grid;

  grid-template-columns:
    44px 1fr;

  gap: 14px;

  align-items: center;

  border:
    1px solid
    rgba(
      255,
      90,
      79,
      0.18
    );

  border-radius: 17px;

  background:
    rgba(
      255,
      255,
      255,
      0.72
    );
}


.auth-move-icon {
  width: 44px;
  height: 44px;

  display: grid;

  place-items: center;

  border-radius: 14px;

  background:
    var(--md-coral);

  color: white;

  font-weight: 950;
}


.auth-move-preview span,
.auth-move-preview small {
  display: block;

  color:
    var(--md-muted);

  font-size: 0.76rem;
}


.auth-move-preview strong {
  display: block;

  margin:
    2px 0;

  font-size: 0.95rem;
}


/* =========================================================
   CARD
   ========================================================= */

.auth-card {
  width: 100%;

  padding: 28px;

  border:
    1px solid
    var(--md-line);

  border-radius: 28px;

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  box-shadow:
    var(--md-shadow);
}


/* =========================================================
   TABS
   ========================================================= */

.auth-tabs {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 5px;

  padding: 5px;

  margin-bottom: 28px;

  border-radius: 14px;

  background:
    #f4efea;
}


.auth-tab {
  min-height: 42px;

  border: 0;

  border-radius: 10px;

  background:
    transparent;

  color:
    var(--md-muted);

  font-weight: 800;
}


.auth-tab.active {
  background: white;

  color:
    var(--md-ink);

  box-shadow:
    0 4px 12px
    rgba(
      40,
      30,
      20,
      0.06
    );
}


/* =========================================================
   PANELS
   ========================================================= */

.auth-panel {
  display: none;
}


.auth-panel.active {
  display: block;

  animation:
    authFade 180ms ease;
}


@keyframes authFade {
  from {
    opacity: 0;

    transform:
      translateY(5px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


.auth-card-heading {
  margin-bottom: 24px;
}


.auth-card-heading h2 {
  margin:
    0 0 7px;

  font-size: 1.65rem;

  letter-spacing:
    -0.04em;
}


.auth-card-heading p {
  margin: 0;

  color:
    var(--md-muted);

  font-size: 0.88rem;

  line-height: 1.5;
}


/* =========================================================
   FIELDS
   ========================================================= */

.auth-field {
  margin-bottom: 17px;
}


.auth-field label {
  display: block;

  margin-bottom: 7px;

  color: #454b50;

  font-size: 0.82rem;

  font-weight: 800;
}


.auth-field input {
  width: 100%;

  min-height: 52px;

  padding:
    0 14px;

  border:
    1px solid
    #ded7d0;

  border-radius: 13px;

  background: white;

  color:
    var(--md-ink);

  outline: none;
}


.auth-field input:focus {
  border-color:
    var(--md-coral);

  box-shadow:
    0 0 0 4px
    rgba(
      255,
      90,
      79,
      0.09
    );
}


.auth-field input::placeholder {
  color:
    #a1a5a8;
}


.auth-field-help {
  display: block;

  margin-top: 6px;

  color:
    var(--md-muted);

  font-size: 0.73rem;
}


/* =========================================================
   PASSWORD
   ========================================================= */

.password-wrap {
  position: relative;
}


.password-wrap input {
  padding-right: 68px;
}


.password-toggle {
  position: absolute;

  right: 10px;
  top: 50%;

  transform:
    translateY(-50%);

  padding:
    7px 8px;

  border: 0;

  background:
    transparent;

  color:
    var(--md-coral-dark);

  font-size: 0.73rem;

  font-weight: 850;
}


/* =========================================================
   ERRORS
   ========================================================= */

.auth-message {
  display: none;

  margin:
    4px 0 15px;

  padding:
    11px 13px;

  border-radius: 11px;

  background:
    #fff1ef;

  color:
    #a93931;

  font-size: 0.8rem;

  font-weight: 700;

  line-height: 1.4;
}


.auth-message.visible {
  display: block;
}


.auth-message.success {
  background:
    var(--md-green-soft);

  color:
    var(--md-green);
}


/* =========================================================
   SUBMIT
   ========================================================= */

.auth-submit {
  width: 100%;

  min-height: 54px;

  border-radius: 13px;

  margin-top: 4px;
}


.auth-submit:disabled {
  opacity: 0.72;

  cursor: default;
}


/* =========================================================
   SWITCH
   ========================================================= */

.auth-switch-copy {
  margin-top: 21px;

  text-align: center;

  color:
    var(--md-muted);

  font-size: 0.8rem;
}


.auth-switch-copy button {
  border: 0;

  padding: 0;

  background:
    transparent;

  color:
    var(--md-coral-dark);

  font-weight: 850;
}


/* =========================================================
   ALREADY SIGNED IN
   ========================================================= */

.auth-signed-in {
  text-align: center;

  padding:
    20px 5px 5px;
}


.auth-signed-in-mark {
  width: 58px;
  height: 58px;

  display: grid;

  place-items: center;

  margin:
    0 auto 18px;

  border-radius: 18px;

  background:
    var(--md-green);

  color: white;

  font-size: 1.5rem;

  font-weight: 950;
}


.auth-signed-in h2 {
  margin:
    0 0 8px;

  font-size: 1.7rem;

  letter-spacing:
    -0.04em;
}


.auth-signed-in p {
  margin:
    0 0 22px;

  color:
    var(--md-muted);

  font-size: 0.9rem;

  line-height: 1.5;
}


.auth-signed-in .button {
  width: 100%;

  display: inline-flex;

  justify-content: center;

  align-items: center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .auth-main {
    padding-top: 44px;
  }

  .auth-layout {
    grid-template-columns:
      1fr;

    gap: 42px;
  }

  .auth-intro {
    max-width: 700px;
  }

  .auth-card {
    max-width: 620px;
  }
}


@media (max-width: 560px) {

  .auth-back {
    font-size: 0;

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: white;

    border:
      1px solid
      var(--md-line);
  }


  .auth-back::after {
    content: "←";

    font-size: 1rem;

    color:
      var(--md-ink);
  }


  .auth-main {
    padding:
      32px 0 60px;
  }


  .auth-layout {
    width:
      calc(
        100% - 22px
      );

    gap: 30px;
  }


  .auth-intro h1 {
    font-size: 3.45rem;
  }


  .auth-benefits {
    display: none;
  }


  .auth-move-preview {
    margin-top: 24px;
  }


  .auth-card {
    padding: 21px;

    border-radius: 22px;
  }
}