:root {
  color-scheme: light;
  --login-bg: oklch(0.97 0.006 165);
  --login-surface: oklch(0.995 0.002 165);
  --login-ink: oklch(0.245 0.025 165);
  --login-ink-soft: oklch(0.39 0.025 165);
  --login-muted: oklch(0.5 0.018 165);
  --login-line: oklch(0.82 0.018 165);
  --login-primary: oklch(0.42 0.08 165);
  --login-primary-hover: oklch(0.355 0.072 165);
  --login-primary-soft: oklch(0.93 0.035 165);
  --login-danger: oklch(0.5 0.16 25);
  --login-danger-soft: oklch(0.95 0.035 25);
  --login-focus: oklch(0.62 0.12 165 / 0.25);
  --login-radius: 8px;
  --login-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
}

body.jx-login-page {
  min-height: 100dvh;
  margin: 0;
  color: var(--login-ink);
  background: var(--login-bg);
  font-family: Inter, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input {
  font: inherit;
}

button,
a {
  touch-action: manipulation;
}

.jx-login-skip {
  position: fixed;
  z-index: 20;
  top: 10px;
  left: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: white;
  background: var(--login-primary);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 180ms var(--login-ease-out);
}

.jx-login-skip:focus {
  transform: translateY(0);
}

.jx-login-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(400px, 0.85fr);
}

.jx-login-visual {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  overflow: hidden;
  color: white;
  background: oklch(0.22 0.035 165);
}

.jx-login-visual > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 52%;
}

.jx-login-visual-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, oklch(0.16 0.035 165 / 0.38), oklch(0.16 0.035 165 / 0.1) 42%, oklch(0.14 0.035 165 / 0.82));
  pointer-events: none;
}

.jx-login-brand {
  position: absolute;
  top: max(28px, env(safe-area-inset-top));
  left: 32px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: white;
  text-decoration: none;
}

.jx-login-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: oklch(0.22 0.035 165);
  background: oklch(0.9 0.08 155);
  font-size: 12px;
  font-weight: 850;
}

.jx-login-brand strong,
.jx-login-brand small {
  display: block;
}

.jx-login-brand strong {
  font-size: 15px;
}

.jx-login-brand small {
  margin-top: 2px;
  color: oklch(0.9 0.01 165);
  font-size: 11px;
}

.jx-login-copy {
  position: absolute;
  right: 32px;
  bottom: 72px;
  left: 32px;
  max-width: 680px;
}

.jx-login-copy h1 {
  max-width: 14ch;
  margin: 0;
  font-size: 48px;
  font-weight: 720;
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}

.jx-login-copy p {
  max-width: 36ch;
  margin: 16px 0 0;
  color: oklch(0.92 0.01 165);
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}

.jx-login-caption {
  position: absolute;
  right: 32px;
  bottom: 24px;
  margin: 0;
  color: oklch(0.84 0.015 165);
  font-size: 11px;
}

.jx-auth-pane {
  min-width: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 40px clamp(32px, 6vw, 88px);
  background: var(--login-surface);
}

.jx-auth-content {
  width: min(100%, 390px);
}

.jx-mobile-brand {
  display: none;
}

.jx-secure-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--login-primary);
  font-size: 12px;
  font-weight: 700;
}

.jx-secure-state svg {
  width: 16px;
  height: 16px;
}

.jx-auth-heading h2 {
  margin: 18px 0 0;
  color: var(--login-ink);
  font-size: 30px;
  font-weight: 740;
  line-height: 1.2;
  letter-spacing: 0;
}

.jx-auth-heading p {
  margin: 9px 0 0;
  color: var(--login-muted);
  font-size: 14px;
}

.jx-form-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 22px;
  padding: 11px 12px;
  border: 1px solid oklch(0.78 0.08 25);
  border-radius: 6px;
  color: oklch(0.4 0.14 25);
  background: var(--login-danger-soft);
  font-size: 13px;
  line-height: 1.5;
}

.jx-form-alert svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.jx-login-form {
  display: grid;
  gap: 15px;
  margin-top: 28px;
}

.jx-field-group {
  display: grid;
  gap: 7px;
}

.jx-field-group label {
  color: var(--login-ink);
  font-size: 13px;
  font-weight: 700;
}

.jx-input-shell {
  position: relative;
  display: flex;
  align-items: center;
}

.jx-input-shell > svg {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 18px;
  color: var(--login-muted);
  pointer-events: none;
  stroke-width: 1.8;
}

