.hl-lottie-slot{position:relative;display:block;min-width:1px;min-height:1px}
.hl-lottie-slot svg{display:block;width:100%!important;height:100%!important}
.hl-lottie-slot.is-missing{opacity:.18}
.hl-lottie-slot.hl-lottie-reduced:after{content:"";position:absolute;inset:35%;border-radius:999px;border:2px solid currentColor;opacity:.25}

.hl-auth-visual-wrap{display:flex;justify-content:center;align-items:center;margin:4px auto 20px}
.hl-auth-visual{width:min(250px,80%);height:190px;filter:drop-shadow(0 18px 35px rgba(0,0,0,.22))}
.admin-auth-sidebar .hl-auth-visual{width:230px;height:210px;margin:8px auto 18px}
.hl-auth-mobile-animation{display:none}
@media(max-width:760px){
  .hl-auth-mobile-animation{display:flex;margin:0 auto 8px}
  .hl-auth-mobile-animation .hl-auth-visual{width:150px;height:108px}
}

.hl-auth-page-animation{display:flex;justify-content:center;align-items:center;margin:-6px auto 10px}
.hl-auth-page-animation .hl-lottie-slot{width:150px;height:130px}
.verify-container .hl-auth-page-animation .hl-lottie-slot{width:138px;height:118px}
.reset-container .hl-auth-page-animation .hl-lottie-slot{width:145px;height:125px}

.hl-inline-animation{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}
.hl-inline-animation .hl-lottie-slot{width:62px;height:62px;flex:0 0 62px}
.hl-inline-animation.is-compact .hl-lottie-slot{width:42px;height:42px;flex-basis:42px}

.hl-page-lottie-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;min-height:210px;padding:24px}
.hl-page-lottie-state .hl-lottie-slot{width:170px;height:150px}

