/* Pop Quest UI layer: Stage 5 navigation. */
:root{
  --pq-ui-nav-height: 82px;
  --pq-ui-nav-max: 1180px;
  --pq-ui-nav-pill: 999px;
}

#pqv3-app .pq-top,
#pqv3-player .pq-top,
#pqv3-app .pq-product-top,
#pqv3-player .pq-product-top,
#pqv3-app .pq-unified-top,
#pqv3-player .pq-unified-top,
#pqv3-player .pq-player-app-header{
  min-height:var(--pq-ui-nav-height)!important;
  padding:12px max(var(--pq-ui-page-gutter),calc((100vw - var(--pq-ui-nav-max)) / 2))!important;
  grid-template-columns:minmax(154px,1fr) auto minmax(154px,1fr)!important;
  gap:18px!important;
  background:rgba(255,255,255,.86)!important;
  border-bottom:1px solid var(--pq-ui-line)!important;
  box-shadow:0 8px 28px rgba(17,19,24,.055)!important;
  backdrop-filter:blur(22px) saturate(1.2)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.2)!important;
  overflow:visible!important;
}

#pqv3-app .pq-top-left,
#pqv3-player .pq-top-left,
#pqv3-app .pq-top-centre,
#pqv3-player .pq-top-centre,
#pqv3-app .pq-top-right,
#pqv3-player .pq-top-right{
  min-width:0!important;
  align-items:center!important;
}

#pqv3-app .pq-top-left,
#pqv3-player .pq-top-left{justify-self:start!important;display:flex!important;}
#pqv3-app .pq-top-centre,
#pqv3-player .pq-top-centre{justify-self:center!important;display:flex!important;overflow:visible!important;}
#pqv3-app .pq-top-right,
#pqv3-player .pq-top-right{justify-self:end!important;display:flex!important;gap:10px!important;}

#pqv3-app .pq-brand,
#pqv3-player .pq-brand{
  display:inline-flex!important;
  align-items:center!important;
  min-height:54px!important;
  padding:6px 4px!important;
  border-radius:18px!important;
}
#pqv3-app .pq-brand-logo,
#pqv3-player .pq-brand-logo{
  display:block!important;
  width:auto!important;
  max-width:152px!important;
  max-height:44px!important;
  object-fit:contain!important;
}

#pqv3-app .pq-main-tabs,
#pqv3-player .pq-main-tabs,
#pqv3-app .pq-app-tabs,
#pqv3-player .pq-app-tabs,
#pqv3-player .pq-player-nav{
  height:54px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  padding:5px!important;
  border:1px solid var(--pq-ui-line)!important;
  border-radius:var(--pq-ui-nav-pill)!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:var(--pq-ui-shadow-soft)!important;
  white-space:nowrap!important;
  overflow:visible!important;
}

#pqv3-app .pq-main-tabs a,
#pqv3-player .pq-main-tabs a,
#pqv3-app .pq-app-tabs a,
#pqv3-player .pq-app-tabs a,
#pqv3-player .pq-player-nav a{
  min-height:44px!important;
  padding:0 14px!important;
  border-radius:var(--pq-ui-nav-pill)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  color:var(--pq-ui-muted)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  font-size:14px!important;
  font-weight:750!important;
  letter-spacing:-.01em!important;
  line-height:1!important;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
#pqv3-app .pq-main-tabs a:hover,
#pqv3-player .pq-main-tabs a:hover,
#pqv3-app .pq-app-tabs a:hover,
#pqv3-player .pq-app-tabs a:hover{
  color:var(--pq-ui-purple)!important;
  background:var(--pq-ui-purple-soft)!important;
}
#pqv3-app .pq-main-tabs a.active,
#pqv3-player .pq-main-tabs a.active,
#pqv3-app .pq-app-tabs a.active,
#pqv3-player .pq-app-tabs a.active,
#pqv3-player .pq-player-nav a.active{
  color:var(--pq-ui-purple)!important;
  background:var(--pq-ui-purple-soft)!important;
  box-shadow:inset 0 0 0 1px rgba(139,63,244,.10)!important;
}
#pqv3-app .pq-tab-ico,
#pqv3-player .pq-tab-ico{
  width:20px!important;
  height:20px!important;
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 20px!important;
  color:currentColor!important;
}
#pqv3-app .pq-tab-ico svg,
#pqv3-player .pq-tab-ico svg,
#pqv3-app .pq-create-menu-icon svg,
#pqv3-player .pq-create-menu-icon svg{
  width:20px!important;
  height:20px!important;
  display:block!important;
}

