/*
 * v1.8.4.3 — OneNav sign-in / registration / password-reset modal unification.
 * Visual-only: keep all OneNav AJAX, nonce, captcha, OAuth and validation logic.
 * Shared by the main homepage and /bookmark because the parent theme renders
 * the same #io_sign modal in wp_footer on eligible front-end pages.
 */

/* Keep the auth dialog above the ioTab desktop island and page chrome. */
#io_sign {
  z-index: 12050 !important;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 0 !important;
}

#io_sign .modal-dialog,
#io_sign .modal-dialog.io-sign-dialog-wide {
  width: min(360px, calc(100vw - 28px)) !important;
  max-width: 360px !important;
  margin: auto !important;
  transform: translate3d(0, 10px, 0) scale(.985);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}

#io_sign.show .modal-dialog {
  transform: translate3d(0, 0, 0) scale(1);
}

#io_sign .modal-content.io-sign-modal {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#io_sign .sign-content {
  display: block !important;
  position: relative;
  padding: 0 !important;
}

/* The reference is a compact centered card, not the optional split-image layout. */
#io_sign .sign-img {
  display: none !important;
}
#io_sign .sign-img + .sign {
  display: block !important;
  max-width: 320px !important;
  margin: 0 auto !important;
}

#io_sign .sign {
  width: 100%;
  max-width: 320px !important;
  margin: 0 auto !important;
  overflow: hidden;
  color: #252a34 !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  border-radius: 16px !important;
  background: rgba(249,250,252,.94) !important;
  box-shadow: 0 24px 64px rgba(12,17,28,.24), inset 0 1px 0 rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

#io_sign .io-sign-body {
  max-height: min(82vh, 680px) !important;
  max-height: min(82dvh, 680px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 23px 22px 21px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(125,137,155,.35) transparent;
}

#io_sign .io-sign-body::-webkit-scrollbar { width: 5px; }
#io_sign .io-sign-body::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(125,137,155,.32);
}

#io_sign .sign .io-close {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  z-index: 5 !important;
  display: grid !important;
  width: 30px;
  height: 30px;
  padding: 0 !important;
  place-items: center;
  color: #7e8490 !important;
  opacity: .9 !important;
  border: 0 !important;
  border-radius: 50%;
  background: rgba(126,135,150,.08) !important;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}

#io_sign .sign .io-close:hover {
  color: #303744 !important;
  background: rgba(126,135,150,.16) !important;
  transform: rotate(4deg);
}

#io_sign .sign-header {
  margin: 0 0 17px !important;
  padding: 0 26px 0 0;
  text-align: left !important;
}

#io_sign .sign-header .h4 {
  margin: 0 0 5px !important;
  color: #242a35 !important;
  font-size: 21px !important;
  font-weight: 760 !important;
  line-height: 1.3 !important;
  letter-spacing: -.025em;
}
#io_sign .io-sign-panel > .sign-header.h4 {
  margin: 0 0 12px !important;
  color: #242a35 !important;
  font-size: 21px !important;
  font-weight: 760 !important;
  line-height: 1.3 !important;
}

#io_sign .sign-header-nav {
  color: #9299a5 !important;
  font-size: 11.5px !important;
  font-weight: 450;
  line-height: 1.65 !important;
}

#io_sign .sign-header-nav a,
#io_sign .sign-header-nav .signup {
  color: #737e91 !important;
  font-weight: 650;
  text-decoration: none !important;
  transition: color .15s ease;
}

#io_sign .sign-header-nav a:hover,
#io_sign .sign-header-nav .signup:hover {
  color: #f1404b !important;
}

#io_sign .io-sign-form-body { min-width: 0; }
#io_sign .io-sign-panel { min-width: 0; }
#io_sign .io-sign-panel form { margin: 0; }
#io_sign .io-sign-panel .form-group { margin-bottom: 11px !important; }

#io_sign .io-sign-panel .form-control,
#io_sign .io-sign-panel input[type="text"],
#io_sign .io-sign-panel input[type="email"],
#io_sign .io-sign-panel input[type="password"],
#io_sign .io-sign-panel input[type="tel"],
#io_sign .io-sign-panel select,
#io_sign .io-sign-panel textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 40px !important;
  padding: 9px 12px !important;
  color: #353b46 !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  border: 1px solid rgba(139,150,168,.12) !important;
  border-radius: 9px !important;
  outline: 0;
  background: rgba(235,237,240,.92) !important;
  box-shadow: inset 0 1px 1px rgba(30,43,64,.025) !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

#io_sign .io-sign-panel .form-control::placeholder,
#io_sign .io-sign-panel input::placeholder,
#io_sign .io-sign-panel textarea::placeholder {
  color: #a0a6b0 !important;
  opacity: 1;
}

