@media (max-width: 600px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overscroll-behavior: none;
  }

  .aurora {
    height: 100vh;
    height: 100dvh;
  }

  html:not(.desktop-client) .stage {
    top: 0;
  }

  .stage {
    align-items: flex-start;
    padding:
      max(16px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    overscroll-behavior-y: contain;
  }

  .card-wrap {
    width: 100%;
    max-width: 432px;
    margin: auto;
  }

  .card {
    padding: 27px 20px 22px;
    border-radius: 23px;
  }

  .card-glow {
    border-radius: 25px;
    opacity: 0.45;
  }

  .heading {
    font-size: clamp(23px, 7.5vw, 27px);
  }

  .subtitle {
    margin-bottom: 21px;
  }

  .input-wrap input {
    min-height: 49px;
    font-size: 16px;
  }

  .btn-submit {
    min-height: 50px;
  }

  .options-row {
    align-items: flex-start;
    gap: 12px;
  }

  .remember {
    min-height: 40px;
  }

  .social-btn {
    width: 48px;
    height: 48px;
  }

  .toast-container {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
  }

  .toast {
    width: 100%;
    max-width: none;
  }

  .blob1,
  .blob2,
  .blob3 {
    transform: scale(0.72);
  }
}

@media (max-width: 370px) {
  .stage {
    padding-right: 8px;
    padding-left: 8px;
  }

  .card {
    padding-right: 16px;
    padding-left: 16px;
  }

  .options-row {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
  }

  .forgot {
    align-self: flex-end;
    min-height: 36px;
  }
}

@media (max-height: 680px) and (max-width: 600px) {
  .stage {
    align-items: flex-start;
  }

  .logo {
    margin-bottom: 15px;
  }

  .subtitle {
    margin-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blob,
  .eq span,
  .card,
  .field,
  .card-glow {
    animation: none !important;
  }
}