@media(max-width:900px){
  .vx-pro-nav .mobile-menu-btn{
    position:relative!important;
    grid-column:1!important;
    grid-row:1!important;
    z-index:4!important;
    display:grid!important;
    place-items:center!important;
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    margin:0!important;
    padding:0!important;
    border-radius:14px!important;
    border:1px solid rgba(53,229,212,.30)!important;
    overflow:hidden!important;
    contain:paint!important;
    box-shadow:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    text-shadow:none!important;
    isolation:isolate!important;
    clip-path:inset(0 round 14px)!important;
    background:linear-gradient(145deg,rgba(16,31,36,.42),rgba(5,11,15,.22))!important;
    color:#35e5d4!important;
    font-size:0!important;
    line-height:1!important;
    transform:none!important;
    outline:0!important;
    touch-action:manipulation!important;
  }

  .vx-pro-nav .mobile-menu-btn::before{
    content:"☰"!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    color:currentColor!important;
    font-size:25px!important;
    font-weight:780!important;
    line-height:1!important;
    background:none!important;
    box-shadow:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    text-shadow:none!important;
  }

  body.vx-v7-drawer-open .vx-pro-nav .mobile-menu-btn::before{
    content:"×"!important;
    font-size:30px!important;
    font-weight:650!important;
  }

  .vx-pro-nav .mobile-menu-btn::after{
    content:none!important;
    display:none!important;
    box-shadow:none!important;
    filter:none!important;
    -webkit-filter:none!important;
  }

  .vx-pro-nav .vx-v7-brand,
  .vx-pro-nav .vx-v7-brand-mark,
  .vx-pro-nav .vx-v7-brand-word{
    position:relative!important;
    z-index:20!important;
    filter:none!important;
  }

  .vx-pro-nav .vx-v7-brand-mark{
    overflow:visible!important;
    isolation:isolate!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .vx-pro-nav .vx-v7-brand-mark::before{
    position:absolute!important;
    z-index:0!important;
  }

  .vx-pro-nav .vx-v7-brand-mark::after{
    position:absolute!important;
    z-index:1!important;
  }

  .vx-pro-nav .vx-v7-brand-mark svg,
  .vx-pro-nav .vx-v7-brand-mark .vx-floating-v-logo{
    position:relative!important;
    z-index:2!important;
    overflow:visible!important;
  }

  .vx-pro-nav{
    position:relative!important;
    z-index:1000!important;
    isolation:isolate!important;
    grid-template-columns:52px minmax(0,1fr) 104px!important;
    gap:8px!important;
    padding:0 14px!important;
    align-items:center!important;
    overflow:visible!important;
  }

  .vx-pro-nav .vx-v7-brand{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  .vx-pro-nav .vx-v7-brand-word{
    max-width:calc(100vw - 228px)!important;
  }

  .vx-header-tools{
    grid-column:3!important;
    width:104px!important;
    min-width:104px!important;
    max-width:104px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    overflow:visible!important;
  }

  .vx-header-tools>.vx-tool-link,
  .vx-header-tools>.vx-tool-icon:not([data-page="profile"]),
  .vx-header-tools>.vx-theme-tool,
  .vx-header-tools #user-area,
  .vx-header-tools .user-area{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  .vx-header-tools .vx-nav-search,
  .vx-header-tools>a.vx-tool-icon[data-page="profile"]{
    position:relative!important;
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    place-items:center!important;
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    margin:0!important;
    border-radius:14px!important;
    border:1px solid rgba(53,229,212,.30)!important;
    background:
      linear-gradient(145deg,rgba(22,34,40,.96),rgba(8,14,18,.94))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
    color:#35e5d4!important;
    overflow:visible!important;
    z-index:6!important;
  }

  .vx-header-tools .vx-nav-search{
    order:1!important;
    padding:0!important;
    border-color:transparent!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .vx-header-tools>a.vx-tool-icon[data-page="profile"]{
    order:2!important;
  }

  .vx-header-tools .vx-nav-search input{
    position:absolute!important;
    width:0!important;
    min-width:0!important;
    height:0!important;
    flex:0 0 0!important;
    padding:0!important;
    border:0!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  .vx-header-tools .vx-nav-search-button{
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#35e5d4!important;
    box-shadow:none!important;
  }

  .vx-header-tools .vx-nav-search-button svg{
    width:27px!important;
    height:27px!important;
    display:block!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:2.15!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
    filter:drop-shadow(0 0 7px rgba(53,229,212,.16))!important;
  }

  .vx-header-tools .vx-nav-search-results{
    display:none!important;
  }

  body.vx-mobile-search-open::before{
    display:none!important;
    content:none!important;
  }

  body.vx-mobile-search-open .vx-header-tools .vx-nav-search{
    position:fixed!important;
    left:68px!important;
    right:70px!important;
    top:calc(10px + env(safe-area-inset-top,0px))!important;
    z-index:2147483647!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:48px!important;
    flex:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:stretch!important;
    padding:0!important;
    border-radius:14px!important;
    border-color:rgba(53,229,212,.42)!important;
    background:
      linear-gradient(145deg,rgba(23,35,42,.62),rgba(7,12,17,.52))!important;
    box-shadow:
      0 14px 34px rgba(0,0,0,.28),
      0 0 0 1px rgba(53,229,212,.07),
      inset 0 1px 0 rgba(255,255,255,.05)!important;
    backdrop-filter:blur(12px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(12px) saturate(1.18)!important;
    transform-origin:right center!important;
    animation:vxMobileSearchSlideLeft .16s cubic-bezier(.2,.8,.2,1) both!important;
  }

  body.vx-mobile-search-open .vx-header-tools .vx-nav-search::before{
    content:""!important;
    position:absolute!important;
    inset:-1px!important;
    border-radius:14px!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,transparent,rgba(53,229,212,.22),transparent)!important;
    opacity:.55!important;
  }

  body.vx-mobile-search-open .vx-header-tools .vx-nav-search input{
    position:relative!important;
    width:auto!important;
    min-width:0!important;
    height:100%!important;
    flex:1 1 auto!important;
    padding:0 10px 0 14px!important;
    border:0!important;
    outline:0!important;
    opacity:1!important;
    pointer-events:auto!important;
    background:transparent!important;
    color:#edf4f5!important;
    font-size:14px!important;
    font-weight:760!important;
    letter-spacing:0!important;
    box-shadow:none!important;
  }

  body.vx-mobile-search-open .vx-header-tools .vx-nav-search input::placeholder{
    color:#687782!important;
    font-weight:650!important;
  }

  body.vx-mobile-search-open .vx-header-tools .vx-nav-search-button{
    width:46px!important;
    height:46px!important;
    flex:0 0 46px!important;
    border-left:1px solid rgba(139,158,173,.14)!important;
    border-radius:0 13px 13px 0!important;
    background:rgba(53,229,212,.065)!important;
    color:#35e5d4!important;
  }

  body.vx-mobile-search-open .vx-header-tools .vx-nav-search-results{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:calc(100% + 10px)!important;
    z-index:2147483647!important;
    display:none!important;
    max-height:min(420px,calc(100dvh - 154px - env(safe-area-inset-top,0px)))!important;
    overflow:auto!important;
    padding:9px!important;
    border:1px solid rgba(139,158,173,.22)!important;
    border-radius:15px!important;
    background:linear-gradient(145deg,rgba(16,25,32,.94),rgba(7,12,17,.92))!important;
    box-shadow:0 22px 58px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.035)!important;
    backdrop-filter:blur(14px) saturate(1.12)!important;
    -webkit-backdrop-filter:blur(14px) saturate(1.12)!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.vx-mobile-search-open #vx-nav-search-results{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }

  body.vx-mobile-search-open .vx-header-tools .vx-nav-search-results.is-open{
    display:block!important;
  }

  body.vx-mobile-search-open #vx-nav-search-results.is-open{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }

  body.vx-mobile-search-open .vx-header-tools .vx-nav-search-item{
    min-height:50px!important;
    padding:0 13px!important;
    border-radius:11px!important;
  }

  /* Final mobile header layer lock: menu paints only inside itself; logo animation stays intact. */
  .vx-pro-nav .mobile-menu-btn,
  .vx-pro-nav .mobile-menu-btn:hover,
  .vx-pro-nav .mobile-menu-btn:focus,
  .vx-pro-nav .mobile-menu-btn:active{
    z-index:4!important;
    box-shadow:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    text-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    overflow:hidden!important;
    contain:paint!important;
    clip-path:inset(0 round 14px)!important;
    isolation:isolate!important;
    transform:none!important;
  }

  .vx-pro-nav .mobile-menu-btn::before{
    position:relative!important;
    z-index:2!important;
    box-shadow:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    text-shadow:none!important;
  }

  .vx-pro-nav .mobile-menu-btn::after{
    content:none!important;
    display:none!important;
  }

  /* Draw the hamburger with CSS bars so it is visually centered on every mobile browser. */
  .vx-pro-nav #mobile-menu-btn.mobile-menu-btn,
  .vx-pro-nav #mobile-menu-btn.mobile-menu-btn:hover,
  .vx-pro-nav #mobile-menu-btn.mobile-menu-btn:focus,
  .vx-pro-nav #mobile-menu-btn.mobile-menu-btn:active{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:0!important;
  }

  .vx-pro-nav #mobile-menu-btn.mobile-menu-btn::before{
    content:""!important;
    display:block!important;
    position:relative!important;
    width:21px!important;
    height:2px!important;
    margin:0!important;
    padding:0!important;
    background:currentColor!important;
    border-radius:999px!important;
    box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor!important;
    transform:none!important;
  }

  body.vx-v7-drawer-open .vx-pro-nav #mobile-menu-btn.mobile-menu-btn::before,
  body.menu-open .vx-pro-nav #mobile-menu-btn.mobile-menu-btn::before{
    content:"×"!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:24px!important;
    height:24px!important;
    background:none!important;
    box-shadow:none!important;
    font-size:30px!important;
    font-weight:650!important;
    line-height:24px!important;
  }

  .vx-pro-nav .vx-v7-brand{
    position:relative!important;
    z-index:24!important;
    overflow:visible!important;
    contain:none!important;
    clip-path:none!important;
    isolation:isolate!important;
  }

  .vx-pro-nav .vx-v7-brand-mark{
    position:relative!important;
    z-index:2!important;
    overflow:visible!important;
    contain:none!important;
    clip-path:none!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .vx-pro-nav .vx-v7-brand-mark::before,
  .vx-pro-nav .vx-v7-brand-mark::after{
    content:""!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:none!important;
  }

  .vx-pro-nav .vx-v7-brand-mark svg,
  .vx-pro-nav .vx-v7-brand-mark .vx-floating-v-logo{
    position:relative!important;
    z-index:4!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    overflow:visible!important;
  }

  .vx-pro-nav .vx-v7-brand-word{
    position:relative!important;
    z-index:5!important;
  }

  body.vx-mobile-search-open .vx-header-tools .vx-nav-search{
    z-index:2147483647!important;
  }
}

@media(max-width:390px){
  .vx-pro-nav{
    grid-template-columns:50px minmax(0,1fr) 100px!important;
    padding:0 12px!important;
  }

  .vx-pro-nav .vx-v7-brand-word{
    max-width:calc(100vw - 214px)!important;
    font-size:18px!important;
    letter-spacing:2px!important;
  }

  .vx-header-tools{
    width:100px!important;
    min-width:100px!important;
    max-width:100px!important;
    gap:6px!important;
  }

  .vx-header-tools .vx-nav-search,
  .vx-header-tools>a.vx-tool-icon[data-page="profile"]{
    width:47px!important;
    min-width:47px!important;
    max-width:47px!important;
    height:47px!important;
    flex-basis:47px!important;
  }

  body.vx-mobile-search-open .vx-header-tools .vx-nav-search{
    left:62px!important;
    right:64px!important;
    width:auto!important;
  }

  body:not(.vx-mobile-search-open) .vx-header-tools .vx-nav-search{
    border-color:transparent!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  body:not(.vx-mobile-search-open) .vx-header-tools .vx-nav-search-button{
    background:transparent!important;
    box-shadow:none!important;
  }

  .vx-pro-nav .vx-v7-brand{
    overflow:visible!important;
  }
}

@keyframes vxMobileSearchSlideLeft{
  from{opacity:.68;transform:translateX(12px) scaleX(.82)}
  to{opacity:1;transform:translateX(0) scaleX(1)}
}