#io_sign .io-sign-panel .form-control:focus,
#io_sign .io-sign-panel input:focus,
#io_sign .io-sign-panel select:focus,
#io_sign .io-sign-panel textarea:focus {
  color: #2c3340 !important;
  border-color: rgba(241,64,75,.42) !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 0 0 3px rgba(241,64,75,.09) !important;
}

#io_sign .io-sign-panel .position-relative { min-width: 0; }
#io_sign .io-sign-panel .password-show-btn {
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%);
  color: #9299a5 !important;
  cursor: pointer;
}

#io_sign .io-sign-panel .custom-control,
#io_sign .io-sign-panel .custom-checkbox,
#io_sign .io-sign-panel .user-agreement,
#io_sign .io-sign-panel .text-xs {
  color: #777f8c;
  font-size: 11.5px;
  line-height: 1.55;
}

#io_sign .io-sign-panel .custom-control { margin: 1px 0 13px !important; }
#io_sign .io-sign-panel .custom-control-label { cursor: pointer; }
#io_sign .io-sign-panel .custom-control-label::before { border-radius: 4px; }
#io_sign .io-sign-panel .login-form { margin-bottom: 10px !important; }

#io_sign .io-sign-panel .btn.vc-theme,
#io_sign .io-sign-panel button[type="submit"],
#io_sign .io-sign-panel .submit-btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 16px !important;
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  line-height: 1.2;
  border: 1px solid #f1404b !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, #fa4653 0%, #ef3545 100%) !important;
  box-shadow: 0 7px 16px rgba(241,64,75,.19), inset 0 1px 0 rgba(255,255,255,.16) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

#io_sign .io-sign-panel .btn.vc-theme:hover,
#io_sign .io-sign-panel button[type="submit"]:hover,
#io_sign .io-sign-panel .submit-btn:hover {
  color: #fff !important;
  filter: brightness(1.025);
  box-shadow: 0 9px 20px rgba(241,64,75,.24), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transform: translateY(-1px);
}

#io_sign .io-sign-panel .btn.vc-theme:active,
#io_sign .io-sign-panel button[type="submit"]:active,
#io_sign .io-sign-panel .submit-btn:active {
  transform: translateY(0) scale(.99);
}

#io_sign .io-sign-panel .btn-token {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #e33e4a !important;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  border-radius: 8px;
  background: rgba(241,64,75,.075);
}

#io_sign .io-sign-panel .verification {
  align-items: center;
}
#io_sign .io-sign-panel .verification .form-control {
  display: inline-block;
  width: calc(100% - 112px);
  vertical-align: middle;
}
#io_sign .io-sign-panel .verification .btn-token {
  display: inline-flex;
  width: 104px;
  vertical-align: middle;
}

#io_sign .io-sign-panel .reg-error {
  padding: 10px 12px;
  color: #b83d48;
  border-radius: 9px;
  background: rgba(241,64,75,.08);
}

#io_sign .io-sign-panel .captcha,
#io_sign .io-sign-panel .captcha-box,
#io_sign .io-sign-panel .captcha-wrap { max-width: 100%; }
#io_sign .io-sign-panel img { max-width: 100%; height: auto; }

/* Smooth in-place switching: parent OneNav continues to control active tabs. */
#io_sign .io-sign-tabs .tab-pane {
  transform: translateY(3px);
  transition: opacity .18s ease, transform .18s ease;
}
#io_sign .io-sign-tabs .tab-pane.show.active { transform: translateY(0); }

#io_sign .io-sign-social-footer {
  margin-top: 15px !important;
  padding-top: 13px;
  border-top: 1px solid rgba(130,143,163,.13);
}
#io_sign .social-separator { color: #9299a5 !important; font-size: 11px !important; }

/* Backdrop blur is scoped to this auth modal only; other OneNav dialogs stay intact. */
body.mf-auth-modal-open .modal-backdrop,
body:has(#io_sign.show) .modal-backdrop {
  z-index: 12040 !important;
  opacity: .58 !important;
  background: rgba(19,14,25,.72) !important;
  -webkit-backdrop-filter: blur(5px) saturate(118%);
  backdrop-filter: blur(5px) saturate(118%);
}

/* Night mode keeps the card legible instead of turning it into one dark slab. */
html.io-black-mode #io_sign .sign,
body.io-black-mode #io_sign .sign {
  color: #edf2fb !important;
  border-color: rgba(222,232,248,.13) !important;
  background: rgba(30,36,48,.96) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

html.io-black-mode #io_sign .sign-header .h4,
body.io-black-mode #io_sign .sign-header .h4 { color: #f1f5fb !important; }
html.io-black-mode #io_sign .io-sign-panel > .sign-header.h4,
body.io-black-mode #io_sign .io-sign-panel > .sign-header.h4 { color: #f1f5fb !important; }

