body:has(.faal-auth-page) .fi-simple-layout {
  background:
    radial-gradient(circle at top, rgba(81, 69, 229, 0.12), transparent 34%),
    linear-gradient(180deg, #f8fafc 0%, #eef2ff 45%, #e2e8f0 100%) !important;
}

body:has(.faal-auth-page) .fi-simple-main {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(129, 140, 248, 0.14);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(14px);
  color: #0f172a;
}

body:has(.faal-auth-page) .fi-simple-header-heading {
  color: #0f172a !important;
}

body:has(.faal-auth-page) .fi-simple-header-subheading {
  color: #64748b !important;
}

.dark body:has(.faal-auth-page) .fi-simple-layout,
body.dark:has(.faal-auth-page) .fi-simple-layout,
html.dark body:has(.faal-auth-page) .fi-simple-layout {
  background:
    radial-gradient(circle at top, rgba(81, 69, 229, 0.28), transparent 36%),
    linear-gradient(180deg, #0b1020 0%, #111827 46%, #0f172a 100%) !important;
}

.dark body:has(.faal-auth-page) .fi-simple-main,
body.dark:has(.faal-auth-page) .fi-simple-main,
html.dark body:has(.faal-auth-page) .fi-simple-main {
  background: rgba(15, 23, 42, 0.86) !important;
  border: 1px solid rgba(129, 140, 248, 0.18);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.38);
  color: #f8fafc;
}

.dark body:has(.faal-auth-page) .fi-simple-header-heading,
body.dark:has(.faal-auth-page) .fi-simple-header-heading,
html.dark body:has(.faal-auth-page) .fi-simple-header-heading {
  color: #f8fafc !important;
}

.dark body:has(.faal-auth-page) .fi-simple-header-subheading,
body.dark:has(.faal-auth-page) .fi-simple-header-subheading,
html.dark body:has(.faal-auth-page) .fi-simple-header-subheading {
  color: #cbd5e1 !important;
}

body:has(.faal-auth-page) .faal-auth-intro {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}

body:has(.faal-auth-page) .faal-auth-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.8rem;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.16);
  color: #4338ca;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.dark body:has(.faal-auth-page) .faal-auth-badge,
body.dark:has(.faal-auth-page) .faal-auth-badge,
html.dark body:has(.faal-auth-page) .faal-auth-badge {
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(129, 140, 248, 0.18);
  color: #c7d2fe;
}

body:has(.faal-auth-page) .fi-fo-field-wrp-label span,
body:has(.faal-auth-page) .fi-fo-checkbox-list-option-label,
body:has(.faal-auth-page) .fi-fo-checkbox label,
body:has(.faal-auth-page) .fi-fo-field-wrp-hint,
body:has(.faal-auth-page) .fi-link {
  color: #475569 !important;
}

.dark body:has(.faal-auth-page) .fi-fo-field-wrp-label span,
.dark body:has(.faal-auth-page) .fi-fo-checkbox-list-option-label,
.dark body:has(.faal-auth-page) .fi-fo-checkbox label,
.dark body:has(.faal-auth-page) .fi-fo-field-wrp-hint,
.dark body:has(.faal-auth-page) .fi-link,
body.dark:has(.faal-auth-page) .fi-fo-field-wrp-label span,
body.dark:has(.faal-auth-page) .fi-fo-checkbox-list-option-label,
body.dark:has(.faal-auth-page) .fi-fo-checkbox label,
body.dark:has(.faal-auth-page) .fi-fo-field-wrp-hint,
body.dark:has(.faal-auth-page) .fi-link,
html.dark body:has(.faal-auth-page) .fi-fo-field-wrp-label span,
html.dark body:has(.faal-auth-page) .fi-fo-checkbox-list-option-label,
html.dark body:has(.faal-auth-page) .fi-fo-checkbox label,
html.dark body:has(.faal-auth-page) .fi-fo-field-wrp-hint,
html.dark body:has(.faal-auth-page) .fi-link {
  color: #cbd5e1 !important;
}

body:has(.faal-auth-page) .fi-input-wrp,
body:has(.faal-auth-page) .fi-fo-checkbox {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}

