/* ============================================================
   LOGIN PAGE
   ============================================================ */

body.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background-image:
    linear-gradient(
      180deg,
      rgba(246, 250, 255, 0.74) 0%,
      rgba(239, 246, 255, 0.60) 24%,
      rgba(232, 241, 255, 0.52) 52%,
      rgba(238, 245, 255, 0.66) 100%
    ),
    url("../assets/backgrounds/light-abstract.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

html[data-theme="dark"] body.login-body {
  background-image:
    linear-gradient(
      180deg,
      rgba(7, 15, 27, 0.78) 0%,
      rgba(8, 16, 29, 0.64) 24%,
      rgba(9, 18, 31, 0.56) 52%,
      rgba(7, 14, 25, 0.72) 100%
    ),
    url("../assets/backgrounds/dark-abstract.jpg");
}

.login-shell {
  width: 100%;
  max-width: 460px;
}

.login-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: 28px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.34);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
}

html[data-theme="dark"] .login-card {
  background: rgba(15, 36, 63, 0.52);
}

.login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.05) 42%,
    rgba(255, 255, 255, 0.02) 100%
  );
}

html[data-theme="dark"] .login-card::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 42%,
    rgba(255, 255, 255, 0.01) 100%
  );
}

.login-card > * {
  position: relative;
  z-index: 1;
}

.login-intro {
  margin-top: -6px;
  color: var(--text-soft);
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-form .btn-primary {
  min-height: 44px;
}