html.io-black-mode #io_sign .sign-header-nav,
body.io-black-mode #io_sign .sign-header-nav,
html.io-black-mode #io_sign .io-sign-panel .custom-control,
body.io-black-mode #io_sign .io-sign-panel .custom-control,
html.io-black-mode #io_sign .io-sign-panel .text-xs,
body.io-black-mode #io_sign .io-sign-panel .text-xs { color: #aab6c8 !important; }

html.io-black-mode #io_sign .sign-header-nav a,
body.io-black-mode #io_sign .sign-header-nav a { color: #b6c9e8 !important; }

html.io-black-mode #io_sign .io-sign-panel .form-control,
html.io-black-mode #io_sign .io-sign-panel input[type="text"],
html.io-black-mode #io_sign .io-sign-panel input[type="email"],
html.io-black-mode #io_sign .io-sign-panel input[type="password"],
html.io-black-mode #io_sign .io-sign-panel input[type="tel"],
html.io-black-mode #io_sign .io-sign-panel select,
html.io-black-mode #io_sign .io-sign-panel textarea,
body.io-black-mode #io_sign .io-sign-panel .form-control,
body.io-black-mode #io_sign .io-sign-panel input[type="text"],
body.io-black-mode #io_sign .io-sign-panel input[type="email"],
body.io-black-mode #io_sign .io-sign-panel input[type="password"],
body.io-black-mode #io_sign .io-sign-panel input[type="tel"],
body.io-black-mode #io_sign .io-sign-panel select,
body.io-black-mode #io_sign .io-sign-panel textarea {
  color: #edf2fb !important;
  border-color: rgba(211,225,247,.12) !important;
  background: rgba(9,13,21,.62) !important;
}

html.io-black-mode #io_sign .io-sign-panel .form-control::placeholder,
body.io-black-mode #io_sign .io-sign-panel .form-control::placeholder { color: #8795aa !important; }

html.io-black-mode #io_sign .sign .io-close,
body.io-black-mode #io_sign .sign .io-close {
  color: #aebbd0 !important;
  background: rgba(224,234,250,.08) !important;
}

html.io-black-mode body.mf-auth-modal-open .modal-backdrop,
body.io-black-mode.mf-auth-modal-open .modal-backdrop,
html.io-black-mode body:has(#io_sign.show) .modal-backdrop {
  background: rgba(2,5,10,.78) !important;
}

@media (max-width: 575.98px) {
  #io_sign { padding: 10px 0 !important; }
  #io_sign .modal-dialog,
  #io_sign .modal-dialog.io-sign-dialog-wide {
    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
    margin: auto !important;
  }
  #io_sign .sign { max-width: 420px !important; border-radius: 17px !important; }
  #io_sign .io-sign-body {
    max-height: calc(100vh - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    padding: 21px 18px 18px !important;
  }
  #io_sign .sign-header .h4 { font-size: 20px !important; }
  #io_sign .io-sign-panel .form-control,
  #io_sign .io-sign-panel input[type="text"],
  #io_sign .io-sign-panel input[type="email"],
  #io_sign .io-sign-panel input[type="password"],
  #io_sign .io-sign-panel input[type="tel"] { min-height: 42px !important; font-size: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #io_sign .modal-dialog,
  #io_sign .sign .io-close,
  #io_sign .io-sign-panel .form-control,
  #io_sign .io-sign-panel .btn.vc-theme,
  #io_sign .io-sign-tabs .tab-pane { transition: none !important; }
}


/* =============================================================
 * V1.8.5.7 · Unified Login Glass: visual-only enhancement
 * The parent OneNav owns credentials, AJAX, captcha, registration,
 * password recovery and session handling; selectors are #io_sign only.
 * ============================================================= */
#io_sign .sign {
  border: 1px solid rgba(255,255,255,.66) !important;
  background:
    radial-gradient(ellipse at 14% 0%, rgba(255,255,255,.84), rgba(255,255,255,0) 58%),
    linear-gradient(145deg, rgba(255,255,255,.75), rgba(241,247,255,.62) 54%, rgba(234,239,249,.65)) !important;
  box-shadow:
    0 30px 84px rgba(17,28,48,.24),
    0 8px 25px rgba(24,42,70,.08),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(111,139,183,.11) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
}
#io_sign .io-sign-panel .form-control,
#io_sign .io-sign-panel input[type="text"],
#io_sign .io-sign-panel input[type="email"],
#io_sign .io-sign-panel input[type="password"],
#io_sign .io-sign-panel input[type="tel"],
#io_sign .io-sign-panel select,
#io_sign .io-sign-panel textarea {
  background: rgba(237,242,250,.72) !important;
  border-color: rgba(124,147,184,.18) !important;
}
#io_sign .io-sign-panel .form-control:focus,
#io_sign .io-sign-panel input:focus,
#io_sign .io-sign-panel select:focus,
#io_sign .io-sign-panel textarea:focus {
  background: rgba(255,255,255,.86) !important;
}
#io_sign .sign .io-close {background: rgba(116,136,166,.12) !important;}
/* Only blur the native login modal backdrop, not other OneNav overlays. */
body.mf-auth-modal-open .modal-backdrop,
body:has(#io_sign.show) .modal-backdrop {
  opacity: .52 !important;
  background: rgba(22,28,44,.60) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}
