/* Auth mobile layout fixes v2026-05-4
   Scope: login, register, and auth_change_password only. */
@media (max-width: 900px) {
  html,
  body.auth-page {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
  }

  body.auth-page {
    display: block !important;
  }

  body.auth-page .auth-brand {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 14px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(180deg, rgba(0,42,112,.97), rgba(0,28,80,.98)),
      radial-gradient(circle at 20% 80%, rgba(249,115,22,.22), transparent 36%) !important;
    color: #ffffff !important;
  }

  body.auth-page .auth-brand .auth-adi-brand,
  body.auth-page .auth-brand .auth-adi-brand span {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #f97316 !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: .12px !important;
    white-space: normal !important;
    text-align: left !important;
  }

  body.auth-page .auth-brand-line {
    display: block !important;
    margin: 10px 0 8px !important;
    padding: 0 !important;
    border-top: 1px solid rgba(255,255,255,.18) !important;
  }

  body.auth-page .auth-brand h1 {
    display: block !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    max-width: none !important;
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }

  body.auth-page .auth-brand p {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    color: #c8d8ff !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
  }

  body.auth-page .auth-main,
  body.auth-register-page .auth-main,
  body.auth-change-password-page .auth-main,
  body.auth-change-password-page .auth-change-main {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 10px 16px !important;
  }

  body.auth-page .auth-card,
  body.auth-register-page .auth-card.auth-card-wide,
  body.auth-change-password-page .auth-change-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 20px 18px 22px !important;
    border-radius: 16px !important;
  }

  body.auth-page .auth-card h2,
  body.auth-register-page .auth-card.auth-card-wide h2,
  body.auth-change-password-page .auth-change-card h2 {
    margin-top: 0 !important;
  }
}

/* v2026-05-5: force auth brand supporting information visible on mobile.
   This intentionally outranks the older mobile rule in app.css that hid h1/p. */
@media (max-width: 900px) {
  html body.auth-page .auth-brand .auth-brand-line {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 10px 0 8px !important;
    padding: 0 !important;
    height: 0 !important;
    border-top: 1px solid rgba(255,255,255,.20) !important;
  }

  html body.auth-page .auth-brand h1,
  html body.auth-register-page .auth-brand h1,
  html body.auth-change-password-page .auth-brand h1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    max-width: none !important;
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    white-space: normal !important;
  }

  html body.auth-page .auth-brand p,
  html body.auth-register-page .auth-brand p,
  html body.auth-change-password-page .auth-brand p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    color: #c8d8ff !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    white-space: normal !important;
  }

  html body.auth-page .auth-main,
  html body.auth-register-page .auth-main,
  html body.auth-change-password-page .auth-main,
  html body.auth-change-password-page .auth-change-main {
    padding-top: 10px !important;
  }
}

/* v2026-05-7: auth mobile brand block cleanup.
   Scope: mobile login/register/auth change-password only.
   Goal: keep the information below "Advanced Domestic Intelligence" visible,
   but lay it out like the desktop auth brand panel instead of cramped text. */
@media (max-width: 900px) {
  html body.auth-page {
    background: #ffffff !important;
  }

  html body.auth-page .auth-brand,
  html body.auth-register-page .auth-brand,
  html body.auth-change-password-page .auth-brand {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px 18px 19px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background:
      linear-gradient(180deg, rgba(0,42,112,.96), rgba(0,28,80,.97)),
      radial-gradient(circle at 30% 75%, rgba(249,115,22,.22), transparent 34%) !important;
    color: #ffffff !important;
  }

  html body.auth-page .auth-brand .auth-adi-brand,
  html body.auth-page .auth-brand .auth-adi-brand span,
  html body.auth-register-page .auth-brand .auth-adi-brand,
  html body.auth-register-page .auth-brand .auth-adi-brand span,
  html body.auth-change-password-page .auth-brand .auth-adi-brand,
  html body.auth-change-password-page .auth-brand .auth-adi-brand span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #f97316 !important;
    font-size: 19px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: .18px !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html body.auth-page .auth-brand-line,
  html body.auth-register-page .auth-brand-line,
  html body.auth-change-password-page .auth-brand-line {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 0 !important;
    margin: 18px 0 15px !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.18) !important;
  }

  html body.auth-page .auth-brand h1,
  html body.auth-register-page .auth-brand h1,
  html body.auth-change-password-page .auth-brand h1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
    font-weight: 800 !important;
    letter-spacing: .02px !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html body.auth-page .auth-brand p,
  html body.auth-register-page .auth-brand p,
  html body.auth-change-password-page .auth-brand p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c8d8ff !important;
    font-size: 13px !important;
    line-height: 1.54 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html body.auth-page .auth-main,
  html body.auth-register-page .auth-main,
  html body.auth-change-password-page .auth-main,
  html body.auth-change-password-page .auth-change-main {
    padding-top: 10px !important;
  }
}

