body.login-page {
  position: relative;
  overflow: hidden;
  --color-card: rgba(255, 255, 255, 0.96);
  --color-card-border: rgba(23, 31, 52, 0.08);
  --color-card-shadow: 0 24px 54px rgba(31, 36, 42, 0.08);
  --color-text-primary: #232b37;
  --color-text-secondary: rgba(52, 62, 79, 0.76);
  --color-text-muted: rgba(52, 62, 79, 0.46);
  --color-input-bg: #f8faff;
  --color-input-border: rgba(23, 31, 52, 0.1);
  --color-input-border-focus: rgba(39, 48, 73, 0.55);
  --color-gold: #273049;
  --color-gold-soft: rgba(39, 48, 73, 0.12);
  --color-checkbox-border: rgba(23, 31, 52, 0.18);
}

.login-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  isolation: isolate;
}

.login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(39, 48, 73, 0.08), transparent 22%),
    linear-gradient(180deg, #f8faff 0%, #f1f4fa 100%);
  z-index: -2;
}

.login-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(23, 31, 52, 0.03), rgba(23, 31, 52, 0));
  z-index: -1;
}

.login-layout {
  width: min(100%, 24.75rem);
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  transform: translateY(-1.6rem);
}

.brand-block {
  display: grid;
  justify-items: center;
  gap: 0.62rem;
  text-align: center;
}

.brand-glow {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(15rem, 68vw);
  padding: 0.2rem 0.4rem;
}

.brand-glow::before {
  content: "";
  position: absolute;
  inset: 0;
}

.brand-logo {
  position: relative;
  width: 100%;
  max-width: 7.9rem;
  z-index: 1;
}

.brand-subtitle {
  margin: 0;
  color: rgba(39, 48, 73, 0.72);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.login-card {
  width: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 252, 0.98));
  border: 1px solid rgba(23, 31, 52, 0.08);
  border-radius: 1rem;
  box-shadow: 0 24px 54px rgba(31, 36, 42, 0.08);
  backdrop-filter: blur(8px);
  padding: 2rem 1.7rem 1.75rem;
}

.login-card__header {
  margin-bottom: 1.65rem;
}

.login-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4vw, 2.35rem);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-text-primary);
}

.login-form {
  display: grid;
  gap: 1rem;
}

.login-form__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 1.5rem;
}

.login-footer {
  color: rgba(75, 85, 101, 0.7);
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: none;
}

@media (max-width: 48rem) {
  .login-shell {
    padding: 1.25rem;
  }

  .login-layout {
    width: min(100%, 23.25rem);
    gap: 1.05rem;
    transform: translateY(-0.9rem);
  }

  .brand-logo {
    max-width: 7rem;
  }

  .brand-subtitle {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
  }

  .login-card {
    padding: 1.6rem 1.25rem 1.4rem;
  }

  .login-card__header {
    margin-bottom: 1.25rem;
  }

  .login-footer {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
  }
}

@media (max-width: 28rem) {
  .login-layout {
    width: 100%;
    transform: none;
  }

  .login-shell::before {
    background:
      radial-gradient(circle at top right, rgba(39, 48, 73, 0.08), transparent 24%),
      linear-gradient(180deg, #f8faff 0%, #f1f4fa 100%);
  }

  .button,
  .field__input {
    min-height: 3.35rem;
  }
}