html.io-black-mode #io_sign .sign,
body.io-black-mode #io_sign .sign {
  color: #f2f6fc !important;
  border-color: rgba(229,238,251,.17) !important;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(115,151,195,.16), rgba(0,0,0,0) 60%),
    linear-gradient(145deg, rgba(42,52,70,.82), rgba(26,34,47,.77) 54%, rgba(22,29,42,.78)) !important;
  box-shadow:
    0 30px 86px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18) !important;
  -webkit-backdrop-filter: blur(30px) saturate(160%) !important;
  backdrop-filter: blur(30px) saturate(160%) !important;
}
html.io-black-mode #io_sign .io-sign-panel .form-control,
html.io-black-mode #io_sign .io-sign-panel input[type="text"],
html.io-black-mode #io_sign .io-sign-panel input[type="email"],
html.io-black-mode #io_sign .io-sign-panel input[type="password"],
html.io-black-mode #io_sign .io-sign-panel input[type="tel"],
html.io-black-mode #io_sign .io-sign-panel select,
html.io-black-mode #io_sign .io-sign-panel textarea,
body.io-black-mode #io_sign .io-sign-panel .form-control,
body.io-black-mode #io_sign .io-sign-panel input[type="text"],
body.io-black-mode #io_sign .io-sign-panel input[type="email"],
body.io-black-mode #io_sign .io-sign-panel input[type="password"],
body.io-black-mode #io_sign .io-sign-panel input[type="tel"],
body.io-black-mode #io_sign .io-sign-panel select,
body.io-black-mode #io_sign .io-sign-panel textarea {
  background: rgba(10,17,29,.56) !important;
  border-color: rgba(190,213,246,.16) !important;
}
html.io-black-mode #io_sign .io-sign-panel .form-control:focus,
html.io-black-mode #io_sign .io-sign-panel input:focus,
body.io-black-mode #io_sign .io-sign-panel .form-control:focus,
body.io-black-mode #io_sign .io-sign-panel input:focus {
  background: rgba(16,25,40,.85) !important;
}
html.io-black-mode #io_sign .sign .io-close,
body.io-black-mode #io_sign .sign .io-close {background: rgba(220,234,255,.10) !important;}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #io_sign .sign {background: rgba(248,250,254,.98) !important;}
  html.io-black-mode #io_sign .sign,
  body.io-black-mode #io_sign .sign {background: rgba(29,36,49,.99) !important;}
}


/* ===============================================================
 * V1.8.5.8 TEST · Visible liquid-glass surface correction
 * The old V1.8.5.7 gradients were too opaque and the backdrop too dim.
 * Only visual surface styles for #io_sign; no login/session JS changes.
 * =============================================================== */
