:root {
  --cua-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cua-font-serif: 'Fraunces', Georgia, serif;
  --cua-text: #17181c;
  --cua-muted: #666874;
  --cua-border: rgba(30, 32, 45, 0.12);
  --cua-border-hover: rgba(30, 32, 45, 0.28);
  --cua-brand: #146C48;
  --cua-brand-hover: #0d4d33;
  --cua-brand-subtle: rgba(20, 108, 72, 0.08);
  --cua-success: #16a34a;
  --cua-warning: #d97706;
  --cua-danger: #e11d48;
  --cua-paper: #F9F7F2;
  --cua-card-bg: rgba(255, 255, 255, 0.94);
  --cua-shadow: 0 20px 48px -12px rgba(10, 42, 34, 0.12), 0 4px 16px -2px rgba(0, 0, 0, 0.04);
}

/* Base Page Isolation & Canvas Fix */
html.cua-auth-html,
body.cua-auth-page {
  width: 100% !important;
  min-width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(1000px 500px at 10% -5%, rgba(31, 149, 96, 0.12), transparent 60%),
    radial-gradient(900px 600px at 90% 105%, rgba(176, 138, 62, 0.10), transparent 50%),
    var(--cua-paper) !important;
  background-attachment: fixed !important;
  font-family: var(--cua-font-sans) !important;
  color: var(--cua-text) !important;
  -webkit-font-smoothing: antialiased;
}

body.cua-auth-page header,
body.cua-auth-page footer,
body.cua-auth-page .site-header,
body.cua-auth-page .site-footer,
body.cua-auth-page .entry-header,
body.cua-auth-page .page-header,
body.cua-auth-page .elementor-location-header,
body.cua-auth-page .elementor-location-footer {
  display: none !important;
}

body.cua-auth-page .site,
body.cua-auth-page #page,
body.cua-auth-page .content-area,
body.cua-auth-page .entry-content,
body.cua-auth-page main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Universal App Container */
#cua-auth-app,
#cua-auth-app *,
#cua-auth-app *::before,
#cua-auth-app *::after,
.cua-toast-wrap,
.cua-toast-wrap * {
  box-sizing: border-box !important;
}

#cua-auth-app,
.cua-auth-app {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  margin: 0 !important;
}

body.admin-bar #cua-auth-app {
  min-height: calc(100vh - 32px) !important;
  min-height: calc(100dvh - 32px) !important;
}

/* Center Shell */
.cua-auth-shell {
  width: 100% !important;
  max-width: 440px !important;
  transition: opacity 0.24s ease, transform 0.24s ease !important;
}

.cua-auth-shell.is-loading {
  opacity: 0 !important;
  transform: translateY(6px) scale(0.985) !important;
  pointer-events: none !important;
}

/* Card Surface */
.cua-auth-view {
  display: none !important;
  width: 100% !important;
  padding: 30px 28px 24px !important;
  background: var(--cua-card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 24px !important;
  box-shadow: var(--cua-shadow) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  text-align: center !important;
}

.cua-auth-view.is-active {
  display: block !important;
  animation: cuaScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes cuaScaleIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Brand Icon */
.cua-brand-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 10px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #1F9560, var(--cua-brand)) !important;
  box-shadow: 0 8px 18px rgba(20, 108, 72, 0.24) !important;
}

/* Typography */
.cua-auth-view h1 {
  font-family: var(--cua-font-serif) !important;
  font-size: 25px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  margin: 0 0 5px !important;
  letter-spacing: -0.02em !important;
  color: var(--cua-text) !important;
}

.cua-subtitle {
  font-size: 14px !important;
  color: var(--cua-muted) !important;
  margin: 0 0 16px !important;
  line-height: 1.4 !important;
}

.cua-text-link {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--cua-brand) !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.cua-text-link:hover {
  color: var(--cua-brand-hover) !important;
}

/* Social Buttons */
.cua-social-stack {
  width: 100% !important;
  margin-bottom: 12px !important;
}

.cua-social-btn {
  position: relative !important;
  width: 100% !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid var(--cua-border) !important;
  border-radius: 12px !important;
  color: var(--cua-text) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.cua-social-btn:hover {
  border-color: var(--cua-border-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.cua-google-btn .cua-google-icon {
  position: absolute !important;
  left: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Divider */
.cua-divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 12px 0 14px !important;
  color: #9c9ea8 !important;
}

.cua-divider span {
  flex: 1 !important;
  height: 1px !important;
  background: rgba(30, 32, 45, 0.10) !important;
}

.cua-divider b {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Form & Input Grid */
.cua-auth-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

.cua-field {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 20px 1fr !important;
  align-items: center !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid var(--cua-border) !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  transition: all 0.16s ease !important;
}

.cua-password-field {
  grid-template-columns: 20px 1fr 34px !important;
  padding-right: 6px !important;
}

.cua-field-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8c8e98 !important;
  pointer-events: none !important;
  transition: color 0.16s ease !important;
}

.cua-field input {
  width: 100% !important;
  height: 46px !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 0 0 10px !important;
  color: var(--cua-text) !important;
  font-size: 14.5px !important;
  font-family: inherit !important;
  font-weight: 500 !important;
}

.cua-field input::placeholder {
  color: #9ea0aa !important;
}

.cua-field:focus-within {
  border-color: var(--cua-brand) !important;
  box-shadow: 0 0 0 3px var(--cua-brand-subtle) !important;
}

.cua-field:focus-within .cua-field-icon {
  color: var(--cua-brand) !important;
}

.cua-field.is-valid:not(:focus-within) {
  border-color: rgba(22, 163, 74, 0.4) !important;
}

.cua-field.is-valid:not(:focus-within) .cua-field-icon {
  color: var(--cua-success) !important;
}

.cua-field.has-error {
  border-color: var(--cua-danger) !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.08) !important;
}

.cua-field.has-error .cua-field-icon {
  color: var(--cua-danger) !important;
}

.cua-field-error {
  grid-column: 1 / -1 !important;
  color: var(--cua-danger) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-align: left !important;
  padding-bottom: 6px !important;
  margin-top: -2px !important;
}

/* 6-Digit OTP Box Grid */
.cua-otp-boxes {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 8px !important;
  margin: 6px 0 4px !important;
}

.cua-otp-box {
  width: 100% !important;
  height: 52px !important;
  text-align: center !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  color: var(--cua-text) !important;
  border: 1.5px solid var(--cua-border) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  outline: none !important;
  transition: all 0.16s ease !important;
}

.cua-otp-box:focus {
  border-color: var(--cua-brand) !important;
  box-shadow: 0 0 0 3px var(--cua-brand-subtle) !important;
  transform: translateY(-1px) !important;
}

.cua-otp-resend-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 14px !important;
  font-size: 13.5px !important;
  color: var(--cua-muted) !important;
}

/* Form Options (Remember Me & Inline Forgot) */
.cua-form-options {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  margin: 1px 2px 2px !important;
}

.cua-checkbox-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--cua-muted) !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  user-select: none !important;
}

