html,
body.auth-page {
  height: 100%;
}

body.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
}

body.auth-page .auth-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  padding: clamp(12px, 2.25vh, 24px) clamp(12px, 2.5vw, 24px);
  overflow: hidden;
}

body.auth-page .theme-toggle-floating {
  top: clamp(12px, 2vh, 24px);
  left: clamp(12px, 2vw, 24px);
}

body.auth-page .auth-card {
  width: min(420px, calc(100vw - 24px));
  max-width: 100%;
  max-height: calc(100dvh - clamp(24px, 6vh, 56px));
  padding: clamp(20px, 3vh, 36px) clamp(20px, 3vw, 32px);
  box-sizing: border-box;
}

body.auth-page .auth-card .brand {
  margin-bottom: clamp(14px, 2vh, 22px);
  gap: clamp(8px, 1.4vh, 12px);
}

body.auth-page .auth-card .brand img {
  width: clamp(78px, 11vh, 108px);
  height: clamp(78px, 11vh, 108px);
}

body.auth-page .auth-card .brand h1 {
  font-size: clamp(1.15rem, 2.5vh, 1.5rem);
}

body.auth-page .auth-card .subtitle {
  font-size: clamp(12px, 1.6vh, 14px);
}

body.auth-page .auth-card .field {
  margin: clamp(8px, 1.2vh, 12px) 0;
}

body.auth-page .auth-card input[type="text"],
body.auth-page .auth-card input[type="email"],
body.auth-page .auth-card input[type="password"],
body.auth-page .auth-card input[type="tel"],
body.auth-page .auth-card input[type="number"],
body.auth-page .auth-card input[type="search"] {
  min-height: clamp(42px, 6vh, 48px);
  padding: clamp(11px, 1.5vh, 14px) 16px;
}

body.auth-page .auth-card .row {
  margin: clamp(4px, .8vh, 6px) 0 clamp(8px, 1.2vh, 10px);
}

body.auth-page .auth-card .muted {
  margin-top: clamp(8px, 1vh, 10px);
}

@media (max-width: 420px) {
  body.auth-page .auth-wrap {
    padding: 12px;
  }

  body.auth-page .auth-card {
    padding: 24px 20px;
  }
}

@media (max-height: 860px) {
  body.auth-page .auth-wrap {
    padding: 12px;
  }

  body.auth-page .auth-card {
    max-height: calc(100dvh - 24px);
    padding: 20px 22px;
  }

  body.auth-page .auth-card .brand {
    margin-bottom: 14px;
    gap: 8px;
  }

  body.auth-page .auth-card .brand img {
    width: 72px;
    height: 72px;
  }

  body.auth-page .auth-card .brand h1 {
    font-size: 1.2rem;
  }

  body.auth-page .auth-card .subtitle,
  body.auth-page .auth-card label,
  body.auth-page .auth-card .remember,
  body.auth-page .auth-card .muted,
  body.auth-page .auth-card .msg {
    font-size: 13px;
  }

  body.auth-page .auth-card .field {
    margin: 8px 0;
  }

  body.auth-page .auth-card input[type="text"],
  body.auth-page .auth-card input[type="email"],
  body.auth-page .auth-card input[type="password"],
  body.auth-page .auth-card input[type="tel"],
  body.auth-page .auth-card input[type="number"],
  body.auth-page .auth-card input[type="search"] {
    min-height: 42px;
    padding: 11px 14px;
  }

  body.auth-page .auth-card .btn {
    padding: 11px 14px;
  }
}

@media (max-height: 760px) {
  body.auth-page.auth-register .auth-card {
    padding: 18px 20px;
  }

  body.auth-page.auth-register .auth-card .brand {
    margin-bottom: 10px;
    gap: 6px;
  }

  body.auth-page.auth-register .auth-card .brand img {
    width: 64px;
    height: 64px;
  }

  body.auth-page.auth-register .auth-card .field {
    margin: 6px 0;
  }

  body.auth-page.auth-register .auth-card input[type="text"],
  body.auth-page.auth-register .auth-card input[type="email"],
  body.auth-page.auth-register .auth-card input[type="password"],
  body.auth-page.auth-register .auth-card input[type="tel"],
  body.auth-page.auth-register .auth-card input[type="number"],
  body.auth-page.auth-register .auth-card input[type="search"] {
    min-height: 40px;
    padding: 10px 14px;
  }

  body.auth-page.auth-register .auth-card .muted {
    margin-top: 6px;
  }
}