/* sidebar mobile dedicata - clean deterministic */

.sidebar-logo-block{
  display:none;
}

@media (max-width: 820px){
  html body.menu-open{
    overflow:hidden !important;
    overscroll-behavior:none !important;
  }

  html body .site-header{
    z-index:10020 !important;
  }

  html body .site-header .header-inner{
    position:relative !important;
    z-index:10021 !important;
  }

  html body .site-menu-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:10010 !important;
    background:
      radial-gradient(circle at 10% 18%, rgba(255,88,88,.08), transparent 24%),
      linear-gradient(90deg, rgba(9,14,24,.34) 0%, rgba(9,14,24,.18) 44%, rgba(9,14,24,.07) 100%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    backdrop-filter:blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter:blur(8px) saturate(120%) !important;
    transition:opacity .16s ease, visibility 0s linear .18s !important;
  }

  html body .site-menu-overlay.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition:opacity .16s ease, visibility 0s linear 0s !important;
  }

  html body #navToggle,
  html body .site-header .nav-toggle{
    position:relative !important;
    z-index:10023 !important;
  }

  html body #navToggle.is-open,
  html body .site-header .nav-toggle.is-open{
    background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) !important;
    border-color:rgba(255,104,104,.16) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.03),
      0 8px 18px rgba(8,14,24,.10) !important;
  }

  html body #siteNav{
    display:flex !important;
    position:fixed !important;
    top:4px !important;
    left:10px !important;
    right:auto !important;
    bottom:auto !important;
    width:min(79vw, 304px) !important;
    max-width:304px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100svh - 8px) !important;
    margin:0 !important;
    padding:6px 12px 8px !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:6px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-gutter:stable both-edges !important;
    background:
      radial-gradient(circle at 14% 8%, rgba(255,84,84,.08), transparent 24%),
      radial-gradient(circle at 86% 10%, rgba(255,255,255,.12), transparent 16%),
      linear-gradient(180deg, rgba(30,42,62,.36), rgba(14,20,32,.24)) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:26px !important;
    box-shadow:
      0 18px 46px rgba(8,14,24,.18),
      0 4px 18px rgba(8,14,24,.08),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(255,255,255,.05),
      inset 0 0 34px rgba(255,255,255,.025),
      0 0 0 1px rgba(255,255,255,.03) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate3d(-106%, 0, 0) !important;
    transform-origin:left center !important;
    transition:
      transform .18s ease-out,
      opacity .12s ease-out,
      visibility 0s linear .18s !important;
    z-index:10022 !important;
    will-change:transform !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    contain:paint !important;
    isolation:isolate !important;
    overflow-anchor:none !important;
    touch-action:pan-y !important;
    filter:none !important;
    backdrop-filter:blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(150%) !important;
  }

  html body #siteNav.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translate3d(0, 0, 0) !important;
    transition:
      transform .18s ease-out,
      opacity .12s ease-out,
      visibility 0s linear 0s !important;
  }

  html body #siteNav.is-open.is-settled{
    transform:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  html body #siteNav::before,
  html body #siteNav::after{
    content:none !important;
    display:none !important;
  }

  html body #siteNav,
  html body #siteNav *,
  html body #siteNav::before,
  html body #siteNav::after{
    animation:none !important;
  }

  html body #siteNav a,
  html body #siteNav.is-open a{
    width:100% !important;
    min-height:42px !important;
    height:auto !important;
    padding:0 15px 0 16px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex:0 0 auto !important;
    position:relative !important;
    overflow:hidden !important;
    color:rgba(255,255,255,.96) !important;
    font-size:.88rem !important;
    font-weight:800 !important;
    letter-spacing:.012em !important;
    text-transform:lowercase !important;
    text-decoration:none !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08)) !important;
    border:1px solid rgba(255,255,255,.15) !important;
    border-radius:16px !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(255,255,255,.05),
      0 8px 20px rgba(8,14,24,.08),
      0 0 0 1px rgba(255,255,255,.025) !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    animation:none !important;
    transition:
      background .14s ease,
      border-color .14s ease,
      box-shadow .14s ease,
      transform .14s ease,
      color .14s ease !important;
    animation-delay:0s !important;
    transition-delay:0s !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:blur(12px) saturate(132%) !important;
    -webkit-backdrop-filter:blur(12px) saturate(132%) !important;
  }

  html body #siteNav a:first-of-type{
    margin-top:0 !important;
  }

  html body #siteNav a::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    bottom:9px;
    width:3px;
    border-radius:999px;
    background:linear-gradient(
      180deg,
      rgba(255,88,88,.10),
      rgba(255,88,88,.52),
      rgba(255,255,255,.22)
    ) !important;
    opacity:.62;
  }

  html body #siteNav a::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 38%) !important;
    opacity:.62;
  }

  html body #siteNav a:hover,
  html body #siteNav a:active,
  html body #siteNav a.active,
  html body #siteNav a[aria-current="page"]{
    color:#ffffff !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10)) !important;
    border-color:rgba(255,104,104,.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -1px 0 rgba(255,255,255,.06),
      0 12px 24px rgba(8,14,24,.11),
      0 0 22px rgba(255,92,92,.05),
      0 0 0 1px rgba(255,255,255,.03) !important;
    transform:translateY(-1px) !important;
  }

  html body #siteNav .sidebar-logo-block{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin-top:4px !important;
    padding:6px 6px 0 !important;
    min-height:74px !important;
    border-top:1px solid rgba(255,255,255,.06) !important;
    position:relative !important;
  }

  html body #siteNav .sidebar-logo-block::before{
    content:"";
    position:absolute;
    inset:4px 3px 0 3px;
    border-radius:14px;
    background:
      radial-gradient(circle at 20% 20%, rgba(255,84,84,.06), transparent 32%),
      linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
    border:1px solid rgba(255,255,255,.05);
    pointer-events:none;
  }

  html body #siteNav .sidebar-logo-block img{
    position:relative !important;
    z-index:1 !important;
    display:block !important;
    width:min(70%, 166px) !important;
    max-width:166px !important;
    height:auto !important;
    object-fit:contain !important;
    opacity:.96 !important;
    filter:
      drop-shadow(0 10px 22px rgba(8,14,24,.16))
      drop-shadow(0 0 18px rgba(255,88,88,.05)) !important;
    transform:translateZ(0);
    pointer-events:none !important;
    user-select:none !important;
    -webkit-user-drag:none !important;
  }

  html body #siteNav::-webkit-scrollbar{
    width:6px;
  }

  html body #siteNav::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, rgba(255,96,96,.22), rgba(255,255,255,.16)) !important;
    border-radius:999px;
  }

  html body #siteNav::-webkit-scrollbar-track{
    background:transparent;
  }
}

