/* =========================================================
   SONOFPOLLUX Portal v2.8 — Unified Interface
   Shared visual system across Portal / Radio / Projects /
   Signals / Social / Account / Tools / Rooms / Lore.
   ========================================================= */

:root{
  --sop-bg:#08090f;
  --sop-bg-elev:#0d0e16;
  --sop-surface:rgba(255,255,255,.035);
  --sop-surface-2:rgba(255,255,255,.055);
  --sop-surface-3:rgba(255,255,255,.075);
  --sop-line:rgba(255,255,255,.095);
  --sop-line-strong:rgba(255,255,255,.16);
  --sop-text:#f1eff6;
  --sop-muted:rgba(232,228,239,.62);
  --sop-faint:rgba(232,228,239,.38);
  --sop-pink:#e695bd;
  --sop-blue:#8ea8e8;
  --sop-green:#9bd7b6;
  --sop-warn:#d8b77a;
  --sop-room-rgb:137,126,178;
  --sop-radius-sm:10px;
  --sop-radius:16px;
  --sop-radius-lg:24px;
  --sop-wrap:1180px;
  --sop-header:70px;
  --sop-shadow:0 22px 70px rgba(0,0,0,.28);
  --sop-ease:cubic-bezier(.22,.61,.36,1);
}
html{
  background:var(--sop-bg);
  color-scheme:dark;
  scroll-behavior:smooth;
}
body{
  color:var(--sop-text);
  background:
    radial-gradient(860px 560px at 88% 9%,rgba(var(--sop-room-rgb),.055),transparent 64%),
    radial-gradient(900px 620px at 14% 12%,rgba(98,90,153,.075),transparent 60%),
    radial-gradient(840px 520px at 87% 24%,rgba(112,143,171,.045),transparent 62%),
    linear-gradient(180deg,#08090f 0%,#090a11 55%,#07080d 100%);
  font-feature-settings:"kern" 1,"liga" 1;
}

/* Quiet the old generic cyber layers. */
body .bg .stars{opacity:.08!important}
body .bg .scanlines{opacity:.025!important}
body .bg .noise{opacity:.025!important}
body .bg .glow{opacity:.34!important}

::selection{background:rgba(158,143,226,.28);color:#fff}

body[data-portal-room="white"]{--sop-room-rgb:238,237,232}
body[data-portal-room="pink"]{--sop-room-rgb:230,143,185}
body[data-portal-room="blue"]{--sop-room-rgb:116,154,225}
body[data-portal-room="red"]{--sop-room-rgb:210,91,99}
body[data-portal-room="green"]{--sop-room-rgb:105,178,135}
body[data-portal-room="black"]{--sop-room-rgb:88,88,104}
body[data-portal-room="silver"]{--sop-room-rgb:185,194,207}
body[data-portal-room="purple"]{--sop-room-rgb:151,116,218}
body[data-portal-room="yellow"]{--sop-room-rgb:218,190,102}
body[data-portal-room="cold-archive"]{--sop-room-rgb:123,170,191}
body[data-portal-room="unassigned"]{--sop-room-rgb:137,126,178}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid rgba(166,184,240,.92)!important;
  outline-offset:3px;
}

/* ---------- global width + rhythm ---------- */
.wrap,
.portalV26Shell,
.projectsShell,
.accountShell,
.signals-shell > .container,
.statusShell{
  width:min(var(--sop-wrap),calc(100% - 44px))!important;
  max-width:var(--sop-wrap)!important;
  margin-inline:auto!important;
}
main{isolation:isolate}
.section{padding-block:clamp(56px,7vw,96px)}
.section + .section{border-top:1px solid rgba(255,255,255,.045)}
.sectionHead{margin-bottom:24px}
.sectionHead h2,
.accountPanelHead h2,
.pCardHead h2,
.signals-section-title{
  letter-spacing:-.03em;
}
.kicker,
.tag,
.label,
.portalV26Eyebrow,
.projectsKicker,
.accountKicker,
.signals-kicker,
.atlasKicker,
.radioDeck__label{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  letter-spacing:.16em!important;
  text-transform:uppercase;
  font-size:9px!important;
  font-weight:700!important;
  color:var(--sop-faint)!important;
}

/* ---------- universal chrome ---------- */
.topbar,
.projectsTop,
.atlasTop,
.spx-header,
.signals-nav{
  position:sticky!important;
  top:0;
  z-index:900!important;
  min-height:var(--sop-header);
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  background:rgba(8,9,15,.78)!important;
  backdrop-filter:blur(22px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.08)!important;
  box-shadow:none!important;
}
.topbar__inner,
.projectsTop,
.atlasTop,
.spx-inner{
  min-height:var(--sop-header)!important;
}
.topbar.is-scrolled,
.sop-header-scrolled{
  background:rgba(8,9,15,.94)!important;
  border-bottom-color:rgba(255,255,255,.11)!important;
}

/* Main site brand */
.brand,
.projectsBrand,
.atlasBrand,
.spx-brand a{
  text-decoration:none!important;
}
.brand__mark{
  width:31px!important;height:31px!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,rgba(143,128,204,.16),rgba(105,137,170,.11))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:none!important;
}
.brand__text,
.projectsBrand,
.atlasBrand{
  font-size:12px!important;
  letter-spacing:.045em!important;
  font-weight:850!important;
}
.brand__sub{
  border-radius:7px!important;
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,255,255,.085)!important;
  color:rgba(255,255,255,.56)!important;
  padding:5px 8px!important;
}

