/* SoulShive 2026 — Unified Header
   One visual/menu system for homepage, server list, master server,
   admin and every page that uses includes/header.php. */

.ssg-header{
  position:sticky;top:0;z-index:1200;
  height:62px;
  background:rgba(4,7,18,.97);
  border-bottom:1px solid rgba(126,50,231,.58);
  box-shadow:0 8px 28px rgba(0,0,0,.25);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.ssg-header *{box-sizing:border-box}
.ssg-header a{text-decoration:none}
.ssg-inner{
  width:min(1580px,calc(100% - 26px));
  height:62px;margin:0 auto;
  display:flex;align-items:center;
  gap:10px;
}
.ssg-brand{
  flex:0 0 56px;width:56px;height:48px;
  display:flex;align-items:center;justify-content:flex-start;
  margin:0 4px 0 0!important;padding:0!important;
}
.ssg-brand img{
  display:block;width:50px!important;height:44px!important;
  max-width:50px!important;max-height:44px!important;
  object-fit:contain!important;object-position:left center!important;
  margin:0!important;padding:0!important;border-radius:0!important;
}
.ssg-nav{
  align-self:stretch;
  display:flex;align-items:stretch;
  flex:0 1 auto;min-width:0;
}
.ssg-nav>a{
  height:62px;padding:0 9px;
  display:flex;align-items:center;
  color:#c5cede;
  font:850 9px/1 Manrope,Inter,system-ui,sans-serif;
  letter-spacing:.035em;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:.16s ease;
}
.ssg-nav>a:hover,.ssg-nav>a.on{
  color:#fff;
  border-bottom-color:#a438ff;
  background:linear-gradient(180deg,transparent,rgba(150,51,255,.075));
}
.ssg-search{
  margin-left:auto;
  flex:0 1 235px;
  height:34px;
  min-width:155px;
  display:flex;align-items:center;gap:6px;
  border:1px solid #30466e;
  border-radius:7px;
  background:#071122;
  color:#7187a8;
  padding:0 9px;
}
.ssg-search input{
  min-width:0;width:100%;height:31px;
  border:0!important;outline:0!important;
  background:transparent!important;
  color:#aebbd0!important;
  padding:0!important;
  font:700 7.5px/1 Manrope,Inter,system-ui,sans-serif!important;
}
.ssg-actions{
  display:flex;align-items:center;gap:5px;
  flex:0 0 auto;
}
.ssg-small,.ssg-add{
  height:32px;padding:0 10px;
  border:1px solid #385079;border-radius:6px;
  background:#0a1427;color:#edf3fc;
  display:inline-flex;align-items:center;justify-content:center;
  font:950 7px/1 Manrope,Inter,system-ui,sans-serif;
  white-space:nowrap;
}
.ssg-small.ghost{background:#080f1e}
.ssg-add{
  background:linear-gradient(90deg,#7627ef,#a72fff);
  border-color:#b654ff;color:#fff;
  box-shadow:0 0 17px rgba(146,43,255,.23);
}
.ssg-icon{
  width:30px;height:30px;border-radius:6px;
  border:1px solid #2f4167;background:#091326;
  display:grid;place-items:center;position:relative;
  color:#eaf0fa;font-size:11px;
}
.ssg-icon b{
  position:absolute;right:-6px;top:-6px;
  min-width:15px;height:15px;padding:0 3px;
  border-radius:99px;background:#ef3d67;color:#fff;
  border:2px solid #050817;
  display:grid;place-items:center;
  font:950 6px/1 system-ui,sans-serif;
}
.ssg-user{
  height:32px;max-width:118px;padding:0 7px 0 4px;
  display:flex;align-items:center;gap:5px;
  border:1px solid #2f4167;border-radius:6px;background:#091326;
  color:#e8eef8;
}
.ssg-user img,.ssg-user>span{
  width:23px;height:23px;border-radius:50%;
  object-fit:cover;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#862dff,#27205f);
  color:#fff;font:950 8px/1 system-ui,sans-serif;
}
.ssg-user strong{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:850 6.8px/1 Manrope,Inter,system-ui,sans-serif;
}
.ssg-burger{display:none}
.ssg-mobile-account{display:none}

@media(max-width:1400px){
  .ssg-nav>a{padding:0 7px;font-size:8px}
  .ssg-search{flex-basis:180px}
  .ssg-user strong{display:none}.ssg-user{width:32px;padding:0 4px}
}
@media(max-width:1180px){
  .ssg-search{display:none}
  .ssg-nav>a{padding:0 6px;font-size:7.5px}
  .ssg-small{padding:0 7px}
}
@media(max-width:960px){
  .ssg-header{height:58px}
  .ssg-inner{height:58px}
  .ssg-brand{width:52px;flex-basis:52px}
  .ssg-brand img{width:46px!important;height:40px!important}
  .ssg-burger{
    order:2;display:inline-flex;
    width:34px;height:34px;margin-left:auto;
    border:1px solid #34496e;border-radius:7px;
    background:#091326;color:#fff;
    align-items:center;justify-content:center;
  }
  .ssg-nav{
    display:none;position:absolute;
    top:58px;left:9px;right:9px;
    height:auto;max-height:calc(100vh - 70px);
    overflow:auto;
    flex-direction:column;
    padding:7px;
    background:#060b16;
    border:1px solid #30446b;border-radius:10px;
    box-shadow:0 25px 55px rgba(0,0,0,.55);
  }
  .ssg-header.open .ssg-nav{display:flex}
  .ssg-nav>a{
    height:41px;min-height:41px;padding:0 12px;
    border-bottom:0;border-left:2px solid transparent;
    font-size:9px;
  }
  .ssg-nav>a.on{border-left-color:#a438ff;border-bottom:0}
  .ssg-actions{order:3;margin-left:0}
  .ssg-actions .ssg-icon,.ssg-actions .ssg-user,.ssg-actions .ssg-small{display:none}
  .ssg-add{height:32px;padding:0 9px;font-size:7px}
  .ssg-mobile-account{
    display:block;margin-top:6px;padding-top:6px;
    border-top:1px solid #1d2b46;
  }
  .ssg-mobile-account a{
    min-height:41px;padding:0 12px;margin:3px 0;
    border-radius:7px;
    display:flex;align-items:center;
    color:#dbe4f2;
    font:900 8.5px/1 Manrope,Inter,system-ui,sans-serif;
  }
  .ssg-mobile-account a.primary{
    color:#fff;background:linear-gradient(90deg,#7627ef,#a72fff);
  }
}
@media(max-width:520px){
  .ssg-inner{width:calc(100% - 14px);gap:6px}
  .ssg-brand{width:45px;flex-basis:45px}
  .ssg-brand img{width:40px!important;height:36px!important}
  .ssg-add{padding:0 7px;font-size:6.2px}
}