#io_sign .sign {
  position: relative;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.76) !important;
  background:
    radial-gradient(ellipse at 7% 0%, rgba(255,255,255,.72), transparent 61%),
    radial-gradient(ellipse at 100% 100%, rgba(116,166,246,.17), transparent 64%),
    linear-gradient(150deg, rgba(255,255,255,.56), rgba(235,244,255,.30) 52%, rgba(249,251,255,.39)) !important;
  box-shadow:
    0 28px 70px rgba(18,35,64,.24),
    0 6px 18px rgba(40,65,102,.08),
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 1px 0 0 rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(255,255,255,.28) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) brightness(1.06) !important;
  backdrop-filter: blur(22px) saturate(170%) brightness(1.06) !important;
}
/* Prevent any solid inner wrapper from covering the translucent surface. */
#io_sign .sign .io-sign-body,
#io_sign .sign .io-sign-panel,
#io_sign .sign .sign-content {
  background-color: transparent !important;
  background-image: none !important;
}
/* Keep form fields softly frosted, with clear input contrast. */
#io_sign .io-sign-panel .form-control,
#io_sign .io-sign-panel input[type="text"],
#io_sign .io-sign-panel input[type="email"],
#io_sign .io-sign-panel input[type="password"],
#io_sign .io-sign-panel input[type="tel"],
#io_sign .io-sign-panel select,
#io_sign .io-sign-panel textarea {
  background: rgba(255,255,255,.38) !important;
  border-color: rgba(255,255,255,.56) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 1px 4px rgba(24,43,71,.035) !important;
}
#io_sign .io-sign-panel .form-control:focus,
#io_sign .io-sign-panel input:focus,
#io_sign .io-sign-panel select:focus,
#io_sign .io-sign-panel textarea:focus {
  background: rgba(255,255,255,.70) !important;
}
/* Important: the surrounding page must remain visible enough to show through. */
body.mf-auth-modal-open .modal-backdrop,
body:has(#io_sign.show) .modal-backdrop {
  opacity: 1 !important;
  background: rgba(29,38,61,.25) !important;
  -webkit-backdrop-filter: blur(4px) saturate(125%) !important;
  backdrop-filter: blur(4px) saturate(125%) !important;
}
/* OneNav dark mode follows site-level manual toggle, not only OS preference. */
html.io-black-mode #io_sign .sign,
body.io-black-mode #io_sign .sign {
  color: #edf3ff !important;
  border-color: rgba(223,237,255,.26) !important;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(156,191,236,.22), transparent 64%),
    radial-gradient(ellipse at 100% 100%, rgba(79,124,196,.19), transparent 64%),
    linear-gradient(150deg, rgba(34,46,66,.63), rgba(21,32,49,.38) 52%, rgba(28,39,57,.46)) !important;
  box-shadow:
    0 30px 82px rgba(0,0,0,.49),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 1px 0 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(.94) !important;
  backdrop-filter: blur(24px) saturate(150%) brightness(.94) !important;
}
html.io-black-mode #io_sign .io-sign-panel .form-control,
html.io-black-mode #io_sign .io-sign-panel input[type="text"],
html.io-black-mode #io_sign .io-sign-panel input[type="email"],
html.io-black-mode #io_sign .io-sign-panel input[type="password"],
html.io-black-mode #io_sign .io-sign-panel input[type="tel"],
html.io-black-mode #io_sign .io-sign-panel select,
html.io-black-mode #io_sign .io-sign-panel textarea,
body.io-black-mode #io_sign .io-sign-panel .form-control,
body.io-black-mode #io_sign .io-sign-panel input[type="text"],
body.io-black-mode #io_sign .io-sign-panel input[type="email"],
body.io-black-mode #io_sign .io-sign-panel input[type="password"],
body.io-black-mode #io_sign .io-sign-panel input[type="tel"],
body.io-black-mode #io_sign .io-sign-panel select,
body.io-black-mode #io_sign .io-sign-panel textarea {
  background: rgba(8,17,31,.44) !important;
  border-color: rgba(215,231,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}
html.io-black-mode #io_sign .io-sign-panel .form-control:focus,
html.io-black-mode #io_sign .io-sign-panel input:focus,
body.io-black-mode #io_sign .io-sign-panel .form-control:focus,
body.io-black-mode #io_sign .io-sign-panel input:focus {
  background: rgba(14,26,44,.68) !important;
}
html.io-black-mode body.mf-auth-modal-open .modal-backdrop,
body.io-black-mode.mf-auth-modal-open .modal-backdrop,
html.io-black-mode body:has(#io_sign.show) .modal-backdrop {
  opacity: 1 !important;
  background: rgba(0,6,15,.42) !important;
  -webkit-backdrop-filter: blur(5px) saturate(112%) !important;
  backdrop-filter: blur(5px) saturate(112%) !important;
}
/* Readability-safe fallback on browsers without translucent backdrop filters. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #io_sign .sign {background: rgba(248,250,254,.93) !important;}
  html.io-black-mode #io_sign .sign,
  body.io-black-mode #io_sign .sign {background: rgba(28,37,53,.94) !important;}
}


/* ===============================================================
 * V1.8.5.19 TEST — Unified auth modal visual refinement.
 * Visual-only overrides for the existing native #io_sign dialog.
 * Keep OneNav login/register/recovery/AJAX/captcha/session logic intact.
 * Shared by homepage, /bookmark and the extension's native modal entry.
 * =============================================================== */
#io_sign .modal-dialog,
#io_sign .modal-dialog.io-sign-dialog-wide {
  width: min(410px, calc(100vw - 28px)) !important;
  max-width: 410px !important;
}

#io_sign .sign,
#io_sign .sign-img + .sign {
  width: 100% !important;
  max-width: 372px !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255,220,207,.34), transparent 47%),
    radial-gradient(ellipse at 0% 100%, rgba(178,211,255,.28), transparent 54%),
    linear-gradient(145deg, rgba(255,255,255,.70), rgba(242,247,255,.43) 52%, rgba(255,247,244,.48)) !important;
  box-shadow:
    0 30px 82px rgba(20,34,60,.25),
    0 8px 24px rgba(49,68,100,.08),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 1px 0 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(255,255,255,.30) !important;
  -webkit-backdrop-filter: blur(28px) saturate(178%) brightness(1.035) !important;
  backdrop-filter: blur(28px) saturate(178%) brightness(1.035) !important;
}

#io_sign .io-sign-body {
  padding: 27px 26px 25px !important;
  max-height: min(86vh, 740px) !important;
  max-height: min(86dvh, 740px) !important;
  scrollbar-color: rgba(113,132,160,.34) transparent;
}

