.site-header {
  position: sticky; top: 12px; z-index: 40;
  box-sizing: border-box;
  width: min(1280px, calc(100% - 40px)); min-height: 56px;
  margin: 18px auto 18px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--void, #05040c) 74%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line, rgba(255,255,255,.08)); border-radius: 12px;
}
.site-header .brand { display: flex; align-items: center; gap: 11px; margin-bottom: 0; color: var(--text, #f4f2ff); text-decoration: none; }
.site-header .brand .mark { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; box-shadow: 0 0 24px rgba(135,105,225,.5); }
.site-header .brand .mark img { width: 100%; height: 100%; display: block; }
.site-header .brand .name { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.site-header-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.site-header-nav a { color: var(--muted, #9a96b8); font-size: 14px; font-weight: 550; white-space: nowrap; text-decoration: none; transition: color .16s ease; }
.site-header-nav a:hover, .site-header-nav a[aria-current="page"] { color: var(--text, #f4f2ff); }
@media (max-width: 1100px) { .site-header { padding-right: 110px; } }
@media (max-width: 720px) {
  .site-header { width: calc(100% - 32px); margin: 16px auto 16px; gap: 12px 20px; padding-right: 16px; }
  .site-header-nav { margin-left: 0; gap: 10px 16px; flex-wrap: wrap; min-width: 0; }
  .site-header-nav a { font-size: 13px; }
}