/* Navigation is a quiet segmented rail instead of piles of pills. */
.nav,
.projectsNav,
.atlasTop nav{
  gap:2px!important;
  padding:4px!important;
  border:1px solid rgba(255,255,255,.075);
  border-radius:14px!important;
  background:rgba(255,255,255,.022);
}
.nav__link,
.projectsNav a,
.atlasTop nav a{
  min-height:34px;
  display:inline-flex!important;
  align-items:center;
  padding:0 11px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:rgba(238,235,244,.61)!important;
  font-size:11px!important;
  font-weight:680!important;
  text-decoration:none!important;
  white-space:nowrap;
}
.nav__link:hover,
.projectsNav a:hover,
.atlasTop nav a:hover{
  color:#fff!important;
  background:rgba(255,255,255,.048)!important;
}
.nav__link--hot,
.nav__link[aria-current="page"],
.projectsNav a.is-active,
.atlasTop nav a[aria-current="page"]{
  color:#fff!important;
  background:rgba(255,255,255,.07)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);
}
.topbar__actions{gap:7px!important}
.topbar__cta{
  min-height:38px!important;
  padding:0 12px!important;
  border-radius:11px!important;
  border-color:rgba(255,255,255,.09)!important;
  background:rgba(255,255,255,.028)!important;
  box-shadow:none!important;
  font-size:11px!important;
}
.portalAccountChip{
  min-height:38px!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.028)!important;
  box-shadow:none!important;
}
.portalLiveChip--header{
  min-height:38px;
  border-radius:11px!important;
  padding:7px 10px!important;
  background:rgba(255,255,255,.026)!important;
}

/* Hard guarantee: command search never floats at a viewport corner. */
.portalCommandTrigger{
  position:static!important;
  inset:auto!important;
  right:auto!important;
  left:auto!important;
  top:auto!important;
  bottom:auto!important;
  margin:0!important;
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0!important;
  border-radius:11px!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(255,255,255,.028)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:none!important;
}
.portalCommandTrigger.portalCommandTrigger--header{display:inline-flex!important}
.portalCommandTrigger span,
.portalCommandTrigger kbd{display:none!important}
.portalCommandTrigger b{font-size:13px!important;font-weight:500!important}

