.topnav{
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-areas:'brand controls' !important;
  align-items:center !important;
  gap:10px !important;
  overflow:visible !important;
}
.topnav .brand{
  grid-area:brand !important;
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  max-width:max-content;
}
.topnav .brand a{
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:0 !important;
  max-width:max-content;
  flex:0 0 auto !important;
  text-decoration:none !important;
}
.topnav .brand img{
  height:42px !important;
  width:auto !important;
  max-width:none !important;
  display:block !important;
  flex:0 0 auto !important;
}
.topnav .navlinks{
  grid-area:controls !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-self:stretch !important;
  justify-content:center !important;
  gap:8px !important;
  min-width:0 !important;
}
body.admin-nav-page .topnav .navlinks{
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:nowrap !important;
}
.topnav .nav-seg,
.topnav .subnav-seg{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  max-width:100% !important;
  min-width:0 !important;
}
.topnav .nav-seg{
  white-space:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  flex:0 1 auto !important;
  scrollbar-width:none;
}
.topnav .nav-seg::-webkit-scrollbar{display:none}
.topnav .subnav-seg{
  justify-content:flex-end !important;
  flex-wrap:wrap !important;
  width:100% !important;
  text-align:right !important;
}
.topnav .nav-link,
.topnav .subnav-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
  text-decoration:none !important;
}
.topnav .nav-icon{
  width:16px !important;
  flex:0 0 16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.topnav .nav-pro-pill,
.topnav .burnboard-pro-pill{
  text-decoration:none !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
}
.topnav .debug-plan-toggle,
.topnav [data-debug-plan]{
  display:none !important;
}
body.debug-plan-visible .topnav .debug-plan-toggle{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 0 2px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  flex:0 0 auto !important;
}
body.debug-plan-visible .topnav .debug-plan-label,
body.debug-plan-visible .topnav .debug-plan-options,
body.debug-plan-visible .topnav .debug-plan-option{
  display:inline-flex !important;
}
body.debug-plan-visible .topnav .debug-plan-label{
  align-items:center !important;
  justify-content:center !important;
  min-height:24px !important;
  padding:0 9px !important;
  border-radius:999px !important;
  border:1px solid rgba(251,146,60,.24) !important;
  background:rgba(251,146,60,.10) !important;
  color:#ffd7ba !important;
  font-size:9px !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
body.debug-plan-visible .topnav .debug-plan-options{
  align-items:center !important;
  gap:4px !important;
  padding:3px !important;
  border-radius:999px !important;
  border:1px solid rgba(148,163,184,.16) !important;
  background:rgba(255,255,255,.03) !important;
}
body.debug-plan-visible .topnav .debug-plan-option{
  align-items:center !important;
  justify-content:center !important;
  min-height:22px !important;
  padding:0 9px !important;
  margin:0 !important;
  border-radius:999px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:#dbe7fb !important;
  font-size:9px !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  box-shadow:none !important;
  white-space:nowrap !important;
}
body.debug-plan-visible .topnav .debug-plan-option.active{
  border-color:rgba(56,189,248,.34) !important;
  background:rgba(56,189,248,.12) !important;
  color:#f8fbff !important;
}
.topnav .nav-link.account-link{
  align-items:center !important;
  min-width:0 !important;
}
.topnav .nav-link.account-link .burnboard-account-status{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  max-width:180px !important;
  min-width:0 !important;
  overflow:hidden !important;
}
.topnav .nav-link.account-link .burnboard-account-status .avatar{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  flex:0 0 20px !important;
  overflow:hidden !important;
  border-radius:999px !important;
}
.topnav .nav-link.account-link .burnboard-account-status .avatar img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.topnav .nav-link.account-link .burnboard-account-status .meta{
  min-width:0 !important;
  overflow:hidden !important;
}
.topnav .nav-link.account-link .burnboard-account-status .name{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.topnav .nav-link.account-link .burnboard-account-status.compact{
  max-width:180px !important;
  gap:8px !important;
}
.topnav .nav-link.account-link .burnboard-account-status.compact .avatar{
  display:inline-flex !important;
}
.topnav .nav-link.account-link .burnboard-account-status.compact .meta{
  display:grid !important;
  align-items:initial !important;
  min-width:0 !important;
}
.topnav .nav-link.account-link .burnboard-account-status.compact .state{
  display:block !important;
}
.topnav .navlinks{
  flex-wrap:nowrap !important;
}
.topnav .navlinks > .nav-seg{
  flex:0 1 auto !important;
}
@media (max-width:780px){
  .topnav{
    grid-template-columns:44px minmax(0,1fr) 44px !important;
    grid-template-areas:'sidebar brand menu' 'controls controls controls' !important;
    align-items:center !important;
    gap:10px !important;
  }
  .topnav .brand{
    justify-self:center !important;
    width:100% !important;
    max-width:none !important;
    justify-content:center !important;
  }
  .topnav .brand a{
    width:100% !important;
    max-width:none !important;
    justify-content:center !important;
  }
  .topnav .brand img{
    height:44px !important;
  }
  .topnav .navlinks{
    display:none !important;
    width:100% !important;
    align-items:stretch !important;
    gap:10px !important;
    margin-top:4px !important;
    padding-top:10px !important;
    border-top:1px solid rgba(148,163,184,.16) !important;
  }
  body.mobile-nav-open .topnav .navlinks{display:flex !important}
  .topnav .nav-seg,
  .topnav .subnav-seg{
    width:100% !important;
    justify-content:flex-start !important;
    flex-direction:column !important;
    padding:8px !important;
    gap:8px !important;
    overflow:visible !important;
  }
  .topnav .nav-link,
  .topnav .subnav-link,
  .topnav .nav-link.account-link{
    width:100% !important;
    min-height:44px !important;
    justify-content:flex-start !important;
    padding:0 14px !important;
    border-radius:12px !important;
  }
}