/* NavBar Component Lock v1
   Dedicated navbar ownership layer. Loaded after page skins so page-level CSS cannot
   accidentally recolor or resize the global header. */

:root{
  --navbar-rail-max: 1600px;
  --navbar-edge-glow: rgba(159, 87, 255, .54);
  --navbar-purple: rgba(111, 48, 174, .34);
  --navbar-purple-strong: rgba(144, 69, 255, .34);
  --navbar-blue: rgba(32, 62, 112, .22);
}

body:not(.stream-overlay-mode) > .site-header-shell{
  box-sizing:border-box !important;
  width:min(var(--navbar-rail-max), 100vw) !important;
  max-width:var(--navbar-rail-max) !important;
  margin:8px auto 10px !important;
  padding:0 !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .topbar{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  min-height:78px !important;
  margin:0 !important;
  padding:12px 16px !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  border:1px solid rgba(151, 83, 255, .64) !important;
  border-radius:18px !important;
  background:
    radial-gradient(circle at 4% 6%, rgba(166, 91, 255, .34), transparent 30%),
    radial-gradient(circle at 52% -22%, rgba(108, 64, 190, .20), transparent 44%),
    linear-gradient(90deg, rgba(36, 20, 77, .96), rgba(12, 18, 35, .96) 48%, rgba(7, 12, 25, .98)) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.40),
    0 0 30px rgba(135, 77, 255, .20),
    inset 0 1px 0 rgba(255,255,255,.11) !important;
  backdrop-filter:blur(12px) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .site-branding{
  min-width:250px !important;
  height:58px !important;
  padding:8px 12px !important;
  border:1px solid rgba(255,255,255,.085) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), rgba(20, 13, 42, .72) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .site-branding:hover{
  border-color:rgba(185, 132, 255, .42) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.026)), rgba(27, 16, 58, .86) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .site-logo-shell{
  width:44px !important;
  height:44px !important;
  border:1px solid rgba(180, 119, 255, .60) !important;
  border-radius:14px !important;
  background:
    radial-gradient(circle at 32% 20%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(145deg, rgba(155,84,255,.56), rgba(57,32,119,.84)) !important;
  color:#f4e9ff !important;
  box-shadow:0 0 22px rgba(154, 87, 255, .44), inset 0 0 20px rgba(255,255,255,.08) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .site-title{
  color:#fff7ee !important;
  font-weight:900 !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .site-subtitle{
  color:#c784ff !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .page-nav{
  flex:1 1 auto !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
  padding:0 10px !important;
  overflow:visible !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:10px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)), rgba(9, 12, 24, .78) !important;
  color:rgba(235,230,255,.78) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 10px 22px rgba(0,0,0,.22) !important;
  position:relative !important;
  overflow:visible !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link:hover,
body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link:focus-visible,
body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link.active{
  border-color:rgba(182, 118, 255, .72) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(215, 109, 255, .34), transparent 52%),
    linear-gradient(180deg, rgba(138, 72, 245, .40), rgba(39, 24, 85, .70)) !important;
  color:#fff !important;
  box-shadow:0 0 24px rgba(146, 87, 255, .36), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-icon{
  margin:0 !important;
  font-size:16px !important;
  line-height:1 !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link .nav-label-text{
  position:absolute !important;
  left:50% !important;
  top:calc(100% + 8px) !important;
  width:max-content !important;
  max-width:220px !important;
  padding:6px 9px !important;
  border:1px solid rgba(168, 100, 255, .42) !important;
  border-radius:999px !important;
  background:rgba(13, 10, 26, .97) !important;
  color:#f6edff !important;
  box-shadow:0 16px 34px rgba(0,0,0,.48), 0 0 18px rgba(139, 83, 255, .22) !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  opacity:0 !important;
  transform:translate(-50%, -4px) !important;
  pointer-events:none !important;
  transition:opacity .15s ease, transform .15s ease !important;
  z-index:40 !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link:hover .nav-label-text,
body:not(.stream-overlay-mode) > .site-header-shell .page-nav .nav-link:focus-visible .nav-label-text{
  opacity:1 !important;
  transform:translate(-50%, 0) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .topbar-actions{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}


body:not(.stream-overlay-mode) > .site-header-shell .mini-profile-banner{
  display:none !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .mini-profile{
  min-width:220px !important;
  height:52px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:13px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)), rgba(5, 9, 20, .74) !important;
  color:#fff7ee !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .sidebar-toggle,
body:not(.stream-overlay-mode) > .site-header-shell .logout-link{
  min-height:42px !important;
  padding:0 14px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), rgba(8, 11, 22, .82) !important;
  color:#fff7ee !important;
  font-weight:900 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .mini-profile:hover,
body:not(.stream-overlay-mode) > .site-header-shell .sidebar-toggle:hover,
body:not(.stream-overlay-mode) > .site-header-shell .logout-link:hover{
  border-color:rgba(177, 111, 255, .48) !important;
  background:linear-gradient(180deg, rgba(135, 72, 245, .22), rgba(255,255,255,.018)), rgba(8, 11, 22, .90) !important;
}

body:not(.stream-overlay-mode) > .site-header-shell .site-update-ticker{
  margin-top:8px !important;
  border:1px solid rgba(159, 87, 255, .36) !important;
  border-radius:14px !important;
  background:linear-gradient(90deg, rgba(20, 13, 42, .90), rgba(8, 11, 22, .92)) !important;
  box-shadow:0 14px 38px rgba(0,0,0,.22) !important;
}

@media (max-width:1180px){
  body:not(.stream-overlay-mode) > .site-header-shell .topbar{flex-wrap:wrap !important;}
  body:not(.stream-overlay-mode) > .site-header-shell .site-branding{flex:1 1 260px !important;}
  body:not(.stream-overlay-mode) > .site-header-shell .page-nav{order:3 !important; flex-basis:100% !important;}
}

@media (max-width:640px){
  body:not(.stream-overlay-mode) > .site-header-shell{width:min(100% - 18px, var(--navbar-rail-max)) !important;}
  body:not(.stream-overlay-mode) > .site-header-shell .site-branding,
  body:not(.stream-overlay-mode) > .site-header-shell .mini-profile{min-width:0 !important; width:100% !important;}
  body:not(.stream-overlay-mode) > .site-header-shell .topbar-actions{width:100% !important; justify-content:space-between !important; flex-wrap:wrap !important;}
}