.jx-input-shell input {
  width: 100%;
  min-height: 48px;
  padding: 0 13px 0 42px;
  border: 1px solid var(--login-line);
  border-radius: 6px;
  color: var(--login-ink);
  background: white;
  outline: none;
  letter-spacing: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.jx-password-shell input {
  padding-right: 52px;
}

.jx-input-shell input::placeholder {
  color: oklch(0.5 0.018 165);
  opacity: 1;
}

.jx-input-shell input:focus {
  border-color: var(--login-primary);
  box-shadow: 0 0 0 3px var(--login-focus);
}

.jx-input-shell input[aria-invalid="true"] {
  border-color: var(--login-danger);
  box-shadow: 0 0 0 3px oklch(0.58 0.14 25 / 0.16);
}

.jx-password-toggle {
  position: absolute;
  right: 4px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--login-ink-soft);
  background: transparent;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, transform 100ms ease-out;
}

.jx-password-toggle svg {
  width: 18px;
  height: 18px;
}

.jx-password-toggle span {
  display: none;
  font-size: 11px;
  font-weight: 700;
}

.no-lucide .jx-password-toggle svg {
  display: none;
}

.no-lucide .jx-password-toggle span {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .jx-password-toggle:hover {
    color: var(--login-primary);
    background: var(--login-primary-soft);
  }
}

.jx-password-toggle:active {
  transform: scale(0.94);
}

.jx-field-error {
  min-height: 18px;
  margin: -2px 0 0;
  color: var(--login-danger);
  font-size: 12px;
}

.jx-submit-button {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 1px;
  padding: 0 16px;
  border: 1px solid var(--login-primary);
  border-radius: 6px;
  color: white;
  background: var(--login-primary);
  box-shadow: none;
  font-weight: 720;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, transform 100ms ease-out;
}

.jx-submit-button svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .jx-submit-button:not(:disabled):hover {
    border-color: var(--login-primary-hover);
    background: var(--login-primary-hover);
  }
}

.jx-submit-button:disabled {
  transform: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.jx-submit-button:active {
  transform: scale(0.98);
}

.jx-submit-button[disabled] {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.jx-button-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid oklch(1 0 0 / 0.42);
  border-top-color: white;
  border-radius: 50%;
  animation: jxLoginSpin 650ms linear infinite;
}

.jx-submit-button.is-loading .jx-button-spinner {
  display: block;
}

.jx-submit-button.is-loading > svg {
  display: none;
}

.jx-form-status {
  min-height: 18px;
  margin: -4px 0 0;
  color: var(--login-muted);
  font-size: 12px;
  text-align: center;
}

.jx-form-status.is-error {
  color: var(--login-danger);
}

.jx-auth-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--login-line);
  color: var(--login-muted);
  font-size: 12px;
}

.jx-auth-note svg {
  width: 15px;
  height: 15px;
}

.jx-login-page :focus-visible {
  outline: 3px solid var(--login-focus);
  outline-offset: 2px;
}

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

@media (max-width: 900px) {
  .jx-login-shell {
    grid-template-columns: 1fr;
  }

  .jx-login-visual {
    min-height: 220px;
  }

  .jx-login-brand {
    top: 18px;
    left: 20px;
  }

  .jx-login-copy {
    right: 20px;
    bottom: 24px;
    left: 20px;
  }

  .jx-login-copy h1 {
    max-width: 22ch;
    font-size: 28px;
  }

  .jx-login-copy p,
  .jx-login-caption {
    display: none;
  }

  .jx-auth-pane {
    min-height: calc(100dvh - 220px);
    padding: 40px 24px 48px;
  }
}

@media (max-width: 520px) {
  .jx-login-visual {
    min-height: 174px;
  }

  .jx-login-brand {
    display: none;
  }

  .jx-login-copy {
    bottom: 18px;
  }

  .jx-login-copy h1 {
    max-width: 18ch;
    font-size: 24px;
  }

  .jx-auth-pane {
    min-height: calc(100dvh - 174px);
    align-items: start;
    padding: 28px 18px 36px;
  }

  .jx-mobile-brand {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 26px;
  }

  .jx-mobile-brand span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    color: white;
    background: var(--login-primary);
    font-size: 10px;
    font-weight: 800;
  }

  .jx-mobile-brand strong {
    font-size: 13px;
  }

  .jx-auth-heading h2 {
    margin-top: 14px;
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --login-line: oklch(0.64 0.03 165);
  }
}