#pqv3-app .pq-bell,
#pqv3-player .pq-bell,
#pqv3-app .pq-account-link,
#pqv3-player .pq-account-link,
#pqv3-app .pq-header-create,
#pqv3-player .pq-header-create{
  min-width:46px!important;
  height:46px!important;
  min-height:46px!important;
  border-radius:16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid var(--pq-ui-line)!important;
  box-shadow:none!important;
  line-height:1!important;
  flex:0 0 auto!important;
}
#pqv3-app .pq-bell,
#pqv3-player .pq-bell,
#pqv3-app .pq-account-link,
#pqv3-player .pq-account-link{
  position:relative!important;
  background:#fff!important;
  color:var(--pq-ui-purple)!important;
  padding:0 12px!important;
}
#pqv3-app .pq-bell-icon,
#pqv3-player .pq-bell-icon{width:20px!important;height:20px!important;display:grid!important;place-items:center!important;}
#pqv3-app .pq-bell svg,
#pqv3-player .pq-bell svg{width:20px!important;height:20px!important;fill:currentColor!important;display:block!important;}
#pqv3-app .pq-bell-count,
#pqv3-player .pq-bell-count{
  position:absolute!important;
  top:5px!important;
  right:5px!important;
  min-width:16px!important;
  height:16px!important;
  padding:0 4px!important;
  border-radius:999px!important;
  background:#ef4444!important;
  color:#fff!important;
  border:2px solid #fff!important;
  font-size:10px!important;
  font-weight:900!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
}
#pqv3-app .pq-bell-count[hidden],
#pqv3-player .pq-bell-count[hidden]{display:none!important;}

#pqv3-app .pq-account-link,
#pqv3-player .pq-account-link{
  padding:0 13px 0 8px!important;
  color:var(--pq-ui-ink)!important;
  font-size:14px!important;
  font-weight:750!important;
  max-width:170px!important;
}
#pqv3-app .pq-account-link b,
#pqv3-player .pq-account-link b{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#pqv3-app .pq-avatar,
#pqv3-player .pq-avatar{
  width:32px!important;
  height:32px!important;
  border-radius:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:var(--pq-ui-purple-soft)!important;
  color:var(--pq-ui-purple)!important;
  font-size:13px!important;
  font-weight:900!important;
  flex:0 0 32px!important;
  overflow:hidden!important;
}
#pqv3-app .pq-avatar img,
#pqv3-player .pq-avatar img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}

#pqv3-app .pq-header-create,
#pqv3-player .pq-header-create{
  width:50px!important;
  min-width:50px!important;
  height:50px!important;
  min-height:50px!important;
  border-radius:18px!important;
  padding:0!important;
  border:0!important;
  background:var(--pq-ui-purple)!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(139,63,244,.24)!important;
}
#pqv3-app .pq-header-create .pq-create-plus,
#pqv3-player .pq-header-create .pq-create-plus{
  font-size:30px!important;
  line-height:1!important;
  margin:0!important;
  transform:translateY(-1px)!important;
}
#pqv3-app .pq-header-create:hover,
#pqv3-player .pq-header-create:hover{transform:translateY(-1px)!important;box-shadow:0 16px 32px rgba(139,63,244,.28)!important;}