.cua-checkbox-label input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border: 1.5px solid var(--cua-border-hover) !important;
  border-radius: 4px !important;
  outline: none !important;
  background: #ffffff !important;
  cursor: pointer !important;
  display: grid !important;
  place-content: center !important;
  transition: all 0.15s ease !important;
}

.cua-checkbox-label input[type="checkbox"]:checked {
  background: var(--cua-brand) !important;
  border-color: var(--cua-brand) !important;
}

.cua-checkbox-label input[type="checkbox"]:checked::before {
  content: "" !important;
  width: 8px !important;
  height: 5px !important;
  border-left: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  transform: rotate(-45deg) translate(1px, -1px) !important;
}

.cua-forgot-trigger {
  font-size: 13px !important;
  color: var(--cua-muted) !important;
}

.cua-forgot-trigger:hover {
  color: var(--cua-brand) !important;
}

/* Password Eye Button */
.cua-eye-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #8c8e98 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.cua-eye-btn:hover,
.cua-eye-btn.is-active {
  color: var(--cua-brand) !important;
  background: var(--cua-brand-subtle) !important;
}

/* Password Strength Meter */
.cua-password-meter {
  display: none !important;
  width: 100% !important;
  height: 4px !important;
  background: rgba(30, 32, 45, 0.08) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin-top: -2px !important;
}

.cua-password-meter.is-visible {
  display: block !important;
}

.cua-password-meter span {
  display: block !important;
  height: 100%;
  width: 25%;
  background: var(--cua-danger);
  transition: width 0.2s ease, background 0.2s ease;
}

.cua-password-meter[data-strength="2"] span {
  width: 50%;
  background: var(--cua-warning);
}

.cua-password-meter[data-strength="3"] span,
.cua-password-meter[data-strength="4"] span {
  width: 100%;
  background: var(--cua-success);
}

/* Submit Button */
.cua-submit-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 46px !important;
  margin-top: 4px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--cua-brand) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(20, 108, 72, 0.25) !important;
  transition: all 0.16s ease !important;
}

.cua-submit-btn:hover:not(:disabled) {
  background: var(--cua-brand-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(20, 108, 72, 0.32) !important;
}

.cua-submit-btn.is-disabled,
.cua-submit-btn:disabled {
  background: #d4d6dc !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.cua-btn-spinner {
  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  border-top-color: #ffffff !important;
  animation: cuaSpin 0.7s linear infinite !important;
}

@keyframes cuaSpin { to { transform: rotate(360deg); } }

/* Footer Links & Notes */
.cua-under-link {
  display: inline-block !important;
  margin-top: 10px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--cua-brand) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
}

.cua-under-link:hover {
  text-decoration: underline !important;
}