/* Search overlay becomes a deliberate command sheet. */
.portalCommand{
  background:rgba(3,4,7,.76)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.portalCommand__panel{
  width:min(720px,calc(100vw - 28px))!important;
  border-radius:22px!important;
  border-color:rgba(255,255,255,.12)!important;
  background:rgba(13,14,22,.97)!important;
  box-shadow:0 34px 100px rgba(0,0,0,.54)!important;
}
.portalCommand__search{
  min-height:68px!important;
  border-bottom-color:rgba(255,255,255,.075)!important;
}
.portalCommand__item{
  border-radius:12px!important;
}

/* ---------- buttons ---------- */
.btn,
.pBtn,
.accountBtn,
.signals-page .btn,
.toolLink,
.inlineActions a,
.radioActionRail button{
  border-radius:11px!important;
  box-shadow:none!important;
  transition:background .18s var(--sop-ease),border-color .18s var(--sop-ease),transform .18s var(--sop-ease),color .18s var(--sop-ease)!important;
}
.btn--primary,
.pBtn--primary,
.accountBtn.primary,
.signals-page .btn-light{
  background:#e8e5ef!important;
  color:#101118!important;
  border-color:#e8e5ef!important;
  text-shadow:none!important;
}
.btn--primary:hover,
.pBtn--primary:hover,
.accountBtn.primary:hover{
  background:#fff!important;
  transform:translateY(-1px);
}
.btn--ghost,
.pBtn:not(.pBtn--primary),
.accountBtn:not(.primary),
.signals-page .btn-outline-light{
  background:rgba(255,255,255,.026)!important;
  color:rgba(240,237,245,.76)!important;
  border-color:rgba(255,255,255,.105)!important;
}
.btn--ghost:hover,
.pBtn:not(.pBtn--primary):hover,
.accountBtn:not(.primary):hover{
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.17)!important;
}

/* ---------- shared cards ---------- */
.card,
.panel,
.pCard,
.accountPanel,
.accountUserCard,
.featureCard,
.portalRail__card,
.portalRoomBand,
.radioContext,
.radioWitness,
.roomCard,
.signalsPortalRail a{
  border-color:var(--sop-line)!important;
  box-shadow:none!important;
}
.card,
.panel,
.pCard,
.accountPanel,
.accountUserCard,
.featureCard{
  border-radius:var(--sop-radius-lg)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.034),rgba(255,255,255,.02))!important;
}
.card:hover,
.featureCard:hover,
.portalRail__card:hover{
  border-color:rgba(255,255,255,.145)!important;
}

/* ---------- homepage / editorial surfaces ---------- */
.afterHero{
  min-height:min(720px,calc(100vh - var(--sop-header)))!important;
  display:grid!important;
  align-items:center!important;
  padding:clamp(64px,8vw,116px) 0!important;
}
.afterHero h1{
  max-width:920px;
  font-size:clamp(60px,9vw,128px)!important;
  line-height:.86!important;
  letter-spacing:-.07em!important;
}
.afterHero__lead{
  max-width:650px!important;
  font-size:clamp(16px,1.7vw,21px)!important;
  color:var(--sop-muted)!important;
}
.portalRail{
  gap:10px!important;
}
.portalRail__card{
  min-height:210px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.025)!important;
  transition:transform .2s var(--sop-ease),border-color .2s var(--sop-ease),background .2s var(--sop-ease)!important;
}
.portalRail__card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.04)!important;
}
.portalUtility a{
  border-radius:16px!important;
  background:rgba(255,255,255,.018)!important;
}

/* ---------- Projects ---------- */
.projectsPage,
.accountPage,
.signals-page,
.roomAtlasPage{
  background:
    radial-gradient(800px 500px at 15% 8%,rgba(117,103,160,.075),transparent 62%),
    var(--sop-bg)!important;
}
.projectsHero,
.accountHero{
  padding:clamp(64px,8vw,105px) 0 34px!important;
}
.projectsTitle,
.accountTitle{
  font-size:clamp(48px,7vw,88px)!important;
  letter-spacing:-.06em!important;
  line-height:.92!important;
}
.projectsLead,
.accountLead{
  max-width:700px!important;
  color:var(--sop-muted)!important;
  font-size:15px!important;
  line-height:1.7!important;
}
.projectGrid--visual{
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:14px!important;
}
.projectCard--visual{
  grid-column:span 4;
  min-width:0;
  border-radius:20px!important;
  overflow:hidden;
  background:rgba(255,255,255,.025)!important;
}
.projectCardVisual{aspect-ratio:4/3!important}
.projectCardBody{padding:18px!important}
.projectNext{
  border-radius:12px!important;
  background:rgba(255,255,255,.025)!important;
  border-color:rgba(255,255,255,.075)!important;
}
.progressTrack{height:5px!important;background:rgba(255,255,255,.06)!important}