#pqv3-app .pq-create-menu-wrap,
#pqv3-player .pq-create-menu-wrap{position:relative!important;display:inline-flex!important;}
#pqv3-app .pq-create-menu,
#pqv3-player .pq-create-menu{
  position:absolute!important;
  top:calc(100% + 12px)!important;
  right:0!important;
  width:min(330px,calc(100vw - 28px))!important;
  padding:12px!important;
  border:1px solid var(--pq-ui-line)!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 22px 60px rgba(17,19,24,.16)!important;
  z-index:10001!important;
}
#pqv3-app .pq-create-menu-head,
#pqv3-player .pq-create-menu-head{padding:10px 10px 12px!important;display:grid!important;gap:4px!important;}
#pqv3-app .pq-create-menu-head strong,
#pqv3-player .pq-create-menu-head strong{font-size:17px!important;letter-spacing:-.03em!important;color:var(--pq-ui-ink)!important;}
#pqv3-app .pq-create-menu-head span,
#pqv3-player .pq-create-menu-head span{font-size:13px!important;color:var(--pq-ui-muted)!important;line-height:1.35!important;}
#pqv3-app .pq-create-menu a,
#pqv3-player .pq-create-menu a{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  grid-template-areas:"icon title" "icon meta"!important;
  column-gap:12px!important;
  padding:12px!important;
  border-radius:16px!important;
  color:var(--pq-ui-ink)!important;
  align-items:center!important;
}
#pqv3-app .pq-create-menu a:hover,
#pqv3-player .pq-create-menu a:hover{background:var(--pq-ui-purple-soft)!important;}
#pqv3-app .pq-create-menu-icon,
#pqv3-player .pq-create-menu-icon{
  grid-area:icon!important;
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  background:var(--pq-ui-purple-soft)!important;
  color:var(--pq-ui-purple)!important;
}
#pqv3-app .pq-create-menu b,
#pqv3-player .pq-create-menu b{grid-area:title!important;font-size:15px!important;font-weight:850!important;}
#pqv3-app .pq-create-menu em,
#pqv3-player .pq-create-menu em{grid-area:meta!important;font-style:normal!important;font-size:13px!important;color:var(--pq-ui-muted)!important;}

@media (max-width:1040px){
  #pqv3-app .pq-main-tabs a,
  #pqv3-player .pq-main-tabs a,
  #pqv3-app .pq-app-tabs a,
  #pqv3-player .pq-app-tabs a{padding:0 11px!important;gap:6px!important;}
  #pqv3-app .pq-account-link b,
  #pqv3-player .pq-account-link b{display:none!important;}
  #pqv3-app .pq-account-link,
  #pqv3-player .pq-account-link{width:46px!important;padding:0!important;}
}

@media (max-width:760px){
  :root{--pq-ui-nav-height:116px;}
  #pqv3-app .pq-top,
  #pqv3-player .pq-top{
    grid-template-columns:minmax(120px,1fr) auto!important;
    grid-template-areas:"brand actions" "tabs tabs"!important;
    min-height:116px!important;
    padding:10px 14px 12px!important;
    gap:8px 10px!important;
  }
  #pqv3-app .pq-top-left,
  #pqv3-player .pq-top-left{grid-area:brand!important;}
  #pqv3-app .pq-top-right,
  #pqv3-player .pq-top-right{grid-area:actions!important;gap:8px!important;}
  #pqv3-app .pq-top-centre,
  #pqv3-player .pq-top-centre{
    grid-area:tabs!important;
    width:100%!important;
    justify-self:stretch!important;
    overflow:hidden!important;
  }
  #pqv3-app .pq-brand,
  #pqv3-player .pq-brand{min-height:44px!important;padding:3px 0!important;}
  #pqv3-app .pq-brand-logo,
  #pqv3-player .pq-brand-logo{max-width:136px!important;max-height:38px!important;}
  #pqv3-app .pq-main-tabs,
  #pqv3-player .pq-main-tabs,
  #pqv3-app .pq-app-tabs,
  #pqv3-player .pq-app-tabs,
  #pqv3-player .pq-player-nav{
    width:100%!important;
    height:48px!important;
    justify-content:space-between!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
    padding:4px!important;
    gap:2px!important;
  }
  #pqv3-app .pq-main-tabs::-webkit-scrollbar,
  #pqv3-player .pq-main-tabs::-webkit-scrollbar{display:none!important;}
  #pqv3-app .pq-main-tabs a,
  #pqv3-player .pq-main-tabs a,
  #pqv3-app .pq-app-tabs a,
  #pqv3-player .pq-app-tabs a,
  #pqv3-player .pq-player-nav a{
    min-width:64px!important;
    min-height:40px!important;
    padding:0 9px!important;
    gap:5px!important;
    font-size:12px!important;
    font-weight:800!important;
  }
  #pqv3-app .pq-tab-ico,
  #pqv3-player .pq-tab-ico{width:18px!important;height:18px!important;flex-basis:18px!important;}
  #pqv3-app .pq-tab-ico svg,
  #pqv3-player .pq-tab-ico svg{width:18px!important;height:18px!important;}
  #pqv3-app .pq-bell,
  #pqv3-player .pq-bell,
  #pqv3-app .pq-account-link,
  #pqv3-player .pq-account-link{
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
    border-radius:15px!important;
  }
  #pqv3-app .pq-avatar,
  #pqv3-player .pq-avatar{width:30px!important;height:30px!important;flex-basis:30px!important;}
  #pqv3-app .pq-header-create,
  #pqv3-player .pq-header-create{
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    border-radius:17px!important;
  }
  #pqv3-app .pq-header-create .pq-create-plus,
  #pqv3-player .pq-header-create .pq-create-plus{font-size:28px!important;}
}

