.brasta-site-nav{height:58px;position:sticky;top:0;z-index:1100;background:rgba(5,22,16,.96);border-bottom:1px solid rgba(255,255,255,.09);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
/* Match beta 6's native cutout surround (res/values/colors.xml: brasta_green).
   An opaque fill keeps the join seamless as content scrolls beneath the bar. */
html[data-brasta-native="android"] .brasta-site-nav{
  background:#071b13;
  backdrop-filter:none;
}
html[data-brasta-native="android"],
html[data-brasta-native="android"] body{
  background:#071b13;
}
.brasta-site-nav-inner{height:100%;max-width:1400px;margin:0 auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brasta-site-brand{display:inline-flex;align-items:center;color:#f7f2df;text-decoration:none;font-size:22px;font-weight:900;letter-spacing:.035em;line-height:1}
.brasta-site-brand:hover{color:#fff8e8}
.brasta-site-nav-account-space{width:260px;height:40px;flex:0 0 auto}

/* Account + Friends share one fixed global-nav control cluster. */
.account-nav-controls{
  position:fixed;
  top:9px;
  right:max(16px,env(safe-area-inset-right));
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-height:40px;
  max-width:min(330px,58vw);
}
.account-dock{position:static!important;top:auto!important;right:auto!important;bottom:auto!important;z-index:auto!important;min-height:40px;max-width:min(210px,42vw);padding:5px 11px 5px 5px!important;border-radius:10px!important;background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.14)!important;box-shadow:none!important;backdrop-filter:none!important;transition:background .15s ease,border-color .15s ease}
.account-dock:hover{background:rgba(255,255,255,.11)!important;border-color:rgba(216,183,94,.48)!important}
.account-dock>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-dock img,.account-dock .account-avatar-fallback{width:30px;height:30px}

/* The legacy topbar becomes a contextual match/status bar beneath the global
   app navigation. Brasta branding lives in the global nav, so don't repeat it. */
.topbar{top:58px!important;z-index:900!important}
.topbar>div:first-child>strong:first-child{display:none}
.topbar>div:first-child{display:flex;align-items:center;min-width:0}
.landing{min-height:calc(100vh - 58px)!important}
.privacy-cover{inset:122px 0 0!important}

@media(max-width:700px){
  .brasta-site-nav{height:52px}
  .brasta-site-nav-inner{padding:0 10px}
  .brasta-site-brand{font-size:19px}
  .brasta-site-nav-account-space{width:190px;height:38px}
  .account-nav-controls{top:6px;right:max(8px,env(safe-area-inset-right));gap:6px;max-width:62vw}
  .account-dock{min-height:40px;max-width:46vw;padding-right:9px!important}
  .account-dock img,.account-dock .account-avatar-fallback{width:28px;height:28px}
  .account-dock>span:last-child{font-size:12px}
  .topbar{top:52px!important}
  .landing{min-height:calc(100vh - 52px)!important}
  .privacy-cover{inset:116px 0 0!important}
}