.cua-bottom-help,
.cua-terms {
  font-size: 12px !important;
  color: var(--cua-muted) !important;
  margin: 10px 0 0 !important;
  line-height: 1.4 !important;
}

.cua-bottom-help {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

.cua-bottom-help span {
  display: inline-flex !important;
  color: var(--cua-success) !important;
}

.cua-terms a {
  color: var(--cua-text) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.cua-terms a:hover {
  color: var(--cua-brand) !important;
  text-decoration: underline !important;
}

/* Honeypot Hidden Input */
.cua-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Skeleton Loading */
.cua-page-skeleton {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}

#cua-auth-app.is-ready .cua-page-skeleton {
  opacity: 0 !important;
  visibility: hidden !important;
}

.cua-skel-card {
  width: 100% !important;
  max-width: 440px !important;
  padding: 30px 28px !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: var(--cua-shadow) !important;
}

.cua-skel-logo,
.cua-skel-title,
.cua-skel-line,
.cua-skel-btn,
.cua-skel-divider,
.cua-skel-input,
.cua-skel-submit {
  position: relative !important;
  overflow: hidden !important;
  background: rgba(220, 222, 230, 0.6) !important;
  border-radius: 10px !important;
}

.cua-skel-logo { width: 44px !important; height: 44px !important; border-radius: 14px !important; margin: 0 auto 10px !important; }
.cua-skel-title { width: 55% !important; height: 25px !important; margin: 0 auto 6px !important; }
.cua-skel-line { width: 42% !important; height: 15px !important; margin: 0 auto 16px !important; }
.cua-skel-btn { width: 100% !important; height: 46px !important; margin-bottom: 12px !important; border-radius: 12px !important; }
.cua-skel-divider { width: 100% !important; height: 12px !important; margin: 12px 0 !important; }
.cua-skel-input { width: 100% !important; height: 46px !important; margin-bottom: 10px !important; border-radius: 12px !important; }
.cua-skel-submit { width: 100% !important; height: 46px !important; border-radius: 12px !important; }

.cua-skel-logo::after,
.cua-skel-title::after,
.cua-skel-line::after,
.cua-skel-btn::after,
.cua-skel-divider::after,
.cua-skel-input::after,
.cua-skel-submit::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  transform: translateX(-100%) !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
  animation: cuaSkel 1.1s ease-in-out infinite !important;
}

@keyframes cuaSkel { to { transform: translateX(100%); } }

/* Toast Notifications */
.cua-toast-wrap {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: min(360px, calc(100vw - 36px)) !important;
  pointer-events: none !important;
}

.cua-toast {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 28px 1fr 24px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  animation: cuaToastIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

@keyframes cuaToastIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cua-toast-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(20, 108, 72, 0.1) !important;
  color: var(--cua-brand) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.cua-toast-icon::before { content: "i"; }
.cua-toast.is-success .cua-toast-icon { background: rgba(22, 163, 74, 0.12) !important; color: var(--cua-success) !important; }
.cua-toast.is-success .cua-toast-icon::before { content: "✓"; }
.cua-toast.is-error .cua-toast-icon { background: rgba(225, 29, 72, 0.12) !important; color: var(--cua-danger) !important; }
.cua-toast.is-error .cua-toast-icon::before { content: "!"; }
.cua-toast.is-warning .cua-toast-icon { background: rgba(217, 119, 6, 0.12) !important; color: var(--cua-warning) !important; }
.cua-toast.is-warning .cua-toast-icon::before { content: "!"; }

.cua-toast-msg {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cua-text) !important;
  text-align: left !important;
  line-height: 1.35 !important;
}

.cua-toast-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  background: transparent !important;
  color: #8c8e98 !important;
  cursor: pointer !important;
  border-radius: 6px !important;
}

.cua-toast-close:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--cua-text) !important;
}

.cua-toast-progress {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: var(--cua-brand) !important;
  transition: width 3400ms linear !important;
}

.cua-toast.is-success .cua-toast-progress { background: var(--cua-success) !important; }
.cua-toast.is-error .cua-toast-progress { background: var(--cua-danger) !important; }
.cua-toast.is-warning .cua-toast-progress { background: var(--cua-warning) !important; }

/* Logged-In Card */
.cua-logged-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.cua-primary-link-btn,
.cua-secondary-link-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 46px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
}

.cua-primary-link-btn {
  background: var(--cua-brand) !important;
  color: #ffffff !important;
}

.cua-secondary-link-btn {
  background: #ffffff !important;
  color: var(--cua-text) !important;
  border: 1px solid var(--cua-border) !important;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  .cua-auth-view {
    padding: 24px 18px 20px !important;
    border-radius: 20px !important;
  }

  .cua-auth-view h1 {
    font-size: 22px !important;
  }

  .cua-social-btn,
  .cua-field input,
  .cua-submit-btn {
    height: 44px !important;
  }

  .cua-otp-box {
    height: 46px !important;
    font-size: 18px !important;
  }

  .cua-toast-wrap {
    top: 12px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
  }
}