/*
  Profile referrals module.
  Extracted from the former pages/60-profile-systems.css; keep after 64-profile-inventory-achievements.css.
*/

   Public UI P2.83 — profile referrals shell stabilization
   Goal: keep the Referrals tab inside the canonical profile
   height on desktop, move overflow into inner panels, and
   prevent the bottom section from dropping below the screen.
========================================================= */
body.page-profile .profilePane--ref{
  display: flex !important;
  flex-direction: column !important;
  min-height: var(--profile-canon-h) !important;
  height: var(--profile-canon-h) !important;
  gap: 10px !important;
  overflow: hidden !important;
}
body.page-profile .profilePane--ref .card__head{
  flex: 0 0 auto !important;
  align-items: flex-start !important;
  margin-bottom: 0 !important;
}
body.page-profile .profilePane--ref .profileRefShell{
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
body.page-profile .profilePane--ref .profileRefBody{
  display: grid !important;
  grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr) !important;
  gap: 10px !important;
  min-height: 0 !important;
}
body.page-profile .profilePane--ref #profileRefTop,
body.page-profile .profilePane--ref #profileRefRewards,
body.page-profile .profilePane--ref #profileRefList{
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.page-profile .profilePane--ref #profileRefTop{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) !important;
  gap: 10px 12px !important;
  align-items: stretch !important;
}
body.page-profile .profilePane--ref #profileRefCode,
body.page-profile .profilePane--ref #profileRefStats{
  min-width: 0 !important;
}
body.page-profile .profilePane--ref #profileRefCode{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
}
body.page-profile .profilePane--ref #profileRefStats{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
}
body.page-profile .profilePane--ref #profileRefStats .refDetailsBox,
body.page-profile .profilePane--ref #profileRefCode .refTop{
  height: 100% !important;
}
body.page-profile .profilePane--ref #profileRefStats .refDetailsBox{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
body.page-profile .profilePane--ref #profileRefStats .refDetailsBox[open]{
  overflow: auto !important;
  scrollbar-gutter: stable !important;
}
body.page-profile .profilePane--ref .refTop{
  display: grid !important;
  gap: 10px !important;
}
body.page-profile .profilePane--ref .refTop__row{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}
body.page-profile .profilePane--ref .refTop__code{
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,.16) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
body.page-profile .profilePane--ref .refSummary{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}
body.page-profile .profilePane--ref .refStatCard{
  min-width: 0 !important;
  min-height: 72px !important;
  padding: 10px 12px !important;
}
body.page-profile .profilePane--ref #profileRefRewards,
body.page-profile .profilePane--ref #profileRefList{
  display: flex !important;
  flex-direction: column !important;
}
body.page-profile .profilePane--ref #profileRefRewards{
  max-height: 100% !important;
}
body.page-profile .profilePane--ref #profileRefRewards .refSteps{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable !important;
}
body.page-profile .profilePane--ref #profileRefRewards .refStep{
  padding: 12px !important;
  min-height: 0 !important;
}
body.page-profile .profilePane--ref #profileRefRewards .refStep__head{
  margin-bottom: 8px !important;
}
body.page-profile .profilePane--ref #profileRefRewards .refReward{
  padding: 8px 10px !important;
}
body.page-profile .profilePane--ref #profileRefRewards .refReward__icon{
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}
body.page-profile .profilePane--ref #profileRefList .profileTabCatalog,
body.page-profile .profilePane--ref #profileRefList > .state,
body.page-profile .profilePane--ref #profileRefList > .stateMount,
body.page-profile .profilePane--ref #profileRefList > .state--empty{
  min-height: 0 !important;
  height: 100% !important;
}
body.page-profile .profilePane--ref #profileRefList .profileTabCatalog{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
body.page-profile .profilePane--ref #profileRefList .profileSectionMiniTitle{
  margin-bottom: 0 !important;
}
body.page-profile .profilePane--ref .refListSimple{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding-right: 4px !important;
  align-content: flex-start !important;
  scrollbar-gutter: stable !important;
}
body.page-profile .profilePane--ref .refRow{
  min-height: 112px !important;
  padding: 12px !important;
}
body.page-profile .profilePane--ref .refRow__id{
  font-size: 13px !important;
  overflow-wrap: anywhere !important;
}
body.page-profile .profilePane--ref .refRow__progress{
  margin-top: 10px !important;
}
body.page-profile .profilePane--ref .refMarks{
  margin-top: 10px !important;
}
body.page-profile .profilePane--ref #profileRefRewards .refSteps::-webkit-scrollbar,
body.page-profile .profilePane--ref .refListSimple::-webkit-scrollbar,
body.page-profile .profilePane--ref #profileRefStats .refDetailsBox[open]::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
body.page-profile .profilePane--ref #profileRefRewards .refSteps::-webkit-scrollbar-thumb,
body.page-profile .profilePane--ref .refListSimple::-webkit-scrollbar-thumb,
body.page-profile .profilePane--ref #profileRefStats .refDetailsBox[open]::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
body.page-profile .profilePane--ref #profileRefRewards .refSteps::-webkit-scrollbar-track,
body.page-profile .profilePane--ref .refListSimple::-webkit-scrollbar-track,
body.page-profile .profilePane--ref #profileRefStats .refDetailsBox[open]::-webkit-scrollbar-track{
  background: rgba(0,0,0,.12);
  border-radius: 999px;
}
@media (max-width: 1320px){
  body.page-profile .profilePane--ref .profileRefBody{
    grid-template-columns: minmax(320px, .94fr) minmax(0, 1.06fr) !important;
  }
  body.page-profile .profilePane--ref #profileRefTop{
    grid-template-columns: minmax(0, 1fr) minmax(230px, 320px) !important;
  }
  body.page-profile .profilePane--ref .refListSimple{
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  }
}
@media (max-width: 1220px){
  body.page-profile .profilePane--ref{
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  body.page-profile .profilePane--ref .profileRefShell{
    grid-template-rows: auto auto !important;
  }
  body.page-profile .profilePane--ref .profileRefBody,
  body.page-profile .profilePane--ref #profileRefTop{
    grid-template-columns: 1fr !important;
  }
  body.page-profile .profilePane--ref #profileRefRewards .refSteps,
  body.page-profile .profilePane--ref .refListSimple,
  body.page-profile .profilePane--ref #profileRefStats .refDetailsBox[open]{
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 760px){
  body.page-profile .profilePane--ref .refSummary,
  body.page-profile .profilePane--ref .refSteps,
  body.page-profile .profilePane--ref .refStep__grid,
  body.page-profile .profilePane--ref .refListSimple{
    grid-template-columns: 1fr !important;
  }
  body.page-profile .profilePane--ref .refTop__row{
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   Public UI P2.87 — profile referrals viewport fit polish
   Goal: keep the referrals header compact, move counters into
   the top shell, and keep the lower rewards/list area pinned
   inside the canonical profile viewport on desktop.
========================================================= */
body.page-profile .profilePane--ref .card__head{
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
body.page-profile .profilePane--ref .profileRefActions{
  display: none !important;
}
body.page-profile .profilePane--ref #profileRefTop{
  grid-template-columns: minmax(0, 1.16fr) minmax(280px, .84fr) !important;
  gap: 10px !important;
}
body.page-profile .profilePane--ref #profileRefCode,
body.page-profile .profilePane--ref #profileRefStats{
  align-self: stretch !important;
}
body.page-profile .profilePane--ref #profileRefCode .refTop,
body.page-profile .profilePane--ref #profileRefStats .refStatsStack{
  height: 100% !important;
}
body.page-profile .profilePane--ref .refStatsStack{
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 10px !important;
  min-height: 0 !important;
}
body.page-profile .profilePane--ref .refSummary--inline{
  align-content: start !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.page-profile .profilePane--ref .refSummary--inline .refSummary__note{
  grid-column: 1 / -1 !important;
  white-space: normal !important;
  min-height: 0 !important;
  margin: 0 !important;
}
body.page-profile .profilePane--ref .refStatCard{
  min-height: 62px !important;
  padding: 9px 10px !important;
}
body.page-profile .profilePane--ref .refStatCard__label{
  font-size: 11px !important;
}
body.page-profile .profilePane--ref .refStatCard__value{
  font-size: 28px !important;
  line-height: 1.05 !important;
}
body.page-profile .profilePane--ref .refDetailsBox--inline{
  margin-top: 0 !important;
  min-height: 0 !important;
}
body.page-profile .profilePane--ref .refDetailsBox--inline > summary{
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
}
body.page-profile .profilePane--ref #profileRefRewards,
body.page-profile .profilePane--ref #profileRefList{
  max-height: 100% !important;
}
body.page-profile .profilePane--ref #profileRefRewards .refStep{
  padding: 10px !important;
}
body.page-profile .profilePane--ref #profileRefRewards .refStep__head .hint{
  line-height: 1.35 !important;
}
body.page-profile .profilePane--ref #profileRefList .profileTabCatalog{
  min-height: 0 !important;
}
body.page-profile .profilePane--ref .refListSimple{
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
}
@media (max-width: 1320px){
  body.page-profile .profilePane--ref #profileRefTop{
    grid-template-columns: minmax(0, 1fr) minmax(240px, .9fr) !important;
  }
  body.page-profile .profilePane--ref .refStatCard__value{
    font-size: 24px !important;
  }
}
@media (max-width: 1220px){
  body.page-profile .profilePane--ref .profileRefActions{
    display: none !important;
  }
  body.page-profile .profilePane--ref #profileRefCode .refTop,
  body.page-profile .profilePane--ref #profileRefStats .refStatsStack{
    height: auto !important;
  }
}
@media (max-width: 760px){
  body.page-profile .profilePane--ref .refSummary--inline{
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   Public UI P2.88 — profile referrals runtime viewport fit
   Goal: drive the desktop profile shell from the real layout
   top offset so the referrals tab ends at the viewport bottom
   and only the footer remains below.
========================================================= */
@media (min-width: 981px){
  body.page-profile .profileNav--side{
    max-height: var(--profile-canon-h) !important;
  }
  body.page-profile .profilePane--ref{
    max-height: var(--profile-canon-h) !important;
  }
  body.page-profile .profilePane--ref .profileRefShell,
  body.page-profile .profilePane--ref .profileRefBody{
    min-height: 0 !important;
  }
}


/* =========================================================
   Public UI P2.89 — referrals tab rebuild
   Goal: isolate the referrals tab from legacy profile CSS,
   rebuild the shell around independent mounts, keep desktop
   height pinned to the viewport, and let tablet/mobile stack
   naturally without hidden overflow.
========================================================= */
body.page-profile .profilePane--ref{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
body.page-profile .profilePane--ref .card__head{
  flex: 0 0 auto !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px 12px !important;
  margin-bottom: 0 !important;
}
body.page-profile .profilePane--ref .card__head > :first-child{
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
body.page-profile .profilePane--ref .profileRefViewport{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 10px !important;
}
body.page-profile .profilePane--ref .profileRefHero{
  min-height: 0 !important;
  padding: 12px !important;
  background:
    radial-gradient(130% 140% at 0% 0%, rgba(240,140,40,.10), rgba(240,140,40,0) 46%),
    linear-gradient(180deg, rgba(12,18,30,.92), rgba(8,12,21,.90)) !important;
}
body.page-profile .profilePane--ref .profileRefHero__grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr) !important;
  gap: 12px !important;
  align-items: start !important;
}
body.page-profile .profilePane--ref .profileRefHero__main,
body.page-profile .profilePane--ref .profileRefHero__aside,
body.page-profile .profilePane--ref #profileRefLinkMount,
body.page-profile .profilePane--ref #profileRefSummaryMount,
body.page-profile .profilePane--ref #profileRefRewardsMount,
body.page-profile .profilePane--ref #profileRefListMount{
  min-width: 0 !important;
  min-height: 0 !important;
}
body.page-profile .profilePane--ref #profileRefLinkMount .refTop,
body.page-profile .profilePane--ref #profileRefSummaryMount .refStatsStack{
  height: auto !important;
}
body.page-profile .profilePane--ref .refTop{
  display: grid !important;
  grid-auto-rows: min-content !important;
  gap: 10px !important;
}
body.page-profile .profilePane--ref .profileInlineHint{
  margin: 0 !important;
}
body.page-profile .profilePane--ref .refTop__row{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
}
body.page-profile .profilePane--ref .refTop__row--mt{
  margin-top: 0 !important;
}
body.page-profile .profilePane--ref .refTop__code{
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(0,0,0,.16) !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
body.page-profile .profilePane--ref .refDetails{
  display: grid !important;
  gap: 8px !important;
}
body.page-profile .profilePane--ref .refStatsStack{
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  gap: 10px !important;
  min-height: 0 !important;
  align-content: start !important;
}
body.page-profile .profilePane--ref .refSummary--inline{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  align-content: start !important;
}
body.page-profile .profilePane--ref .refStatCard{
  min-width: 0 !important;
  min-height: 68px !important;
  padding: 9px 10px !important;
}
body.page-profile .profilePane--ref .refStatCard__label{
  font-size: 11px !important;
}
body.page-profile .profilePane--ref .refStatCard__value{
  font-size: 28px !important;
  line-height: 1.05 !important;
}
body.page-profile .profilePane--ref .refStatsNote{
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: rgba(231,237,243,.74) !important;
  padding: 0 2px !important;
}
body.page-profile .profilePane--ref .refDetailsBox--inline{
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  align-self: start !important;
}
body.page-profile .profilePane--ref .refDetailsBox--inline > summary{
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
}
body.page-profile .profilePane--ref .refDetailsBox--inline[open]{
  overflow: auto !important;
  max-height: min(176px, 28vh) !important;
  scrollbar-gutter: stable !important;
}
body.page-profile .profilePane--ref .profileRefGrid{
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(320px, .92fr) minmax(0, 1.08fr) !important;
  gap: 10px !important;
}
body.page-profile .profilePane--ref .profileRefColumn{
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.page-profile .profilePane--ref .profileRefColumn--rewards{
  container-type: inline-size;
}
body.page-profile .profilePane--ref .profileRefColumn__head{
  padding: 12px 14px 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
body.page-profile .profilePane--ref .profileRefColumn__title{
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin-bottom: 4px !important;
}
body.page-profile .profilePane--ref .profileRefColumn__body{
  min-height: 0 !important;
  overflow: auto !important;
  padding: 12px 14px 14px !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}
body.page-profile .profilePane--ref .profileRefColumn--rewards .profileRefColumn__body{
  padding: 10px 12px 12px !important;
}
body.page-profile .profilePane--ref .profileRefColumn__body > .state,
body.page-profile .profilePane--ref .profileRefColumn__body > .stateMount,
body.page-profile .profilePane--ref .profileRefColumn__body > .state--empty{
  min-height: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
body.page-profile .profilePane--ref .refSteps{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  align-items: start !important;
}
body.page-profile .profilePane--ref .refStep{
  min-height: 0 !important;
  padding: 10px !important;
  border-radius: 14px !important;
  display: grid !important;
  align-content: start !important;
}
body.page-profile .profilePane--ref .refStep__head{
  margin-bottom: 6px !important;
  gap: 3px !important;
}
body.page-profile .profilePane--ref .refStep__title{
  font-size: 16px !important;
  line-height: 1.12 !important;
}
body.page-profile .profilePane--ref .refStep__head .hint{
  font-size: 11px !important;
  line-height: 1.3 !important;
}
body.page-profile .profilePane--ref .refStep__grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
body.page-profile .profilePane--ref .refStep__col{
  min-width: 0 !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  display: grid !important;
  align-content: start !important;
}
body.page-profile .profilePane--ref .refStep__colTitle{
  margin-bottom: 6px !important;
}
body.page-profile .profilePane--ref .refRewardList{
  display: grid !important;
  gap: 6px !important;
}
body.page-profile .profilePane--ref .refReward{
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 7px 8px !important;
}
body.page-profile .profilePane--ref .refReward__icon{
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
}
body.page-profile .profilePane--ref .refReward__title{
  font-size: 13px !important;
  line-height: 1.14 !important;
}
body.page-profile .profilePane--ref .refReward__tag{
  font-size: 10px !important;
  line-height: 1.22 !important;
}
@container (min-width: 540px){
  body.page-profile .profilePane--ref .profileRefColumn--rewards .refSteps{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.page-profile .profilePane--ref .profileRefColumn--rewards .refStep__grid{
    grid-template-columns: 1fr !important;
  }
}
@container (max-width: 430px){
  body.page-profile .profilePane--ref .profileRefColumn--rewards .refStep__grid{
    grid-template-columns: 1fr !important;
  }
}
body.page-profile .profilePane--ref .refListSimple--stack{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
body.page-profile .profilePane--ref .refRow{
  min-height: 0 !important;
  padding: 12px !important;
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
}
body.page-profile .profilePane--ref .refRow__top{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
body.page-profile .profilePane--ref .refRow__id{
  min-width: 0 !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}
body.page-profile .profilePane--ref .refRow__progress{
  margin-top: 0 !important;
}
body.page-profile .profilePane--ref .refMarks{
  margin-top: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
body.page-profile .profilePane--ref .refMark{
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.03) !important;
  font-size: 11px !important;
}
body.page-profile .profilePane--ref .profileRefColumn__body::-webkit-scrollbar,
body.page-profile .profilePane--ref .refDetailsBox--inline[open]::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
body.page-profile .profilePane--ref .profileRefColumn__body::-webkit-scrollbar-thumb,
body.page-profile .profilePane--ref .refDetailsBox--inline[open]::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
body.page-profile .profilePane--ref .profileRefColumn__body::-webkit-scrollbar-track,
body.page-profile .profilePane--ref .refDetailsBox--inline[open]::-webkit-scrollbar-track{
  background: rgba(0,0,0,.12);
  border-radius: 999px;
}
@media (min-width: 981px){
  body.page-profile .profileMain > .pPanel[data-ppanel="ref"],
  body.page-profile .profileMain > .pPanel[data-ppanel="ref"].is-active,
  body.page-profile .profileMain > .pPanel[data-ppanel="ref"] > .profilePane,
  body.page-profile .profileMain > .pPanel[data-ppanel="ref"].is-active > .profilePane{
    min-height: var(--profile-canon-h) !important;
    height: var(--profile-canon-h) !important;
    max-height: var(--profile-canon-h) !important;
  }
  body.page-profile .profilePane--ref{
    overflow: hidden !important;
  }
}
@media (max-width: 1360px){
  body.page-profile .profilePane--ref .profileRefHero__grid{
    grid-template-columns: minmax(0, 1fr) minmax(250px, .92fr) !important;
  }
}
@media (max-width: 1220px){
  body.page-profile .profilePane--ref{
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.page-profile .profileMain > .pPanel[data-ppanel="ref"],
  body.page-profile .profileMain > .pPanel[data-ppanel="ref"].is-active,
  body.page-profile .profileMain > .pPanel[data-ppanel="ref"] > .profilePane,
  body.page-profile .profileMain > .pPanel[data-ppanel="ref"].is-active > .profilePane{
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
  body.page-profile .profilePane--ref .profileRefViewport{
    grid-template-rows: auto auto !important;
  }
  body.page-profile .profilePane--ref .profileRefHero__grid,
  body.page-profile .profilePane--ref .profileRefGrid,
  body.page-profile .profilePane--ref .refStep__grid{
    grid-template-columns: 1fr !important;
  }
  body.page-profile .profilePane--ref .profileRefColumn{
    overflow: visible !important;
  }
  body.page-profile .profilePane--ref .profileRefColumn__body,
  body.page-profile .profilePane--ref .refDetailsBox--inline[open]{
    overflow: visible !important;
    max-height: none !important;
    padding-right: 14px !important;
  }
}
@media (max-width: 760px){
  body.page-profile .profilePane--ref .refSummary--inline{
    grid-template-columns: 1fr !important;
  }
  body.page-profile .profilePane--ref .refTop__row{
    grid-template-columns: 1fr !important;
  }
  body.page-profile .profilePane--ref .refTop__row .btn{
    width: 100% !important;
    justify-content: center !important;
  }
  body.page-profile .profilePane--ref .refRow__top{
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* =========================================================
   Public UI P2.90 — referral auth gate
   Goal: make referral links land on a useful guest screen with
   inviter info, reward preview and a clear Steam CTA.
========================================================= */
.profileAuthNotices{
  display:grid;
  gap:10px;
  margin-bottom:10px;
}
.profileAuthNotice{
  margin:0;
}
.profileAuthGate{
  display:grid;
  gap:18px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(1200px 360px at 100% 0%, rgba(255,122,0,.10), transparent 54%),
    linear-gradient(180deg, rgba(7,14,28,.96), rgba(5,10,20,.98));
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}
.profileAuthGate__hero{
  display:grid;
  gap:14px;
}
.profileAuthGate__eyebrow{
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(231,237,243,.72);
}
.profileAuthGate__title{
  font-size:clamp(28px, 3.2vw, 40px);
  line-height:1.02;
  font-weight:1000;
  max-width:12ch;
}
.profileAuthGate__text{
  max-width:62ch;
  color:rgba(231,237,243,.84);
  line-height:1.58;
}
.profileAuthGate__invite{
  display:grid;
  grid-template-columns:72px minmax(0, 1fr);
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.profileAuthGate__inviteAvatar{
  width:72px;
  height:72px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}
.profileAuthGate__inviteAvatar--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  color:rgba(231,237,243,.82);
}
.profileAuthGate__inviteBody{
  min-width:0;
  display:grid;
  gap:6px;
}
.profileAuthGate__inviteLabel{
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(231,237,243,.62);
}
.profileAuthGate__inviteName{
  font-size:22px;
  line-height:1.1;
  font-weight:1000;
  word-break:break-word;
}
.profileAuthGate__chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.profileAuthGate__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.profileAuthGate__steps{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.profileAuthGate .refStep{
  height:100%;
  margin:0;
}
.profileAuthGate .refStep__head .hint{
  line-height:1.45;
}
.profileAuthGate--simple{
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
}
.pageMissingPage{
  min-height: min(56dvh, 520px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(18px, 2.4vw, 26px);
}
.pageMissingState{
  width: min(100%, 760px);
}
body.page-profile .profileAuthGate--simple{
  max-width: 920px;
  margin: 0 auto;
}
.profileAuthGate--simple .state__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
@media (max-width: 980px){
  .profileAuthGate__steps{
    grid-template-columns:1fr;
  }
}
@media (max-width: 760px){
  .profileAuthGate{
    padding:16px;
    border-radius:20px;
  }
  .profileAuthGate__invite{
    grid-template-columns:56px minmax(0, 1fr);
    padding:12px;
  }
  .profileAuthGate__inviteAvatar{
    width:56px;
    height:56px;
    border-radius:16px;
  }
  .profileAuthGate__actions,
  .profileAuthGate--simple .state__actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .profileAuthGate__actions .btn,
  .profileAuthGate--simple .state__actions .btn{
    width:100%;
    justify-content:center;
  }
  .profileAuthGate--simple{
    grid-template-columns:1fr;
  }
}

/* =========================================================