/* ---------- Account ---------- */
.accountGrid--metrics{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}
.accountStat{
  border-radius:16px!important;
  background:rgba(255,255,255,.025)!important;
  border-color:rgba(255,255,255,.08)!important;
  padding:18px!important;
}
.accountStat strong{font-size:30px!important;letter-spacing:-.05em}
.accountColumns{gap:14px!important}
.accountActivityItem{
  border-radius:14px!important;
  border-color:rgba(255,255,255,.075)!important;
  background:rgba(255,255,255,.018)!important;
}

/* ---------- Signals ---------- */
.signals-shell{padding-top:0!important;padding-bottom:80px!important}
.signals-shell > .container{padding-left:0!important;padding-right:0!important}
.signals-hero{
  padding:clamp(66px,8vw,110px) 0 36px!important;
}
.signals-title{
  max-width:900px;
  font-size:clamp(54px,8.4vw,108px)!important;
  line-height:.87!important;
  letter-spacing:-.07em!important;
  font-weight:780!important;
}
.signals-lead{
  max-width:710px!important;
  color:var(--sop-muted)!important;
  line-height:1.7!important;
}
.signalsPortalRail{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:9px!important;
  margin:28px 0!important;
}
.signalsPortalRail a{
  min-height:120px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.018)!important;
}
.signals-tabs{
  gap:3px!important;
  padding:4px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.018)!important;
  width:max-content;
  max-width:100%;
}
.signals-tab{
  border-radius:9px!important;
  border:0!important;
  background:transparent!important;
  padding:9px 12px!important;
  font-size:11px!important;
}
.signals-tab.active{
  background:rgba(255,255,255,.075)!important;
}
.signals-search{
  border-radius:18px!important;
  background:rgba(255,255,255,.018)!important;
  border:1px solid rgba(255,255,255,.075)!important;
  padding:12px!important;
}
.signals-grid{gap:14px!important}

/* ---------- Tools ---------- */
.toolHero{
  padding:clamp(68px,8vw,104px) 0 16px!important;
}
.toolHero h1{
  font-size:clamp(48px,7vw,84px)!important;
  letter-spacing:-.06em!important;
}
#toolGrid.grid{
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:12px!important;
}
#toolGrid .card{
  grid-column:span 4;
  min-height:190px!important;
  padding:18px!important;
}
#toolGrid .search,
.toolsPage .search{
  border-radius:12px!important;
}

/* ---------- Room Atlas ---------- */
.atlasTop{
  width:100%!important;
  padding:0 max(22px,calc((100vw - var(--sop-wrap))/2))!important;
}
.atlasHero,
.atlasLegend,
.atlasGrid{
  width:min(var(--sop-wrap),calc(100% - 44px))!important;
  margin-inline:auto!important;
}
.atlasHero{
  min-height:520px!important;
  padding:clamp(76px,9vw,130px) 0 52px!important;
}
.atlasHero h1{
  font-size:clamp(54px,8vw,104px)!important;
  letter-spacing:-.065em!important;
  line-height:.9!important;
}
.atlasGrid{
  gap:14px!important;
  padding-bottom:90px!important;
}
.roomCard{
  border-radius:22px!important;
  background:rgba(255,255,255,.022)!important;
  transition:transform .22s var(--sop-ease),border-color .22s var(--sop-ease)!important;
}
.roomCard:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--room-accent) 44%,rgba(255,255,255,.12))!important;
}

/* ---------- FollowLikes / Social ---------- */
.spx-header{
  padding:0 18px!important;
}
.spx-inner{max-width:var(--sop-wrap)!important}
.spx-logo{
  width:34px!important;height:34px!important;border-radius:10px!important;
  box-shadow:none!important;
}
.spx-brandText .t{font-size:12px!important;letter-spacing:.04em!important}
.spx-brandText .s{font-size:10px!important;color:var(--sop-faint)!important}
.spx-nav{gap:3px!important}
.spx-link,
.spx-snap{
  border-radius:9px!important;
  background:transparent!important;
  box-shadow:none!important;
}
.spx-link:hover,
.spx-snap:hover{background:rgba(255,255,255,.05)!important}

