/* Header and drawer share the same animated V mark. */
.vx-v7-brand-mark,
.vx-drawer-brand-mark{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  isolation:isolate!important;
}

.vx-v7-brand-mark::before,
.vx-drawer-brand-mark::before{
  content:""!important;
  position:absolute!important;
  inset:-5px!important;
  border-radius:50%!important;
  border:1.5px solid rgba(39,230,211,.18)!important;
  border-top-color:#27e6d3!important;
  border-right-color:rgba(39,230,211,.66)!important;
  border-bottom-color:transparent!important;
  box-shadow:0 0 12px rgba(39,230,211,.14)!important;
  animation:vxBrandRingSpin 5.6s linear infinite!important;
  pointer-events:none!important;
  z-index:0!important;
}

.vx-v7-brand-mark::after,
.vx-drawer-brand-mark::after{
  content:""!important;
  position:absolute!important;
  inset:-1px!important;
  border-radius:50%!important;
  border:1px solid rgba(39,230,211,.22)!important;
  border-left-color:transparent!important;
  border-bottom-color:rgba(39,230,211,.56)!important;
  animation:vxBrandRingSpinReverse 8.4s linear infinite!important;
  pointer-events:none!important;
  z-index:0!important;
}

.vx-v7-brand-mark svg,
.vx-drawer-brand-mark svg{
  position:relative!important;
  z-index:2!important;
  width:84%!important;
  height:84%!important;
  overflow:visible!important;
  animation:vxBrandVBreathe 3.2s ease-in-out infinite!important;
}

@keyframes vxBrandRingSpin{
  to{transform:rotate(360deg)}
}
@keyframes vxBrandRingSpinReverse{
  to{transform:rotate(-360deg)}
}
@keyframes vxBrandVBreathe{
  0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 4px rgba(39,230,211,.18))}
  50%{transform:translateY(-1px) scale(1.035);filter:drop-shadow(0 0 9px rgba(39,230,211,.36))}
}

.vx-drawer-brand-dynamic{
  display:none;
}

@media(max-width:900px){
  /* A lighter themed mask keeps the page visible without blocking drawer items. */
  #vx-mobile-drawer-mask-final{
    background:rgba(1,10,12,.34)!important;
    backdrop-filter:blur(2px) saturate(112%)!important;
    -webkit-backdrop-filter:blur(2px) saturate(112%)!important;
  }

  /* Compact translucent drawer. */
  #main-nav.vx-mobile-body-drawer{
    width:min(74vw,292px)!important;
    min-width:236px!important;
    max-width:292px!important;
    padding:calc(16px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom))!important;
    gap:6px!important;
    background:
      radial-gradient(circle at 14% 4%,rgba(39,230,211,.12),transparent 30%),
      linear-gradient(180deg,rgba(9,24,27,.92),rgba(5,12,17,.88))!important;
    border-right:1px solid rgba(39,230,211,.23)!important;
    border-radius:0 24px 24px 0!important;
    box-shadow:18px 0 46px rgba(0,0,0,.42),0 0 26px rgba(39,230,211,.055)!important;
    backdrop-filter:blur(22px) saturate(128%)!important;
    -webkit-backdrop-filter:blur(22px) saturate(128%)!important;
  }

  #main-nav.vx-mobile-body-drawer::before{
    content:none!important;
    display:none!important;
  }

  .vx-drawer-brand-dynamic{
    width:100%!important;
    min-height:64px!important;
    margin:0 0 8px!important;
    padding:4px 4px 13px!important;
    display:flex!important;
    align-items:center!important;
    gap:11px!important;
    flex:0 0 auto!important;
    border-bottom:1px solid rgba(255,255,255,.085)!important;
  }

  .vx-drawer-brand-mark{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    filter:drop-shadow(0 0 10px rgba(39,230,211,.16))!important;
  }

  .vx-drawer-brand-word{
    min-width:0!important;
    color:#36e7d5!important;
    font-size:20px!important;
    font-weight:920!important;
    letter-spacing:3.5px!important;
    line-height:1!important;
    text-shadow:0 0 12px rgba(39,230,211,.16)!important;
  }

  .vx-drawer-brand-close{
    width:34px!important;
    height:34px!important;
    margin-left:auto!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 34px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.045)!important;
    color:#aebbc3!important;
    box-shadow:none!important;
    font-size:20px!important;
    font-weight:500!important;
    line-height:1!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  .vx-drawer-brand-close:active{
    background:rgba(39,230,211,.10)!important;
    border-color:rgba(39,230,211,.24)!important;
    color:#fff!important;
  }

  #main-nav.vx-mobile-body-drawer > a,
  #main-nav.vx-mobile-body-drawer .vx-mobile-nav-tools > a{
    min-height:45px!important;
    padding:0 13px!important;
    border:1px solid rgba(255,255,255,.035)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.018)!important;
    color:#d4dde3!important;
    font-size:15px!important;
    font-weight:760!important;
  }

  #main-nav.vx-mobile-body-drawer > a:active,
  #main-nav.vx-mobile-body-drawer .vx-mobile-nav-tools > a:active{
    background:rgba(39,230,211,.10)!important;
    border-color:rgba(39,230,211,.22)!important;
    color:#fff!important;
  }

  #main-nav.vx-mobile-body-drawer .vx-mobile-nav-tools{
    gap:6px!important;
    margin-top:8px!important;
    padding-top:12px!important;
    border-top:1px solid rgba(255,255,255,.075)!important;
  }

  /* Header logo remains compact and centered. */
  .vx-pro-nav .vx-v7-brand-mark{
    width:30px!important;
    height:30px!important;
    flex-basis:30px!important;
  }
  .vx-pro-nav .vx-v7-brand-word{
    font-size:18px!important;
    letter-spacing:2.8px!important;
  }
}

@media(max-width:360px){
  #main-nav.vx-mobile-body-drawer{
    width:min(78vw,258px)!important;
    min-width:224px!important;
    max-width:258px!important;
  }
  .vx-drawer-brand-word{font-size:18px!important;letter-spacing:2.8px!important;}
}

@media(min-width:901px){
  .vx-drawer-brand-dynamic{display:none!important;}
}

@media(prefers-reduced-motion:reduce){
  .vx-v7-brand-mark::before,
  .vx-v7-brand-mark::after,
  .vx-v7-brand-mark svg,
  .vx-drawer-brand-mark::before,
  .vx-drawer-brand-mark::after,
  .vx-drawer-brand-mark svg{
    animation:none!important;
  }
}