.auth-page {
  padding: var(--padding-48) var(--padding-16) var(--padding-80);
}

.auth-portal {
  max-width: 760px;
  margin: 0 auto;
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--br-16);
  padding: var(--padding-32);
  display: flex;
  flex-direction: column;
  gap: var(--gap-32);
}

.auth-portal > * {
  width: 100%;
}

.auth-portal__intro h1 {
  margin: 0 0 var(--margin-12);
  font-family: var(--font-zalando-sans);
  font-size: var(--fs-36);
  line-height: var(--lh-40);
  font-weight: 600;
  letter-spacing: var(--ls--0_4);
  color: var(--color-text-primary);
}

.auth-portal__intro p {
  margin: 0;
  font-family: var(--font-zalando-sans);
  font-size: var(--fs-18);
  line-height: var(--lh-28);
  color: var(--color-text-secondary);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
}

.auth-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-8);
}

.auth-form__field span {
  font-family: var(--font-zalando-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-20);
  font-weight: 600;
  color: var(--color-text-primary);
}

.auth-form__field input {
  width: 100%;
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: var(--font-zalando-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-24);
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
}

.auth-form__field input::placeholder {
  color: var(--color-icon-primary);
}

.auth-form__field input:focus {
  outline: none;
  border-color: var(--color-border-accent);
  box-shadow: 0 0 0 4px rgba(7, 87, 184, 0.14);
}

.auth-submit-wrap {
  justify-content: flex-start;
  margin-top: var(--margin-8);
  margin-left: 0;
}

.auth-form__submit {
  border: 0;
  transition: background-color 0.3s ease;
}

.auth-form__submit:hover,
.auth-form__submit:focus {
  background-color: var(--color-background-accent);
}

.auth-maintenance {
  background-color: var(--color-background-tertiary);
  padding: var(--padding-24);
  border-radius: var(--br-6);
  border-left: 4px solid var(--color-border-accent);
}

.auth-maintenance p {
  margin: 0;
  font-family: var(--font-zalando-sans);
  font-size: var(--fs-20);
  line-height: var(--lh-28);
  color: var(--color-text-secondary);
  letter-spacing: var(--ls--0_4);
}

.auth-maintenance p span {
  display: inline-block;
  margin: 0 0 var(--margin-8);
  font-weight: 550;
  color: var(--color-text-secondary);
}

.auth-portal__note p {
  margin: 0;
  font-family: var(--font-zalando-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-24);
  color: var(--color-text-secondary);
}

.auth-portal__note a {
  color: var(--color-text-accent);
}

@media screen and (max-width: 767px) {
  .auth-page {
    padding: var(--padding-32) var(--padding-12) var(--padding-48);
  }

  .auth-portal {
    padding: var(--padding-24);
    gap: var(--gap-24);
  }

  .auth-portal__intro h1 {
    font-size: var(--fs-32);
    line-height: var(--lh-40);
  }
  .auth-form__submit {
    width: 100%;
    justify-content: center;
  }

  .auth-maintenance p {
    font-size: var(--fs-18);
  }
}