/* OURBANG COMMON NAV — extracted from FINAL INDEX (2026-09-20)
   Use this file AFTER each page's own inline/page CSS.
*/
:root{
  --ob-safe-top:env(safe-area-inset-top,0px);
  --ob-safe-right:env(safe-area-inset-right,0px);
  --ob-safe-bottom:env(safe-area-inset-bottom,0px);
  --ob-safe-left:env(safe-area-inset-left,0px);
}
html,body{max-width:100%;overflow-x:hidden}
button,a{touch-action:manipulation}

.topbar{
  background:rgba(5,7,12,.88)!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.12);
}
.nav{gap:24px!important}
.brand{
  font-weight:820!important;
  letter-spacing:.21em!important;
}
.links{gap:2px!important}
.links a{
  padding:10px 11px!important;
  border-radius:10px!important;
  font-size:11px!important;
  letter-spacing:.075em!important;
}
.langs{gap:5px!important}
.langBtn{
  width:38px!important;
  height:36px!important;
  border-radius:11px!important;
  font-size:10px!important;
}
.langBtn[data-lang="zh"]{width:44px!important}
.menuBtn{
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:12px!important;
}

@media (min-width:641px) and (max-width:1180px){
  :root{--header:78px}
  .wrap{width:min(calc(100% - 34px),var(--max))!important}
  .links{display:none!important}
  .menuBtn{display:block!important;width:44px!important;height:44px!important}
  .langBtn{width:40px!important;height:40px!important}
  .langBtn[data-lang="zh"]{width:46px!important}
  .mobilePanel{
    position:fixed!important;
    z-index:100!important;
    inset:var(--header) 0 0!important;
    padding:28px max(24px,calc(24px + var(--ob-safe-left))) max(28px,calc(28px + var(--ob-safe-bottom)))!important;
    background:rgba(5,7,12,.985)!important;
    overflow:auto!important;
  }
  .mobilePanel.open{display:block!important}
  .mobilePanel a{
    display:flex!important;
    min-height:58px!important;
    align-items:center!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    font-size:20px!important;
    font-weight:700!important;
    letter-spacing:-.02em!important;
  }
}

@media (max-width:640px){
  :root{--header:68px}
  .wrap{width:calc(100% - 24px)!important}
  .nav{
    height:var(--header)!important;
    grid-template-columns:auto 1fr auto!important;
    gap:8px!important;
  }
  .brand{
    font-size:18px!important;
    letter-spacing:.20em!important;
  }
  .links{display:none!important}
  .langs{
    gap:2px!important;
    margin-left:auto!important;
  }
  .langBtn{
    width:31px!important;
    min-width:31px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0!important;
    border:0!important;
    border-radius:9px!important;
    background:transparent!important;
    color:rgba(255,255,255,.42)!important;
    font-size:9px!important;
  }
  .langBtn[data-lang="zh"]{width:36px!important;min-width:36px!important}
  .langBtn.active{
    color:#fff!important;
    background:rgba(255,255,255,.10)!important;
  }
  .menuBtn{
    display:block!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    border:0!important;
    border-radius:0!important;
  }
  .menuBtn span{width:20px!important}
  .mobilePanel{
    position:fixed!important;
    z-index:100!important;
    inset:var(--header) 0 0!important;
    padding:24px max(20px,calc(20px + var(--ob-safe-left))) max(28px,calc(28px + var(--ob-safe-bottom)))!important;
    background:rgba(5,7,12,.985)!important;
    overflow:auto!important;
  }
  .mobilePanel.open{display:block!important}
  .mobilePanel a{
    display:flex!important;
    min-height:54px!important;
    align-items:center!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    font-size:20px!important;
    font-weight:700!important;
  }
}

@media (max-width:932px) and (max-height:500px) and (orientation:landscape){
  :root{--header:56px}
  .nav{height:56px!important}
  .brand{font-size:17px!important}
  .langs .langBtn{height:36px!important}
}