/* BAI Explore Signature Header V1
   A permanent dark brand island in both themes. Header-only; no page/nav geometry outside Explore. */

body[data-page="explore"] .x2-top.x2-signature{
  position:fixed!important;
  top:10px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:min(calc(100% - 24px),736px)!important;
  height:72px!important;
  padding:8px 9px!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) 34px 44px!important;
  column-gap:6px!important;
  align-items:center!important;
  overflow:hidden!important;
  border-radius:27px!important;
  background:
    radial-gradient(circle at 18% -20%,rgba(85,223,238,.20),transparent 38%),
    radial-gradient(circle at 88% 130%,rgba(240,82,201,.16),transparent 38%),
    linear-gradient(145deg,rgba(7,31,55,.98),rgba(5,20,38,.96))!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 18px 45px rgba(6,23,43,.24),inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(22px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(135%)!important;
}

body[data-page="explore"] .x2-top.x2-signature::before{
  content:"";
  position:absolute;
  left:52px;
  right:52px;
  bottom:0;
  height:2px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,#55dfee 0%,#d9f7ff 34%,#ffc421 63%,#f052c9 100%);
  opacity:.95;
  box-shadow:0 0 16px rgba(85,223,238,.25);
  pointer-events:none;
}

body[data-page="explore"] .x2-top.x2-signature .x2-back{
  grid-column:1!important;
  justify-self:start!important;
}
body[data-page="explore"] .x2-top.x2-signature .brand{
  grid-column:2!important;
  min-width:0!important;
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:9px!important;
  color:#fff!important;
}
body[data-page="explore"] .x2-top.x2-signature .brand img{
  width:48px!important;
  height:30px!important;
  flex:0 0 auto!important;
  object-fit:contain!important;
  filter:brightness(0) invert(1)!important;
}
body[data-page="explore"] .x2-hot-brandcopy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}
body[data-page="explore"] .x2-hot-brandcopy b{
  display:block;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:12px!important;
  line-height:1!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  font-weight:950!important;
  white-space:nowrap;
}
body[data-page="explore"] .x2-hot-brandcopy span{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  color:#a8bac8!important;
  -webkit-text-fill-color:#a8bac8!important;
  font-size:7px!important;
  line-height:1.1!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  font-weight:900!important;
  white-space:nowrap;
}
body[data-page="explore"] .x2-hot-live-dot{
  width:5px;
  height:5px;
  flex:0 0 5px;
  border-radius:50%;
  background:#ff53c7;
  box-shadow:0 0 10px #ff53c7;
  animation:x2HotPulse 1.8s ease-in-out infinite;
}
@keyframes x2HotPulse{0%,100%{opacity:.62;transform:scale(.85)}50%{opacity:1;transform:scale(1.18)}}

body[data-page="explore"] .x2-top.x2-signature .round{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.075)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body[data-page="explore"] .x2-top.x2-signature .x2-back{
  font-size:28px!important;
  line-height:1!important;
}
body[data-page="explore"] .x2-top.x2-signature #soundPulse{
  grid-column:4!important;
  justify-self:end!important;
  position:relative!important;
  padding:0!important;
  font-size:20px!important;
  color:#07182b!important;
  -webkit-text-fill-color:#07182b!important;
  background:linear-gradient(145deg,#62e7f3 5%,#baf6ee 46%,#ffe47c 100%)!important;
  border-color:rgba(255,255,255,.28)!important;
  box-shadow:0 0 22px rgba(85,223,238,.17),inset 0 1px 0 rgba(255,255,255,.55)!important;
}

/* The runtime-injected theme switch becomes part of the signature grid rather than floating over the brand. */
body[data-page="explore"] .x2-top.x2-signature>.bai-theme-toggle{
  grid-column:3!important;
  justify-self:center!important;
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  border-radius:11px!important;
  margin:0!important;
  padding:0!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  color:#dff7fa!important;
  -webkit-text-fill-color:#dff7fa!important;
  box-shadow:none!important;
  font-size:14px!important;
}

/* Since the header is taller, give the hero breathing room. */
body[data-page="explore"] .x2{padding-top:102px!important}

@media(max-width:390px){
  body[data-page="explore"] .x2-top.x2-signature{
    grid-template-columns:41px minmax(0,1fr) 31px 41px!important;
    column-gap:4px!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }
  body[data-page="explore"] .x2-top.x2-signature .round{width:38px!important;height:38px!important;min-width:38px!important}
  body[data-page="explore"] .x2-top.x2-signature .brand{gap:7px!important}
  body[data-page="explore"] .x2-top.x2-signature .brand img{width:43px!important;height:27px!important}
  body[data-page="explore"] .x2-hot-brandcopy b{font-size:10.5px!important;letter-spacing:.12em!important}
  body[data-page="explore"] .x2-hot-brandcopy span{font-size:6.2px!important;letter-spacing:.11em!important}
}

@media(max-width:350px){
  body[data-page="explore"] .x2-hot-brandcopy span{display:none!important}
}

@media(prefers-reduced-motion:reduce){body[data-page="explore"] .x2-hot-live-dot{animation:none}}