/* StreamSphere unified Home design
   The public Home screen is the visual source of truth for the full product. */

:root,
html[data-theme="vibrant-dark"]{
  color-scheme:dark;
  --bg:#070910;
  --panel:rgba(12,15,25,.76);
  --panel2:rgba(9,12,21,.94);
  --panel-strong:rgba(9,12,21,.94);
  --text:#f4f5f9;
  --muted:#aeb4c2;
  --line:rgba(255,255,255,.085);
  --purple:#a47cf0;
  --cyan:#59d8e7;
  --live:#ff627e;
  --green:#66dfb8;
  --pink:#ff75c9;
  --shadow:0 30px 90px rgba(0,0,0,.35);
  --home-radius:21px;
  --home-radius-lg:29px;
  --home-panel:rgba(12,15,25,.76);
  --home-panel-soft:rgba(255,255,255,.035);
  --home-line:rgba(255,255,255,.085);
  --home-purple:#a47cf0;
  --home-cyan:#59d8e7;
}

html{background:#070910!important}
body.home-design{
  min-width:320px;
  min-height:100vh;
  color:var(--text)!important;
  background:
    radial-gradient(circle at 12% 9%,rgba(128,88,219,.14),transparent 31%),
    radial-gradient(circle at 88% 17%,rgba(68,199,217,.11),transparent 29%),
    radial-gradient(circle at 55% 92%,rgba(222,74,146,.055),transparent 32%),
    #070910!important;
  background-attachment:fixed!important;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
body.home-design::before{
  content:"";
  position:fixed;
  z-index:-3;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at -6% 32%,transparent 0 19%,rgba(164,124,240,.055) 19.1% 19.25%,transparent 19.35%),
    radial-gradient(circle at 104% 12%,transparent 0 21%,rgba(89,216,231,.05) 21.1% 21.25%,transparent 21.35%),
    radial-gradient(circle at 54% 112%,transparent 0 25%,rgba(164,124,240,.035) 25.1% 25.25%,transparent 25.35%);
}

/* Retire the old brighter animated background without touching special-event takeovers. */
body.home-design:not(.afterdark-mode) .bg-wash,
body.home-design:not(.afterdark-mode) .aurora,
body.home-design:not(.afterdark-mode) .mist{opacity:.22!important;filter:blur(130px)!important}
body.home-design:not(.afterdark-mode) .viewer-bg{opacity:.58}

/* One shared floating navigation language. */
body.home-design :is(.gateway-top,.main-topbar,.topbar,.viewer-topbar,.streamer-topbar,.mod-topbar,.pulse-topbar,.network-topbar,.news-wire-topbar){
  border:1px solid var(--home-line)!important;
  border-radius:var(--home-radius)!important;
  background:var(--home-panel)!important;
  box-shadow:var(--shadow)!important;
  backdrop-filter:blur(24px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(135%)!important;
}
body.home-design :is(.main-topbar,.viewer-topbar,.streamer-topbar,.mod-topbar,.pulse-topbar,.network-topbar,.news-wire-topbar){
  top:12px!important;
  width:min(1240px,calc(100% - 28px))!important;
  min-height:72px!important;
  height:auto!important;
  margin:14px auto 0!important;
  padding:9px 11px 9px 14px!important;
}

/* Brand marks use the same circular Home orb language. */
body.home-design :is(.brand-orb,.gateway-orb,.viewer-orb,.pulse-orb,.network-logo,.mod-brand-orb,.streamer-brand-orb,.news-wire-brand-orb){
  border-radius:50%!important;
  background:linear-gradient(135deg,#805bd9,#45c3d2)!important;
  box-shadow:0 0 30px rgba(89,216,231,.12)!important;
}

/* Shared navigation pills. */
body.home-design :is(.main-topbar nav a,.viewer-topbar nav button,.mod-topbar nav a,.pulse-topbar nav a,.network-topbar nav a,.news-wire-topbar nav a){
  border-radius:11px!important;
}
body.home-design :is(.main-topbar nav a:hover,.main-topbar nav a.active,.main-topbar nav a.is-active,.viewer-topbar nav button:hover,.viewer-topbar nav button.active,.mod-topbar nav a:hover,.mod-topbar nav a.active,.pulse-topbar nav a:hover,.pulse-topbar nav a.active,.network-topbar nav a:hover,.network-topbar nav a.active,.news-wire-topbar nav a:hover,.news-wire-topbar nav a.active){
  color:var(--text)!important;
  border-color:var(--home-line)!important;
  background:rgba(255,255,255,.055)!important;
}

/* Headings and small labels now match Home. */
body.home-design :is(.eyebrow,.gateway-kicker,.page-head>span,.section-head .eyebrow,.rework-section-heading .eyebrow){
  color:var(--home-purple)!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
}
body.home-design :is(.page-head h1,.rework-section-heading h2,.section-head h2,.block h2){
  letter-spacing:-.055em!important;
}
body.home-design :is(.page-head p,.rework-section-heading p,.section-head p,.lead){
  color:var(--muted)!important;
}

/* Home-style glass cards across the product. */
body.home-design :is(
  .glass,
  .viewer-panel,
  .featured-live-shell,
  .viewer-discover-spotlight,
  .viewer-quest-hero,
  .viewer-leaderboard-panel,
  .viewer-profile-shell,
  .viewer-events-preview-panel,
  .rework-tool-card,
  .rework-viewer-community-card,
  .live-watch-shell,
  .form-card,
  .glow-card,
  .steam-link-card,
  .sponsor-layout,
  .creator-ticket-shell,
  .pulse-hero,
  .pulse-panel,
  .pulse-live-card,
  .mod-panel,
  .mod-workspace,
  .network-panel,
  .network-card,
  .news-wire-panel,
  .news-card,
  .streamer-loading,
  .admin-shell .glass
){
  border-color:var(--home-line)!important;
  background:var(--home-panel)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
}

body.home-design :is(.rework-tool-card,.rework-viewer-community-card,.viewer-panel,.pulse-panel,.network-card){border-radius:22px!important}
body.home-design :is(.mod-hero-status,.network-pulse,.news-wire-hero,.news-wire-controls,.network-hero,.mod-hero){border-color:var(--home-line)!important}
body.home-design :is(.mod-hero-status,.network-pulse,.news-wire-controls){background:var(--home-panel)!important;box-shadow:0 24px 80px rgba(0,0,0,.22)!important;backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%)}
body.home-design :is(.featured-live-shell,.viewer-discover-spotlight,.viewer-quest-hero,.creator-ticket-shell,.live-watch-shell,.pulse-hero){border-radius:29px!important}

/* Buttons use the Home CTA treatment. */
body.home-design :is(.btn.primary,.primary.btn,.gateway-primary-cta,.rework-tool-card-primary){
  color:#fff!important;
  border-color:transparent!important;
  background:linear-gradient(120deg,#7955df,#4bbacc)!important;
  box-shadow:0 12px 28px rgba(105,78,201,.22)!important;
}
body.home-design :is(.btn.secondary,.btn.ghost,.secondary.btn,.ghost.btn,.icon-btn,.topbar-icon-button,.viewer-top-actions button,.pulse-actions button,.network-actions button,.mod-actions button){
  color:var(--text)!important;
  border-color:var(--home-line)!important;
  background:rgba(255,255,255,.035)!important;
}
body.home-design :is(button,a,.btn){transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
body.home-design :is(.btn,.gateway-primary-cta,.gateway-secondary-cta,.rework-tool-card,.rework-viewer-community-card):hover{transform:translateY(-2px)}

/* Form controls share the same restrained dark treatment. */
body.home-design :is(input,textarea,select){
  color:var(--text)!important;
  border-color:var(--home-line)!important;
  background:rgba(4,7,13,.62)!important;
}
body.home-design :is(input,textarea,select):focus{
  border-color:rgba(89,216,231,.34)!important;
  box-shadow:0 0 0 3px rgba(89,216,231,.06)!important;
}
body.home-design ::placeholder{color:#737b8c!important}

/* Menus, drawers and dialogs should feel like part of the same product. */
body.home-design :is(.inbox-drawer,.performance-panel,.viewer-notification-panel,.viewer-mobile-menu,.watch-dialog,.viewer-clip-dialog,.wheel-dialog){
  border-color:var(--home-line)!important;
  background:rgba(9,12,21,.96)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.46)!important;
}

/* Public creator page keeps creator customization, while chrome stays StreamSphere-dark. */
html[data-theme="vibrant-dark"] body.streamer-page,
body.home-design.streamer-page{background-color:#070910!important}

/* Remove any leftover theme-switch controls even if an old cached template appears. */
body.home-design :is(.theme-toggle,.gateway-theme,.viewer-theme-toggle,.mod-theme-btn,#pulseTheme,#networkThemeToggle,#newsWireThemeToggle,#streamerThemeToggle){display:none!important}

/* More consistent page width and breathing room. */
body.home-design.viewer-shell main,body.home-design .streamer-page-shell,body.home-design .news-wire-shell{max-width:1180px}
/* Creator Hub main must stay full-width so its .section children center against the viewport, not an anchored 1180px canvas. */
body.home-design.creator-shell main{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
body.home-design .viewer-section{padding-top:34px}
body.home-design .page-head{margin-bottom:24px}

@media(max-width:760px){
  body.home-design :is(.main-topbar,.viewer-topbar,.streamer-topbar,.mod-topbar,.pulse-topbar,.network-topbar,.news-wire-topbar){
    width:calc(100% - 16px)!important;
    min-height:62px!important;
    border-radius:18px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.home-design :is(button,a,.btn){transition:none!important}
}

/* ============================================================
   V6 · Creator page hard-centering fix
   home-design.css loads last, so these rules are the final layout authority.
   ============================================================ */
body.home-design.streamer-page{
  width:100%;
}

body.home-design.streamer-page .streamer-topbar,
body.home-design.streamer-page .streamer-page-shell{
  box-sizing:border-box!important;
  position:relative;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Standard creator pages */
body.home-design.streamer-page:not(.platform-owner-page) .streamer-topbar,
body.home-design.streamer-page:not(.platform-owner-page) .streamer-page-shell{
  width:min(1180px,calc(100vw - 34px))!important;
  max-width:1180px!important;
}

/* N3X99 Owner HQ is intentionally wider, but still perfectly centered. */
body.home-design.streamer-page.platform-owner-page .streamer-topbar,
body.home-design.streamer-page.platform-owner-page .streamer-page-shell{
  width:min(1480px,calc(100vw - 34px))!important;
  max-width:1480px!important;
}

body.home-design.streamer-page .streamer-page-shell{
  margin-top:20px!important;
  margin-bottom:70px!important;
  padding-left:0!important;
  padding-right:0!important;
}

body.home-design.streamer-page :is(
  .creator-page-section-flow,
  .creator-viewer-content-grid,
  .creator-viewer-main,
  .creator-viewer-sidebar,
  .owner-hq-shell,
  .owner-live-deck,
  .owner-hq-section,
  .creator-editor
){
  box-sizing:border-box;
  max-width:100%;
}

body.home-design.streamer-page :is(
  .creator-page-section-flow,
  .creator-viewer-content-grid,
  .owner-hq-shell
){
  width:100%;
  margin-left:auto!important;
  margin-right:auto!important;
  justify-self:center;
}

body.home-design.streamer-page .creator-viewer-nav-inner,
body.home-design.streamer-page .owner-hq-nav-inner{
  margin-left:auto!important;
  margin-right:auto!important;
}

@media(max-width:760px){
  body.home-design.streamer-page .streamer-topbar,
  body.home-design.streamer-page .streamer-page-shell,
  body.home-design.streamer-page.platform-owner-page .streamer-topbar,
  body.home-design.streamer-page.platform-owner-page .streamer-page-shell{
    width:calc(100vw - 16px)!important;
    max-width:none!important;
  }
}


/* ============================================================
   V7 · Creator Hub viewport centering fix
   The Hub <main> is intentionally full-width. Every primary section
   owns the centered content width, matching the topbar/home design.
   ============================================================ */
body.home-design.creator-shell:not(.afterdark-mode) main > .section{
  box-sizing:border-box;
  width:min(1180px,calc(100% - 32px))!important;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

@media(max-width:650px){
  body.home-design.creator-shell:not(.afterdark-mode) main > .section{
    width:calc(100% - 20px)!important;
  }
}