/* ---------- Promo placement ---------- */
#promoCard.card--promo{
  border-radius:16px!important;
  background:linear-gradient(90deg,rgba(215,185,120,.055),rgba(255,255,255,.018))!important;
  border-color:rgba(216,183,122,.13)!important;
  margin-block:18px!important;
  padding:0!important;
}
#promoCard .promoWrap{
  padding:15px 17px!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:16px!important;
}
#promoCard .promoTitle{font-size:15px!important;margin:2px 0 3px!important}
#promoCard .promoBody{font-size:11px!important;line-height:1.5!important;margin:4px 0 9px!important;max-width:700px}
#promoCard .promoTags{display:none!important}
#promoCard .promoImg{max-width:150px!important;max-height:90px!important;border-radius:10px!important}
#promoCard .promoCtaRow{gap:7px!important}
#promoCard .btn{min-height:32px!important;padding:0 10px!important;font-size:10px!important}

/* ---------- mobile dock ---------- */
.portalDock{
  border-radius:18px!important;
  background:rgba(9,10,16,.94)!important;
  border-color:rgba(255,255,255,.11)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.4)!important;
}
.portalDock a{border-radius:12px!important}
.portalDock a[aria-current="page"],
.portalDock a.is-active{background:rgba(255,255,255,.07)!important;color:#fff!important}

/* ---------- native form surfaces ---------- */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  border-radius:11px!important;
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  background:rgba(255,255,255,.026)!important;
  border-color:rgba(255,255,255,.10)!important;
}
input:focus,
select:focus,
textarea:focus{
  border-color:rgba(157,176,230,.48)!important;
  box-shadow:none!important;
}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .nav{display:none!important}
  .projectCard--visual{grid-column:span 6}
  #toolGrid .card{grid-column:span 6}
  .signalsPortalRail{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .accountGrid--metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  :root{--sop-header:62px}
  .wrap,
  .portalV26Shell,
  .projectsShell,
  .accountShell,
  .signals-shell > .container,
  .atlasHero,.atlasLegend,.atlasGrid,.statusShell{
    width:min(100% - 26px,var(--sop-wrap))!important;
  }
  .topbar__inner{padding:7px 0!important}
  .brand__sub{display:none!important}
  .portalAccountChip{max-width:42px!important;width:38px!important;padding:0!important;justify-content:center!important}
  .portalAccountChip__label{display:none!important}
  .topbar__cta{display:none!important}
  .projectCard--visual{grid-column:span 12}
  #toolGrid .card{grid-column:span 12}
  .signalsPortalRail{grid-template-columns:1fr 1fr!important}
  .atlasHero{grid-template-columns:1fr!important;min-height:auto!important}
  #promoCard .promoWrap{grid-template-columns:1fr!important}
  #promoCard .promoImg{display:none!important}
  .afterHero{min-height:auto!important;padding:64px 0 46px!important}
}
@media(max-width:520px){
  .signalsPortalRail{grid-template-columns:1fr!important}
  .accountGrid--metrics{grid-template-columns:1fr 1fr!important}
  .signals-title,
  .projectsTitle,
  .accountTitle,
  .atlasHero h1{font-size:clamp(44px,14vw,68px)!important}
}

