.login-page {
  color: var(--theme-start, #251f3f) !important;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--theme-primary, #7656bd) 20%, transparent), transparent 30%),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--theme-accent, #c5527b) 18%, transparent), transparent 28%),
    linear-gradient(135deg, var(--theme-soft, #f6f1ff) 0%, #ffffff 52%, color-mix(in srgb, var(--theme-soft, #f6f1ff) 72%, #eef3f8) 100%) !important;
}

.login-page .login-wrap::before {
  background: color-mix(in srgb, var(--theme-primary, #7656bd) 17%, transparent) !important;
}

.login-page .login-wrap::after {
  background: color-mix(in srgb, var(--theme-accent, #c5527b) 15%, transparent) !important;
}

.login-page .login-shell {
  border-color: color-mix(in srgb, var(--theme-primary, #7656bd) 16%, #ffffff) !important;
  box-shadow: 0 28px 90px color-mix(in srgb, var(--theme-primary, #7656bd) 18%, transparent) !important;
}

.login-page .login-info {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--theme-accent, #c5527b) 24%, transparent), transparent 28%),
    radial-gradient(circle at 82% 76%, color-mix(in srgb, var(--theme-primary, #7656bd) 28%, transparent), transparent 32%),
    linear-gradient(135deg, var(--theme-start, #251f3f), var(--theme-mid, #5b3f8f) 58%, var(--theme-accent, #8c3e69)) !important;
}

.login-page .brand-block img,
.login-page .therapy-visual {
  box-shadow: 0 18px 42px color-mix(in srgb, var(--theme-start, #251f3f) 22%, transparent) !important;
}

.login-page .login-highlights span {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

.login-page .login-card {
  background: #ffffff !important;
}

.login-page .login-card header span,
.login-page .auth-switch a,
.login-page .select-control::after {
  color: var(--theme-primary, #7656bd) !important;
}

.login-page .login-card header strong {
  color: var(--theme-start, #251f3f) !important;
}

.login-page .form label,
.login-page .auth-switch {
  color: color-mix(in srgb, var(--theme-start, #251f3f) 58%, #64748b) !important;
}

.login-page .field-control i,
.login-page .field-control .icon-svg {
  color: color-mix(in srgb, var(--theme-primary, #7656bd) 42%, #7d90a3) !important;
}

.login-page .form input,
.login-page .form select,
.login-page .form .select-trigger,
.login-page .select-trigger {
  color: var(--theme-start, #251f3f) !important;
  border-color: color-mix(in srgb, var(--theme-primary, #7656bd) 14%, #d8e3ec) !important;
  background: color-mix(in srgb, var(--theme-soft, #f6f1ff) 34%, #ffffff) !important;
}

.login-page .form input:focus,
.login-page .form select:focus,
.login-page .custom-select.is-open .select-trigger,
.login-page .select-trigger:focus {
  border-color: var(--theme-primary, #7656bd) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-primary, #7656bd) 13%, transparent) !important;
}

.login-page .form button {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--theme-primary, #7656bd), var(--theme-accent, #c5527b)) !important;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--theme-primary, #7656bd) 24%, transparent) !important;
}

.login-page .form button:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary, #7656bd) 82%, black), color-mix(in srgb, var(--theme-accent, #c5527b) 82%, black)) !important;
}

.login-page .auth-switch {
  border-top-color: color-mix(in srgb, var(--theme-primary, #7656bd) 13%, #ece7f4) !important;
}

.login-page .auth-switch a:hover {
  color: var(--theme-accent, #c5527b) !important;
}

.login-page .select-menu {
  border-color: color-mix(in srgb, var(--theme-primary, #7656bd) 28%, #ffffff) !important;
  box-shadow: 0 18px 36px color-mix(in srgb, var(--theme-primary, #7656bd) 16%, transparent) !important;
}

.login-page .select-menu button:hover,
.login-page .select-menu button:focus,
.login-page .form .select-menu button:hover,
.login-page .form .select-menu button:focus {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--theme-primary, #7656bd), var(--theme-accent, #c5527b)) !important;
}

.login-page .alert-success {
  color: color-mix(in srgb, var(--theme-start, #251f3f) 80%, var(--theme-primary, #7656bd)) !important;
  border-color: color-mix(in srgb, var(--theme-primary, #7656bd) 28%, #ffffff) !important;
  background: color-mix(in srgb, var(--theme-soft, #f6f1ff) 78%, #ffffff) !important;
}

:root[data-vplus-theme="simple"] .login-page {
  background: #f7f7f7 !important;
}

:root[data-vplus-theme="simple"] .login-page .login-info {
  color: #111111 !important;
  background: #ffffff !important;
}

:root[data-vplus-theme="simple"] .login-page .login-card header strong,
:root[data-vplus-theme="simple"] .login-page .form input,
:root[data-vplus-theme="simple"] .login-page .form select,
:root[data-vplus-theme="simple"] .login-page .form .select-trigger,
:root[data-vplus-theme="simple"] .login-page .select-trigger {
  color: #111111 !important;
}

:root[data-vplus-theme="simple"] .login-page .form label,
:root[data-vplus-theme="simple"] .login-page .auth-switch {
  color: #444444 !important;
}

:root[data-vplus-theme="simple"] .login-page .login-card header span,
:root[data-vplus-theme="simple"] .login-page .auth-switch a,
:root[data-vplus-theme="simple"] .login-page .field-control i,
:root[data-vplus-theme="simple"] .login-page .field-control .icon-svg,
:root[data-vplus-theme="simple"] .login-page .select-control::after {
  color: #111111 !important;
}

:root[data-vplus-theme="simple"] .login-page .form input,
:root[data-vplus-theme="simple"] .login-page .form select,
:root[data-vplus-theme="simple"] .login-page .form .select-trigger,
:root[data-vplus-theme="simple"] .login-page .select-trigger {
  border-color: #d4d4d4 !important;
  background: #ffffff !important;
}

:root[data-vplus-theme="simple"] .login-page .login-info p,
:root[data-vplus-theme="simple"] .login-page .brand-block small,
:root[data-vplus-theme="simple"] .login-page .login-highlights span {
  color: #333333 !important;
}

:root[data-vplus-theme="simple"] .login-page .login-highlights span {
  border-color: #dddddd !important;
  background: #f4f4f4 !important;
}