@media (max-width: 360px) {
  html body.auth-page .auth-brand,
  html body.auth-register-page .auth-brand,
  html body.auth-change-password-page .auth-brand {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html body.auth-page .auth-brand .auth-adi-brand,
  html body.auth-page .auth-brand .auth-adi-brand span,
  html body.auth-register-page .auth-brand .auth-adi-brand,
  html body.auth-register-page .auth-brand .auth-adi-brand span,
  html body.auth-change-password-page .auth-brand .auth-adi-brand,
  html body.auth-change-password-page .auth-brand .auth-adi-brand span {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  html body.auth-page .auth-brand h1,
  html body.auth-register-page .auth-brand h1,
  html body.auth-change-password-page .auth-brand h1 {
    font-size: 14px !important;
    line-height: 1.44 !important;
  }

  html body.auth-page .auth-brand p,
  html body.auth-register-page .auth-brand p,
  html body.auth-change-password-page .auth-brand p {
    font-size: 12.5px !important;
    line-height: 1.52 !important;
  }
}


/* v2026-05-25: mobile-only login/reset visual refresh.
   Scope: login.php and auth_reset_password.php only.
   Desktop layout is not changed. */
.auth-mobile-hero-copy,
.auth-mobile-tabs,
.auth-submit-arrow {
  display: none;
}

@media (max-width: 900px) {
  html body.auth-login-page,
  html body.auth-reset-page {
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    background:
      radial-gradient(circle at 12% 10%, rgba(255,255,255,.22), transparent 22%),
      linear-gradient(135deg, #c957d4 0%, #7b6fe8 48%, #39a7df 100%) !important;
  }

  html body.auth-login-page::before,
  html body.auth-reset-page::before {
    content: "";
    position: fixed;
    inset: auto -70px -130px auto;
    width: 260px;
    height: 360px;
    pointer-events: none;
    opacity: .23;
    background:
      linear-gradient(135deg, transparent 18%, rgba(255,255,255,.30) 18% 30%, transparent 30% 44%, rgba(255,255,255,.24) 44% 58%, transparent 58%),
      linear-gradient(45deg, rgba(255,255,255,.14), transparent);
    transform: rotate(8deg);
    z-index: 0;
  }

  html body.auth-login-page .auth-brand,
  html body.auth-reset-page .auth-brand {
    position: relative !important;
    z-index: 1 !important;
    min-height: 315px !important;
    padding: 48px 26px 112px !important;
    display: flex !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 70% 8%, rgba(255,255,255,.28), transparent 14%),
      linear-gradient(135deg, rgba(91,68,244,.78), rgba(122,85,235,.52) 46%, rgba(35,151,227,.50)) !important;
  }

  html body.auth-login-page .auth-brand::before,
  html body.auth-reset-page .auth-brand::before {
    content: "";
    position: absolute;
    top: 16px;
    right: -38px;
    width: 190px;
    height: 150px;
    opacity: .32;
    background:
      linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.32));
    clip-path: polygon(15% 0, 100% 18%, 72% 100%, 0 72%);
    transform: rotate(11deg);
  }

  html body.auth-login-page .auth-brand::after,
  html body.auth-reset-page .auth-brand::after {
    content: "";
    position: absolute;
    left: -48px;
    bottom: -62px;
    width: 220px;
    height: 170px;
    opacity: .20;
    background:
      linear-gradient(135deg, rgba(255,255,255,.65), transparent);
    clip-path: polygon(0 0, 86% 20%, 68% 100%, 12% 82%);
    transform: rotate(-10deg);
  }

  html body.auth-login-page .auth-brand .auth-adi-brand,
  html body.auth-login-page .auth-brand .auth-adi-brand span,
  html body.auth-reset-page .auth-brand .auth-adi-brand,
  html body.auth-reset-page .auth-brand .auth-adi-brand span {
    color: rgba(255,255,255,.82) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    position: relative !important;
    z-index: 2 !important;
  }

  html body.auth-login-page .auth-brand-line,
  html body.auth-login-page .auth-brand h1,
  html body.auth-login-page .auth-brand p,
  html body.auth-reset-page .auth-brand-line,
  html body.auth-reset-page .auth-brand h1,
  html body.auth-reset-page .auth-brand p {
    display: none !important;
  }

  html body.auth-login-page .auth-mobile-hero-copy,
  html body.auth-reset-page .auth-mobile-hero-copy {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    margin-top: 68px !important;
    color: #fff !important;
    text-align: left !important;
  }

  html body.auth-login-page .auth-mobile-eyebrow,
  html body.auth-reset-page .auth-mobile-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    color: rgba(255,255,255,.92) !important;
    background: rgba(255,255,255,.16) !important;
    backdrop-filter: blur(8px);
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .42px !important;
    text-transform: uppercase !important;
  }

  html body.auth-login-page .auth-mobile-title,
  html body.auth-reset-page .auth-mobile-title {
    display: block !important;
    margin-top: 14px !important;
    color: #ffffff !important;
    font-size: clamp(42px, 13vw, 60px) !important;
    line-height: .98 !important;
    font-weight: 900 !important;
    letter-spacing: -2px !important;
    text-shadow: 0 12px 24px rgba(37, 23, 99, .18) !important;
  }

  html body.auth-login-page .auth-mobile-subtitle,
  html body.auth-reset-page .auth-mobile-subtitle {
    display: block !important;
    max-width: 310px !important;
    margin-top: 13px !important;
    color: rgba(255,255,255,.90) !important;
    font-size: 16px !important;
    line-height: 1.38 !important;
    font-weight: 600 !important;
  }

  html body.auth-login-page .auth-main,
  html body.auth-reset-page .auth-main,
  html body.auth-reset-page .auth-change-main {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    min-height: auto !important;
    margin-top: -86px !important;
    padding: 0 18px 34px !important;
  }

  html body.auth-login-page .auth-card,
  html body.auth-reset-page .auth-card,
  html body.auth-reset-page .auth-change-card {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 28px 24px 34px !important;
    border: 0 !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow:
      0 22px 60px rgba(49, 29, 94, .25),
      0 2px 10px rgba(49, 29, 94, .08) !important;
    backdrop-filter: blur(14px) !important;
    overflow: visible !important;
  }

  html body.auth-login-page .auth-mobile-tabs,
  html body.auth-reset-page .auth-mobile-tabs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 38px !important;
    margin: 0 0 28px !important;
    font-size: 21px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }

  html body.auth-login-page .auth-mobile-tab,
  html body.auth-reset-page .auth-mobile-tab {
    position: relative !important;
    color: #a3a3ad !important;
    text-decoration: none !important;
  }

  html body.auth-login-page .auth-mobile-tab.active,
  html body.auth-reset-page .auth-mobile-tab.active {
    color: #6d54e8 !important;
  }

  html body.auth-login-page .auth-mobile-tab.active::after,
  html body.auth-reset-page .auth-mobile-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 52px;
    height: 3px;
    border-radius: 999px;
    background: #6d54e8;
    transform: translateX(-50%);
  }

  html body.auth-login-page .auth-card h2,
  html body.auth-login-page .auth-card > .muted,
  html body.auth-reset-page .auth-card-icon {
    display: none !important;
  }

  html body.auth-reset-page .auth-card h2 {
    display: block !important;
    margin: 0 0 7px !important;
    color: #24243d !important;
    text-align: center !important;
    font-size: 21px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
  }

  html body.auth-reset-page .auth-card > .muted {
    display: block !important;
    margin: 0 auto 22px !important;
    max-width: 320px !important;
    text-align: center !important;
    color: #77778a !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  html body.auth-login-page .auth-card label:not(.check),
  html body.auth-reset-page .auth-card label:not(.check) {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 0 17px !important;
    padding: 0 !important;
    border: 1px solid #dddde8 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: 0 6px 16px rgba(42, 35, 79, .045) !important;
    overflow: hidden !important;
  }

  html body.auth-login-page .auth-card label:not(.check)::before,
  html body.auth-reset-page .auth-card label:not(.check)::before {
    content: "✉" !important;
    flex: 0 0 54px !important;
    width: 54px !important;
    text-align: center !important;
    color: #b6b6c4 !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  html body.auth-login-page .auth-card label:nth-of-type(2)::before {
    content: "▣" !important;
    font-size: 18px !important;
  }

  html body.auth-login-page .auth-card label:not(.check) input,
  html body.auth-reset-page .auth-card label:not(.check) input {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 18px 0 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #28283a !important;
    font-size: 16px !important;
    line-height: 56px !important;
    font-weight: 700 !important;
  }

  html body.auth-login-page .auth-card input::placeholder,
  html body.auth-reset-page .auth-card input::placeholder {
    color: #b5b5c2 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
  }

  html body.auth-login-page .alert,
  html body.auth-reset-page .alert {
    margin: 0 0 16px !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  html body.auth-login-page .auth-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 2px 0 26px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  html body.auth-login-page .auth-row .check {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    color: #8a8a99 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  html body.auth-login-page .auth-row .check input {
    width: 16px !important;
    height: 16px !important;
    accent-color: #6d54e8 !important;
  }

  html body.auth-login-page .auth-row a,
  html body.auth-reset-page .auth-switch a {
    color: #6d54e8 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  html body.auth-login-page .auth-mobile-submit {
    position: relative !important;
    left: 50% !important;
    width: 70px !important;
    min-width: 70px !important;
    height: 70px !important;
    min-height: 70px !important;
    margin: 0 0 -68px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #1266f1 !important;
    color: #fff !important;
    box-shadow:
      0 0 0 14px rgba(255,255,255,.96),
      0 13px 25px rgba(18,102,241,.35) !important;
    border: 0 !important;
  }

  html body.auth-login-page .auth-submit-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  html body.auth-login-page .auth-submit-arrow {
    display: inline-block !important;
    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  html body.auth-login-page .auth-switch {
    margin: 86px 0 0 !important;
    color: rgba(255,255,255,.86) !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html body.auth-login-page .auth-switch a {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 900 !important;
  }

  html body.auth-reset-page .auth-reset-form .otp-inline-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: -5px !important;
  }

  html body.auth-reset-page .auth-reset-form .otp-inline-row input {
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 999px !important;
    border: 1px solid #dddde8 !important;
    padding: 0 18px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  html body.auth-reset-page .auth-change-card .auth-reset-form .otp-request-btn {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 999px !important;
    background: #6d54e8 !important;
    box-shadow: 0 10px 20px rgba(109,84,232,.22) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body.auth-reset-page .auth-reset-form .otp-note {
    margin: 13px 0 18px !important;
    color: #898999 !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  html body.auth-reset-page .auth-reset-submit {
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 999px !important;
    background: #1266f1 !important;
    box-shadow: 0 12px 22px rgba(18,102,241,.28) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  html body.auth-reset-page .auth-reset-submit .auth-submit-arrow {
    display: inline-block !important;
    margin-left: 8px !important;
    font-size: 18px !important;
  }

  html body.auth-reset-page .auth-switch {
    margin: 18px 0 0 !important;
    text-align: center !important;
  }
}

@media (max-width: 380px) {
  html body.auth-login-page .auth-main,
  html body.auth-reset-page .auth-main,
  html body.auth-reset-page .auth-change-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body.auth-login-page .auth-card,
  html body.auth-reset-page .auth-card,
  html body.auth-reset-page .auth-change-card {
    padding-left: 18px !important;
    padding-right: 18px !important;
    border-radius: 26px !important;
  }

  html body.auth-login-page .auth-mobile-tabs,
  html body.auth-reset-page .auth-mobile-tabs {
    gap: 28px !important;
    font-size: 19px !important;
  }

  html body.auth-login-page .auth-row {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
}


@media (max-width: 900px) {
  html body.auth-reset-page .auth-card label.auth-otp-label {
    display: block !important;
    min-height: 0 !important;
    margin: 2px 0 8px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #7b7b8e !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
    overflow: visible !important;
  }

  html body.auth-reset-page .auth-card label.auth-otp-label::before {
    content: none !important;
    display: none !important;
  }
}


/* v2026-05-25-b: refined mobile login/reset design with balanced inputs and orange tone. */
@media (max-width: 900px) {
  html body.auth-login-page,
  html body.auth-reset-page {
    background:
      radial-gradient(circle at 14% 10%, rgba(255,255,255,.22), transparent 18%),
      linear-gradient(135deg, #ff8a3d 0%, #f45b69 18%, #8b5cf6 56%, #38bdf8 100%) !important;
  }

  html body.auth-login-page .auth-brand,
  html body.auth-reset-page .auth-brand {
    min-height: 280px !important;
    padding: 28px 24px 118px !important;
    background:
      radial-gradient(circle at 76% 16%, rgba(255,255,255,.20), transparent 16%),
      linear-gradient(135deg, rgba(255,153,64,.34), rgba(109,84,232,.22) 42%, rgba(56,189,248,.12) 100%) !important;
  }

  html body.auth-login-page .auth-brand .auth-adi-brand,
  html body.auth-login-page .auth-brand .auth-adi-brand span,
  html body.auth-reset-page .auth-brand .auth-adi-brand,
  html body.auth-reset-page .auth-brand .auth-adi-brand span {
    color: rgba(255,255,255,.88) !important;
    font-size: 12px !important;
    letter-spacing: .75px !important;
  }

  html body.auth-login-page .auth-mobile-hero-copy,
  html body.auth-reset-page .auth-mobile-hero-copy {
    margin-top: 36px !important;
    max-width: 320px !important;
  }

  html body.auth-login-page .auth-mobile-eyebrow,
  html body.auth-reset-page .auth-mobile-eyebrow {
    background: rgba(255,255,255,.18) !important;
    color: #fff4e9 !important;
  }

  html body.auth-login-page .auth-mobile-title,
  html body.auth-reset-page .auth-mobile-title {
    margin-top: 10px !important;
    font-size: clamp(30px, 9.4vw, 44px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.7px !important;
  }

  html body.auth-login-page .auth-mobile-subtitle,
  html body.auth-reset-page .auth-mobile-subtitle {
    max-width: 290px !important;
    margin-top: 10px !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
  }

  html body.auth-login-page .auth-main,
  html body.auth-reset-page .auth-main,
  html body.auth-reset-page .auth-change-main {
    margin-top: -96px !important;
    padding: 0 16px 28px !important;
  }

  html body.auth-login-page .auth-card,
  html body.auth-reset-page .auth-card,
  html body.auth-reset-page .auth-change-card {
    max-width: 380px !important;
    padding: 30px 22px 26px !important;
    border-radius: 34px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow:
      0 24px 60px rgba(52, 31, 102, .20),
      0 2px 10px rgba(52, 31, 102, .06) !important;
  }

  html body.auth-login-page .auth-mobile-tabs,
  html body.auth-reset-page .auth-mobile-tabs {
    gap: 40px !important;
    margin: 0 0 26px !important;
    font-size: 19px !important;
  }

  html body.auth-login-page .auth-mobile-tab,
  html body.auth-reset-page .auth-mobile-tab {
    color: #9b9ba8 !important;
  }

  html body.auth-login-page .auth-mobile-tab.active,
  html body.auth-reset-page .auth-mobile-tab.active {
    color: #5f4ce7 !important;
  }

  html body.auth-login-page .auth-mobile-tab.active::after,
  html body.auth-reset-page .auth-mobile-tab.active::after {
    width: 84px !important;
    height: 4px !important;
    bottom: -11px !important;
    background: linear-gradient(90deg, #ff9e43, #6d54e8) !important;
  }

  html body.auth-login-page .auth-card label:not(.check),
  html body.auth-reset-page .auth-card label:not(.check) {
    min-height: 72px !important;
    margin: 0 0 16px !important;
    border: 1.5px solid #e5e7ef !important;
    border-radius: 36px !important;
    box-shadow: none !important;
    background: #ffffff !important;
  }

  html body.auth-login-page .auth-card label:not(.check)::before,
  html body.auth-reset-page .auth-card label:not(.check)::before {
    content: "" !important;
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 20px !important;
    margin-left: 14px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    opacity: .9 !important;
  }

  html body.auth-login-page .auth-card label:first-of-type::before,
  html body.auth-reset-page .auth-card label:first-of-type::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v12H4z'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") !important;
  }

  html body.auth-login-page .auth-card label:nth-of-type(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 1 1 8 0v3'/%3E%3C/svg%3E") !important;
  }

  html body.auth-reset-page .auth-card label:nth-of-type(2)::before,
  html body.auth-reset-page .auth-card label:nth-of-type(3)::before,
  html body.auth-reset-page .auth-card label:nth-of-type(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236d54e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m8 11 4 4 4-4'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") !important;
  }

  html body.auth-reset-page .auth-card label:nth-of-type(5)::before,
  html body.auth-reset-page .auth-card label:nth-of-type(6)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 1 1 8 0v3'/%3E%3C/svg%3E") !important;
  }

  html body.auth-login-page .auth-card label:not(.check) input,
  html body.auth-reset-page .auth-card label:not(.check) input {
    height: 70px !important;
    min-height: 70px !important;
    padding: 0 24px 0 4px !important;
    color: #22243a !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
  }

  html body.auth-login-page .auth-card input::placeholder,
  html body.auth-reset-page .auth-card input::placeholder {
    color: #b0b2bf !important;
    font-weight: 600 !important;
  }

  html body.auth-login-page .auth-row {
    align-items: center !important;
    margin: 4px 2px 22px !important;
    font-size: 14px !important;
  }

  html body.auth-login-page .auth-row .check {
    gap: 10px !important;
    color: #8c8e9b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  html body.auth-login-page .auth-row .check input {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
    accent-color: #f59e0b !important;
  }

  html body.auth-login-page .auth-row a,
  html body.auth-reset-page .auth-switch a {
    color: #5f4ce7 !important;
    font-weight: 800 !important;
  }

  html body.auth-login-page .auth-mobile-submit {
    width: 82px !important;
    min-width: 82px !important;
    height: 82px !important;
    min-height: 82px !important;
    margin: 4px 0 -54px !important;
    background: linear-gradient(135deg, #ff9e43 0%, #f97316 12%, #3b82f6 100%) !important;
    box-shadow:
      0 0 0 12px rgba(255,255,255,.97),
      0 16px 30px rgba(59,130,246,.24) !important;
  }

  html body.auth-login-page .auth-submit-arrow {
    font-size: 36px !important;
  }

  html body.auth-login-page .auth-switch {
    margin: 72px 0 0 !important;
    color: #9a9cab !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html body.auth-login-page .auth-switch a {
    color: #f97316 !important;
    text-decoration: none !important;
  }

  html body.auth-reset-page .auth-card h2 {
    color: #2a2b44 !important;
  }

  html body.auth-reset-page .auth-card > .muted {
    color: #808297 !important;
  }

  html body.auth-reset-page .auth-change-card .auth-reset-form .otp-request-btn,
  html body.auth-reset-page .auth-reset-submit {
    background: linear-gradient(135deg, #ff9e43 0%, #6d54e8 100%) !important;
    border: 0 !important;
  }
}

@media (max-width: 480px) {
  html body.auth-login-page .auth-card,
  html body.auth-reset-page .auth-card,
  html body.auth-reset-page .auth-change-card {
    padding: 26px 20px 24px !important;
  }

  html body.auth-login-page .auth-card label:not(.check),
  html body.auth-reset-page .auth-card label:not(.check) {
    min-height: 68px !important;
  }

  html body.auth-login-page .auth-card label:not(.check) input,
  html body.auth-reset-page .auth-card label:not(.check) input {
    height: 66px !important;
    min-height: 66px !important;
  }
}


/* v2026-05-25-c: compact mobile login inputs.
   Reduce username/password input height so the card looks closer to the reference image. */
@media (max-width: 900px) {
  html body.auth-login-page .auth-card label:not(.check),
  html body.auth-reset-page .auth-card label:not(.check) {
    min-height: 56px !important;
    height: 56px !important;
    margin-bottom: 14px !important;
    border-radius: 28px !important;
  }

  html body.auth-login-page .auth-card label:not(.check)::before,
  html body.auth-reset-page .auth-card label:not(.check)::before {
    flex-basis: 46px !important;
    width: 46px !important;
    height: 18px !important;
    margin-left: 10px !important;
    background-size: 18px 18px !important;
  }

  html body.auth-login-page .auth-card label:not(.check) input,
  html body.auth-reset-page .auth-card label:not(.check) input {
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 18px 0 2px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  html body.auth-login-page .auth-card,
  html body.auth-reset-page .auth-card,
  html body.auth-reset-page .auth-change-card {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
  }

  html body.auth-login-page .auth-mobile-tabs,
  html body.auth-reset-page .auth-mobile-tabs {
    margin-bottom: 24px !important;
  }

  html body.auth-login-page .auth-row {
    margin-top: 2px !important;
    margin-bottom: 20px !important;
  }
}

@media (max-width: 480px) {
  html body.auth-login-page .auth-card label:not(.check),
  html body.auth-reset-page .auth-card label:not(.check) {
    min-height: 54px !important;
    height: 54px !important;
    border-radius: 27px !important;
  }

  html body.auth-login-page .auth-card label:not(.check) input,
  html body.auth-reset-page .auth-card label:not(.check) input {
    height: 52px !important;
    min-height: 52px !important;
  }
}


/* v2026-05-25-d: reset password mobile form alignment.
   This cancels the login-page pill input styling on the reset form so it follows
   the same field order as the web version: label, input, OTP row, note, submit. */
@media (max-width: 900px) {
  html body.auth-reset-page .auth-reset-card {
    padding: 26px 22px 26px !important;
  }

  html body.auth-reset-page .auth-card h2 {
    margin-bottom: 8px !important;
    font-size: 21px !important;
  }

  html body.auth-reset-page .auth-card > .muted {
    margin-bottom: 20px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  html body.auth-reset-page .auth-reset-form label:not(.auth-otp-label) {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #656776 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    overflow: visible !important;
  }

  html body.auth-reset-page .auth-reset-form label:not(.auth-otp-label)::before {
    content: none !important;
    display: none !important;
  }

  html body.auth-reset-page .auth-reset-form label:not(.auth-otp-label) input,
  html body.auth-reset-page .auth-reset-form .otp-inline-row input {
    display: block !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 7px 0 0 !important;
    padding: 0 15px !important;
    border: 1px solid #dde1ea !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #202338 !important;
    font-size: 14px !important;
    line-height: 46px !important;
    font-weight: 700 !important;
  }

  html body.auth-reset-page .auth-reset-form .otp-inline-row input {
    margin: 0 !important;
  }

  html body.auth-reset-page .auth-reset-form label.auth-otp-label {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 2px 0 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #656776 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    overflow: visible !important;
  }

  html body.auth-reset-page .auth-reset-form label.auth-otp-label::before {
    content: none !important;
    display: none !important;
  }

  html body.auth-reset-page .auth-reset-form .otp-inline-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 128px !important;
    gap: 8px !important;
    align-items: end !important;
    margin: 0 0 12px !important;
  }

  html body.auth-reset-page .auth-change-card .auth-reset-form .otp-request-btn {
    height: 46px !important;
    min-height: 46px !important;
    width: 100% !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
  }

  html body.auth-reset-page .auth-reset-form .otp-note {
    margin: 10px 0 18px !important;
    color: #858897 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  html body.auth-reset-page .auth-reset-submit {
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    border-radius: 16px !important;
  }

  html body.auth-reset-page .auth-switch {
    margin-top: 16px !important;
  }
}

@media (max-width: 370px) {
  html body.auth-reset-page .auth-reset-form .otp-inline-row {
    grid-template-columns: 1fr !important;
  }
}


/* v2026-05-25-e: mobile register/signup page aligned with login/reset design. */
@media (max-width: 900px) {
  html body.auth-register-page {
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    background:
      radial-gradient(circle at 14% 10%, rgba(255,255,255,.22), transparent 18%),
      linear-gradient(135deg, #ff8a3d 0%, #f45b69 18%, #8b5cf6 56%, #38bdf8 100%) !important;
  }

  html body.auth-register-page::before {
    content: "";
    position: fixed;
    inset: auto -70px -130px auto;
    width: 260px;
    height: 360px;
    pointer-events: none;
    opacity: .20;
    background:
      linear-gradient(135deg, transparent 18%, rgba(255,255,255,.30) 18% 30%, transparent 30% 44%, rgba(255,255,255,.24) 44% 58%, transparent 58%),
      linear-gradient(45deg, rgba(255,255,255,.14), transparent);
    transform: rotate(8deg);
    z-index: 0;
  }

  html body.auth-register-page .auth-brand {
    position: relative !important;
    z-index: 1 !important;
    min-height: 270px !important;
    padding: 28px 24px 112px !important;
    display: flex !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 76% 16%, rgba(255,255,255,.20), transparent 16%),
      linear-gradient(135deg, rgba(255,153,64,.34), rgba(109,84,232,.22) 42%, rgba(56,189,248,.12) 100%) !important;
  }

  html body.auth-register-page .auth-brand::before {
    content: "";
    position: absolute;
    top: 16px;
    right: -38px;
    width: 190px;
    height: 150px;
    opacity: .28;
    background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.32));
    clip-path: polygon(15% 0, 100% 18%, 72% 100%, 0 72%);
    transform: rotate(11deg);
  }

  html body.auth-register-page .auth-brand::after {
    content: "";
    position: absolute;
    left: -48px;
    bottom: -62px;
    width: 220px;
    height: 170px;
    opacity: .18;
    background: linear-gradient(135deg, rgba(255,255,255,.65), transparent);
    clip-path: polygon(0 0, 86% 20%, 68% 100%, 12% 82%);
    transform: rotate(-10deg);
  }

  html body.auth-register-page .auth-brand .auth-adi-brand,
  html body.auth-register-page .auth-brand .auth-adi-brand span {
    color: rgba(255,255,255,.88) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: .75px !important;
    text-transform: uppercase !important;
    position: relative !important;
    z-index: 2 !important;
  }

  html body.auth-register-page .auth-brand-line,
  html body.auth-register-page .auth-brand h1,
  html body.auth-register-page .auth-brand p {
    display: none !important;
  }

  html body.auth-register-page .auth-mobile-hero-copy {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    margin-top: 36px !important;
    max-width: 320px !important;
    color: #ffffff !important;
    text-align: left !important;
  }

  html body.auth-register-page .auth-mobile-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    color: #fff4e9 !important;
    background: rgba(255,255,255,.18) !important;
    backdrop-filter: blur(8px);
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .42px !important;
    text-transform: uppercase !important;
  }

  html body.auth-register-page .auth-mobile-title {
    display: block !important;
    margin-top: 10px !important;
    color: #ffffff !important;
    font-size: clamp(30px, 9.4vw, 44px) !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    letter-spacing: -.7px !important;
    text-shadow: 0 12px 24px rgba(37, 23, 99, .18) !important;
  }

  html body.auth-register-page .auth-mobile-subtitle {
    display: block !important;
    max-width: 300px !important;
    margin-top: 10px !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
  }

  html body.auth-register-page .auth-main {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    min-height: auto !important;
    margin-top: -92px !important;
    padding: 0 16px 28px !important;
  }

  html body.auth-register-page .auth-card,
  html body.auth-register-page .auth-card.auth-card-wide {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    padding: 26px 20px 24px !important;
    border: 0 !important;
    border-radius: 34px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow:
      0 24px 60px rgba(52, 31, 102, .20),
      0 2px 10px rgba(52, 31, 102, .06) !important;
    backdrop-filter: blur(14px) !important;
    overflow: visible !important;
  }

  html body.auth-register-page .auth-mobile-tabs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px !important;
    margin: 0 0 24px !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }

  html body.auth-register-page .auth-mobile-tab {
    position: relative !important;
    color: #9b9ba8 !important;
    text-decoration: none !important;
  }

  html body.auth-register-page .auth-mobile-tab.active {
    color: #5f4ce7 !important;
  }

  html body.auth-register-page .auth-mobile-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 84px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff9e43, #6d54e8);
    transform: translateX(-50%);
  }

  html body.auth-register-page .auth-card h2,
  html body.auth-register-page .auth-card > .muted {
    display: none !important;
  }

  html body.auth-register-page .register-grid,
  html body.auth-register-page .auth-form-grid,
  html body.auth-register-page .adi-form-grid {
    display: block !important;
  }

  html body.auth-register-page .auth-card label:not(.check) {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #656776 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    overflow: visible !important;
  }

  html body.auth-register-page .auth-card label:not(.check)::before {
    content: none !important;
    display: none !important;
  }

  html body.auth-register-page .auth-card input,
  html body.auth-register-page .auth-card select,
  html body.auth-register-page .auth-card textarea {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 7px 0 0 !important;
    padding: 0 15px !important;
    border: 1px solid #dde1ea !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #202338 !important;
    font-size: 14px !important;
    line-height: 46px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
  }

  html body.auth-register-page .auth-card textarea {
    height: 86px !important;
    min-height: 86px !important;
    padding-top: 12px !important;
    line-height: 1.35 !important;
    resize: vertical !important;
  }

  html body.auth-register-page .auth-card select {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
  }

  html body.auth-register-page .auth-card input::placeholder,
  html body.auth-register-page .auth-card textarea::placeholder {
    color: #a8adba !important;
    font-weight: 600 !important;
  }

  html body.auth-register-page .alert {
    margin: 0 0 16px !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  html body.auth-register-page .auth-card .btn,
  html body.auth-register-page .auth-card button[type="submit"],
  html body.auth-register-page .auth-card .btn-primary {
    width: 100% !important;
    min-height: 50px !important;
    height: 50px !important;
    margin-top: 10px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ff9e43 0%, #6d54e8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 32px rgba(109,84,232,.22) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  html body.auth-register-page .auth-switch {
    margin: 16px 0 0 !important;
    text-align: center !important;
    color: #8f92a1 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  html body.auth-register-page .auth-switch a {
    color: #f97316 !important;
    text-decoration: none !important;
    font-weight: 900 !important;
  }
}

@media (max-width: 370px) {
  html body.auth-register-page .auth-card,
  html body.auth-register-page .auth-card.auth-card-wide {
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-radius: 28px !important;
  }

  html body.auth-register-page .auth-mobile-tabs {
    gap: 28px !important;
    font-size: 18px !important;
  }
}


/* v2026-05-25-h: preserve signup UI + prevent mobile browser phone autofill. */
@media (max-width: 900px) {
  html body.auth-register-page .register-phone-hint {
    display: block !important;
    margin: -4px 0 14px !important;
    color: #8a8d9c !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
    font-weight: 500 !important;
  }

  html body.auth-register-page input[name="phone_display"]:-webkit-autofill,
  html body.auth-register-page input[name="phone_display"]:-webkit-autofill:hover,
  html body.auth-register-page input[name="phone_display"]:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #202338 !important;
  }
}


/* v2026-05-26: ADI auth pages brand-text removal + blue/orange standard colors.
   Important: this keeps the original login/register/reset structure intact.
   It only removes the requested visible brand text and updates colors. */
:root {
  --adi-auth-blue: #063f8f;
  --adi-auth-blue-2: #0b7ee8;
  --adi-auth-blue-deep: #022f71;
  --adi-auth-orange: #ff8a18;
  --adi-auth-ink: #101a3d;
  --adi-auth-muted: #64748b;
  --adi-auth-border: #dbe5f2;
}

body.auth-login-page,
body.auth-register-page,
body.auth-reset-page {
  background:
    radial-gradient(circle at 86% 8%, rgba(255, 138, 24, 0.14), transparent 30%),
    linear-gradient(135deg, #f4f9ff 0%, #eaf4ff 48%, #ffffff 100%) !important;
}

body.auth-login-page .auth-brand,
body.auth-register-page .auth-brand,
body.auth-reset-page .auth-brand {
  background:
    radial-gradient(circle at 18% 82%, rgba(255, 138, 24, 0.26), transparent 34%),
    linear-gradient(180deg, #063f8f 0%, #022f71 100%) !important;
  color: #ffffff !important;
}

/* Remove only the requested visible brand names, without removing layout blocks. */
body.auth-login-page .auth-adi-brand,
body.auth-login-page .auth-adi-brand span,
body.auth-register-page .auth-adi-brand,
body.auth-register-page .auth-adi-brand span,
body.auth-reset-page .auth-adi-brand,
body.auth-reset-page .auth-adi-brand span {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Login/register previously showed "Domestic Freight" here. Hide that pill only on those pages. */
body.auth-login-page .auth-mobile-eyebrow,
body.auth-register-page .auth-mobile-eyebrow {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.auth-login-page .auth-mobile-title,
body.auth-register-page .auth-mobile-title {
  margin-top: 0 !important;
}

body.auth-login-page .auth-brand h1,
body.auth-register-page .auth-brand h1,
body.auth-reset-page .auth-brand h1 {
  color: #ffffff !important;
}

body.auth-login-page .auth-brand p,
body.auth-register-page .auth-brand p,
body.auth-reset-page .auth-brand p {
  color: rgba(232, 241, 255, 0.88) !important;
}

body.auth-login-page .auth-card,
body.auth-register-page .auth-card,
body.auth-reset-page .auth-card,
body.auth-reset-page .auth-change-card {
  border-color: rgba(11, 126, 232, 0.12) !important;
  box-shadow: 0 24px 64px rgba(2, 47, 113, 0.18) !important;
}

body.auth-login-page .auth-card h2,
body.auth-register-page .auth-card h2,
body.auth-reset-page .auth-card h2 {
  color: var(--adi-auth-ink) !important;
}

body.auth-login-page .muted,
body.auth-register-page .muted,
body.auth-reset-page .muted {
  color: var(--adi-auth-muted) !important;
}

body.auth-login-page a,
body.auth-register-page a,
body.auth-reset-page a {
  color: var(--adi-auth-orange) !important;
}

body.auth-login-page .btn-primary,
body.auth-register-page .btn-primary,
body.auth-reset-page .btn-primary {
  background: linear-gradient(135deg, #168fff 0%, #0b7ee8 56%, #063f8f 100%) !important;
  border-color: #0b7ee8 !important;
  color: #ffffff !important;
}

body.auth-login-page .auth-card input:focus,
body.auth-login-page .auth-card select:focus,
body.auth-register-page .auth-card input:focus,
body.auth-register-page .auth-card select:focus,
body.auth-reset-page .auth-card input:focus,
body.auth-reset-page .auth-card select:focus {
  border-color: var(--adi-auth-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 138, 24, 0.16) !important;
}

@media (max-width: 900px) {
  html body.auth-login-page,
  html body.auth-register-page,
  html body.auth-reset-page {
    background:
      radial-gradient(circle at 84% 8%, rgba(255, 138, 24, .20), transparent 26%),
      linear-gradient(135deg, #063f8f 0%, #0b7ee8 58%, #022f71 100%) !important;
  }

  html body.auth-login-page .auth-brand,
  html body.auth-reset-page .auth-brand,
  html body.auth-register-page .auth-brand {
    background:
      radial-gradient(circle at 76% 16%, rgba(255,255,255,.18), transparent 16%),
      radial-gradient(circle at 12% 86%, rgba(255, 138, 24, .25), transparent 28%),
      linear-gradient(135deg, rgba(6,63,143,.74), rgba(11,126,232,.34) 54%, rgba(2,47,113,.66) 100%) !important;
  }

  html body.auth-login-page .auth-mobile-title,
  html body.auth-reset-page .auth-mobile-title,
  html body.auth-register-page .auth-mobile-title {
    color: #ffffff !important;
    text-shadow: 0 14px 28px rgba(2, 47, 113, .22) !important;
  }

  html body.auth-login-page .auth-mobile-subtitle,
  html body.auth-reset-page .auth-mobile-subtitle,
  html body.auth-register-page .auth-mobile-subtitle {
    color: rgba(255,255,255,.92) !important;
  }

  html body.auth-reset-page .auth-mobile-eyebrow {
    background: rgba(255,255,255,.16) !important;
    color: #fff4e9 !important;
  }

  html body.auth-login-page .auth-mobile-tab.active,
  html body.auth-reset-page .auth-mobile-tab.active,
  html body.auth-register-page .auth-mobile-tab.active {
    color: var(--adi-auth-blue) !important;
  }

  html body.auth-login-page .auth-mobile-tab.active::after,
  html body.auth-reset-page .auth-mobile-tab.active::after,
  html body.auth-register-page .auth-mobile-tab.active::after {
    background: linear-gradient(90deg, var(--adi-auth-orange), var(--adi-auth-blue-2)) !important;
  }

  html body.auth-login-page .auth-card label:first-of-type::before,
  html body.auth-reset-page .auth-card label:first-of-type::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ff8a18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v12H4z'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") !important;
  }

  html body.auth-login-page .auth-card label:nth-of-type(2)::before,
  html body.auth-reset-page .auth-card label:nth-of-type(5)::before,
  html body.auth-reset-page .auth-card label:nth-of-type(6)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ff8a18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 1 1 8 0v3'/%3E%3C/svg%3E") !important;
  }

  html body.auth-login-page .auth-mobile-submit,
  html body.auth-reset-page .auth-change-card .auth-reset-form .otp-request-btn,
  html body.auth-reset-page .auth-reset-submit,
  html body.auth-register-page .auth-card .btn,
  html body.auth-register-page .auth-card button[type="submit"],
  html body.auth-register-page .auth-card .btn-primary {
    background: linear-gradient(135deg, var(--adi-auth-orange) 0%, var(--adi-auth-blue-2) 56%, var(--adi-auth-blue) 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
  }

  html body.auth-login-page .auth-row .check input {
    accent-color: var(--adi-auth-orange) !important;
  }

  html body.auth-login-page .auth-row a,
  html body.auth-reset-page .auth-switch a,
  html body.auth-register-page .auth-switch a {
    color: var(--adi-auth-orange) !important;
  }
}