.lvst-auth-page {
  min-height: calc(100vh - (var(--top-nav-height) + var(--main-nav-height)));
  min-height: calc(100dvh - (var(--top-nav-height) + var(--main-nav-height)));

  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(1000px 550px at 12% 18%, var(--accent-soft), transparent 55%),
    radial-gradient(900px 500px at 85% 25%, rgba(0, 128, 255, 0.14), transparent 55%),
    var(--page-bg);
}

/* Animated background particles */
.lvst-auth-page::before {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  background-image:
    radial-gradient(2px 2px at 20% 30%, var(--accent), transparent),
    radial-gradient(2px 2px at 60% 70%, var(--accent), transparent),
    radial-gradient(1px 1px at 50% 50%, var(--accent), transparent),
    radial-gradient(1px 1px at 80% 10%, var(--accent), transparent);
  background-size: 200px 200px, 300px 300px, 150px 150px, 250px 250px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
  animation: lvst-auth-particle-float 60s linear infinite;
  opacity: 0.15;
  pointer-events: none;
}

@keyframes lvst-auth-particle-float {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-50px, -50px) rotate(360deg); }
}

/* Container size + entrance animation */
.lvst-auth-wrap {
  width: 100%;
  max-width: 480px;
  animation: lvst-auth-fade-in 0.6s ease-out;
}

@keyframes lvst-auth-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lvst-password-wrap {
  position: relative;
}

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

.lvst-password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  min-width: auto;
  min-height: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--page-text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.72;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lvst-password-toggle:hover {
  background: transparent;
  border: none;
  opacity: 1;
}

.lvst-password-toggle:focus-visible {
  outline: none;
  box-shadow: none;
  opacity: 1;
}

.lvst-password-toggle[aria-pressed="true"] {
  background: transparent;
  border: none;
  opacity: 1;
}


/* Responsive tweaks */
@media (max-width: 720px) {
  .lvst-auth-wrap { max-width: 420px; }
}

@media (max-width: 520px) {
  .lvst-auth-page { padding: 16px; }
  .lvst-auth-wrap { max-width: 100%; }
}