#io_sign .sign-header {
  margin-bottom: 21px !important;
  padding-right: 34px !important;
}
#io_sign .sign-header .h4,
#io_sign .io-sign-panel > .sign-header.h4 {
  color: #263248 !important;
  font-size: 23px !important;
  font-weight: 760 !important;
  line-height: 1.32 !important;
  letter-spacing: -.035em !important;
}
#io_sign .sign-header-nav {
  color: #78869a !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}
#io_sign .sign-header-nav a,
#io_sign .sign-header-nav .signup {
  color: #e64c5c !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
#io_sign .sign-header-nav a:hover,
#io_sign .sign-header-nav .signup:hover {
  color: #c93649 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

#io_sign .sign .io-close {
  top: 12px !important;
  right: 12px !important;
  width: 34px !important;
  height: 34px !important;
  color: #718096 !important;
  border: 1px solid rgba(255,255,255,.66) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.36) !important;
  box-shadow: 0 3px 12px rgba(30,45,70,.07), inset 0 1px 0 rgba(255,255,255,.7) !important;
  -webkit-tap-highlight-color: transparent;
}
#io_sign .sign .io-close:hover {
  color: #344258 !important;
  background: rgba(255,255,255,.64) !important;
  transform: rotate(90deg) !important;
}

#io_sign .io-sign-panel .form-group { margin-bottom: 13px !important; }
#io_sign .io-sign-panel .form-control,
#io_sign .io-sign-panel input[type="text"],
#io_sign .io-sign-panel input[type="email"],
#io_sign .io-sign-panel input[type="password"],
#io_sign .io-sign-panel input[type="tel"],
#io_sign .io-sign-panel select,
#io_sign .io-sign-panel textarea {
  min-height: 46px !important;
  padding: 11px 14px !important;
  color: #29364b !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 2px 8px rgba(37,55,83,.035) !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
#io_sign .io-sign-panel .form-control::placeholder,
#io_sign .io-sign-panel input::placeholder,
#io_sign .io-sign-panel textarea::placeholder {
  color: #8d9aae !important;
  opacity: 1;
}
#io_sign .io-sign-panel .form-control:focus,
#io_sign .io-sign-panel input:focus,
#io_sign .io-sign-panel select:focus,
#io_sign .io-sign-panel textarea:focus {
  color: #263248 !important;
  border-color: rgba(235,91,112,.58) !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: 0 0 0 3px rgba(255,190,158,.20), inset 0 1px 0 rgba(255,255,255,.85) !important;
}
#io_sign .io-sign-panel input:-webkit-autofill,
#io_sign .io-sign-panel input:-webkit-autofill:hover,
#io_sign .io-sign-panel input:-webkit-autofill:focus {
  -webkit-text-fill-color: #29364b !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(246,249,255,.88) inset !important;
  transition: background-color 9999s ease-out 0s;
}
#io_sign .io-sign-panel .password-show-btn {
  right: 12px !important;
  color: #8a98ab !important;
}
#io_sign .io-sign-panel .custom-control,
#io_sign .io-sign-panel .custom-checkbox,
#io_sign .io-sign-panel .user-agreement,
#io_sign .io-sign-panel .text-xs {
  color: #68788f !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}
#io_sign .io-sign-panel .custom-control { margin: 3px 0 15px !important; }
#io_sign .io-sign-panel .custom-control-label { cursor: pointer; }

#io_sign .io-sign-panel .btn.vc-theme,
#io_sign .io-sign-panel button[type="submit"],
#io_sign .io-sign-panel .submit-btn {
  min-height: 46px !important;
  padding: 11px 18px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  letter-spacing: .015em !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  border-radius: 13px !important;
  background: linear-gradient(132deg, #ff6877 0%, #f4475b 56%, #ed354c 100%) !important;
  box-shadow:
    0 9px 22px rgba(235,59,82,.24),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}
#io_sign .io-sign-panel .btn.vc-theme:hover,
#io_sign .io-sign-panel button[type="submit"]:hover,
#io_sign .io-sign-panel .submit-btn:hover {
  color: #fff !important;
  filter: brightness(1.025);
  box-shadow:
    0 11px 25px rgba(235,59,82,.27),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
  transform: translateY(-1px);
}
#io_sign .io-sign-panel .btn.vc-theme:focus,
#io_sign .io-sign-panel button[type="submit"]:focus,
#io_sign .io-sign-panel .submit-btn:focus { outline: none !important; }
#io_sign .io-sign-panel .btn.vc-theme:focus-visible,
#io_sign .io-sign-panel button[type="submit"]:focus-visible,
#io_sign .io-sign-panel .submit-btn:focus-visible {
  outline: 3px solid rgba(255,203,157,.82) !important;
  outline-offset: 3px !important;
}
#io_sign .io-sign-panel .btn-token {
  min-height: 38px !important;
  border: 1px solid rgba(231,91,108,.16) !important;
  border-radius: 11px !important;
  background: rgba(255,239,239,.72) !important;
  color: #d94a59 !important;
}
#io_sign .io-sign-panel .reg-error {
  border: 1px solid rgba(225,78,93,.14);
  border-radius: 12px !important;
}
#io_sign .io-sign-social-footer {
  margin-top: 18px !important;
  padding-top: 15px !important;
  border-color: rgba(112,130,158,.19) !important;
}
#io_sign .social-separator { color: #8592a5 !important; }

