.sop-site-header,
header.sop-site-header {
  position: fixed !important;
  z-index: 100 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 82px !important;
  padding: 0 clamp(16px, 3.5vw, 60px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  grid-template-columns: none !important;
  gap: 16px !important;
  background: rgba(5, 5, 6, .94) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #f4f1ec !important;
  font: 800 .7rem/1.2 Inter, Arial, sans-serif !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
.sop-site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 12px !important;
  color: inherit !important;
  text-decoration: none !important;
}
.sop-site-header .brand img, .sop-site-header .brand .brand-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}
.sop-site-header .brand .brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.08;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sop-site-header .brand .brand-line {
  display: block;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #fff;
  text-shadow: 0 0 10px rgba(237,27,53,0.5);
}
.sop-site-header .brand .brand-of {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #bbb;
  text-transform: lowercase;
  margin: 1px 0;
  text-shadow: none;
}
.sop-site-header .brand .brand-purity {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #fff;
  text-shadow: 0 0 10px rgba(237,27,53,0.5);
}
.sop-site-header nav {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(10px, 1.3vw, 20px) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.7rem !important;
}
.sop-site-header nav a { color: #aaa; text-decoration: none; transition: color .2s ease; white-space: nowrap; }
.sop-site-header nav a:hover,
.sop-site-header nav a[aria-current="page"] { color: #fff; }
.sop-site-header .topbar-user-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex: 0 0 auto !important; gap: 8px !important; margin-left: auto !important; }
.sop-site-header .topbar-user-actions .discord.small { border: 1px solid #ed1b35; padding: 8px 14px !important; color: #fff; text-decoration: none; white-space: nowrap; font-size: 0.66rem !important; display: inline-flex !important; align-items: center !important; }
.sop-site-header .mobile-discord,
.sop-site-header nav .mobile-discord { display: none !important; }
.sop-site-header .menu { display: none; border: 0; background: none; color: #fff; font-size: 1.4rem; cursor: pointer; padding: 6px 8px; line-height: 1; border-radius: 6px; order: -1 !important; margin-right: 8px !important; margin-left: 0 !important; }
.sop-site-header .menu:hover { color: #ed1b35; background: rgba(255,255,255,0.06); }
.sop-site-header + .streams-container { padding-top: calc(82px + 1.5rem); }

/* Collision Auto-Resize: The moment nav gets near the Discord button, nav folds into the 3-button (hamburger) menu on the left, keeping Discord button intact */
.sop-site-header.menu-mode .menu {
  display: block !important;
  flex: 0 0 auto !important;
  order: -1 !important;
  margin-right: 8px !important;
  margin-left: 0 !important;
}
.sop-site-header.menu-mode nav {
  position: absolute !important;
  top: 100% !important;
  left: 14px !important;
  right: 14px !important;
  transform: none !important;
  display: none !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 14px !important;
  margin-top: 4px !important;
  border: 1px solid #29272b !important;
  border-radius: 8px !important;
  background: rgba(11, 11, 13, .98) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  font-size: 0.75rem !important;
}
.sop-site-header.menu-mode nav.open {
  display: flex !important;
}
.sop-site-header.menu-mode nav a {
  padding: 12px !important;
  text-align: center !important;
}
.sop-site-header.menu-mode nav.open .mobile-discord {
  display: none !important;
}

@media (max-width: 1100px) {
  .sop-site-header .menu {
    display: block !important;
    flex: 0 0 auto !important;
    order: -1 !important;
    margin-right: 8px !important;
    margin-left: 0 !important;
  }
  .sop-site-header nav {
    position: absolute !important;
    top: 100% !important;
    left: 14px !important;
    right: 14px !important;
    transform: none !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 14px !important;
    margin-top: 4px !important;
    border: 1px solid #29272b !important;
    border-radius: 8px !important;
    background: rgba(11, 11, 13, .98) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.55) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    font-size: 0.75rem !important;
  }
  .sop-site-header nav.open {
    display: flex !important;
  }
  .sop-site-header nav a {
    padding: 12px !important;
    text-align: center !important;
  }
  .sop-site-header nav.open .mobile-discord {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .sop-site-header { height: 72px !important; padding-inline: 14px !important; }
  .sop-site-header nav { top: 72px !important; }
  .sop-site-header + .streams-container { padding-top: calc(72px + 1.5rem); }
}

@media (max-width: 560px) {
  .sop-site-header { gap: 8px !important; padding-inline: 10px !important; }
  .sop-site-header .brand { gap: 6px !important; font-size: .82rem !important; }
  .sop-site-header .brand img,
  .sop-site-header .brand .brand-logo { width: 36px !important; height: 36px !important; }
  .sop-site-header .brand .brand-line { font-size: 0.68rem !important; }
  .sop-site-header .brand .brand-of { font-size: 0.48rem !important; margin: 0 !important; }
  .sop-site-header .brand .brand-purity { font-size: 0.68rem !important; }
  .sop-site-header .topbar-user-actions { margin-left: auto !important; gap: 5px !important; }
  .sop-site-header .site-utility-controls { gap: 4px !important; }
  .sop-site-header .site-utility-icon { width: 34px !important; height: 34px !important; }
  .sop-site-header .shared-account-chip { min-height: 34px !important; padding: 3px 5px !important; }
  .sop-site-header .shared-account-avatar { width: 28px !important; height: 28px !important; flex-basis: 28px !important; }
  .sop-site-header .shared-account-copy { display: none !important; }
  .sop-site-header .menu { font-size: 1.15rem !important; padding: 4px !important; order: -1 !important; margin-right: 4px !important; margin-left: 0 !important; }
}

/* Canonical Standard of Purity Background Stencil & Texture */
.wallpaper,
.site-stencil {
  position: fixed;
  inset: 0;
  background: #050506 url("/standard_of_purity.png") center/contain no-repeat;
  opacity: .22;
  filter: none;
  pointer-events: none;
  z-index: 0;
}

.grain {
  position: fixed;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
}

.sop-site-header ~ #library {
  position: relative;
  z-index: 1;
  padding-top: calc(82px + 20px);
}
@media (max-width: 900px) {
  .sop-site-header ~ #library {
    padding-top: calc(72px + 16px);
  }
}

.sop-site-header ~ .profile-shell {
  margin-top: 82px;
  min-height: calc(100dvh - 82px);
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .sop-site-header ~ .profile-shell {
    margin-top: 72px;
    min-height: calc(100dvh - 72px);
  }
}