.auth-page {
  min-height: 100vh;
  background:
    linear-gradient(rgba(21, 35, 29, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 35, 29, 0.045) 1px, transparent 1px), #edf2e9;
  background-size: 32px 32px;
  color: #15231d;
}

.auth-page > header {
  position: relative;
  z-index: 5;
  width: min(100% - 2rem, 90rem);
  margin: 0.75rem auto 0;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(21, 35, 29, 0.16);
  border-radius: 0.75rem;
  background: #fffef9;
}

.auth-page > main {
  position: relative;
  justify-content: flex-start;
  padding: clamp(2rem, 6vw, 5rem) max(1rem, 8vw);
  isolation: isolate;
}

.auth-page > main::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: clamp(2rem, 6vw, 5rem);
  right: max(1rem, 3vw);
  bottom: clamp(2rem, 6vw, 5rem);
  width: min(43vw, 42rem);
  border: 0.65rem solid #fffef9;
  border-radius: 0.8rem;
  background:
    linear-gradient(180deg, transparent 58%, rgba(21, 35, 29, 0.68)),
    url('/images/home/praktinis-darbas.webp') center / cover no-repeat;
  box-shadow: 0 28px 65px -48px rgba(21, 35, 29, 0.85);
}

.auth-page > main > div[class*='absolute'] {
  display: none;
}

.auth-page > main > .max-w-md {
  width: min(100%, 31rem);
  max-width: 31rem;
  margin-inline: 0;
}

.auth-page main .glass-solid {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(21, 35, 29, 0.2);
  border-radius: 0.8rem;
  background: #fffef9;
  box-shadow: 0 28px 65px -48px rgba(21, 35, 29, 0.85);
  backdrop-filter: none;
}

.auth-page main .glass-solid::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 0.45rem;
  background: linear-gradient(90deg, #4cae50 0 42%, #e1493f 42% 68%, #5370ff 68% 88%, #efb92f 88%);
}

.auth-page main h1 {
  color: #15231d;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 850;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.auth-page main input {
  min-height: 2.8rem;
  border-radius: 0.4rem;
  border-color: rgba(21, 35, 29, 0.22);
  background: #fffef9;
  box-shadow: none;
}

.auth-page main button,
.auth-page main a[class*='inline-flex'] {
  border-radius: 0.4rem;
}

.auth-page > footer {
  border-color: rgba(255, 254, 249, 0.14);
  background: #15231d;
  color: rgba(255, 254, 249, 0.62);
}

.auth-page > footer .text-foreground,
.auth-page > footer h4 {
  color: #fffef9;
}

.auth-page > footer .text-muted-foreground,
.auth-page > footer a {
  color: rgba(255, 254, 249, 0.62);
}

.auth-page.status-page {
  width: 100%;
  max-width: none;
  padding: 0;
}

.auth-page.status-page > div {
  width: min(100% - 2rem, 34rem);
  margin-inline: auto;
}

@media (max-width: 900px) {
  .auth-page > main {
    justify-content: center;
  }

  .auth-page > main::after {
    display: none;
  }
}

@media (max-width: 639px) {
  .auth-page > header {
    width: calc(100% - 1rem);
    margin-top: 0.5rem;
  }

  .auth-page > main {
    padding: 1.5rem 0.75rem 2rem;
  }

  .auth-page main .glass-solid > div {
    padding: 2rem 1.25rem;
  }
}