body {
  background: var(--shell-bg) !important;
  color: var(--text-primary) !important;
}

.bg-image {
  filter: saturate(0.7) contrast(0.95) brightness(0.92);
}

.bg-overlay {
  background:
    radial-gradient(circle at top, rgba(197, 163, 81, 0.14), transparent 28%),
    linear-gradient(135deg, rgba(18, 32, 50, 0.9) 0%, rgba(24, 48, 73, 0.82) 52%, rgba(12, 27, 42, 0.92) 100%) !important;
}

.card,
.cta-card,
.steps-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(16, 32, 51, 0.08) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 28px 70px rgba(11, 23, 37, 0.18) !important;
  backdrop-filter: blur(18px);
}

.gov-header {
  border-bottom: 1px solid rgba(16, 32, 51, 0.08) !important;
}

.gov-title {
  color: var(--text-primary) !important;
  letter-spacing: -0.02em;
}

.gov-subtitle,
.card-label,
.cta-label,
footer,
.page-footer {
  color: var(--accent) !important;
}

.welcome p,
.card-heading,
.card-body .subtext,
.card-body .subtitle,
.links a,
.back-link,
.cta-note {
  color: var(--text-secondary) !important;
}

.links a strong,
.card-footer a,
.btn-outline,
.resend-btn {
  color: var(--action-secondary) !important;
}

.links,
.card-footer {
  border-top: 1px solid rgba(16, 32, 51, 0.08) !important;
}

.input-wrap input,
.input-wrap select,
input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"],
input,
select {
  min-height: var(--control-height);
  border: 1px solid var(--control-border) !important;
  background: rgba(250, 252, 255, 0.96) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.input-wrap input::placeholder,
input::placeholder {
  color: #8b9bad !important;
}

.input-wrap input:focus,
.input-wrap select:focus,
input:focus,
select:focus {
  border-color: var(--control-border-focus) !important;
  background: var(--surface-panel) !important;
  box-shadow: var(--control-shadow-focus) !important;
}

.otp-input {
  border: 1px solid var(--control-border) !important;
  background: rgba(249, 251, 254, 0.98) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.otp-input:focus,
.otp-input.filled {
  border-color: rgba(23, 122, 83, 0.4) !important;
  background: var(--surface-panel) !important;
  box-shadow: var(--control-shadow-focus) !important;
}

.btn,
.btn-login,
.btn-register,
.btn-primary {
  background: linear-gradient(180deg, var(--action-primary) 0%, var(--action-primary-hover) 100%) !important;
  border: 1px solid rgba(11, 54, 37, 0.12) !important;
  color: var(--text-on-strong) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 16px 32px rgba(23, 122, 83, 0.2) !important;
  min-height: var(--control-height);
}

.btn:hover,
.btn-login:hover,
.btn-register:hover,
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(23, 122, 83, 0.24) !important;
  filter: saturate(1.04);
}

.btn-outline {
  border: 1px solid rgba(16, 32, 51, 0.12) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-radius: var(--radius-pill) !important;
}

.btn-outline:hover {
  background: rgba(22, 48, 74, 0.06) !important;
}

.alert,
.email-display {
  border-radius: var(--radius-md) !important;
}

.alert-error {
  background: var(--danger-soft) !important;
  border-color: rgba(191, 76, 63, 0.2) !important;
  color: var(--danger) !important;
}

.alert-success {
  background: var(--success-soft) !important;
  border-color: rgba(23, 122, 83, 0.18) !important;
  color: var(--success) !important;
}

.email-display {
  background: rgba(23, 122, 83, 0.08) !important;
  border: 1px solid rgba(23, 122, 83, 0.18) !important;
  color: var(--action-primary-hover) !important;
}

.toggle-pw,
.resend-btn,
.back-link,
.links a {
  text-underline-offset: 0.18em;
}

.toggle-pw:hover,
.resend-btn:hover,
.back-link:hover,
.links a:hover {
  opacity: 0.86;
}

@media (max-width: 580px) {
  .card,
  .cta-card,
  .steps-card {
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 18px 40px rgba(11, 23, 37, 0.16) !important;
  }
}