/* Avoid motion-heavy chrome. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}


/* ---------- menu / mobile navigation ---------- */
.menuBtn{
  width:38px!important;height:38px!important;min-height:38px!important;
  padding:0!important;border-radius:11px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  background:rgba(255,255,255,.028)!important;
  box-shadow:none!important;
}
.menuBtn__text{display:none!important}
.mobileNav{
  border-top:1px solid rgba(255,255,255,.06)!important;
  background:rgba(8,9,15,.97)!important;
  backdrop-filter:blur(24px)!important;
  -webkit-backdrop-filter:blur(24px)!important;
}
.mobileNav__panel{padding:12px 0 18px!important}
.mobileNav__grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}
.mobileNav__grid a{
  min-height:48px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  padding:0 13px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.02)!important;
  color:rgba(240,237,245,.74)!important;
  text-decoration:none!important;
  font-size:11px!important;
}
.mobileNav__grid a:hover{background:rgba(255,255,255,.05)!important;color:#fff!important}
.mobileNav__ctaRow{margin-top:8px!important}

/* ---------- tables, lists, modals ---------- */
table{border-collapse:separate;border-spacing:0}
.creatorTable,
.cleanTable{
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:16px!important;
  overflow:hidden;
}
.creatorTableRow{
  border-color:rgba(255,255,255,.06)!important;
}
.modal__frame,
.timerModal__panel,
.keysModal__panel{
  border-radius:22px!important;
  border-color:rgba(255,255,255,.12)!important;
  background:rgba(12,13,20,.97)!important;
  box-shadow:0 34px 100px rgba(0,0,0,.5)!important;
}

/* ---------- footers ---------- */
.footer,
.projectFooter,
.accountFooter{
  margin-top:70px!important;
  padding:28px 0!important;
  border-top:1px solid rgba(255,255,255,.065)!important;
  color:var(--sop-faint)!important;
  background:transparent!important;
}
.footer a,.projectFooter a,.accountFooter a{
  color:rgba(240,237,245,.58)!important;
}
.footer a:hover,.projectFooter a:hover,.accountFooter a:hover{color:#fff!important}

/* ---------- scrollbars ---------- */
@media(hover:hover){
  *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
}
@media(max-width:620px){
  .mobileNav__grid{grid-template-columns:1fr!important}
}


/* ---------- lore / explore / roadmap editorial pages ---------- */
body[data-portal-area="lore"] .hero,
body[data-portal-area="explore"] .hero,
body[data-portal-area="portal"] .hero{
  padding:clamp(70px,9vw,128px) 0 clamp(36px,5vw,64px)!important;
}
body[data-portal-area="lore"] .hero__copy,
body[data-portal-area="explore"] .hero__copy,
body[data-portal-area="portal"] .hero__copy{
  max-width:930px!important;
}
body[data-portal-area="lore"] .hero h1,
body[data-portal-area="explore"] .hero h1,
body[data-portal-area="portal"] .hero h1{
  margin:12px 0 22px!important;
  font-size:clamp(54px,8vw,104px)!important;
  line-height:.9!important;
  letter-spacing:-.065em!important;
  max-width:12ch;
}
body[data-portal-area="lore"] .lead,
body[data-portal-area="explore"] .lead,
body[data-portal-area="portal"] .lead{
  max-width:720px!important;
  font-size:clamp(16px,1.7vw,20px)!important;
  line-height:1.65!important;
  color:var(--sop-muted)!important;
}
body[data-portal-area="lore"] .grid2,
body[data-portal-area="lore"] .grid3,
body[data-portal-area="explore"] .grid2,
body[data-portal-area="explore"] .grid3,
body[data-portal-area="portal"] .grid2{
  gap:12px!important;
}
body[data-portal-area="lore"] .panel,
body[data-portal-area="explore"] .panel,
body[data-portal-area="portal"] .panel{
  padding:clamp(20px,3vw,30px)!important;
  min-height:180px;
}
body[data-portal-area="lore"] .panel h3,
body[data-portal-area="explore"] .panel h3,
body[data-portal-area="portal"] .panel h3{
  font-size:clamp(20px,2vw,28px)!important;
  letter-spacing:-.035em!important;
}
body[data-portal-area="lore"] .portalRoomBand{
  border-radius:24px!important;
  padding:clamp(24px,4vw,42px)!important;
}
body[data-portal-area="lore"] .portalRoomBand__title{
  max-width:780px;
  font-size:clamp(40px,5vw,68px)!important;
}
body[data-portal-area="explore"] .portalUtility{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
body[data-portal-area="explore"] .portalUtility a{
  min-height:145px!important;
  padding:20px!important;
}

/* Status becomes a quiet ops page. */
body[data-portal-area="status"] .statusHero{
  padding:clamp(70px,9vw,120px) 0 34px!important;
}
body[data-portal-area="status"] .statusHero h1{
  font-size:clamp(52px,8vw,96px)!important;
  line-height:.88!important;
  letter-spacing:-.065em!important;
}
body[data-portal-area="status"] .statusPanel{
  border-radius:22px!important;
  background:rgba(255,255,255,.022)!important;
  border-color:rgba(255,255,255,.08)!important;
}
body[data-portal-area="status"] .service{
  border-radius:14px!important;
  background:rgba(255,255,255,.018)!important;
  border-color:rgba(255,255,255,.07)!important;
}

@media(max-width:760px){
  body[data-portal-area="lore"] .hero h1,
  body[data-portal-area="explore"] .hero h1,
  body[data-portal-area="portal"] .hero h1{font-size:clamp(46px,14vw,72px)!important}
  body[data-portal-area="explore"] .portalUtility{grid-template-columns:1fr!important}
}


/* ---------- creator tool workrooms ---------- */
body[data-portal-area="tool"]{
  background:
    radial-gradient(760px 440px at 12% 8%,rgba(118,103,160,.07),transparent 64%),
    radial-gradient(720px 460px at 88% 16%,rgba(104,135,165,.055),transparent 66%),
    var(--sop-bg)!important;
}
body[data-portal-area="tool"] .header,
body[data-portal-area="tool"] .topbar{
  min-height:var(--sop-header)!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  background:rgba(8,9,15,.80)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
  box-shadow:none!important;
}
body[data-portal-area="tool"] .header__inner,
body[data-portal-area="tool"] .topbar__inner{
  width:min(var(--sop-wrap),calc(100% - 44px))!important;
  max-width:var(--sop-wrap)!important;
  min-height:var(--sop-header)!important;
  margin-inline:auto!important;
}
body[data-portal-area="tool"] :is(.labHero,.promoHero,.toolHero,.hero){
  padding:clamp(64px,8vw,108px) 0 28px!important;
}
body[data-portal-area="tool"] :is(.labHero,.promoHero,.toolHero,.hero) h1{
  max-width:880px!important;
  font-size:clamp(48px,7vw,88px)!important;
  line-height:.9!important;
  letter-spacing:-.06em!important;
}
body[data-portal-area="tool"] :is(.labGrid,.promoGrid,.toolGrid,.grid,.two){
  gap:12px!important;
}
body[data-portal-area="tool"] :is(.panel,.card,.preview,.out,.noticeBox){
  border-radius:20px!important;
  background:rgba(255,255,255,.022)!important;
  border-color:rgba(255,255,255,.085)!important;
  box-shadow:none!important;
}
body[data-portal-area="tool"] :is(.input,input,textarea,select){
  min-height:44px;
}
body[data-portal-area="tool"] .toolRow{
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  padding:10px 0!important;
}
body[data-portal-area="tool"] .footer{
  margin-top:80px!important;
}
@media(max-width:760px){
  body[data-portal-area="tool"] .header__inner,
  body[data-portal-area="tool"] .topbar__inner{
    width:calc(100% - 26px)!important;
  }
}


/* ---------- social / FollowLikes ---------- */
body[data-portal-area="social"]{
  background:
    radial-gradient(800px 520px at 12% 4%,rgba(117,102,161,.065),transparent 64%),
    var(--sop-bg)!important;
}
body[data-portal-area="social"] :is(.container,.wrap,.ex-container,.ex-wrap){
  max-width:var(--sop-wrap)!important;
}
body[data-portal-area="social"] :is(.card,.tile,.sheet,.ex-card,.ex-panel,.kpi,.goal,.spotlight-wrap){
  border-radius:18px!important;
  border-color:rgba(255,255,255,.085)!important;
  background:rgba(255,255,255,.024)!important;
  box-shadow:none!important;
}
body[data-portal-area="social"] :is(.btn,.ex-btn,.action,.cta){
  border-radius:10px!important;
  box-shadow:none!important;
}
body[data-portal-area="social"] :is(.tabs,.ex-chips){
  gap:4px!important;
}
body[data-portal-area="social"] :is(.tab,.ex-chip){
  border-radius:9px!important;
}
body[data-portal-area="social"] :is(.welcome,.ex-hero){
  border-radius:22px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.034),rgba(255,255,255,.012))!important;
  border-color:rgba(255,255,255,.085)!important;
  box-shadow:none!important;
}
body[data-portal-area="social"] .appbar{
  border-radius:14px!important;
  background:rgba(255,255,255,.025)!important;
  border-color:rgba(255,255,255,.08)!important;
}