.topbar .account{position:relative;display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;padding:6px 8px;border-radius:12px;color:#fff}
.topbar .account:hover,.topbar .account.open{background:#10213a}
.topbar .account-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;overflow:hidden;flex:none;background:linear-gradient(135deg,#247cff,#8b5cff);border:2px solid #35577e;font-weight:800}
.topbar .account-avatar img{width:100%;height:100%;object-fit:cover}
.topbar .account-info{line-height:1.15;font-size:12px}
.topbar .account-info small{display:block;color:#8fa8c2;font-size:10px;margin-top:3px}
.topbar .account-chevron{color:#8fa8c2;font-size:12px;transition:transform .15s}
.topbar .account.open .account-chevron{transform:rotate(180deg)}
.sbh-account-menu{position:absolute;right:0;top:calc(100% + 9px);width:210px;padding:7px;background:#091522;border:1px solid #29425f;border-radius:13px;box-shadow:0 18px 45px #0009;z-index:9999;display:none}
.sbh-account-menu.open{display:block}
.sbh-account-menu a,.sbh-account-menu button{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;padding:10px 11px;border:0;border-radius:9px;background:transparent;color:#dbe9f7;text-decoration:none;font:inherit;font-size:12px;cursor:pointer;text-align:left}
.sbh-account-menu a:hover,.sbh-account-menu button:hover{background:#132a48;color:#fff}
.sbh-account-menu .menu-divider{height:1px;background:#20344d;margin:6px 3px}
.sbh-account-menu .logout{color:#ff9eae}
@media(max-width:700px){
 .topbar .account-info{display:none}
 .topbar .account{padding:4px}
 .sbh-account-menu{right:0;width:190px}
}


/* Top-bar notification bell */
.topbar .notification-link{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin-left:auto;
  flex:none;
  border:1px solid transparent;
  border-radius:11px;
  color:#dbe9f7;
  text-decoration:none;
  background:transparent;
  font-size:20px;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.topbar .notification-link:hover,
.topbar .notification-link.active{
  background:#10213a;
  border-color:#29425f;
  color:#fff;
}
.topbar .notification-icon{line-height:1}
.topbar .notification-badge{
  position:absolute;
  top:3px;
  right:3px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  box-sizing:border-box;
  display:none;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#ff4f70;
  color:#fff;
  font-size:9px;
  line-height:16px;
  font-weight:800;
  border:2px solid #091522;
}
.topbar .notification-badge.show{display:flex}
@media(max-width:700px){
  .topbar .notification-link{width:38px;height:38px;font-size:19px}
}

/* Global SkyBlockHaven top-bar dropdown navigation */
.topbar{
  overflow:visible!important;
  position:relative;
  z-index:1000;
}
.topbar .main-nav{
  display:flex;
  align-items:center;
  gap:3px;
  flex:1;
  min-width:0;
  overflow:visible;
}
.main-nav>a,
.main-nav .nav-drop-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:10px 11px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#d4dcf4;
  font:inherit;
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  position:relative;
}
.main-nav>a:hover,
.main-nav>a.active,
.nav-dropdown.open>.nav-drop-btn,
.nav-dropdown.has-active>.nav-drop-btn{
  background:#172d68;
  color:#fff;
  box-shadow:inset 0 -2px #62a5ff;
}
.nav-dropdown{
  position:relative;
  display:flex;
  align-items:center;
  z-index:1001;
}
.nav-drop-btn span{
  font-size:11px;
  color:#8fa8c2;
  transition:transform .15s ease;
}
.nav-dropdown.open .nav-drop-btn span{
  transform:rotate(180deg);
}
.nav-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:210px;
  padding:7px;
  background:#091522;
  border:1px solid #29425f;
  border-radius:13px;
  box-shadow:0 18px 45px #0009;
  z-index:100000;
  display:none;
  pointer-events:auto;
}
.nav-dropdown.open .nav-menu{
  display:block;
}
.nav-menu a{
  display:flex;
  align-items:center;
  width:100%;
  box-sizing:border-box;
  padding:10px 11px;
  border-radius:9px;
  color:#dbe9f7;
  font-size:12px;
  text-decoration:none;
  white-space:nowrap;
}
.nav-menu a:hover,
.nav-menu a.active{
  background:#132a48;
  color:#fff;
}

/* Account dropdown */
.topbar .account{
  position:relative;
  z-index:1002;
}
.sbh-account-menu{
  z-index:100001;
  pointer-events:auto;
}
.sbh-account-menu.open{
  display:block;
}

@media(max-width:1100px){
  .topbar{gap:10px}
  .brand{min-width:145px}
  .main-nav>a,.main-nav .nav-drop-btn{padding:9px 7px;font-size:11px}
}
@media(max-width:900px){
  .topbar{
    height:auto;
    min-height:58px;
    flex-wrap:wrap;
  }
  .topbar .main-nav{
    order:3;
    flex-basis:100%;
    overflow-x:auto;
    overflow-y:visible;
    padding-bottom:3px;
    scrollbar-width:none;
  }
  .topbar .main-nav::-webkit-scrollbar{display:none}
  .main-nav>a,.main-nav .nav-drop-btn{
    font-size:11px;
    padding:8px 9px;
  }
}
@media(max-width:600px){
  .topbar .main-nav{
    display:flex;
    gap:2px;
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
  }
  .main-nav>a,.main-nav .nav-drop-btn{
    flex:0 0 auto;
    font-size:10px;
    padding:8px 7px;
  }
  .nav-menu{
    position:fixed;
    top:70px;
    left:8px;
    right:8px;
    width:auto;
    min-width:0;
    max-height:calc(100vh - 85px);
    overflow:auto;
  }
  .topbar .account-info{display:none}
  .topbar .account{padding:4px}
}

/* Guest authentication controls. These are rendered only after the server
   confirms there is no logged-in session. */
.topbar .guest-auth-links{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
  flex:none;
}
.topbar .guest-auth-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 13px;
  box-sizing:border-box;
  border-radius:10px;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.topbar .guest-login-btn{
  color:#dbe9f7;
  border:1px solid #29425f;
  background:#10213a;
}
.topbar .guest-login-btn:hover{background:#172d68;color:#fff}
.topbar .guest-register-btn{
  color:#fff;
  border:1px solid #4b73ff;
  background:linear-gradient(135deg,#247cff,#8b5cff);
}
.topbar .guest-register-btn:hover{filter:brightness(1.08)}
@media(max-width:700px){
  .topbar .guest-auth-links a{min-height:36px;padding:0 10px;font-size:11px}
}

/* Responsive navigation: one shared mobile/tablet behavior for every page. */
.mobile-nav-toggle{display:none;border:1px solid #3559a5;background:#0b1733;color:#fff;border-radius:9px;width:42px;height:38px;padding:8px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;flex:none}
.mobile-nav-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:#dbe7ff;transition:.18s}
.mobile-nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-nav-toggle.open span:nth-child(2){opacity:0}
.mobile-nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
  .topbar{gap:10px;flex-wrap:wrap;height:auto;min-height:58px}
  .mobile-nav-toggle{display:flex;margin-left:auto}
  .main-nav{display:none;order:10;flex-basis:100%;width:100%;flex-direction:column;align-items:stretch!important;gap:4px!important;padding:8px 0 4px}
  .main-nav.mobile-open{display:flex}
  .main-nav>a,.main-nav .nav-dropdown{width:100%;box-sizing:border-box}
  .main-nav>a{display:block}
  .main-nav .nav-drop-btn{text-align:left;width:100%}
  .main-nav .nav-menu{position:static;width:auto;margin:2px 0 4px;box-shadow:none}
  .account{order:11;max-width:calc(100% - 52px)}
}
@media(max-width:520px){.brand{min-width:0}.brand-logo{max-width:150px}.account-info{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}