.dark body:has(.faal-auth-page) .fi-input-wrp,
.dark body:has(.faal-auth-page) .fi-fo-checkbox,
body.dark:has(.faal-auth-page) .fi-input-wrp,
body.dark:has(.faal-auth-page) .fi-fo-checkbox,
html.dark body:has(.faal-auth-page) .fi-input-wrp,
html.dark body:has(.faal-auth-page) .fi-fo-checkbox {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

body:has(.faal-auth-page) .fi-input,
body:has(.faal-auth-page) input,
body:has(.faal-auth-page) textarea,
body:has(.faal-auth-page) .fi-fo-checkbox label {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a !important;
}

body:has(.faal-auth-page) input:-webkit-autofill,
body:has(.faal-auth-page) input:-webkit-autofill:hover,
body:has(.faal-auth-page) input:-webkit-autofill:focus,
body:has(.faal-auth-page) input:-webkit-autofill:active {
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a !important;
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.98) inset !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.98) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

.dark body:has(.faal-auth-page) .fi-input,
.dark body:has(.faal-auth-page) input,
.dark body:has(.faal-auth-page) textarea,
.dark body:has(.faal-auth-page) .fi-fo-checkbox label,
body.dark:has(.faal-auth-page) .fi-input,
body.dark:has(.faal-auth-page) input,
body.dark:has(.faal-auth-page) textarea,
body.dark:has(.faal-auth-page) .fi-fo-checkbox label,
html.dark body:has(.faal-auth-page) .fi-input,
html.dark body:has(.faal-auth-page) input,
html.dark body:has(.faal-auth-page) textarea,
html.dark body:has(.faal-auth-page) .fi-fo-checkbox label {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #f8fafc !important;
}

.dark body:has(.faal-auth-page) input:-webkit-autofill,
.dark body:has(.faal-auth-page) input:-webkit-autofill:hover,
.dark body:has(.faal-auth-page) input:-webkit-autofill:focus,
.dark body:has(.faal-auth-page) input:-webkit-autofill:active,
body.dark:has(.faal-auth-page) input:-webkit-autofill,
body.dark:has(.faal-auth-page) input:-webkit-autofill:hover,
body.dark:has(.faal-auth-page) input:-webkit-autofill:focus,
body.dark:has(.faal-auth-page) input:-webkit-autofill:active,
html.dark body:has(.faal-auth-page) input:-webkit-autofill,
html.dark body:has(.faal-auth-page) input:-webkit-autofill:hover,
html.dark body:has(.faal-auth-page) input:-webkit-autofill:focus,
html.dark body:has(.faal-auth-page) input:-webkit-autofill:active {
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #f8fafc !important;
  box-shadow: 0 0 0 1000px rgba(15, 23, 42, 0.98) inset !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(15, 23, 42, 0.98) inset !important;
}

body:has(.faal-auth-page) .fi-input::placeholder,
body:has(.faal-auth-page) input::placeholder {
  color: #94a3b8 !important;
}

body:has(.faal-auth-page) .fi-input-wrp-suffix,
body:has(.faal-auth-page) .fi-input-wrp-prefix,
body:has(.faal-auth-page) .fi-icon-btn {
  color: #64748b !important;
}

.dark body:has(.faal-auth-page) .fi-input-wrp-suffix,
.dark body:has(.faal-auth-page) .fi-input-wrp-prefix,
.dark body:has(.faal-auth-page) .fi-icon-btn,
body.dark:has(.faal-auth-page) .fi-input-wrp-suffix,
body.dark:has(.faal-auth-page) .fi-input-wrp-prefix,
body.dark:has(.faal-auth-page) .fi-icon-btn,
html.dark body:has(.faal-auth-page) .fi-input-wrp-suffix,
html.dark body:has(.faal-auth-page) .fi-input-wrp-prefix,
html.dark body:has(.faal-auth-page) .fi-icon-btn {
  color: #cbd5e1 !important;
}

body:has(.faal-auth-page) .fi-input-wrp:focus-within {
  border-color: rgba(99, 102, 241, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.45) !important;
}