.site-switch-panel{
  max-width:1200px;
  margin:18px auto 12px;
  padding:0 20px;

  position:sticky;
  top:12px;
  z-index:2000;
}

.site-switch-panel-inner{
  background:#2a2a2a;
  border:1px solid #444;
  border-radius:18px;
  box-shadow:0 12px 34px rgba(0,0,0,.65);
  padding:14px 14px 12px;
}

.site-switch-panel-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#bb86fc;
  font-weight:900;
  letter-spacing:.3px;
  margin-bottom:10px;
  text-transform:uppercase;
  font-size:.92rem;
}

.site-switchbar{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.site-switch-btn{
  background:#1f1f1f;
  color:#e0e0e0;
  border:2px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:12px 18px;
  font-weight:900;
  font-size:1.02rem;

  display:inline-flex;
  align-items:center;
  gap:10px;

  box-shadow:0 8px 22px rgba(0,0,0,.45);
  transition:.15s transform,.15s background,.15s border,.15s box-shadow;
  user-select:none;
  text-decoration:none;
  touch-action:manipulation;
}

.site-switch-btn i{ font-size:1.05rem; opacity:.95; }

.site-switch-btn:hover{
  background:#2b2b2b;
  border-color:rgba(255,255,255,.26);
}

.site-switch-btn:active{ transform:scale(.98); }

.site-switch-btn.active{
  background:linear-gradient(135deg, rgba(100,181,246,.32), rgba(187,134,252,.28));
  border-color:#64b5f6;
  color:#fff;
  box-shadow:0 0 0 2px rgba(100,181,246,.20) inset, 0 10px 26px rgba(0,0,0,.55);
}

@media (max-width:520px){
  .site-switch-panel{ padding:0 12px; top:8px; }
  .site-switch-btn{ padding:10px 14px; font-size:.96rem; border-radius:13px; }
}

:root { --nav-gap: 16px; }

.site-switch-panel { margin-bottom: var(--nav-gap) !important; }

#site-nav + * { margin-top: var(--nav-gap) !important; }

:root { --nav-gap: 16px; }
.nav-spacer { height: var(--nav-gap); }