.hl-animation-flash{position:fixed;inset:0;z-index:1000000;display:grid;place-items:center;padding:20px;pointer-events:none;background:rgba(3,7,18,0);opacity:0;transition:opacity .2s ease,background .2s ease}
.hl-animation-flash.is-visible{opacity:1;background:rgba(3,7,18,.35)}
.hl-animation-flash-card{width:min(330px,92vw);padding:20px 22px 18px;border-radius:26px;background:rgba(12,17,28,.94);border:1px solid rgba(255,255,255,.13);box-shadow:0 30px 90px rgba(0,0,0,.38);backdrop-filter:blur(16px);transform:translateY(10px) scale(.98);transition:transform .2s ease;color:#fff;text-align:center}
.hl-animation-flash.is-visible .hl-animation-flash-card{transform:translateY(0) scale(1)}
.hl-animation-flash-player{width:150px;height:120px;margin:0 auto}
.hl-animation-flash-text{font:700 15px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin-top:4px;color:#f8fafc}
.hl-animation-flash.is-error .hl-animation-flash-card{border-color:rgba(248,113,113,.26)}
.hl-animation-flash.is-success .hl-animation-flash-card{border-color:rgba(74,222,128,.24)}

.hl-order-state-animation{display:flex;align-items:center;gap:10px;margin:10px 0 0}
.hl-order-state-animation .hl-lottie-slot{width:58px;height:58px;flex:0 0 58px}

.hl-chat-empty-lottie{width:100px;height:88px;margin:0 auto 4px}
.hl-discount-empty .hl-lottie-slot{width:170px;height:140px;margin:0 auto}
.hl-checkout-manager-animation{width:120px;height:95px;margin:0 auto -4px}

@media(max-width:560px){
  .hl-auth-page-animation .hl-lottie-slot{width:125px;height:105px}
  .hl-animation-flash-player{width:125px;height:100px}
  .hl-page-lottie-state .hl-lottie-slot{width:145px;height:125px}
}
@media(prefers-reduced-motion:reduce){
  .hl-animation-flash,.hl-animation-flash-card{transition:none!important}
}

.hl-review-empty .hl-review-empty-lottie{width:120px;height:100px;margin:0 auto 6px}
.hl-notifications-empty.hl-page-lottie-state{min-height:190px;padding:18px 12px}
.hl-notifications-empty.hl-page-lottie-state .hl-lottie-slot{width:125px;height:105px}

.hl-payment-animation{display:flex;justify-content:center;margin:-4px auto 4px}.hl-payment-animation .hl-lottie-slot{width:120px;height:88px}.hl-checkout-address-animation{width:105px;height:82px;margin:0 auto 4px}


/* =========================================================
   HealthyLife Lottie placement fix v2
   Context-specific positioning so animations never float over forms.
   ========================================================= */

/* General: animation artwork must stay inside its own box. */
.hl-lottie-slot{overflow:hidden;isolation:isolate;flex-shrink:0}
.hl-lottie-slot>svg{pointer-events:none;overflow:visible}

/* LOGIN / REGISTER — desktop artwork belongs to the left visual rail only. */
.admin-auth-sidebar .hl-auth-visual-wrap{
  width:100%;
  min-height:138px;
  margin:10px auto 14px!important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.admin-auth-sidebar .hl-auth-visual{
  width:168px!important;
  height:138px!important;
  margin:0 auto!important;
}
.admin-auth-content .hl-auth-mobile-animation{display:none!important}

/* Forgot / Verify / Reset — compact visual badge at the top-right on desktop. */
.forgot-container,.verify-container,.reset-container{position:relative!important}
.forgot-container .hl-auth-page-animation,
.verify-container .hl-auth-page-animation,
.reset-container .hl-auth-page-animation{
  position:absolute!important;
  top:22px!important;
  right:24px!important;
  width:92px!important;
  height:82px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:3!important;
  pointer-events:none!important;
}
.forgot-container .hl-auth-page-animation .hl-lottie-slot,
.verify-container .hl-auth-page-animation .hl-lottie-slot,
.reset-container .hl-auth-page-animation .hl-lottie-slot{
  width:92px!important;
  height:82px!important;
}
.forgot-container .forgot-heading,
.verify-container .verify-heading,
.reset-container .reset-heading{
  padding-right:108px!important;
}

/* PAYMENT — small visual belongs to the order summary area, not between fields. */
.payment-modal{position:relative!important}
.payment-modal .hl-payment-animation{
  position:absolute!important;
  top:66px!important;
  right:22px!important;
  width:92px!important;
  height:72px!important;
  margin:0!important;
  z-index:2!important;
  pointer-events:none!important;
}
.payment-modal .hl-payment-animation .hl-lottie-slot{
  width:92px!important;
  height:72px!important;
}
.payment-modal .payment-total{padding-right:112px!important;min-height:76px}

/* Address confirmation / manager chooser: hero visual stays above the title, compact. */
.hl-checkout-address-dialog .hl-checkout-address-animation{
  width:86px!important;
  height:70px!important;
  margin:0 auto 6px!important;
}
.hl-checkout-manager-modal .hl-checkout-manager-animation{
  width:98px!important;
  height:76px!important;
  margin:0 auto 4px!important;
}

/* Empty states always own a full centered row and never sit inside product grids. */
.hl-page-lottie-state{
  width:100%;
  max-width:560px;
  margin:0 auto;
  box-sizing:border-box;
}
.hl-compare-grid>.hl-page-lottie-state,
.hl-products-grid>.hl-page-lottie-state,
.products-grid>.hl-page-lottie-state,
#productsContainer>.hl-page-lottie-state{
  grid-column:1/-1!important;
}
.hl-page-lottie-state .hl-lottie-slot{
  width:138px!important;
  height:118px!important;
}

/* Order state = tiny status icon next to status copy. */
.hl-order-state-animation{
  width:100%;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
}
.hl-order-state-animation .hl-lottie-slot{
  width:46px!important;
  height:46px!important;
  flex-basis:46px!important;
}

/* Chat waiting state should look like a status indicator, not a card inside a card. */
.hl-chat-status+.hl-inline-animation,
.hl-chat-header .hl-inline-animation,
.hl-inline-animation.is-compact{
  padding:4px 8px!important;
  gap:7px!important;
  background:transparent!important;
  border-color:transparent!important;
}
.hl-inline-animation.is-compact .hl-lottie-slot{
  width:30px!important;
  height:30px!important;
  flex-basis:30px!important;
}

/* Notifications / compare / reviews use compact empty-state artwork. */
.hl-notifications-empty.hl-page-lottie-state{min-height:150px!important}
.hl-notifications-empty.hl-page-lottie-state .hl-lottie-slot,
.hl-review-empty .hl-review-empty-lottie,
.hlr-empty .hl-lottie-slot{
  width:108px!important;
  height:90px!important;
}

/* Product and order loading visuals: centered, but not enormous. */
#productPageLoading .hl-page-lottie-state,
.hlr-loading.hl-page-lottie-state,
.hl-feature-loading.hl-page-lottie-state{
  min-height:180px!important;
}

@media(max-width:760px){
  /* One auth animation only. The existing responsive layout keeps the visual rail,
     so never add a second copy inside the form column. */
  .admin-auth-content .hl-auth-mobile-animation{display:none!important}

  /* Auth recovery pages: visual becomes normal flow above title. */
  .forgot-container .hl-auth-page-animation,
  .verify-container .hl-auth-page-animation,
  .reset-container .hl-auth-page-animation{
    position:static!important;
    width:100%!important;
    height:auto!important;
    margin:0 auto 4px!important;
  }
  .forgot-container .hl-auth-page-animation .hl-lottie-slot,
  .verify-container .hl-auth-page-animation .hl-lottie-slot,
  .reset-container .hl-auth-page-animation .hl-lottie-slot{
    width:104px!important;
    height:84px!important;
    margin:0 auto!important;
  }
  .forgot-container .forgot-heading,
  .verify-container .verify-heading,
  .reset-container .reset-heading{
    padding-right:0!important;
  }

  /* Payment animation returns to normal flow on narrow screens. */
  .payment-modal .hl-payment-animation{
    position:static!important;
    width:100%!important;
    height:auto!important;
    margin:-2px auto 2px!important;
    display:flex!important;
    justify-content:center!important;
  }
  .payment-modal .hl-payment-animation .hl-lottie-slot{
    width:84px!important;
    height:64px!important;
  }
  .payment-modal .payment-total{
    padding-right:0!important;
    min-height:0!important;
  }
}

@media(max-width:430px){
  .hl-page-lottie-state .hl-lottie-slot{width:118px!important;height:100px!important}
  .hl-checkout-address-dialog .hl-checkout-address-animation,
  .hl-checkout-manager-modal .hl-checkout-manager-animation{width:82px!important;height:64px!important}
}

/* Hard safety net: one visual per Lottie slot even if an old cached loader
   accidentally appends an extra SVG before the new JS takes ownership. */
.hl-lottie-slot>svg~svg{display:none!important}

/* Verify page already has a full Lottie security visual; hide the legacy emoji. */
.verify-container:has(.hl-auth-page-animation) .verify-heading-icon{display:none!important}

/* =========================================================
   DESKTOP AUTH STABILITY FIX — 2026-09-24
   Mobile rules are intentionally untouched.
   ========================================================= */
@media (min-width: 769px) {
  /* Keep the modal fully inside the desktop viewport. */
  .auth-overlay.show {
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
  }

  .admin-auth-shell {
    width: min(1120px, calc(100vw - 48px)) !important;
    max-width: 1120px !important;
    min-height: min(650px, calc(100vh - 48px)) !important;
    max-height: calc(100vh - 48px) !important;
    grid-template-columns: minmax(320px, 38%) minmax(0, 62%) !important;
  }

  /* Left rail owns the single animated auth visual. */
  .admin-auth-sidebar {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 28px 32px !important;
  }

  .admin-auth-sidebar-content {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 14px 0 10px !important;
  }

  .admin-auth-sidebar .hl-auth-visual-wrap {
    width: 100% !important;
    min-height: 118px !important;
    height: 118px !important;
    margin: 12px auto 10px !important;
    overflow: hidden !important;
  }

  .admin-auth-sidebar .hl-auth-visual {
    width: 132px !important;
    height: 118px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    contain: layout paint !important;
  }

  /* Absolute safety: never show a second auth visual on desktop. */
  .admin-auth-sidebar .hl-auth-visual-wrap ~ .hl-auth-visual-wrap,
  .admin-auth-sidebar [data-hl-auth-lottie] ~ [data-hl-auth-lottie] {
    display: none !important;
  }

  .admin-auth-sidebar [data-hl-auth-lottie] > svg:not(:first-of-type),
  .admin-auth-sidebar [data-hl-auth-lottie] > canvas:not(:first-of-type) {
    display: none !important;
  }

  /* The animated visual already communicates login/register state.
     Avoid a second lock/user pictogram next to the desktop heading. */
  .admin-auth-content .admin-auth-heading > .admin-auth-icon {
    display: none !important;
  }

  .admin-auth-content .admin-auth-heading {
    padding-right: 44px !important;
  }

  .admin-auth-sidebar-content h2 {
    margin: 10px 0 6px !important;
    font-size: clamp(1.55rem, 2vw, 1.85rem) !important;
    line-height: 1.12 !important;
  }

  .admin-auth-sidebar-content > p {
    margin: 0 !important;
    line-height: 1.5 !important;
  }

  .admin-auth-features {
    gap: 8px !important;
    margin-top: 14px !important;
  }

  .admin-auth-features div {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }

  .admin-auth-sidebar-footer {
    flex: 0 0 auto !important;
    margin-top: 8px !important;
  }

  /* Long Register form must remain reachable instead of being clipped by
     flex centering on shorter desktop screens. */
  .admin-auth-content {
    justify-content: flex-start !important;
    min-height: 0 !important;
    padding: 46px 46px 32px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }
}

/* Smaller laptops: same desktop structure, just more compact. */
@media (min-width: 769px) and (max-height: 760px) {
  .auth-overlay.show { padding: 14px !important; }
  .admin-auth-shell {
    min-height: 0 !important;
    max-height: calc(100vh - 28px) !important;
  }
  .admin-auth-sidebar { padding: 20px 26px !important; }
  .admin-auth-sidebar .hl-auth-visual-wrap {
    height: 92px !important;
    min-height: 92px !important;
    margin: 7px auto 6px !important;
  }
  .admin-auth-sidebar .hl-auth-visual {
    width: 108px !important;
    height: 92px !important;
  }
  .admin-auth-sidebar-content h2 {
    margin-top: 6px !important;
    font-size: 1.45rem !important;
  }
  .admin-auth-features {
    margin-top: 10px !important;
    gap: 6px !important;
  }
  .admin-auth-content { padding: 36px 38px 26px !important; }
}

/* =========================================================
   HealthyLife unified auth theme v3
   Desktop follows the same centered composition as mobile.
   Colors use the storefront's blue / green clinical palette.
   ========================================================= */
:root{
  --hl-auth-blue:#0b5cab;
  --hl-auth-blue-deep:#073b72;
  --hl-auth-blue-bright:#0b74b8;
  --hl-auth-green:#21a179;
  --hl-auth-green-dark:#0a8f55;
  --hl-auth-mint:#eaf7f2;
  --hl-auth-ink:#102033;
  --hl-auth-muted:#66758a;
  --hl-auth-line:#dbe7ef;
  --hl-auth-paper:#ffffff;
  --hl-auth-bg:#f5f9fc;
}

/* LOGIN / REGISTER — align visual and copy on one central axis. */
.auth-overlay{
  background:rgba(7,59,114,.42)!important;
  backdrop-filter:blur(16px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(120%)!important;
}
.admin-auth-shell{
  background:var(--hl-auth-paper)!important;
  border:1px solid rgba(11,92,171,.18)!important;
  box-shadow:0 34px 90px rgba(7,59,114,.24)!important;
  color:var(--hl-auth-ink)!important;
}
.admin-auth-shell:before{display:none!important}
.admin-auth-sidebar{
  background:
    radial-gradient(circle at 50% 18%,rgba(33,161,121,.18),transparent 34%),
    linear-gradient(160deg,var(--hl-auth-blue-deep),var(--hl-auth-blue))!important;
  border-right:1px solid rgba(255,255,255,.14)!important;
}
.admin-auth-sidebar-content{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.admin-auth-sidebar-content>p{max-width:24rem!important;margin-inline:auto!important}
.admin-auth-features{width:min(100%,22rem)!important;text-align:left!important}
.admin-auth-logo strong,.admin-auth-sidebar-content h2{color:#fff!important;text-shadow:none!important}
.admin-auth-logo span,.admin-auth-sidebar-content>p,.admin-auth-sidebar-footer{color:rgba(255,255,255,.74)!important}
.admin-auth-badge{
  color:#eafff7!important;
  background:rgba(33,161,121,.16)!important;
  border-color:rgba(234,247,242,.32)!important;
  box-shadow:none!important;
}
.admin-auth-features div{color:rgba(255,255,255,.90)!important}
.admin-auth-features span{background:none!important;color:#9ae6ca!important;box-shadow:none!important}
.admin-auth-sidebar .hl-auth-visual-wrap{
  margin:12px auto 16px!important;
  min-height:150px!important;
  justify-content:center!important;
}
.admin-auth-sidebar .hl-auth-visual{
  width:168px!important;
  height:142px!important;
  margin:0 auto!important;
  filter:drop-shadow(0 18px 35px rgba(3,34,68,.28))!important;
}
.admin-auth-content{
  background:linear-gradient(180deg,#ffffff,#fbfdff)!important;
  color:var(--hl-auth-ink)!important;
}
.admin-auth-heading{text-align:center!important}
.admin-auth-heading h2{color:var(--hl-auth-ink)!important;text-shadow:none!important}
.admin-auth-heading p{color:var(--hl-auth-muted)!important}
.admin-auth-close{
  color:var(--hl-auth-muted)!important;
  background:#f6f9fc!important;
  border-color:var(--hl-auth-line)!important;
}
.admin-auth-close:hover{color:var(--hl-auth-blue)!important;border-color:rgba(11,92,171,.35)!important;box-shadow:none!important}
.admin-auth-tabs{
  background:#f2f7fb!important;
  border-color:var(--hl-auth-line)!important;
  box-shadow:none!important;
}
.admin-auth-tab{color:#6d7f9e!important}
.admin-auth-tab.active{
  color:#fff!important;
  background:linear-gradient(135deg,var(--hl-auth-blue),var(--hl-auth-blue-bright))!important;
  box-shadow:0 8px 24px rgba(11,92,171,.20)!important;
}
.admin-auth-field label{color:var(--hl-auth-ink)!important}
.admin-auth-input-wrap,.admin-auth-field input,.admin-auth-field select{
  background:#fff!important;
  color:var(--hl-auth-ink)!important;
  border-color:var(--hl-auth-line)!important;
  box-shadow:none!important;
}
.admin-auth-input-wrap:focus-within,.admin-auth-field input:focus,.admin-auth-field select:focus{
  border-color:rgba(11,92,171,.62)!important;
  box-shadow:0 0 0 4px rgba(11,92,171,.09)!important;
}
.admin-auth-field input::placeholder{color:#91a0b3!important}
.admin-auth-field select option{background:#fff!important;color:var(--hl-auth-ink)!important}
.admin-auth-options,.admin-auth-options label,.admin-auth-options a,.forgot-password-link a{color:var(--hl-auth-muted)!important}
.admin-auth-options a:hover,.forgot-password-link a:hover{color:var(--hl-auth-blue)!important}
.admin-auth-options input{accent-color:var(--hl-auth-blue)!important}
.admin-auth-submit{
  color:#fff!important;
  background:linear-gradient(135deg,var(--hl-auth-blue),var(--hl-auth-blue-bright))!important;
  box-shadow:0 12px 30px rgba(11,92,171,.20)!important;
}
.admin-auth-submit:hover{
  filter:none!important;
  box-shadow:0 16px 34px rgba(11,92,171,.25)!important;
}
.admin-auth-security,.admin-auth-legal-links,.admin-auth-terms-text{color:var(--hl-auth-muted)!important}
.admin-auth-mobile-brand{color:var(--hl-auth-ink)!important}

/* Forgot / Verify / Reset — always centered, matching mobile composition. */
.hl-auth-recovery{
  min-height:100vh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
  color:var(--hl-auth-ink)!important;
  background:
    radial-gradient(circle at 12% 12%,rgba(11,92,171,.12),transparent 30%),
    radial-gradient(circle at 88% 86%,rgba(33,161,121,.13),transparent 31%),
    linear-gradient(180deg,#f8fbfe 0%,var(--hl-auth-bg) 100%)!important;
}
.hl-auth-recovery::before,.hl-auth-recovery::after{display:none!important}
.hl-auth-recovery .forgot-container,
.hl-auth-recovery .verify-container,
.hl-auth-recovery .reset-container{
  position:relative!important;
  width:100%!important;
  max-width:520px!important;
  padding:38px 44px 34px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.97)!important;
  border:1px solid rgba(11,92,171,.15)!important;
  border-radius:28px!important;
  box-shadow:0 28px 75px rgba(7,59,114,.16)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.hl-auth-recovery .forgot-container::before,
.hl-auth-recovery .verify-container::before,
.hl-auth-recovery .reset-container::before{display:none!important}

/* Animation: same flow and centering on desktop and mobile. */
.hl-auth-recovery .hl-auth-page-animation{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  margin:2px auto 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:none!important;
}
.hl-auth-recovery .hl-auth-page-animation .hl-lottie-slot{
  width:118px!important;
  height:98px!important;
  margin:0 auto!important;
}

.hl-auth-recovery .forgot-logo,
.hl-auth-recovery .verify-logo,
.hl-auth-recovery .reset-logo,
.hl-auth-recovery .forgot-heading,
.hl-auth-recovery .verify-heading,
.hl-auth-recovery .reset-heading,
.hl-auth-recovery .forgot-back,
.hl-auth-recovery .verify-back{
  text-align:center!important;
}
.hl-auth-recovery .forgot-heading,
.hl-auth-recovery .verify-heading,
.hl-auth-recovery .reset-heading{
  padding-right:0!important;
  margin-bottom:24px!important;
}
.hl-auth-recovery .forgot-heading h1,
.hl-auth-recovery .verify-heading h1,
.hl-auth-recovery .reset-heading h1,
.hl-auth-recovery .forgot-logo strong,
.hl-auth-recovery .verify-logo strong,
.hl-auth-recovery .reset-logo strong,
.hl-auth-recovery .forgot-field label,
.hl-auth-recovery .verify-field label,
.hl-auth-recovery .reset-field label{
  color:var(--hl-auth-ink)!important;
  text-shadow:none!important;
}
.hl-auth-recovery .forgot-heading p,
.hl-auth-recovery .verify-heading p,
.hl-auth-recovery .reset-heading p,
.hl-auth-recovery .forgot-logo span,
.hl-auth-recovery .verify-logo span,
.hl-auth-recovery .reset-logo span,
.hl-auth-recovery .password-rules{
  color:var(--hl-auth-muted)!important;
}
.hl-auth-recovery .forgot-logo-image{
  filter:none!important;
}
.hl-auth-recovery .forgot-input-wrap,
.hl-auth-recovery .verify-input-wrap,
.hl-auth-recovery .password-wrap,
.hl-auth-recovery .otp-box{
  background:#fff!important;
  border-color:var(--hl-auth-line)!important;
  color:var(--hl-auth-ink)!important;
  box-shadow:none!important;
}
.hl-auth-recovery .forgot-input-wrap input,
.hl-auth-recovery .verify-input-wrap input,
.hl-auth-recovery .password-wrap input,
.hl-auth-recovery .otp-box{
  color:var(--hl-auth-ink)!important;
  caret-color:var(--hl-auth-blue)!important;
}
.hl-auth-recovery input::placeholder{color:#91a0b3!important}
.hl-auth-recovery .forgot-input-wrap:focus-within,
.hl-auth-recovery .verify-input-wrap:focus-within,
.hl-auth-recovery .password-wrap:focus-within,
.hl-auth-recovery .otp-box:focus{
  border-color:rgba(11,92,171,.62)!important;
  box-shadow:0 0 0 4px rgba(11,92,171,.09)!important;
}
.hl-auth-recovery .forgot-submit,
.hl-auth-recovery .verify-submit,
.hl-auth-recovery .reset-submit{
  color:#fff!important;
  background:linear-gradient(135deg,var(--hl-auth-blue),var(--hl-auth-blue-bright))!important;
  box-shadow:0 12px 28px rgba(11,92,171,.20)!important;
}
.hl-auth-recovery .forgot-submit:hover,
.hl-auth-recovery .verify-submit:hover,
.hl-auth-recovery .reset-submit:hover{
  background:linear-gradient(135deg,var(--hl-auth-blue-deep),var(--hl-auth-blue))!important;
  box-shadow:0 16px 34px rgba(11,92,171,.24)!important;
}
.hl-auth-recovery .forgot-back a,
.hl-auth-recovery .verify-back a,
.hl-auth-recovery .resend-link,
.hl-auth-recovery .verify-email{
  color:var(--hl-auth-blue)!important;
}
.hl-auth-recovery .show-password{color:var(--hl-auth-blue)!important}
.hl-auth-recovery .verify-message.state-checking{color:var(--hl-auth-blue)!important}
.hl-auth-recovery .verify-message.state-success{color:var(--hl-auth-green-dark)!important}
.hl-auth-recovery .verify-message.state-error{color:#dc2626!important}
.hl-auth-recovery .otp-grid.is-success .otp-box{
  border-color:rgba(33,161,121,.55)!important;
  color:var(--hl-auth-green-dark)!important;
  background:var(--hl-auth-mint)!important;
  box-shadow:0 0 0 3px rgba(33,161,121,.08)!important;
}
.hl-auth-recovery .otp-grid.is-error .otp-box{
  border-color:#ef4444!important;
  color:#b91c1c!important;
  background:#fff5f5!important;
}
.hl-auth-recovery .verify-heading-icon{display:none!important}

@media(max-width:760px){
  /* Keep the already-working mobile composition; only inherit unified colors. */
  .hl-auth-recovery{padding:12px!important;align-items:flex-start!important}
  .hl-auth-recovery .forgot-container,
  .hl-auth-recovery .verify-container,
  .hl-auth-recovery .reset-container{
    max-width:520px!important;
    padding:30px 18px 28px!important;
    margin:auto!important;
  }
  .hl-auth-recovery .hl-auth-page-animation{margin:0 auto 6px!important}
  .hl-auth-recovery .hl-auth-page-animation .hl-lottie-slot{
    width:104px!important;
    height:84px!important;
  }
}


/* ===== HealthyLife standalone recovery desktop guard =====
   These pages must stay isolated from storefront/header layout. */
body.hl-auth-recovery{
  width:100%!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(18px,3vw,38px)!important;
  overflow-x:hidden!important;
}
body.hl-auth-recovery > .forgot-container,
body.hl-auth-recovery > .verify-container,
body.hl-auth-recovery > .reset-container{
  flex:0 0 auto!important;
  width:min(100%,520px)!important;
  max-width:520px!important;
  margin:auto!important;
  align-self:center!important;
}
body.hl-auth-recovery .hl-global-dropdown,
body.hl-auth-recovery .hl-global-static-toolbar,
body.hl-auth-recovery .hl-global-flow-toolbar{
  display:none!important;
}
@media(max-width:760px){
  body.hl-auth-recovery{
    justify-content:flex-start!important;
    padding:max(14px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
  }
}