@media (max-width: 640px){
  html body #siteNav{
    top:2px !important;
    left:8px !important;
    width:min(82vw, 282px) !important;
    max-width:282px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100svh - 4px) !important;
    padding:4px 11px 4px !important;
    gap:5px !important;
    border-radius:24px !important;
    overflow-y:auto !important;
  }

  html body #siteNav a{
    min-height:40px !important;
    padding:0 14px 0 14px !important;
    font-size:.84rem !important;
    border-radius:15px !important;
  }

  html body #siteNav .sidebar-logo-block{
    margin-top:3px !important;
    padding:4px 4px 0 !important;
    min-height:66px !important;
  }

  html body #siteNav .sidebar-logo-block::before{
    inset:3px 2px 0 2px;
    border-radius:12px;
  }

  html body #siteNav .sidebar-logo-block img{
    width:min(68%, 156px) !important;
    max-width:156px !important;
  }
}

/* === desktop nav-toggle hard hide: start === */
@media (min-width: 821px){
  html body #navToggle,
  html body .nav-toggle,
  html body .site-header .nav-toggle{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    position:absolute !important;
    width:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }
}
/* === desktop nav-toggle hard hide: end === */

/* === mobile nav-toggle x-state fix: start === */
@media (max-width: 820px){
  html body #navToggle,
  html body .site-header .nav-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:4px !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    padding:0 !important;
    border-radius:14px !important;
    overflow:hidden !important;
  }

  html body #navToggle span,
  html body .site-header .nav-toggle span{
    display:block !important;
    width:18px !important;
    height:2px !important;
    min-height:2px !important;
    max-height:2px !important;
    margin:0 !important;
    border-radius:999px !important;
    background:#f6f6f7 !important;
    opacity:1 !important;
    transform:none !important;
    transform-origin:center center !important;
    transition:
      transform .22s ease,
      opacity .18s ease !important;
  }

  html body #navToggle.is-open,
  html body .site-header .nav-toggle.is-open{
    gap:0 !important;
  }

  html body #navToggle.is-open span:nth-child(1),
  html body .site-header .nav-toggle.is-open span:nth-child(1){
    transform:translateY(2px) rotate(45deg) !important;
  }

  html body #navToggle.is-open span:nth-child(2),
  html body .site-header .nav-toggle.is-open span:nth-child(2){
    opacity:0 !important;
    transform:scaleX(.2) !important;
  }

  html body #navToggle.is-open span:nth-child(3),
  html body .site-header .nav-toggle.is-open span:nth-child(3){
    transform:translateY(-2px) rotate(-45deg) !important;
  }
}

@media (max-width: 640px){
  html body #navToggle,
  html body .site-header .nav-toggle{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    max-width:38px !important;
    max-height:38px !important;
    gap:4px !important;
    border-radius:13px !important;
  }

  html body #navToggle span,
  html body .site-header .nav-toggle span{
    width:17px !important;
    height:2px !important;
  }

  html body #navToggle.is-open,
  html body .site-header .nav-toggle.is-open{
    gap:0 !important;
  }

  html body #navToggle.is-open span:nth-child(1),
  html body .site-header .nav-toggle.is-open span:nth-child(1){
    transform:translateY(2px) rotate(45deg) !important;
  }

  html body #navToggle.is-open span:nth-child(3),
  html body .site-header .nav-toggle.is-open span:nth-child(3){
    transform:translateY(-2px) rotate(-45deg) !important;
  }
}
/* === mobile nav-toggle x-state fix: end === */