.discord-header-link{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #ffffff16;
  border-radius:12px;
  background:#5865f214;
  color:#e0e3ff;
  box-shadow:0 8px 24px #0002;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.discord-header-link:hover{
  transform:translateY(-2px);
  background:#5865f228;
  border-color:#7a83f766;
  box-shadow:0 10px 28px #5865f21f;
}
.discord-header-link svg{width:24px;height:24px;display:block}

/* Discord belongs inside the existing account area. This preserves the
   original brand / nav / account spacing instead of adding a fourth header column. */
.site-header .account-area{
  align-items:center;
  gap:12px;
}

@media(max-width:780px){
  .site-header .account-area{
    order:1!important;
    margin-left:auto!important;
    flex:0 1 auto!important;
    gap:7px!important;
  }
  .site-header .discord-header-link{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:11px;
  }
  .site-header .discord-header-link svg{width:22px;height:22px}

  /* Keep the drawer compact instead of stretching across the whole phone. */
  .site-header .nav{
    left:auto!important;
    right:var(--mobile-gutter)!important;
    width:min(230px,calc(100vw - 28px))!important;
    padding:7px!important;
    gap:2px!important;
  }
  .site-header .nav-link{
    min-height:40px!important;
    padding:8px 10px!important;
  }
}
@media(max-width:350px){
  .site-header .discord-header-link{width:38px;height:38px;flex-basis:38px}
  .site-header .discord-header-link svg{width:20px;height:20px}
}