/* Previous theme compatibility layer */
:root {
  --login-bg: #f1f7f6;
  --login-surface: rgba(249, 252, 251, 0.92);
  --login-ink: #20312b;
  --login-ink-soft: #40564e;
  --login-muted: #5d7069;
  --login-line: #bfd6ce;
  --login-primary: #2d6a56;
  --login-primary-hover: #245846;
  --login-primary-soft: #e1f2ea;
  --login-danger: #97505a;
  --login-danger-soft: #f8e7ea;
  --login-focus: rgba(76, 139, 117, 0.28);
}

body.jx-login-page,
.jx-auth-pane {
  background: var(--login-bg);
}

.jx-auth-pane {
  background: rgba(245, 250, 248, 0.9);
}

.jx-login-visual {
  background: #dceae5;
}

.jx-login-visual-shade {
  background: linear-gradient(180deg, rgba(45, 82, 69, 0.32), rgba(45, 82, 69, 0.08) 42%, rgba(30, 61, 51, 0.76));
}

.jx-login-mark {
  border: 1px solid rgba(255, 255, 255, 0.92);
  color: #284e41;
  background: rgba(236, 248, 242, 0.78);
  box-shadow: inset 0 1px 0 white, 0 7px 18px rgba(29, 58, 49, 0.16);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}

.jx-secure-state {
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  background: rgba(225, 242, 234, 0.72);
  box-shadow: inset 0 1px 0 white;
}

.jx-input-shell input {
  border-color: var(--login-line);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 white, 0 5px 14px rgba(65, 101, 88, 0.055);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}

.jx-password-toggle {
  right: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 1px 0 white;
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  touch-action: manipulation;
}