/* Night mode: keep the same translucent structure, with deeper OLED blue glass. */
html.io-black-mode #io_sign .sign,
body.io-black-mode #io_sign .sign {
  color: #edf4ff !important;
  border-color: rgba(221,237,255,.24) !important;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(150,105,146,.19), transparent 48%),
    radial-gradient(ellipse at 0% 100%, rgba(63,123,183,.20), transparent 55%),
    linear-gradient(145deg, rgba(37,52,74,.78), rgba(19,32,51,.62) 54%, rgba(28,40,60,.72)) !important;
  box-shadow:
    0 32px 88px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 1px 0 0 rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter: blur(30px) saturate(160%) !important;
  backdrop-filter: blur(30px) saturate(160%) !important;
}
html.io-black-mode #io_sign .sign-header .h4,
body.io-black-mode #io_sign .sign-header .h4,
html.io-black-mode #io_sign .io-sign-panel > .sign-header.h4,
body.io-black-mode #io_sign .io-sign-panel > .sign-header.h4 { color: #f1f6ff !important; }
html.io-black-mode #io_sign .sign-header-nav,
body.io-black-mode #io_sign .sign-header-nav,
html.io-black-mode #io_sign .io-sign-panel .custom-control,
body.io-black-mode #io_sign .io-sign-panel .custom-control,
html.io-black-mode #io_sign .io-sign-panel .user-agreement,
body.io-black-mode #io_sign .io-sign-panel .user-agreement,
html.io-black-mode #io_sign .io-sign-panel .text-xs,
body.io-black-mode #io_sign .io-sign-panel .text-xs { color: #b7c7dc !important; }
html.io-black-mode #io_sign .sign-header-nav a,
body.io-black-mode #io_sign .sign-header-nav a,
html.io-black-mode #io_sign .sign-header-nav .signup,
body.io-black-mode #io_sign .sign-header-nav .signup { color: #ff9eaa !important; }
html.io-black-mode #io_sign .io-sign-panel .form-control,
html.io-black-mode #io_sign .io-sign-panel input[type="text"],
html.io-black-mode #io_sign .io-sign-panel input[type="email"],
html.io-black-mode #io_sign .io-sign-panel input[type="password"],
html.io-black-mode #io_sign .io-sign-panel input[type="tel"],
html.io-black-mode #io_sign .io-sign-panel select,
html.io-black-mode #io_sign .io-sign-panel textarea,
body.io-black-mode #io_sign .io-sign-panel .form-control,
body.io-black-mode #io_sign .io-sign-panel input[type="text"],
body.io-black-mode #io_sign .io-sign-panel input[type="email"],
body.io-black-mode #io_sign .io-sign-panel input[type="password"],
body.io-black-mode #io_sign .io-sign-panel input[type="tel"],
body.io-black-mode #io_sign .io-sign-panel select,
body.io-black-mode #io_sign .io-sign-panel textarea {
  color: #edf4ff !important;
  border-color: rgba(220,237,255,.19) !important;
  background: rgba(7,17,32,.43) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html.io-black-mode #io_sign .io-sign-panel .form-control::placeholder,
html.io-black-mode #io_sign .io-sign-panel input::placeholder,
body.io-black-mode #io_sign .io-sign-panel .form-control::placeholder,
body.io-black-mode #io_sign .io-sign-panel input::placeholder { color: #9eafc7 !important; }
html.io-black-mode #io_sign .io-sign-panel .form-control:focus,
html.io-black-mode #io_sign .io-sign-panel input:focus,
body.io-black-mode #io_sign .io-sign-panel .form-control:focus,
body.io-black-mode #io_sign .io-sign-panel input:focus {
  color: #f4f7ff !important;
  border-color: rgba(255,143,157,.53) !important;
  background: rgba(13,27,47,.78) !important;
  box-shadow: 0 0 0 3px rgba(255,169,151,.12), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
