/* The shared portal styles include legacy auth layouts. These scoped rules
   keep the current account pages independent of those layouts. */
body.auth.auth-newapi {
  --auth-surface: #0b4384;
  --auth-border: #2ca8df;
  --auth-muted: #b6daf4;
  --auth-accent: #4ddaa6;
  display: grid !important;
  grid-template: auto minmax(0, 1fr) auto auto / minmax(0, 1fr) !important;
  width: 100% !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 16px 20px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: #f1faff !important;
  background: linear-gradient(#65c9ff0c 1px, transparent 1px), linear-gradient(90deg, #65c9ff0c 1px, transparent 1px), #084584 !important;
  background-size: 24px 24px !important;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}
body.auth.auth-newapi *, body.auth.auth-newapi *::before, body.auth.auth-newapi *::after { box-sizing: border-box; }
body.auth.auth-newapi .auth-form-side * { font-family: inherit !important; text-shadow: none !important; }
body.auth.auth-newapi .auth-topbar {
  display: flex !important;
  grid-row: 1;
  width: min(1180px, 100%) !important;
  height: 72px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #ffffff14 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.auth.auth-newapi .auth-home-link {
  color: #d2deea !important;
  background: transparent !important;
  border: 1px solid var(--auth-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
body.auth.auth-newapi .auth-account-card {
  grid-row: 2;
  display: block !important;
  justify-self: center !important;
  align-self: center !important;
  width: min(480px, 100%) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 32px auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 2px solid var(--auth-border) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #0c5094, var(--auth-surface)) !important;
  box-shadow: inset 0 0 0 2px #0c5b9d, 0 5px 0 #032b62 !important;
}
body.auth.auth-newapi .auth-account-card::before,
body.auth.auth-newapi .auth-showcase { display: none !important; }
body.auth.auth-newapi .auth-account-card .auth-form-side {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 36px 32px !important;
  overflow: visible !important;
  background: transparent !important;
  text-shadow: none !important;
}
body.auth.auth-newapi .auth-form-side > * { grid-column: auto !important; }
body.auth.auth-newapi .auth-form-side > .logo { display: flex !important; width: max-content !important; margin: 0 0 24px !important; }
body.auth.auth-newapi .auth-form-side > h1,
body.auth.auth-newapi .auth-method-panel > h2 {
  width: 100% !important;
  margin: 0 0 28px !important;
  color: #ffffff !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: .04em;
  text-align: center !important;
  text-shadow: 0 3px 0 #03336a !important;
}
body.auth.auth-newapi .auth-intro { display: none !important; }
body.auth.auth-newapi .auth-method-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 26px !important;
  padding: 5px 5px 7px !important;
  border: 1px solid #032b62 !important;
  border-bottom-color: #368ccc !important;
  border-radius: 10px !important;
  background: #06366f !important;
  box-shadow: inset 0 2px 0 #032755 !important;
}
body.auth.auth-newapi .auth-method-tabs button {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: #a9d5f5 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  cursor: pointer;
}
body.auth.auth-newapi .auth-method-tabs button[aria-selected="false"]:hover {
  color: #effaff !important;
  background: #0c4d89 !important;
  border-color: #287fbc !important;
}
body.auth.auth-newapi .auth-method-tabs button[aria-selected="true"] {
  color: #513708 !important;
  background: linear-gradient(#ffe083, #f5c542) !important;
  border-color: #fff0ae !important;
  box-shadow: inset 0 0 0 1px #d89b21, 0 2px 0 #986414 !important;
  font-weight: 750 !important;
}
body.auth.auth-newapi .auth-method-tabs button:active:not(:disabled) {
  transform: translateY(1px) !important;
}
body.auth.auth-newapi .auth-method-tabs button:focus-visible {
  outline: 2px solid #fff0ae !important;
  outline-offset: 1px !important;
}
body.auth.auth-newapi :is(.auth-method-panel, .auth-register-form) { display: block !important; width: 100% !important; margin: 0 !important; }
/* The shared recess groups account fields; the primary action remains on
   the raised outer card so its hierarchy is unchanged between auth modes. */
body.auth.auth-newapi .auth-input-well {
  width: 100%;
  min-width: 0;
  padding: 22px 20px;
  border: 1px solid #032b62;
  border-bottom-color: #368ccc;
  border-radius: 10px;
  background: #06366f;
  box-shadow: inset 0 3px 0 #032755, inset 2px 0 0 #043064, inset -2px 0 0 #043064, 0 1px 0 #58bdf033;
}
body.auth.auth-newapi [hidden] { display: none !important; }
body.auth.auth-newapi :is(.auth-method-panel, .auth-register-form) label {
  display: grid !important;
  gap: 9px !important;
  margin: 0 0 20px !important;
  color: #ccecff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
}
body.auth.auth-newapi :is(.auth-method-panel, .auth-register-form) input:not([type="hidden"]) {
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--auth-border) !important;
  border-radius: 8px !important;
  color: #f1faff !important;
  background: #06366f !important;
  box-shadow: inset 0 2px 0 #032b62 !important;
  font: 400 14px/normal "Segoe UI", "Microsoft YaHei", sans-serif !important;
  text-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
body.auth.auth-newapi .auth-input-well label { margin-bottom: 18px !important; }
body.auth.auth-newapi .auth-input-well label:last-of-type { margin-bottom: 0 !important; }
body.auth.auth-newapi .auth-input-well input:not([type="hidden"]) {
  background: #0a4784 !important;
  border-color: #287fbc !important;
  box-shadow: inset 0 1px 2px #032b6255 !important;
}
body.auth.auth-newapi input::placeholder { color: #8fbce0 !important; opacity: 1 !important; }
body.auth.auth-newapi input:not([type="hidden"]):hover { border-color: #74d8ff !important; }
body.auth.auth-newapi input:not([type="hidden"]):focus {
  outline: 0 !important;
  border-color: #9de7ff !important;
  box-shadow: 0 0 0 2px #65d4ff33 !important;
}
body.auth.auth-newapi input[aria-invalid="true"] { border-color: #ec9e9e !important; }
body.auth.auth-newapi :is(.password-field, .email-code-field, .verification-field) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  width: 100% !important;
  height: 48px !important;
}
body.auth.auth-newapi .password-field { display: block !important; }
body.auth.auth-newapi :is(.auth-method-panel, .auth-register-form) .password-field input { padding-right: 48px !important; }
body.auth.auth-newapi .password-toggle {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #91d8ff !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
body.auth.auth-newapi .password-toggle::before,
body.auth.auth-newapi .password-toggle::after { content: none !important; display: none !important; }
body.auth.auth-newapi .password-toggle morph-icon { display: block !important; width: 20px !important; height: 20px !important; }
body.auth.auth-newapi :is(.email-code-field, .verification-field) button {
  width: auto !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid #63c9f1 !important;
  border-radius: 8px !important;
  color: #dcf5ff !important;
  background: #0867ad !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
body.auth.auth-newapi :is(.auth-method-panel, .auth-register-form) > button[type="submit"] {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 22px 0 0 !important;
  padding: 0 14px !important;
  border: 2px solid #b2f8dd !important;
  border-radius: 8px !important;
  color: #063b68 !important;
  background: linear-gradient(#72e8bd, var(--auth-accent)) !important;
  box-shadow: inset 0 0 0 2px #28ae80, 0 4px 0 #032a62 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
body.auth.auth-newapi button { transition: background .16s ease, border-color .16s ease, opacity .16s ease !important; }
body.auth.auth-newapi button:hover:not(:disabled) { filter: brightness(1.08) !important; transform: none !important; }
body.auth.auth-newapi button:active:not(:disabled) { filter: brightness(.95) !important; }
body.auth.auth-newapi button:disabled { opacity: .48 !important; cursor: not-allowed !important; filter: none !important; transform: none !important; }
body.auth.auth-newapi :is(button, a):focus-visible, .auth-modal-close:focus-visible { outline: 2px solid #79dfb6 !important; outline-offset: 3px !important; }
body.auth.auth-newapi .auth-form-help { margin: 18px 0 0 !important; text-align: right !important; }
body.auth.auth-newapi .auth-text-button {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #bce7ff !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  text-shadow: none !important;
  cursor: pointer;
}
body.auth.auth-newapi .auth-form-side > .switch {
  width: 100% !important;
  margin: 28px 0 0 !important;
  padding: 36px 0 0 !important;
  border-top: 1px solid #43b8ed55 !important;
  color: var(--auth-muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  text-align: center !important;
  text-shadow: none !important;
}
body.auth.auth-newapi .auth-form-side > .auth-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
}
body.auth.auth-newapi .auth-footer-actions > span { white-space: nowrap; }
body.auth.auth-newapi .auth-footer-actions > .auth-text-button {
  line-height: 1.6 !important;
  white-space: nowrap;
}
body.auth.auth-newapi .switch a { margin-left: 8px !important; color: #ffe170 !important; font-weight: 500 !important; }
body.auth.auth-newapi a:hover { text-decoration: underline; text-underline-offset: 4px; }
body.auth.auth-newapi .auth-form-side > .auth-notice {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 22px 0 0 !important;
  padding: 12px !important;
  border: 1px solid #7e91ad !important;
  border-radius: 8px !important;
  color: #f4cdcd !important;
  background: #123664 !important;
  box-shadow: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-shadow: none !important;
}
body.auth.auth-newapi .auth-form-side > .auth-notice[hidden] { display: none !important; }
body.auth.auth-newapi .auth-notice-icon { width: 22px !important; height: 22px !important; font-size: 13px !important; box-shadow: none !important; }
body.auth.auth-newapi .auth-notice strong { display: block !important; font-size: 13px !important; line-height: 1.6 !important; }
body.auth.auth-newapi .auth-notice p { display: block !important; margin: 3px 0 0 !important; font-size: 12px !important; line-height: 1.65 !important; white-space: normal !important; color: inherit !important; }
body.auth.auth-newapi .auth-form-side > .auth-notice-success { color: #c2ebd9 !important; border-color: #527969 !important; background: #203c38 !important; }
body.auth.auth-newapi .auth-form-side > .auth-notice-info { color: #c9dfef !important; border-color: #496680 !important; background: #213a50 !important; }
body.auth.auth-newapi .auth-theme-switch { grid-row: 3; margin: 0 auto 16px !important; text-align: center; }
body.auth.auth-newapi .auth-theme-switch a { color: var(--auth-muted) !important; }
body.auth.auth-newapi .site-compliance-footer { grid-row: 4; }
body.auth.auth-newapi .access-mode-reset .auth-form-side > h1,
body.auth.auth-newapi .access-mode-reset .auth-method-tabs { display: none !important; }

/* Embedded pages scroll inside the iframe when the viewport is shorter than
   the form. Only the standalone page owns navigation and outer spacing. */
html.auth-embedded { background: transparent !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: thin; scrollbar-color: #2ca8df #06366f; }
html.auth-embedded body.auth.auth-newapi { display: block !important; min-height: 0 !important; height: auto !important; padding: 0 !important; background: transparent !important; }
html.auth-embedded body.auth.auth-newapi > :is(.auth-topbar, .auth-theme-switch, .site-compliance-footer),
html.auth-embedded body.auth.auth-newapi .auth-form-side > .logo { display: none !important; }
html.auth-embedded body.auth.auth-newapi .auth-account-card { width: 100% !important; margin: 0 !important; box-shadow: inset 0 0 0 2px #0c5b9d !important; }
.auth-modal[hidden] { display: none !important; }
.auth-modal { position: fixed; inset: 0; z-index: 1000; display: flex !important; align-items: center; justify-content: center; padding: 16px; }
.auth-modal-backdrop { position: absolute; inset: 0; background: #031b437a !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: authBackdropIn .2s ease-out both; }
.auth-modal-dialog { position: relative; z-index: 1; width: min(480px, 100%) !important; max-height: calc(100dvh - 32px) !important; overflow: hidden !important; border: 0 !important; border-radius: 12px !important; background: #0b4384 !important; box-shadow: 0 5px 0 #032b62 !important; }
.auth-modal:not(.is-ready) .auth-modal-dialog { visibility: hidden; }
.auth-modal.is-ready .auth-modal-dialog { animation: authFormIn .16s ease-out both; }
.auth-modal.is-ready.is-entering .auth-modal-dialog { animation: authPanelIn .24s ease-out both; }
.auth-modal-loading { position: absolute; z-index: 2; display: flex; align-items: center; gap: 24px; max-width: calc(100% - 32px); color: #f1faff; animation: authFormIn .12s ease-out .2s both; }
.auth-modal-loading[hidden] { display: none !important; }
.auth-modal-loading .auth-modal-close.checkin-close { position: static !important; flex: 0 0 32px; }
#auth-modal-frame { display: block; width: 100%; height: 620px; max-height: calc(100dvh - 32px); border: 0; border-radius: 12px; }
.auth-modal-close.checkin-close { position: absolute !important; z-index: 10 !important; top: 16px !important; right: 16px !important; display: grid !important; place-items: center !important; width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; color: #d9edff !important; background: transparent !important; box-shadow: none !important; font: 24px/1 "Segoe UI", sans-serif !important; cursor: pointer; }
.auth-modal-close.checkin-close:hover { background: #ffffff12 !important; color: #fff !important; }
.landing-action-icon { display: block; width: 18px; height: 18px; }
@keyframes authBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes authPanelIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes authFormIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 420px) {
  body.auth.auth-newapi .auth-input-well { padding: 18px 12px; }
  body.auth.auth-newapi .auth-account-card .auth-form-side { padding: 34px 20px 28px !important; }
  body.auth.auth-newapi :is(.auth-method-panel, .auth-register-form) input:not([type="hidden"]) { font-size: 16px !important; }
  body.auth.auth-newapi .auth-form-side > h1 { font-size: 32px !important; }
  body.auth.auth-newapi :is(.email-code-field, .verification-field) button { padding: 0 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-modal-backdrop, .auth-modal.is-ready .auth-modal-dialog, .auth-modal-loading { animation: none !important; }
  body.auth.auth-newapi *, body.auth.auth-newapi *::before, body.auth.auth-newapi *::after { animation: none !important; transition: none !important; }
}

/* Keep the fixed landing navigation visually unchanged while auth modal is open. */
body.auth.landing .auth-modal-backdrop{top:70px!important}
@media(max-width:700px){body.auth.landing .auth-modal-backdrop{top:64px!important}}

/* Exclude the fixed landing navigation from the modal stacking area entirely. */
body.auth.landing .auth-modal{inset:70px 0 0!important}
@media(max-width:700px){body.auth.landing .auth-modal{inset:64px 0 0!important}}

/* The backdrop covers the full page while the background remains scrollable. */
body.auth.landing .auth-modal-backdrop{top:0!important}
body.auth.landing .auth-modal{inset:0!important}