/* LUXEN88 AUTH + THEME UI V1 — scoped visual layer, no business logic. */
/* A muted navy/cyan/gold palette replaces the original high-glare cyan/red/yellow UI. */
:root {
  --theme-color-1: #287d9f !important;
  --theme-color-2: #0a3454 !important;
  --theme-font-color-2: #e8f2fa !important;
  --primary-color-1: #2575b3 !important;
  --primary-color-2: #104574 !important;
  --primary-font-color: #ffffff !important;
  --secondary-color-1: #c9a762 !important;
  --secondary-color-2: #a17a3e !important;
  --secondary-font-color: #0b2033 !important;
}
/* Header surface: lower glare, keep all existing positions and navigation. */
.header-section[data-v-fb8b9a4a] {
  background-color: rgba(5, 19, 36, .97) !important;
}
.marquee-section[data-v-fb8b9a4a] {
  background: linear-gradient(90deg,#123958 0%,#0b2945 53%,#174866 100%) !important;
  color: #edf5fc !important;
}
/* Pair the EXACT verified guest Login/Register header controls (home/auth/logout). */
.header-left .wrap-item-header-left .flex.flex-row.w-full:has(> div > #open-modal-login) {
  column-gap: 0 !important;
  gap: 0 !important;
  align-items: center !important;
  isolation: isolate;
}
.header-left .wrap-item-header-left .flex.flex-row.w-full:has(> div > #open-modal-login) > div {
  margin: 0 !important;
  flex: 0 1 118px;
  min-width: 0;
  width: auto !important;
}
#open-modal-login,
#open-modal-register {
  min-width: 0;
  width: 100%;
  min-height: 36px;
  padding: 5px 7px !important;
  border: 1px solid #5a91b3 !important;
  box-shadow: none !important;
  --n-text-color: #f9fcff !important;
  --n-text-color-hover: #ffffff !important;
}
#open-modal-login {
  background: linear-gradient(180deg,#257fb9,#124c7a) !important;
  border-radius: 11px 0 0 11px !important;
}
#open-modal-register {
  background: linear-gradient(180deg,#dbbc7c,#ab874d) !important;
  border-color: #bc9c66 !important;
  border-left-width: 0 !important;
  border-radius: 0 11px 11px 0 !important;
  --n-text-color: #091d30 !important;
  --n-text-color-hover: #071b2a !important;
}
#open-modal-login .n-button__content,
#open-modal-login .n-button__content * {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: clamp(11px, 2.6vw, 14px);
  text-shadow: none !important;
}
#open-modal-register .n-button__content,
#open-modal-register .n-button__content * {
  color: #0b2136 !important;
  font-weight: 700 !important;
  font-size: clamp(11px, 2.6vw, 14px);
  text-shadow: none !important;
}
#open-modal-login:focus-visible,
#open-modal-register:focus-visible {
  outline: 2px solid #d3efff !important;
  outline-offset: 3px;
}
#open-modal-login:hover { filter: brightness(1.08); }
#open-modal-register:hover { filter: brightness(1.05); }
/* One verified modal on /auth/: Login and Register share its outer panel. */
#custom-modal { color: #e9f3ff; }
#custom-modal > .wrap-theme-box {
  width: min(94vw, 490px) !important;
  max-width: 490px !important;
  padding: 2px !important;
  margin: auto !important;
  border-radius: 20px !important;
  background: linear-gradient(150deg,#5898b7 0%,#244961 55%,#b79b65 100%) !important;
  box-shadow: 0 18px 48px rgba(0,4,13,.5) !important;
  filter: none !important;
}
#custom-modal > .wrap-theme-box > .inner-theme-box {
  background: linear-gradient(155deg,#122d43 0%,#091b2e 58%,#071522 100%) !important;
  color: #ebf4ff !important;
  padding: 14px 18px 20px !important;
  border-radius: 18px !important;
}
#custom-modal > .wrap-theme-box > .inner-theme-box > .flex.justify-between {
  min-height: 38px;
  align-items: center !important;
  justify-content: flex-end !important;
}
#custom-modal span.xicon.cursor-pointer {
  display: inline-flex !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 15;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 36px;
  border-radius: 10px;
  border: 1px solid rgba(176,209,226,.4);
  background: rgba(18,50,72,.8);
  color: #f4fbff !important;
}
#custom-modal span.xicon.cursor-pointer:focus-visible {
  outline: 2px solid #a8e1ff;
  outline-offset: 2px;
}
#custom-modal #login-page {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
}
#custom-modal #login-page .wrap-login-page {
  width: 100% !important;
  max-width: 100% !important;
}
#custom-modal #login-page .wrap-form-login-page { padding: 0 2px !important; }
#custom-modal #login-page .box-logo-login-page img,
#custom-modal #register-page .box-logo-register-page img {
  position: static !important;
  width: min(170px, 56%) !important;
  max-height: 72px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 8px !important;
  object-fit: contain;
}
#custom-modal #login-page .title-login-page,
#custom-modal #register-page .title-register-page {
  color: #f7fbff !important;
  font-size: clamp(20px, 5vw, 27px) !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
  text-shadow: none !important;
}
#custom-modal #login-page .n-checkbox__label,
#custom-modal #register-page .luxreg-label,
#custom-modal #register-page .luxreg-terms,
#custom-modal #register-page .luxreg-login-return {
  color: #e6f1fc !important;
}
#custom-modal #login-page .n-input,
#custom-modal #register-page .luxreg-input-wrap,
#custom-modal #register-page .luxreg-bank-toggle {
  background: #0b2338 !important;
  border: 1px solid #3d637d !important;
  border-radius: 11px !important;
  --n-color: #0b2338 !important;
  --n-color-focus: #102d43 !important;
  --n-border: 1px solid #3d637d !important;
  --n-border-hover: 1px solid #78b7d4 !important;
  --n-border-focus: 1px solid #8bd0ec !important;
  --n-text-color: #f4fbff !important;
  --n-placeholder-color: #b5c7d4 !important;
  --n-caret-color: #9bd7f0 !important;
}
#custom-modal #login-page .n-input input,
#custom-modal #login-page .n-input__input-el,
#custom-modal #register-page .luxreg-input {
  color: #f4fbff !important;
  caret-color: #a9def6 !important;
}
#custom-modal #login-page input::placeholder,
#custom-modal #register-page input::placeholder { color: #bcccd9 !important; opacity: 1; }
#custom-modal #register-page .luxreg-note,
#custom-modal #register-page .step-description { color: #bfcedb !important; }
#custom-modal #register-page .step-description .is-active,
#custom-modal #register-page .luxreg-login-return button,
#custom-modal #login-page .text-call-center .text-underline {
  color: #e4c482 !important;
}
#custom-modal #register-page .luxreg-original-step.is-active {
  background: linear-gradient(90deg,#72bbd9,#357b9c) !important;
}
#custom-modal #register-page .luxreg-bank-list {
  border-color: #6b91a9 !important;
  background: #ecf2f8 !important;
}
#custom-modal #register-page .luxreg-bank-option,
#custom-modal #register-page .luxreg-bank-option-name { color: #12263a !important; }
#custom-modal #register-page .luxreg-bank-option:is(:hover,:focus,.is-selected) { background: #d9e9f3 !important; }
#custom-modal #login-page #login-button,
#custom-modal #register-page .luxreg-runtime-button.primary-button {
  min-height: 44px !important;
  background: linear-gradient(180deg,#2b85bd,#145282) !important;
  color: #fff !important;
  border: 1px solid #4c9ecb !important;
  border-radius: 11px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
#custom-modal #login-page #register-button,
#custom-modal #register-page .luxreg-runtime-button.secondary-button {
  min-height: 42px !important;
  background: #112f49 !important;
  color: #f3d49c !important;
  border: 1px solid #b99a60 !important;
  border-radius: 11px !important;
  font-weight: 700 !important;
}
#custom-modal #login-page #login-button :is(span,.n-button__content),
#custom-modal #register-page .luxreg-runtime-button.primary-button { color: #fff !important; }
#custom-modal #login-page #register-button :is(span,.n-button__content),
#custom-modal #register-page .luxreg-runtime-button.secondary-button { color: #f3d49c !important; }
#custom-modal #register-page .luxreg-bank-warning {
  background: rgba(155,103,36,.17) !important;
  color: #ffdfab !important;
  border: 1px solid rgba(205,166,96,.4);
}
#custom-modal #register-page .luxreg-message.is-error,
#custom-modal #login-page #luxen88-login-message {
  font-weight: 500;
  line-height: 1.5;
}
#custom-modal #login-page .text-call-center,
#custom-modal #login-page .text-call-center * { text-shadow: none !important; }
@media (max-width: 640px) {
  .header-left .wrap-item-header-left .flex.flex-row.w-full:has(> div > #open-modal-login) > div {
    flex-basis: 92px;
  }
  #open-modal-login, #open-modal-register { min-height: 34px; padding: 4px 3px !important; }
  #custom-modal > .wrap-theme-box { width: min(95vw, 420px) !important; }
  #custom-modal > .wrap-theme-box > .inner-theme-box { padding: 12px 13px 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #open-modal-login, #open-modal-register { transition: none !important; }
}