html.io-black-mode #io_sign .io-sign-panel input:-webkit-autofill,
html.io-black-mode #io_sign .io-sign-panel input:-webkit-autofill:hover,
html.io-black-mode #io_sign .io-sign-panel input:-webkit-autofill:focus,
body.io-black-mode #io_sign .io-sign-panel input:-webkit-autofill,
body.io-black-mode #io_sign .io-sign-panel input:-webkit-autofill:hover,
body.io-black-mode #io_sign .io-sign-panel input:-webkit-autofill:focus {
  -webkit-text-fill-color: #edf4ff !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(11,24,42,.94) inset !important;
}
html.io-black-mode #io_sign .sign .io-close,
body.io-black-mode #io_sign .sign .io-close {
  color: #c4d2e5 !important;
  border-color: rgba(220,237,255,.17) !important;
  background: rgba(225,238,255,.10) !important;
}
html.io-black-mode #io_sign .io-sign-panel .btn-token,
body.io-black-mode #io_sign .io-sign-panel .btn-token {
  color: #ffb2bc !important;
  border-color: rgba(255,163,176,.19) !important;
  background: rgba(255,116,136,.10) !important;
}
html.io-black-mode #io_sign .io-sign-social-footer,
body.io-black-mode #io_sign .io-sign-social-footer { border-color: rgba(215,231,252,.13) !important; }
html.io-black-mode #io_sign .social-separator,
body.io-black-mode #io_sign .social-separator { color: #a8b8ce !important; }
html.io-black-mode body.mf-auth-modal-open .modal-backdrop,
body.io-black-mode.mf-auth-modal-open .modal-backdrop,
html.io-black-mode body:has(#io_sign.show) .modal-backdrop {
  background: rgba(2,8,18,.48) !important;
  -webkit-backdrop-filter: blur(7px) saturate(115%) !important;
  backdrop-filter: blur(7px) saturate(115%) !important;
}

@media (max-width: 575.98px) {
  #io_sign { padding: max(10px, env(safe-area-inset-top)) 0 max(10px, env(safe-area-inset-bottom)) !important; }
  #io_sign .modal-dialog,
  #io_sign .modal-dialog.io-sign-dialog-wide {
    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
  }
  #io_sign .sign,
  #io_sign .sign-img + .sign {
    max-width: none !important;
    border-radius: 22px !important;
  }
  #io_sign .io-sign-body {
    max-height: calc(100vh - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
    padding: 24px 20px 21px !important;
  }
  #io_sign .sign-header { margin-bottom: 18px !important; }
  #io_sign .sign-header .h4,
  #io_sign .io-sign-panel > .sign-header.h4 { font-size: 21px !important; }
  #io_sign .io-sign-panel .form-control,
  #io_sign .io-sign-panel input[type="text"],
  #io_sign .io-sign-panel input[type="email"],
  #io_sign .io-sign-panel input[type="password"],
  #io_sign .io-sign-panel input[type="tel"],
  #io_sign .io-sign-panel select,
  #io_sign .io-sign-panel textarea { min-height: 46px !important; font-size: 14px !important; }
  #io_sign .io-sign-panel .btn.vc-theme,
  #io_sign .io-sign-panel button[type="submit"],
  #io_sign .io-sign-panel .submit-btn { min-height: 47px !important; }
}
@media (max-width: 360px) {
  #io_sign .io-sign-body { padding: 21px 16px 18px !important; }
  #io_sign .sign-header .h4,
  #io_sign .io-sign-panel > .sign-header.h4 { font-size: 20px !important; }
  #io_sign .io-sign-panel .verification .form-control { width: calc(100% - 102px) !important; }
  #io_sign .io-sign-panel .verification .btn-token { width: 94px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #io_sign .modal-dialog,
  #io_sign .sign .io-close,
  #io_sign .io-sign-panel .form-control,
  #io_sign .io-sign-panel .btn.vc-theme,
  #io_sign .io-sign-tabs .tab-pane { transition: none !important; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #io_sign .sign { background: rgba(247,250,255,.94) !important; }
  html.io-black-mode #io_sign .sign,
  body.io-black-mode #io_sign .sign { background: rgba(27,40,59,.96) !important; }
}

/* Secondary actions inside the native auth modal use matching quiet glass. */
#io_sign .io-sign-panel .btn-outline,
#io_sign .io-sign-panel .btn-light {
  min-height: 42px !important;
  padding: 9px 15px !important;
  color: #50617a !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 3px 10px rgba(37,55,83,.035) !important;
}
#io_sign .io-sign-panel .btn-outline:hover,
#io_sign .io-sign-panel .btn-light:hover {
  color: #34445c !important;
  background: rgba(255,255,255,.58) !important;
}
html.io-black-mode #io_sign .io-sign-panel .btn-outline,
html.io-black-mode #io_sign .io-sign-panel .btn-light,
body.io-black-mode #io_sign .io-sign-panel .btn-outline,
body.io-black-mode #io_sign .io-sign-panel .btn-light {
  color: #dbe7f7 !important;
  border-color: rgba(220,237,255,.19) !important;
  background: rgba(223,237,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}