.jx-submit-button {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(45, 106, 86, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 9px 22px rgba(45, 106, 86, 0.18);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.jx-form-alert {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(248, 231, 234, 0.82);
  box-shadow: inset 0 1px 0 white;
}

.jx-auth-note {
  border-color: #ccdde6;
  background: rgba(227, 239, 247, 0.58);
}

.jx-mobile-brand span {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(45, 106, 86, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 5px 14px rgba(45, 106, 86, 0.14);
}

@media (hover: hover) and (pointer: fine) {
  .jx-password-toggle:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 white, 0 7px 16px rgba(65, 101, 88, 0.1);
    transform: translateY(-1px);
  }

  .jx-submit-button:hover {
    border-color: rgba(255, 255, 255, 0.64);
    background: rgba(36, 88, 70, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 11px 24px rgba(45, 106, 86, 0.2);
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .jx-auth-pane,
  .jx-input-shell input,
  .jx-password-toggle,
  .jx-secure-state {
    background: #fbfdfc;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .jx-submit-button {
    background: var(--login-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Jiexing Toolbox purple particle login v3768 */
:root {
  --login-bg: #f5f4f8;
  --login-surface: #fbfafc;
  --login-ink: #221d29;
  --login-ink-soft: #49404f;
  --login-muted: #665d6d;
  --login-line: #dcd6e2;
  --login-primary: #6b3db5;
  --login-primary-hover: #59309c;
  --login-primary-soft: #f0eafb;
  --login-focus: rgba(107, 61, 181, 0.25);
  --login-button-radius: 12px;
}

body.jx-login-page {
  color: var(--login-ink);
  background: var(--login-bg);
  font-family: "Segoe UI Variable Text", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
}

.jx-login-visual {
  isolation: isolate;
  background: #321849;
}

.jx-login-visual > img {
  z-index: -3;
  filter: saturate(0.9) contrast(1.02);
}

.jx-login-visual-shade {
  z-index: -2;
  background:
    linear-gradient(145deg, rgba(31, 10, 54, 0.84) 0%, rgba(75, 28, 112, 0.58) 46%, rgba(137, 63, 156, 0.44) 100%),
    linear-gradient(180deg, rgba(28, 9, 47, 0.1), rgba(24, 7, 43, 0.82));
}

.jx-login-particles {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.jx-login-brand,
.jx-login-copy,
.jx-login-caption {
  z-index: 1;
}

.jx-login-mark {
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 12px;
  color: #3d1c61;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 2px 7px rgba(24, 7, 43, 0.18);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}

.jx-login-brand small,
.jx-login-copy p,
.jx-login-caption {
  color: rgba(250, 245, 255, 0.84);
}

.jx-login-copy h1 {
  max-width: 15ch;
  font-weight: 720;
  letter-spacing: 0;
}

.jx-auth-pane {
  background: var(--login-surface);
}

.jx-secure-state {
  padding: 5px 8px;
  border: 1px solid #ded4ed;
  border-radius: 10px;
  color: var(--login-primary);
  background: #f3eefb;
  box-shadow: none;
}

.jx-input-shell input {
  border-color: var(--login-line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.jx-input-shell input:focus {
  border-color: var(--login-primary);
  box-shadow: 0 0 0 3px var(--login-focus);
}

.jx-password-toggle,
.jx-submit-button,
.jx-login-page button {
  border-radius: var(--login-button-radius);
}

.jx-password-toggle {
  border-color: transparent;
  color: var(--login-ink-soft);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.jx-submit-button,
.jx-mobile-brand span {
  border-color: rgba(255, 255, 255, 0.48);
  color: #ffffff;
  background: rgba(107, 61, 181, 0.97);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 7px rgba(74, 34, 126, 0.2);
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
}

.jx-auth-note {
  border-color: var(--login-line);
  color: var(--login-muted);
  background: transparent;
  box-shadow: none;
}

.jx-form-alert {
  border-color: #e5d6dc;
  background: #fbf4f6;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .jx-password-toggle:hover {
    border-color: #ddd4ea;
    color: var(--login-primary);
    background: var(--login-primary-soft);
    box-shadow: none;
    transform: translateY(-1px);
  }

  .jx-submit-button:not(:disabled):hover {
    border-color: rgba(255, 255, 255, 0.58);
    background: var(--login-primary-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 3px 8px rgba(74, 34, 126, 0.24);
    transform: translateY(-1px);
  }
}

.jx-password-toggle:active,
.jx-submit-button:not(:disabled):active {
  transform: scale(0.97);
}

@media (max-width: 900px) {
  .jx-login-visual-shade {
    background: linear-gradient(125deg, rgba(40, 14, 67, 0.82), rgba(116, 51, 145, 0.5));
  }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .jx-login-particles {
    display: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .jx-login-mark,
  .jx-secure-state,
  .jx-input-shell input,
  .jx-password-toggle,
  .jx-auth-pane {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .jx-submit-button {
    background: var(--login-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --login-line: #aca2b5;
    --login-muted: #4e4655;
  }
}

/* White glass login v3766.3 */
:root {
  --login-bg: #f6f7f7;
  --login-surface: rgba(255, 255, 255, 0.96);
  --login-ink: #1f2926;
  --login-ink-soft: #3f4b47;
  --login-muted: #5c6864;
  --login-line: #d8e0dd;
  --login-primary: #245f4e;
  --login-primary-hover: #1d4f40;
  --login-primary-soft: #edf3f1;
  --login-focus: rgba(36, 95, 78, 0.24);
  --login-button-radius: 12px;
}

body.jx-login-page,
.jx-auth-pane {
  background: var(--login-bg);
}

.jx-auth-pane {
  background: rgba(255, 255, 255, 0.94);
}

.jx-login-visual {
  background: #eef1ef;
}

.jx-login-visual-shade {
  background: linear-gradient(180deg, rgba(22, 30, 27, 0.18), rgba(22, 30, 27, 0.04) 42%, rgba(18, 26, 23, 0.72));
}

.jx-login-mark,
.jx-secure-state,
.jx-input-shell input,
.jx-password-toggle,
.jx-auth-note {
  border-color: var(--login-line);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 6px rgba(30, 45, 39, 0.06);
}

.jx-login-page button,
.jx-submit-button,
.jx-password-toggle {
  border-radius: var(--login-button-radius);
}

.jx-input-shell input {
  border-radius: 12px;
}

.jx-submit-button,
.jx-mobile-brand span {
  border-color: rgba(255, 255, 255, 0.56);
  background: rgba(36, 95, 78, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 2px 8px rgba(36, 95, 78, 0.18);
}

.jx-form-alert {
  border-color: #e7d9dc;
  background: #faf5f6;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .jx-password-toggle:hover {
    border-color: #cbd5d1;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 8px rgba(30, 45, 39, 0.09);
  }

  .jx-submit-button:not(:disabled):hover {
    border-color: rgba(255, 255, 255, 0.64);
    background: rgba(29, 79, 64, 0.98);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 3px 8px rgba(36, 95, 78, 0.2);
  }
}

.jx-submit-button:disabled:hover {
  transform: none;
  box-shadow: none;
}

@media (prefers-reduced-transparency: reduce) {
  .jx-auth-pane,
  .jx-login-mark,
  .jx-input-shell input,
  .jx-password-toggle,
  .jx-secure-state,
  .jx-auth-note {
    background: #ffffff;
  }
}

/* v3768 login final cascade lock */
:root {
  --login-bg: #f5f4f8;
  --login-surface: #fbfafc;
  --login-ink: #221d29;
  --login-ink-soft: #49404f;
  --login-muted: #665d6d;
  --login-line: #dcd6e2;
  --login-primary: #6b3db5;
  --login-primary-hover: #59309c;
  --login-primary-soft: #f0eafb;
  --login-focus: rgba(107, 61, 181, 0.25);
  --login-button-radius: 12px;
}

body.jx-login-page { color:var(--login-ink);background:var(--login-bg) }
.jx-auth-pane { background:var(--login-surface) }
.jx-login-visual { background:#321849 }
.jx-login-visual > img { z-index:-3;filter:saturate(.9) contrast(1.02) }
.jx-login-visual-shade { z-index:-2;background:linear-gradient(145deg,rgba(31,10,54,.84) 0%,rgba(75,28,112,.58) 46%,rgba(137,63,156,.44) 100%),linear-gradient(180deg,rgba(28,9,47,.1),rgba(24,7,43,.82)) }
.jx-login-particles { z-index:-1 }
.jx-login-mark { border-color:rgba(255,255,255,.42);color:#3d1c61;background:rgba(255,255,255,.84);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 2px 7px rgba(24,7,43,.18) }
.jx-secure-state { border-color:#ded4ed;color:var(--login-primary);background:#f3eefb;box-shadow:none }
.jx-input-shell input { border-color:var(--login-line);background:#fff;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none }
.jx-password-toggle { border-color:transparent;color:var(--login-ink-soft);background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none }
.jx-submit-button,.jx-mobile-brand span { border-color:rgba(255,255,255,.48);color:#fff;background:rgba(107,61,181,.97);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 7px rgba(74,34,126,.2) }
.jx-auth-note { border-color:var(--login-line);color:var(--login-muted);background:transparent;box-shadow:none }
@media(hover:hover) and (pointer:fine){.jx-submit-button:not(:disabled):hover{border-color:rgba(255,255,255,.58);background:var(--login-primary-hover);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 8px rgba(74,34,126,.24)}}
@media(max-width:900px){.jx-login-visual-shade{background:linear-gradient(125deg,rgba(40,14,67,.82),rgba(116,51,145,.5))}}
@media(prefers-reduced-transparency:reduce){.jx-auth-pane,.jx-login-mark,.jx-input-shell input,.jx-password-toggle,.jx-secure-state{background:#fff}.jx-submit-button{background:var(--login-primary)}}
@media(max-width:720px){.jx-login-particles{display:none}}

/* Self-service registration v3807.1 */
.jx-auth-tabs {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 24px;
  padding: 3px;
  border: 1px solid var(--login-line);
  border-radius: 10px;
  background: #f3eef8;
}

.jx-auth-tabs a {
  min-width: 0;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  border-radius: 7px;
  color: var(--login-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color 180ms var(--login-ease-out), background-color 180ms var(--login-ease-out), box-shadow 180ms var(--login-ease-out);
}

.jx-auth-tabs a[aria-current="page"] {
  color: var(--login-primary);
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(74, 34, 126, 0.12);
}

.jx-auth-tabs a:focus-visible {
  outline: 3px solid var(--login-focus);
  outline-offset: 1px;
}

.jx-field-help {
  margin: -2px 0 0;
  color: var(--login-muted);
  font-size: 12px;
  line-height: 1.5;
}

.jx-auth-note {
  flex-wrap: wrap;
  min-height: 44px;
}

.jx-auth-note a {
  color: var(--login-primary);
  font-weight: 750;
  text-underline-offset: 3px;
}

.jx-auth-switch-button {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid var(--login-primary);
  border-radius: var(--login-button-radius);
  color: var(--login-primary);
  background: transparent;
  font-size: 14px;
  font-weight: 720;
  text-align: center;
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease, transform 100ms ease-out;
}

.jx-auth-switch-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.jx-auth-switch-button:active {
  transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
  .jx-auth-tabs a:not([aria-current="page"]):hover {
    color: var(--login-primary);
    background: rgba(255, 255, 255, 0.58);
  }

  .jx-auth-switch-button:hover {
    color: var(--login-primary-hover);
    background: var(--login-primary-soft);
  }
}

@media (max-width: 520px) {
  .jx-auth-tabs {
    margin-bottom: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jx-auth-tabs a,
  .jx-auth-switch-button {
    transition: none;
  }
}

/* Taste Bank: biophilic-wellness v3810 */
body.jx-login-page {
  --sl-color-bg: #f5f5dc;
  --sl-color-surface: rgba(255,255,250,0.7);
  --sl-color-text: #2d3d2a;
  --sl-color-muted: #5a6b4a;
  --sl-color-line: rgba(255,255,255,0.6);
  --sl-color-accent: #228b22;
  --sl-color-forest: #228b22;
  --sl-color-earth: #8b4513;
  --sl-color-sky: #87ceeb;
  --sl-color-cream: #f5f5dc;
  --sl-font-display: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --sl-font-body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --sl-size-display: 4rem;
  --sl-size-h1: 4rem;
  --sl-size-h2: 1.12rem;
  --sl-size-body: 0.88rem;
  --sl-size-small: 0.78rem;
  --sl-space-sm: 16px;
  --sl-space-md: 28px;
  --sl-space-lg: 48px;
  --sl-radius-sm: 20px;
  --sl-radius-md: 24px;
  --sl-shadow-card: 0 8px 32px rgba(45,61,42,0.1);
  --sl-duration: 400ms;
  --sl-easing: cubic-bezier(0.22,0.7,0.25,1);

  --login-bg: var(--sl-color-bg);
  --login-surface: var(--sl-color-surface);
  --login-ink: var(--sl-color-text);
  --login-ink-soft: var(--sl-color-muted);
  --login-muted: var(--sl-color-muted);
  --login-line: var(--sl-color-line);
  --login-primary: var(--sl-color-forest);
  --login-primary-hover: var(--sl-color-earth);
  --login-primary-soft: var(--sl-color-surface);
  --login-danger: var(--sl-color-earth);
  --login-danger-soft: var(--sl-color-surface);
  --login-focus: var(--sl-color-forest);
  --login-radius: var(--sl-radius-sm);
  --login-ease-out: var(--sl-easing);

  color: var(--sl-color-text) !important;
  background: var(--sl-color-bg) !important;
  font-family: var(--sl-font-body) !important;
  font-size: var(--sl-size-body) !important;
}

.jx-login-shell {
  position: relative;
  z-index: 1;
  gap: var(--sl-space-sm);
  padding: var(--sl-space-sm);
  background: var(--sl-color-bg);
}

.jx-login-visual,
.jx-auth-pane {
  min-height: 0;
  border: 1px solid var(--sl-color-line);
  border-radius: var(--sl-radius-md);
  box-shadow: var(--sl-shadow-card);
  overflow: hidden;
}

.jx-login-visual {
  color: var(--sl-color-cream) !important;
  background: var(--sl-color-forest) !important;
}

.jx-login-visual::before,
.jx-login-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  transition:
    transform var(--sl-duration) var(--sl-easing),
    opacity var(--sl-duration) var(--sl-easing);
}

.jx-login-visual::before {
  top: calc(var(--sl-space-lg) * -1);
  right: calc(var(--sl-space-lg) * -1);
  width: 56%;
  height: 56%;
  background: var(--sl-color-sky);
  clip-path: ellipse(44% 38% at 52% 48%);
  opacity: 0.34;
}

.jx-login-visual::after {
  bottom: calc(var(--sl-space-lg) * -1);
  left: calc(var(--sl-space-lg) * -1);
  width: 52%;
  height: 52%;
  background: var(--sl-color-earth);
  clip-path: ellipse(42% 48% at 50% 50%);
  opacity: 0.28;
}

.jx-login-visual > img {
  opacity: 0.52;
}

.jx-login-visual-shade {
  background: var(--sl-color-forest) !important;
  background-image: none !important;
  opacity: 0.42;
}

.jx-login-brand,
.jx-login-copy,
.jx-login-caption {
  color: var(--sl-color-cream) !important;
}

.jx-login-brand {
  gap: var(--sl-space-sm);
  padding: var(--sl-space-md);
}

.jx-login-mark,
.jx-mobile-brand span {
  border-color: var(--sl-color-line) !important;
  border-radius: var(--sl-radius-sm) !important;
  color: var(--sl-color-forest) !important;
  background: var(--sl-color-cream) !important;
  background-image: none !important;
  box-shadow: var(--sl-shadow-card) !important;
}

.jx-login-copy {
  padding: var(--sl-space-lg);
}

.jx-login-copy h1 {
  max-width: none;
  margin: 0;
  color: var(--sl-color-cream) !important;
  font-family: var(--sl-font-display) !important;
  font-size: var(--sl-size-h1) !important;
}

.jx-login-copy p,
.jx-login-caption,
.jx-login-brand small {
  color: var(--sl-color-cream) !important;
  font-size: var(--sl-size-body) !important;
}

.jx-login-copy p {
  margin-top: var(--sl-space-sm);
}

.jx-auth-pane {
  padding: var(--sl-space-sm) !important;
  color: var(--sl-color-text) !important;
  background: var(--sl-color-surface) !important;
}

.jx-auth-content {
  padding: var(--sl-space-sm);
  border: 1px solid var(--sl-color-line);
  border-radius: var(--sl-radius-md);
  background: var(--sl-color-surface);
  box-shadow: var(--sl-shadow-card);
}

.jx-auth-tabs {
  gap: var(--sl-space-sm);
  margin-bottom: var(--sl-space-sm);
  padding: 0;
  border: 1px solid var(--sl-color-line);
  border-radius: var(--sl-radius-sm);
  background: var(--sl-color-surface);
}

.jx-auth-tabs a {
  min-height: var(--sl-space-lg);
  padding: 0 var(--sl-space-sm);
  border-radius: var(--sl-radius-sm);
  color: var(--sl-color-muted) !important;
  background: var(--sl-color-surface) !important;
  transition:
    color var(--sl-duration) var(--sl-easing),
    background-color var(--sl-duration) var(--sl-easing),
    transform var(--sl-duration) var(--sl-easing);
}

.jx-auth-tabs a[aria-current="page"] {
  color: var(--sl-color-cream) !important;
  background: var(--sl-color-forest) !important;
}

.jx-secure-state {
  margin-bottom: var(--sl-space-sm);
  padding: 0;
  border-color: var(--sl-color-line) !important;
  border-radius: var(--sl-radius-sm) !important;
  color: var(--sl-color-forest) !important;
  background: var(--sl-color-surface) !important;
  box-shadow: none !important;
}

.jx-auth-heading h2 {
  margin: 0;
  color: var(--sl-color-text) !important;
  font-family: var(--sl-font-display) !important;
  font-size: var(--sl-size-h2) !important;
}

.jx-auth-heading p,
.jx-field-help,
.jx-auth-note,
.jx-form-status {
  color: var(--sl-color-muted) !important;
  font-size: var(--sl-size-small) !important;
}

.jx-auth-heading p {
  margin-top: var(--sl-space-sm);
}

.jx-login-form {
  gap: var(--sl-space-sm);
  margin-top: var(--sl-space-sm);
}

.jx-field-group {
  gap: var(--sl-space-sm);
}

.jx-field-group label {
  color: var(--sl-color-text) !important;
  font-size: var(--sl-size-body) !important;
}

.jx-input-shell input {
  min-height: var(--sl-space-lg);
  padding: 0 var(--sl-space-lg) !important;
  border-color: var(--sl-color-muted) !important;
  border-radius: var(--sl-radius-sm) !important;
  color: var(--sl-color-text) !important;
  background: var(--sl-color-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-family: var(--sl-font-body) !important;
  font-size: var(--sl-size-body) !important;
}

.jx-input-shell input::placeholder {
  color: var(--sl-color-muted) !important;
}

.jx-input-shell > svg,
.jx-password-toggle {
  color: var(--sl-color-muted) !important;
}

.jx-input-shell input:focus,
.jx-input-shell input[aria-invalid="true"] {
  border-color: var(--sl-color-forest) !important;
  outline-color: var(--sl-color-forest) !important;
  box-shadow: var(--sl-shadow-card) !important;
}

.jx-password-toggle {
  min-height: var(--sl-space-lg);
  padding: 0 !important;
  border-color: var(--sl-color-muted) !important;
  border-radius: var(--sl-radius-sm) !important;
  color: var(--sl-color-forest) !important;
  background: var(--sl-color-surface) !important;
  box-shadow: none !important;
}

.jx-submit-button,
.jx-auth-switch-button {
  min-height: var(--sl-space-lg);
  padding: 0 var(--sl-space-md) !important;
  border-radius: var(--sl-radius-sm) !important;
  background-image: none !important;
  box-shadow: var(--sl-shadow-card) !important;
  transition:
    color var(--sl-duration) var(--sl-easing),
    background-color var(--sl-duration) var(--sl-easing),
    border-color var(--sl-duration) var(--sl-easing),
    transform var(--sl-duration) var(--sl-easing) !important;
}

.jx-submit-button {
  border-color: var(--sl-color-forest) !important;
  color: var(--sl-color-cream) !important;
  background: var(--sl-color-forest) !important;
}

.jx-auth-switch-button {
  margin-top: var(--sl-space-sm);
  border-color: var(--sl-color-earth) !important;
  color: var(--sl-color-earth) !important;
  background: var(--sl-color-surface) !important;
}

.jx-submit-button:not(:disabled):hover,
.jx-auth-switch-button:hover,
.jx-password-toggle:hover {
  border-color: var(--sl-color-earth) !important;
  color: var(--sl-color-cream) !important;
  background: var(--sl-color-earth) !important;
}

.jx-submit-button:disabled {
  color: var(--sl-color-muted) !important;
  background: var(--sl-color-surface) !important;
  opacity: 0.5;
}

.jx-button-spinner {
  border-color: var(--sl-color-line) !important;
  border-top-color: var(--sl-color-cream) !important;
}

.jx-form-alert {
  margin: var(--sl-space-sm) 0;
  padding: var(--sl-space-sm);
  border-color: var(--sl-color-earth) !important;
  border-radius: var(--sl-radius-sm) !important;
  color: var(--sl-color-earth) !important;
  background: var(--sl-color-surface) !important;
  box-shadow: none !important;
}

.jx-field-error,
.jx-form-status.is-error {
  color: var(--sl-color-earth) !important;
}

.jx-auth-note {
  margin-top: var(--sl-space-sm);
  padding: var(--sl-space-sm);
  border-color: var(--sl-color-line) !important;
  border-radius: var(--sl-radius-sm) !important;
  background: var(--sl-color-surface) !important;
}

.jx-auth-note a,
.jx-login-page :focus-visible {
  color: var(--sl-color-forest) !important;
  outline-color: var(--sl-color-forest) !important;
}

.jx-login-skip {
  padding: var(--sl-space-sm);
  border-radius: var(--sl-radius-sm);
  color: var(--sl-color-cream);
  background: var(--sl-color-forest);
  transition: transform var(--sl-duration) var(--sl-easing);
}

@media (max-width: 900px) {
  .jx-login-shell {
    gap: var(--sl-space-sm);
    padding: var(--sl-space-sm);
  }

  .jx-login-visual {
    min-height: calc(var(--sl-space-lg) * 4);
  }

  .jx-login-copy,
  .jx-auth-pane,
  .jx-auth-content {
    padding: var(--sl-space-sm) !important;
  }

  .jx-login-copy h1 {
    font-size: var(--sl-size-h2) !important;
  }
}

@media (max-width: 520px) {
  body.jx-login-page {
    font-size: var(--sl-size-body) !important;
  }

  .jx-login-visual {
    min-height: calc(var(--sl-space-lg) * 3);
  }

  .jx-auth-pane {
    min-height: auto;
  }

  .jx-auth-tabs,
  .jx-login-form {
    gap: var(--sl-space-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jx-login-visual::before,
  .jx-login-visual::after,
  .jx-login-page *,
  .jx-login-page *::before,
  .jx-login-page *::after {
    transition: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .jx-auth-pane,
  .jx-auth-content,
  .jx-auth-tabs,
  .jx-input-shell input,
  .jx-password-toggle,
  .jx-secure-state,
  .jx-auth-note {
    background: var(--sl-color-cream) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

.jx-login-mark,
.jx-secure-state,
.jx-mobile-brand span {
  font-family: var(--sl-font-body) !important;
  font-size: var(--sl-size-small) !important;
}

.jx-login-brand strong,
.jx-mobile-brand strong,
.jx-auth-tabs a,
.jx-auth-switch-button {
  font-family: var(--sl-font-body) !important;
  font-size: var(--sl-size-body) !important;
}

.jx-login-brand small {
  margin-top: 0 !important;
  font-size: var(--sl-size-small) !important;
}

.jx-secure-state,
.jx-submit-button,
.jx-auth-switch-button,
.jx-auth-note {
  gap: var(--sl-space-sm) !important;
}

.jx-mobile-brand {
  gap: var(--sl-space-sm) !important;
  margin-bottom: var(--sl-space-md) !important;
}

.jx-field-error,
.jx-field-help,
.jx-form-status,
.jx-submit-button {
  margin-top: 0 !important;
}

.jx-field-error {
  font-family: var(--sl-font-body) !important;
  font-size: var(--sl-size-small) !important;
}
/* End Taste Bank: biophilic-wellness v3810 */