@media (max-width:390px){
  #pqv3-app .pq-main-tabs a,
  #pqv3-player .pq-main-tabs a,
  #pqv3-app .pq-app-tabs a,
  #pqv3-player .pq-app-tabs a{min-width:58px!important;padding:0 8px!important;}
  #pqv3-app .pq-tab-label,
  #pqv3-player .pq-tab-label{font-size:11px!important;}
}


/* Stage 7 final UI QA: header optical alignment and overflow guard. */
#pqv3-app .pq-top,
#pqv3-app .pq-product-top,
#pqv3-app .pq-unified-top{
  max-width:calc(var(--pq-ui-feed-width) + (var(--pq-ui-page-gutter) * 2))!important;
  margin-inline:auto!important;
}
#pqv3-app .pq-top :where(a,button){
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
#pqv3-app .pq-top :where(a,button):focus-visible{
  outline:0!important;
  box-shadow:var(--pq-ui-focus)!important;
}
#pqv3-app .pq-top svg{
  width:20px!important;
  height:20px!important;
  display:block!important;
}
#pqv3-app .pq-top-centre,
#pqv3-app .pq-top-right,
#pqv3-app .pq-top-left{
  min-width:0!important;
}
@media (max-width:760px){
  #pqv3-app .pq-top,
  #pqv3-app .pq-product-top,
  #pqv3-app .pq-unified-top{
    max-width:100%!important;
  }
  #pqv3-app .pq-top-centre{
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  #pqv3-app .pq-top-centre::-webkit-scrollbar{display:none!important;}
}


/* Pop Quest v21.6.5 — definitive universal compact mobile header. This lives in the final navigation layer. */
@media (max-width:760px){
  :root{--pq-ui-nav-height:62px!important;}
  body #pqv3-app .pq-top,
  body #pqv3-player .pq-top,
  body #pqv3-app .pq-product-top,
  body #pqv3-player .pq-product-top,
  body #pqv3-app .pq-unified-top,
  body #pqv3-player .pq-unified-top,
  body #pqv3-player .pq-player-app-header{
    width:100%!important;
    max-width:100%!important;
    min-height:62px!important;
    height:62px!important;
    margin:0!important;
    padding:8px 14px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand actions"!important;
    align-items:center!important;
    gap:8px!important;
    background:#fff!important;
    border-bottom:1px solid #eee4f7!important;
    box-shadow:0 10px 28px rgba(74,38,122,.06)!important;
    overflow:visible!important;
  }
  body #pqv3-app .pq-top-left,
  body #pqv3-player .pq-top-left{grid-area:brand!important;justify-self:start!important;display:flex!important;}
  body #pqv3-app .pq-top-right,
  body #pqv3-player .pq-top-right{grid-area:actions!important;justify-self:end!important;display:flex!important;gap:8px!important;}
  body #pqv3-app .pq-top-centre,
  body #pqv3-player .pq-top-centre{display:none!important;}
  body #pqv3-app .pq-brand,
  body #pqv3-player .pq-brand{min-height:42px!important;padding:0!important;border-radius:0!important;}
  body #pqv3-app .pq-brand-logo,
  body #pqv3-player .pq-brand-logo{width:126px!important;max-width:126px!important;max-height:36px!important;height:auto!important;}
  body #pqv3-app .pq-notification-btn,
  body #pqv3-player .pq-notification-btn,
  body #pqv3-app .pq-account-link,
  body #pqv3-player .pq-account-link,
  body #pqv3-app .pq-create-btn,
  body #pqv3-player .pq-create-btn{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;padding:0!important;}
  body #pqv3-app .pq-account-link b,
  body #pqv3-player .pq-account-link b{display:none!important;}
  body #pqv3-app .pq-account-link img,
  body #pqv3-player .pq-account-link img{width:34px!important;height:34px!important;}
  body #pqv3-app .pq-create-btn,
  body #pqv3-player .pq-create-btn{border-radius:15px!important;}
}