/*
 * Extracted from assets/app.css on 2026-04-06.
 * Section: Profile systems: levels, rads, bases, inventory, achievements and notifications
 * Source lines: 17988-22281
 */

/* LEVELS */
.profilePane--levels #profileLevelsTop,
.profilePane--levels #profileLevelsList{
  align-content: start !important;
}
.profilePane--levels .lvlTop{
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr) !important;
  gap: 12px !important;
}
.profilePane--levels .lvlTop__main,
.profilePane--levels .lvlTop__side{
  min-height: 152px !important;
}
.profilePane--levels .lvlNextRewards{
  align-content: flex-start !important;
}
.profilePane--levels #profileLevelsList .profileTabCatalog,
.profilePane--levels .lvlGrid{
  width: 100% !important;
}
.profilePane--levels .lvlGrid{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.profilePane--levels .lvlCard{
  flex: 1 1 220px !important;
  max-width: calc(25% - 9px) !important;
  min-width: 220px !important;
  min-height: 168px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
.profilePane--levels .lvlCard__head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.profilePane--levels .lvlCard__state{
  text-align: right !important;
}
.profilePane--levels .lvlCard__rewards{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

/* RADS */
.profilePane--rads .profileSplit{
  grid-template-columns: minmax(0, 1fr) minmax(320px, .96fr) !important;
  gap: 12px !important;
}
.profilePane--rads #profileRadsSummary,
.profilePane--rads #profileRadsDaily,
.profilePane--rads #profileRadsEvents{
  align-content: start !important;
}
.profilePane--rads .profileRadsSummaryGrid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.profilePane--rads .miniTable,
.profilePane--rads .eventsTable{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}
.profilePane--rads .miniRow{
  display: grid !important;
  grid-template-columns: 108px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}
.profilePane--rads .miniKey,
.profilePane--rads .miniVal,
.profilePane--rads .evTs,
.profilePane--rads .evAmt,
.profilePane--rads .evMeta,
.profilePane--rads .evWhere{
  min-width: 0 !important;
  display: block !important;
}
.profilePane--rads .evRow{
  display: grid !important;
  grid-template-columns: 126px 88px minmax(0, 1fr) !important;
  grid-template-areas:
    "ts amt meta"
    "where where where" !important;
  align-items: center !important;
  gap: 6px 12px !important;
  min-height: 58px !important;
}
.profilePane--rads .evTs{ grid-area: ts !important; }
.profilePane--rads .evAmt{ grid-area: amt !important; justify-self: end !important; }
.profilePane--rads .evMeta{
  grid-area: meta !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.profilePane--rads .evWhere{
  grid-area: where !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: rgba(231,237,243,.66) !important;
  white-space: normal !important;
}

/* MY BASES */
.profilePane--bases #myBasesList,
.profilePane--bases #myBasesInvites,
.profilePane--bases .myBasesBlock,
.profilePane--bases .baseMiniList,
.profilePane--bases .baseInviteList{
  width: 100% !important;
  align-content: start !important;
}
.profilePane--bases .state{
  min-height: 88px !important;
}
.profilePane--bases .baseMiniRowWrap{
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}
.profilePane--bases .baseMiniRow,
.profilePane--bases .baseInviteRow{
  min-height: 84px !important;
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}
.profilePane--bases .baseMiniRow__img,
.profilePane--bases .baseInviteRow__img{
  width: 82px !important;
  height: 56px !important;
}
.profilePane--bases .baseMiniRowActions,
.profilePane--bases .baseInviteActions{
  min-width: 132px !important;
}

/* LIKES */
.profilePane--likes .profileLikesToolbar,
.profilePane--inv .profileLikesToolbar,
.profilePane--ach .profileLikesToolbar{
  grid-template-columns: auto minmax(280px, 1fr) !important;
  align-items: center !important;
}
.profilePane--likes .likeUserList{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}
.profilePane--likes .likeUserRow{
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
}
.profilePane--likes .likeUserRow__main{ min-width: 0 !important; }
.profilePane--likes .likeUserRow__actions{
  margin-left: 0 !important;
  align-self: center !important;
}

/* INVENTORY */
.profilePane--inv .invGrid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}
.profilePane--inv .invSlot{
  min-height: 218px !important;
}
.profilePane--inv .invSlot__meta{
  min-height: 34px !important;
}

/* ACHIEVEMENTS */
.profilePane--ach .achList{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}
.profilePane--ach .achItem{
  min-height: 168px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
}
.profilePane--ach .achItem__main{
  min-width: 0 !important;
}
.profilePane--ach .achItem__sub,
.profilePane--ach .achItem__meta,
.profilePane--ach .achItem__desc{
  display: block !important;
}

/* REFERRALS */
.profilePane--ref .card__head{
  align-items: start !important;
}
.profilePane--ref .refSummary{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: min(360px, 100%) !important;
}
.profilePane--ref #profileRefTop,
.profilePane--ref #profileRefRewards,
.profilePane--ref #profileRefList{
  align-content: start !important;
}
.profilePane--ref #profileRefTop{
  display: grid !important;
  gap: 12px !important;
}
.profilePane--ref .refTop__row{
  grid-template-columns: minmax(0, 1fr) auto !important;
}
.profilePane--ref .refTop__code{
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
}
.profilePane--ref .refSteps{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.profilePane--ref .refStep{
  min-height: 0 !important;
}
.profilePane--ref .refListSimple{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}
.profilePane--ref .refRow{
  min-height: 126px !important;
}

/* NOTIFICATIONS */
.profilePane--notifs .profileSplit{
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr) !important;
  gap: 12px !important;
}
.profilePane--notifs #notifPrefsEvents.toggleList{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.profilePane--notifs #notifPrefsDevice.toggleList{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.profilePane--notifs .toggleRow{
  min-height: 108px !important;
  align-items: start !important;
}
.profilePane--notifs .toggleRow__meta{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}
.profilePane--notifs .toggleRow__label{
  font-size: 13px !important;
  line-height: 1.22 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
.profilePane--notifs .toggleRow__desc{
  font-size: 11px !important;
  line-height: 1.38 !important;
  color: rgba(231,237,243,.72) !important;
}
.profilePane--notifs .switch{
  align-self: start !important;
}

@media (max-width: 1380px){
  .profilePane--levels .lvlCard{
    max-width: calc(33.333% - 8px) !important;
  }
}
@media (max-width: 1220px){
  .profilePane--levels .lvlCard{
    max-width: calc(50% - 6px) !important;
  }
  .profilePane--rads .profileSplit,
  .profilePane--notifs .profileSplit,
  .profilePane--ref .refSteps{
    grid-template-columns: 1fr !important;
  }
  .profilePane--notifs #notifPrefsEvents.toggleList,
  .profilePane--notifs #notifPrefsDevice.toggleList{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 980px){
  .profilePane--levels .lvlTop,
  .profilePane--likes .profileLikesToolbar,
  .profilePane--inv .profileLikesToolbar,
  .profilePane--ach .profileLikesToolbar,
  .profilePane--ref .refTop__row{
    grid-template-columns: 1fr !important;
  }
  .profilePane--levels .lvlCard{
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .profilePane--likes .likeUserRow,
  .profilePane--bases .baseMiniRowWrap,
  .profilePane--bases .baseMiniRow,
  .profilePane--bases .baseInviteRow{
    grid-template-columns: 1fr !important;
  }
  .profilePane--bases .baseMiniRowActions,
  .profilePane--bases .baseInviteActions,
  .profilePane--likes .likeUserRow__actions{
    width: 100% !important;
    justify-content: space-between !important;
  }
}
@media (max-width: 760px){
  .profilePane--levels .lvlGrid,
  .profilePane--inv .invGrid,
  .profilePane--ach .achList,
  .profilePane--ref .refListSimple,
  .profilePane--ref .refSummary,
  .profilePane--likes .likeUserList{
    grid-template-columns: 1fr !important;
  }
  .profilePane--rads .profileRadsSummaryGrid{
    grid-template-columns: 1fr !important;
  }
  .profilePane--rads .evRow{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "ts"
      "amt"
      "meta"
      "where" !important;
  }
  .profilePane--rads .evAmt{ justify-self: start !important; }
  .profilePane--ref .refSummary{
    width: 100% !important;
  }
}

/* =========================================================
   Public UI P2.56 — profile levels audit and refined tiles
   Goal: clean leftover layout debt in the Levels tab and turn
   the catalog into compact, balanced tiles without stretched
   columns or empty vertical voids.
========================================================= */
.profilePane--levels{
  --lvl-tile-min: 236px;
}
.profilePane--levels .card__head{
  align-items:flex-start !important;
}
.profilePane--levels .profileLikesSummary{
  white-space: nowrap;
}
.profilePane--levels #profileLevelsTop,
.profilePane--levels #profileLevelsList,
.profilePane--levels .profileTabCatalog{
  width:100% !important;
}
.profilePane--levels .lvlTop.lvlTop--refined{
  display:grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr) !important;
  gap: 14px !important;
}
.profilePane--levels .lvlTop__main--refined,
.profilePane--levels .lvlTop__side--refined{
  min-height: 146px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.16);
}
.profilePane--levels .lvlTop__main--refined{
  position: relative;
  overflow: hidden;
}
.profilePane--levels .lvlTop__main--refined::after{
  content:"";
  position:absolute;
  inset:auto auto -34px -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,140,40,.14), transparent 68%);
  pointer-events:none;
}
.profilePane--levels .lvlTop__value{
  font-size: 28px !important;
  line-height: 1.05;
}
.profilePane--levels .lvlTop__meta{
  font-size: 13px !important;
  color: rgba(231,237,243,.78) !important;
}
.profilePane--levels .lvlBar{
  margin-top: 12px;
  height: 8px !important;
  background: rgba(255,255,255,.06) !important;
}
.profilePane--levels .lvlBar__fill{
  background: linear-gradient(90deg, rgba(240,140,40,.92), rgba(255,180,79,.74)) !important;
  border-radius: inherit;
  box-shadow: 0 0 18px rgba(240,140,40,.25);
}
.profilePane--levels .lvlTop__xp{
  margin-top: 12px !important;
  font-size: 12px !important;
  color: rgba(231,237,243,.86) !important;
}
.profilePane--levels .lvlTop__side--refined{
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}
.profilePane--levels .lvlTop__empty,
.profilePane--levels .lvlTop__note{
  font-size: 12px;
  line-height: 1.45;
  color: rgba(231,237,243,.72);
}
.profilePane--levels .lvlTop__note{
  margin-top: 12px;
}
.profilePane--levels .lvlNextRewards--compact{
  display:flex !important;
  flex-wrap:wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.profilePane--levels .lvlGrid{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(var(--lvl-tile-min), 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}
.profilePane--levels .lvlCard{
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
  display:grid !important;
  grid-template-rows: auto auto auto 1fr !important;
  gap: 10px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)),
    radial-gradient(circle at top right, rgba(240,140,40,.08), transparent 34%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 24px rgba(0,0,0,.12);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.profilePane--levels .lvlCard:hover{
  transform: translateY(-2px);
  border-color: rgba(240,140,40,.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 30px rgba(0,0,0,.18);
}
.profilePane--levels .lvlCard--current{
  border-color: rgba(240,140,40,.42) !important;
  box-shadow: 0 0 0 1px rgba(240,140,40,.18), 0 16px 30px rgba(0,0,0,.18) !important;
}
.profilePane--levels .lvlCard--done{
  border-color: rgba(89, 218, 146, .22) !important;
}
.profilePane--levels .lvlCard--pending{
  opacity: 1 !important;
}
.profilePane--levels .lvlCard__head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap: 10px !important;
}
.profilePane--levels .lvlCard__eyebrow,
.profilePane--levels .lvlCard__lvl{
  font-size: 13px !important;
  font-weight: 1000 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(231,237,243,.9);
}
.profilePane--levels .lvlCard__state{
  padding: 5px 9px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.profilePane--levels .lvlCard--current .lvlCard__state{
  background: rgba(240,140,40,.14) !important;
  border-color: rgba(240,140,40,.34) !important;
}
.profilePane--levels .lvlCard--done .lvlCard__state{
  background: rgba(89,218,146,.12) !important;
  border-color: rgba(89,218,146,.26) !important;
}
.profilePane--levels .lvlCard__title{
  font-size: 18px !important;
  line-height: 1.15;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
}
.profilePane--levels .lvlCard__metaRow{
  display:flex !important;
  flex-wrap:wrap !important;
  gap: 8px 12px !important;
  align-items:center !important;
}
.profilePane--levels .lvlCard__req,
.profilePane--levels .lvlCard__count{
  display:inline-flex !important;
  align-items:center !important;
  gap: 4px;
  font-size: 12px !important;
  color: rgba(231,237,243,.8) !important;
}
.profilePane--levels .lvlCard__rewards{
  display:flex !important;
  flex-wrap:wrap !important;
  gap: 8px !important;
  align-content:flex-start !important;
  min-height: 30px;
}
.profilePane--levels .lvlCard__empty{
  display:inline-flex;
  align-items:center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.12);
  font-size: 12px;
  color: rgba(231,237,243,.66);
}
.profilePane--levels .lvlReward{
  max-width: 100%;
}
.profilePane--levels .lvlReward--mini{
  padding: 5px 8px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  gap: 6px !important;
  max-width: 100%;
}
.profilePane--levels .lvlReward--mini .lvlReward__ico{
  width: 15px !important;
  height: 15px !important;
  border-radius: 5px !important;
}
.profilePane--levels .lvlReward__txt{
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profilePane--levels .profileTabCatalog{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.profilePane--levels .profileSectionMiniTitle{
  margin-bottom: 12px !important;
}

@media (max-width: 1280px){
  .profilePane--levels{
    --lvl-tile-min: 214px;
  }
  .profilePane--levels .lvlTop.lvlTop--refined{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 980px){
  .profilePane--levels .lvlGrid{
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  }
}
@media (max-width: 760px){
  .profilePane--levels .lvlGrid{
    grid-template-columns: 1fr !important;
  }
  .profilePane--levels .lvlCard{
    padding: 12px !important;
  }
  .profilePane--levels .lvlCard__title{
    font-size: 16px !important;
  }
}

/* =========================================================
   Public UI P2.57 — levels pane same scale as overview
   Goal: bring the Levels tab to the same visual scale as the
   Information tab: compact section heights, balanced cards and
   no oversized tiles or stretched vertical rhythm.
========================================================= */
.profilePane--levels{
  --lvl-tile-min: 208px;
}
.profilePane--levels .card__head{
  margin-bottom: 10px !important;
}
.profilePane--levels #profileLevelsTop,
.profilePane--levels #profileLevelsList{
  padding: 12px !important;
  border-radius: 20px !important;
}
.profilePane--levels #profileLevelsList{
  margin-top: 12px !important;
}
.profilePane--levels .profileSectionMiniTitle{
  margin-bottom: 10px !important;
  font-size: 11px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(240,140,40,.88) !important;
}
.profilePane--levels .lvlTop.lvlTop--refined{
  gap: 12px !important;
  align-items: stretch !important;
}
.profilePane--levels .lvlTop__main--refined,
.profilePane--levels .lvlTop__side--refined{
  min-height: 122px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 22px rgba(0,0,0,.12) !important;
}
.profilePane--levels .lvlTop__main--refined::after{
  width: 132px;
  height: 132px;
  inset: auto auto -30px -24px;
  opacity: .75;
}
.profilePane--levels .lvlTop__kicker{
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  color: rgba(231,237,243,.54) !important;
}
.profilePane--levels .lvlTop__value{
  font-size: 24px !important;
  margin-top: 2px !important;
}
.profilePane--levels .lvlTop__meta{
  font-size: 12px !important;
  min-height: 16px;
}
.profilePane--levels .lvlBar{
  margin-top: 10px !important;
  height: 7px !important;
}
.profilePane--levels .lvlTop__xp{
  margin-top: 10px !important;
  font-size: 11px !important;
  line-height: 1.35;
}
.profilePane--levels .lvlTop__side--refined{
  gap: 8px !important;
}
.profilePane--levels .lvlTop__empty,
.profilePane--levels .lvlTop__note{
  font-size: 11px !important;
  line-height: 1.4 !important;
}
.profilePane--levels .lvlTop__note{
  margin-top: 0 !important;
}
.profilePane--levels .lvlNextRewards--compact{
  margin-top: 6px !important;
  gap: 6px !important;
}

.profilePane--levels .profileTabCatalog{
  padding: 0 !important;
}
.profilePane--levels .lvlGrid{
  grid-template-columns: repeat(auto-fit, minmax(var(--lvl-tile-min), 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}
.profilePane--levels .lvlCard{
  min-height: 158px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  gap: 8px !important;
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 22px rgba(0,0,0,.12) !important;
}
.profilePane--levels .lvlCard__head{
  gap: 8px !important;
  align-items: center !important;
}
.profilePane--levels .lvlCard__eyebrow,
.profilePane--levels .lvlCard__lvl{
  font-size: 12px !important;
}
.profilePane--levels .lvlCard__state{
  padding: 4px 8px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}
.profilePane--levels .lvlCard__title{
  font-size: 15px !important;
  line-height: 1.2 !important;
  min-height: 18px;
}
.profilePane--levels .lvlCard__metaRow{
  gap: 6px 10px !important;
}
.profilePane--levels .lvlCard__req,
.profilePane--levels .lvlCard__count{
  font-size: 11px !important;
  line-height: 1.3 !important;
}
.profilePane--levels .lvlCard__rewards{
  gap: 6px !important;
  min-height: 24px !important;
}
.profilePane--levels .lvlCard__empty{
  min-height: 24px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}
.profilePane--levels .lvlReward--mini{
  padding: 4px 7px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  gap: 5px !important;
  min-height: 24px !important;
}
.profilePane--levels .lvlReward--mini .lvlReward__ico{
  width: 13px !important;
  height: 13px !important;
  border-radius: 4px !important;
}
.profilePane--levels .lvlReward__txt{
  font-size: inherit !important;
}

@media (max-width: 1280px){
  .profilePane--levels{
    --lvl-tile-min: 196px;
  }
  .profilePane--levels .lvlTop__main--refined,
  .profilePane--levels .lvlTop__side--refined{
    min-height: 118px !important;
  }
}
@media (max-width: 980px){
  .profilePane--levels .lvlGrid{
    grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)) !important;
  }
  .profilePane--levels .lvlCard{
    min-height: 148px !important;
  }
}
@media (max-width: 760px){
  .profilePane--levels #profileLevelsTop,
  .profilePane--levels #profileLevelsList{
    padding: 10px !important;
  }
  .profilePane--levels .lvlTop__main--refined,
  .profilePane--levels .lvlTop__side--refined,
  .profilePane--levels .lvlCard{
    border-radius: 14px !important;
  }
  .profilePane--levels .lvlCard{
    min-height: 0 !important;
  }
}


/* =========================================================
   Public UI P2.58 — levels viewport fit and compact catalog
   Goal: keep the Levels tab within the same visual height as
   the Information tab. Compact the top block and level cards
   so the catalog stays inside the viewport without the last
   row falling below the fold on desktop.
========================================================= */

.profilePane--levels{
  --lvl-tile-min: 186px;
}
.profilePane--levels .card__head{
  margin-bottom: 8px !important;
}
.profilePane--levels #profileLevelsTop,
.profilePane--levels #profileLevelsList{
  padding: 10px !important;
  border-radius: 18px !important;
}
.profilePane--levels #profileLevelsList{
  margin-top: 10px !important;
}
.profilePane--levels .profileSectionMiniTitle{
  margin-bottom: 8px !important;
  font-size: 10px !important;
}
.profilePane--levels .lvlTop.lvlTop--refined{
  gap: 10px !important;
}
.profilePane--levels .lvlTop__main--refined,
.profilePane--levels .lvlTop__side--refined{
  min-height: 106px !important;
  padding: 10px !important;
  border-radius: 14px !important;
}
.profilePane--levels .lvlTop__main--refined::after{
  width: 108px;
  height: 108px;
  inset: auto auto -24px -20px;
}
.profilePane--levels .lvlTop__value{
  font-size: 21px !important;
}
.profilePane--levels .lvlTop__meta,
.profilePane--levels .lvlTop__xp,
.profilePane--levels .lvlTop__empty,
.profilePane--levels .lvlTop__note{
  font-size: 10px !important;
  line-height: 1.35 !important;
}
.profilePane--levels .lvlBar{
  margin-top: 8px !important;
  height: 6px !important;
}
.profilePane--levels .lvlTop__xp{
  margin-top: 8px !important;
}
.profilePane--levels .lvlTop__note{
  margin-top: 4px !important;
}
.profilePane--levels .lvlNextRewards--compact{
  margin-top: 4px !important;
  gap: 5px !important;
}
.profilePane--levels .lvlGrid{
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.profilePane--levels .lvlCard{
  min-height: 126px !important;
  padding: 10px !important;
  border-radius: 14px !important;
  gap: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 8px 18px rgba(0,0,0,.10) !important;
}
.profilePane--levels .lvlCard__head{
  gap: 6px !important;
}
.profilePane--levels .lvlCard__eyebrow,
.profilePane--levels .lvlCard__lvl{
  font-size: 11px !important;
}
.profilePane--levels .lvlCard__state{
  padding: 3px 7px !important;
  font-size: 9px !important;
}
.profilePane--levels .lvlCard__title{
  font-size: 14px !important;
  min-height: 0 !important;
}
.profilePane--levels .lvlCard__metaRow{
  gap: 4px 8px !important;
}
.profilePane--levels .lvlCard__req,
.profilePane--levels .lvlCard__count{
  font-size: 10px !important;
  line-height: 1.25 !important;
}
.profilePane--levels .lvlCard__rewards{
  gap: 5px !important;
  min-height: 0 !important;
}
.profilePane--levels .lvlCard--no-reward .lvlCard__rewards,
.profilePane--levels .lvlCard__rewards:empty{
  display: none !important;
}
.profilePane--levels .lvlCard__empty{
  display: none !important;
}
.profilePane--levels .lvlReward--mini{
  padding: 3px 6px !important;
  border-radius: 9px !important;
  font-size: 9px !important;
  min-height: 20px !important;
}
.profilePane--levels .lvlReward--mini .lvlReward__ico{
  width: 12px !important;
  height: 12px !important;
}

@media (max-width: 1360px){
  .profilePane--levels{
    --lvl-tile-min: 178px;
  }
  .profilePane--levels .lvlGrid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 1080px){
  .profilePane--levels .lvlGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .profilePane--levels .lvlTop__main--refined,
  .profilePane--levels .lvlTop__side--refined{
    min-height: 0 !important;
  }
}
@media (max-width: 760px){
  .profilePane--levels .lvlGrid{
    grid-template-columns: 1fr !important;
  }
  .profilePane--levels .lvlCard{
    min-height: 0 !important;
  }
}


/* =========================================================
   Public UI P2.59 — levels pagination
   Goal: keep the Levels tab within the same vertical rhythm as
   Information even when many levels are configured. We page the
   catalog instead of letting cards endlessly grow downward.
========================================================= */
.profilePane--levels .profileTabCatalog--levels{
  gap: 10px !important;
}
.profilePane--levels .profileSectionMiniTitle--withMeta{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px 12px !important;
  flex-wrap: wrap !important;
}
.profilePane--levels .profileSectionMiniMeta{
  color: rgba(235,240,255,.72);
  font-size: 10px;
  font-weight: 700;
}
.profilePane--levels .levelsPager{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  flex-wrap: wrap;
  margin-top: 2px;
  padding-top: 2px;
}
.profilePane--levels .levelsPager__meta{
  color: rgba(235,240,255,.74);
  font-size: 10px;
}
.profilePane--levels .levelsPager__controls{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.profilePane--levels .levelsPager__btn{
  min-width: 34px;
  min-height: 28px;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}
.profilePane--levels .levelsPager__btn--nav{
  min-width: 72px;
}
.profilePane--levels .levelsPager__btn.is-active,
.profilePane--levels .levelsPager__btn[aria-current="page"]{
  background: linear-gradient(180deg, rgba(255,171,73,.20), rgba(255,140,0,.12)) !important;
  border-color: rgba(255,154,59,.40) !important;
  color: #fff2d9 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 24px rgba(255,140,0,.12) !important;
}
.profilePane--levels .levelsPager__dots{
  color: rgba(235,240,255,.42);
  padding: 0 2px;
  user-select: none;
}
@media (max-width: 760px){
  .profilePane--levels .levelsPager{
    align-items: stretch;
  }
  .profilePane--levels .levelsPager__controls{
    width: 100%;
  }
}


/* =========================================================
   Public UI P2.61 — canonical profile shell and stable left tabs
   Goal: keep the left tab panel and the right content area in one
   stable size rhythm, exactly like the Information tab. The tab
   menu must stay glued to the top, new tabs must stack downward,
   and if there are too many of them — only the left menu scrolls.
========================================================= */
body.page-profile .sitePanel--profile{
  --profile-canon-h: clamp(560px, calc(100dvh - 320px), 700px);
}
body.page-profile .sitePanel--profile .panel-body{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
body.page-profile .profilePage__body{
  gap: 0 !important;
}
body.page-profile .profileLayout{
  display: grid !important;
  grid-template-columns: minmax(0, 166px) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  min-height: var(--profile-canon-h) !important;
}
body.page-profile .profileAside,
body.page-profile .profileMain,
body.page-profile .profileMain > .pPanel,
body.page-profile .profileMain > .pPanel > .profilePane,
body.page-profile #profileOverview.profilePane{
  min-width: 0 !important;
}
body.page-profile .profileAside{
  position: sticky !important;
  top: 0 !important;
  align-self: stretch !important;
  min-height: var(--profile-canon-h) !important;
}
body.page-profile .profileNav{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: inherit !important;
  padding: 8px !important;
}
body.page-profile .profileNav--side{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: 6px !important;
  padding: 0 2px 0 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: calc(100dvh - 320px) !important;
  scrollbar-gutter: stable !important;
}
body.page-profile .profileNav--side::-webkit-scrollbar{
  width: 6px;
}
body.page-profile .profileNav--side::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
body.page-profile .profileNav--side .pTab{
  width: 100% !important;
  min-height: 38px !important;
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
}
body.page-profile .profileMain{
  display: flex !important;
  flex-direction: column !important;
  min-height: var(--profile-canon-h) !important;
}
body.page-profile .profileMain > .pPanel,
body.page-profile .profileMain > .pPanel.is-active{
  min-height: var(--profile-canon-h) !important;
}
body.page-profile .profileMain > .pPanel > .profilePane,
body.page-profile .profileMain > .pPanel.is-active > .profilePane,
body.page-profile #profileOverview.profilePane{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-height: var(--profile-canon-h) !important;
  gap: 10px !important;
}
body.page-profile .profileMain > .pPanel > .profilePane > *{
  min-width: 0 !important;
}
body.page-profile .profileMain > .pPanel:not([data-ppanel="overview"]) > .profilePane{
  padding: 10px !important;
}
body.page-profile .profileMain > .pPanel:not([data-ppanel="overview"]) .card__head{
  margin-bottom: 6px !important;
}
body.page-profile .profileMain > .pPanel > .profilePane .mt-3,
body.page-profile .profileMain > .pPanel > .profilePane [class*=" mt-3"]{
  margin-top: 0 !important;
}
body.page-profile .profileMain > .pPanel > .profilePane .profileBox,
body.page-profile .profileMain > .pPanel > .profilePane .profilePane .panel{
  margin-top: 0 !important;
}
body.page-profile .profileMain > .pPanel > .profilePane .stateMount + .stateMount,
body.page-profile .profileMain > .pPanel > .profilePane .panel + .panel,
body.page-profile .profileMain > .pPanel > .profilePane .profileBox + .profileBox{
  margin-top: 0 !important;
}
body.page-profile .profileMain > .pPanel > .profilePane .p-3{
  padding: 10px !important;
}
body.page-profile .profileMain > .pPanel > .profilePane .profilePanel__footerActions{
  margin-top: auto !important;
}
body.page-profile #profileOverview .profileOverviewUnified,
body.page-profile #profileOverview .profileOverviewShell,
body.page-profile #profileOverview .profileOverviewShell--unified{
  min-height: var(--profile-canon-h) !important;
}
body.page-profile #profileOverview .profileOverviewUnified__content{
  flex: 1 1 auto !important;
}

@media (max-width: 980px){
  body.page-profile .profileLayout{
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  body.page-profile .profileAside{
    position: static !important;
    min-height: 0 !important;
  }
  body.page-profile .profileNav{
    height: auto !important;
    min-height: 0 !important;
  }
  body.page-profile .profileNav--side{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
  body.page-profile .profileMain,
  body.page-profile .profileMain > .pPanel,
  body.page-profile .profileMain > .pPanel.is-active,
  body.page-profile .profileMain > .pPanel > .profilePane,
  body.page-profile .profileMain > .pPanel.is-active > .profilePane,
  body.page-profile #profileOverview.profilePane,
  body.page-profile #profileOverview .profileOverviewUnified{
    min-height: 0 !important;
  }
}
@media (max-width: 560px){
  body.page-profile .profileNav--side{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
  }
  body.page-profile .profileNav--side .pTab{
    width: auto !important;
    min-width: max-content !important;
  }
}


/* =========================================================
   Public UI P2.61 — profile Rads tab stabilization
   Goal: isolate the Rads layout from legacy generic mini/event
   table overrides, remove text overlap, and keep the profile
   shell height stable on both small and large datasets.
========================================================= */
body.page-profile .profilePane--rads{
  --rads-section-gap: 10px;
}
body.page-profile .profilePane--rads .card__head{
  align-items: flex-start !important;
}
body.page-profile .profilePane--rads .profileSplit{
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(300px, .98fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}
body.page-profile .profilePane--rads #profileRadsSummary,
body.page-profile .profilePane--rads #profileRadsDaily,
body.page-profile .profilePane--rads #profileRadsEvents{
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.page-profile .profilePane--rads .radsSectionHead{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
body.page-profile .profilePane--rads .radsSectionMeta{
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(231,237,243,.78);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
body.page-profile .profilePane--rads .radsSummaryGrid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}
body.page-profile .profilePane--rads .radsSummaryStat{
  min-width: 0;
  min-height: 104px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.page-profile .profilePane--rads .radsSummaryStat__label{
  color: rgba(231,237,243,.74);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.page-profile .profilePane--rads .radsSummaryStat__value{
  min-width: 0;
  color: var(--text900);
  font-size: 20px;
  font-weight: 1100;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.page-profile .profilePane--rads .radsSummaryStat__meta{
  margin-top: auto;
  color: rgba(231,237,243,.66);
  font-size: 11px;
  line-height: 1.42;
  overflow-wrap: anywhere;
}
body.page-profile .profilePane--rads .radsDailyList{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  max-height: clamp(280px, 33dvh, 420px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
body.page-profile .profilePane--rads .radsDayRow{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
body.page-profile .profilePane--rads .radsDayRow__main{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.page-profile .profilePane--rads .radsDayRow__day{
  color: var(--text900);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
}
body.page-profile .profilePane--rads .radsDayRow__date{
  color: rgba(231,237,243,.66);
  font-size: 11px;
  line-height: 1.35;
}
body.page-profile .profilePane--rads .radsDayRow__amount,
body.page-profile .profilePane--rads .radsEventAmt{
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}
body.page-profile .profilePane--rads .radsDayRow__amount{
  align-self: center;
  color: var(--text900);
  font-size: 16px;
  font-weight: 1000;
  text-align: right;
}
body.page-profile .profilePane--rads .radsDayRow.is-positive .radsDayRow__amount,
body.page-profile .profilePane--rads .radsEventRow.is-positive .radsEventAmt{
  color: rgba(140, 232, 174, .96);
}
body.page-profile .profilePane--rads .radsDayRow.is-negative .radsDayRow__amount,
body.page-profile .profilePane--rads .radsEventRow.is-negative .radsEventAmt{
  color: rgba(255, 157, 157, .96);
}
body.page-profile .profilePane--rads .radsEventTable{
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
body.page-profile .profilePane--rads .radsEventHead,
body.page-profile .profilePane--rads .radsEventRow{
  display: grid;
  grid-template-columns: minmax(122px, 132px) minmax(86px, 98px) minmax(190px, 1.12fr) minmax(140px, .88fr);
  gap: 10px 12px;
}
body.page-profile .profilePane--rads .radsEventHead{
  align-items: center;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(231,237,243,.66);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.page-profile .profilePane--rads .radsEventHead__amount{
  text-align: right;
}
body.page-profile .profilePane--rads .radsEventBody{
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  max-height: clamp(280px, 36dvh, 460px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
body.page-profile .profilePane--rads .radsEventRow{
  align-items: start;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: transparent;
}
body.page-profile .profilePane--rads .radsEventRow:last-child{
  border-bottom: 0;
}
body.page-profile .profilePane--rads .radsEventTs,
body.page-profile .profilePane--rads .radsEventAmt,
body.page-profile .profilePane--rads .radsEventMeta,
body.page-profile .profilePane--rads .radsEventWhere{
  min-width: 0;
  line-height: 1.42;
}
body.page-profile .profilePane--rads .radsEventTs{
  color: rgba(231,237,243,.78);
  font-size: 12px;
}
body.page-profile .profilePane--rads .radsEventAmt{
  justify-self: end;
  color: var(--text900);
  font-size: 15px;
  font-weight: 1000;
  text-align: right;
}
body.page-profile .profilePane--rads .radsEventMeta{
  color: var(--text900);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.page-profile .profilePane--rads .radsEventWhere{
  color: rgba(231,237,243,.66);
  font-size: 11px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.page-profile .profilePane--rads .radsPanelActions{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
body.page-profile .profilePane--rads .radsDailyList::-webkit-scrollbar,
body.page-profile .profilePane--rads .radsEventBody::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
body.page-profile .profilePane--rads .radsDailyList::-webkit-scrollbar-thumb,
body.page-profile .profilePane--rads .radsEventBody::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
body.page-profile .profilePane--rads .radsDailyList::-webkit-scrollbar-track,
body.page-profile .profilePane--rads .radsEventBody::-webkit-scrollbar-track{
  background: rgba(0,0,0,.12);
  border-radius: 999px;
}
@media (max-width: 1220px){
  body.page-profile .profilePane--rads .profileSplit{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 860px){
  body.page-profile .profilePane--rads .radsSummaryGrid{
    grid-template-columns: 1fr !important;
  }
  body.page-profile .profilePane--rads .radsEventHead{
    display: none;
  }
  body.page-profile .profilePane--rads .radsEventRow{
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'ts amt'
      'meta meta'
      'where where';
  }
  body.page-profile .profilePane--rads .radsEventTs{ grid-area: ts; }
  body.page-profile .profilePane--rads .radsEventAmt{
    grid-area: amt;
    justify-self: start;
    text-align: left;
  }
  body.page-profile .profilePane--rads .radsEventMeta{ grid-area: meta; }
  body.page-profile .profilePane--rads .radsEventWhere{ grid-area: where; }
}
@media (max-width: 620px){
  body.page-profile .profilePane--rads .radsSectionHead{
    flex-direction: column;
    align-items: flex-start;
  }
  body.page-profile .profilePane--rads .radsDayRow{
    grid-template-columns: 1fr;
    align-items: start;
  }
  body.page-profile .profilePane--rads .radsDayRow__amount{
    text-align: left;
  }
}

/* =========================================================
   Public UI P2.64 — profile likes cards + pagination
   Goal: remove legacy row-layout pressure from the Likes tab,
   isolate it from old .likeUser* overrides and keep the tab in
   the same stable shell height as Information.
========================================================= */
body.page-profile .profilePane--likes{
  --likes-card-min: 260px;
}
body.page-profile .profilePane--likes .card__head{
  align-items: flex-start !important;
}
body.page-profile .profilePane--likes .profileLikesSummary{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
body.page-profile .profilePane--likes .profileLikesToolbar{
  display: grid !important;
  grid-template-columns: auto minmax(280px, 1fr) !important;
  align-items: center !important;
  gap: 10px 12px !important;
}
body.page-profile .profilePane--likes .profileLikesSearch{
  width: 100% !important;
}
body.page-profile .profilePane--likes #profileLikesList,
body.page-profile .profilePane--likes #profileLikesPager{
  width: 100% !important;
}
body.page-profile .profilePane--likes #profileLikesList{
  display: block !important;
}
body.page-profile .profilePane--likes .profilePanel__footerActions--likes{
  margin-top: 10px !important;
  padding-top: 0 !important;
  justify-content: stretch !important;
}
body.page-profile .profilePane--likes .profileLikesCatalog{
  display: grid;
  gap: 10px;
}
body.page-profile .profilePane--likes .profileSectionMiniTitle--withMeta{
  margin-bottom: 0 !important;
}
body.page-profile .profilePane--likes .likesCardGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--likes-card-min), 1fr));
  gap: 10px;
  align-items: stretch;
}
body.page-profile .profilePane--likes .likesCard{
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 150px;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  min-width: 0;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body.page-profile .profilePane--likes .likesCard:hover,
body.page-profile .profilePane--likes .likesCard:focus-visible{
  transform: translateY(-1px);
  border-color: rgba(255,171,73,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 28px rgba(0,0,0,.18);
  outline: none;
}
body.page-profile .profilePane--likes .likesCard__media{
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
body.page-profile .profilePane--likes .likesCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-profile .profilePane--likes .likesCard__body{
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 10px;
  height: 100%;
}
body.page-profile .profilePane--likes .likesCard__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
}
body.page-profile .profilePane--likes .likesCard__identity{
  min-width: 0;
  display: grid;
  gap: 4px;
}
body.page-profile .profilePane--likes .likesCard__name{
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  color: #f5f7fb;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.page-profile .profilePane--likes .likesCard__steam,
body.page-profile .profilePane--likes .likesCard__meta{
  font-size: 11px;
  line-height: 1.45;
  color: rgba(231,237,243,.72);
  white-space: normal;
  overflow-wrap: anywhere;
}
body.page-profile .profilePane--likes .likesCard__flag{
  flex: 0 0 auto;
  max-width: min(160px, 52%);
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,171,73,.18);
  background: rgba(255,171,73,.10);
  color: #ffe9c9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
}
body.page-profile .profilePane--likes .likesCard__actions{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
body.page-profile .profilePane--likes .likesCard__actions .btn{
  min-width: 92px;
}
body.page-profile .profilePane--likes .likesPager{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  flex-wrap: wrap;
}
body.page-profile .profilePane--likes .likesPager__meta{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: rgba(235,240,255,.74);
  font-size: 10px;
}
body.page-profile .profilePane--likes .likesPager__note{
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(245,247,251,.86);
}
body.page-profile .profilePane--likes .likesPager__controls{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
body.page-profile .profilePane--likes .likesPager__btn{
  min-width: 34px;
  min-height: 28px;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}
body.page-profile .profilePane--likes .likesPager__btn--nav{
  min-width: 74px;
}
body.page-profile .profilePane--likes .likesPager__btn.is-active,
body.page-profile .profilePane--likes .likesPager__btn[aria-current="page"]{
  background: linear-gradient(180deg, rgba(255,171,73,.20), rgba(255,140,0,.12)) !important;
  border-color: rgba(255,154,59,.40) !important;
  color: #fff2d9 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 24px rgba(255,140,0,.12) !important;
}
body.page-profile .profilePane--likes .likesPager__dots{
  color: rgba(235,240,255,.42);
  padding: 0 2px;
  user-select: none;
}
@media (max-width: 1080px){
  body.page-profile .profilePane--likes{
    --likes-card-min: 240px;
  }
}
@media (max-width: 980px){
  body.page-profile .profilePane--likes .profileLikesToolbar{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 760px){
  body.page-profile .profilePane--likes .likesCardGrid{
    grid-template-columns: 1fr;
  }
  body.page-profile .profilePane--likes .likesCard{
    min-height: 0;
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 12px !important;
  }
  body.page-profile .profilePane--likes .likesCard__top{
    flex-direction: column;
    align-items: flex-start;
  }
  body.page-profile .profilePane--likes .likesCard__flag{
    max-width: 100%;
  }
  body.page-profile .profilePane--likes .likesPager{
    align-items: stretch;
  }
  body.page-profile .profilePane--likes .likesPager__controls{
    width: 100%;
  }
}


/* =========================================================
   Public UI P2.65 — profile likes compact mini cards
   Goal: make likes cards minimal, smaller and denser without
   changing the stable shell or breaking pagination.
========================================================= */
body.page-profile .profilePane--likes{
  --likes-card-min: 208px;
}
body.page-profile .profilePane--likes .profileLikesCatalog{
  gap: 8px;
}
body.page-profile .profilePane--likes .profileSectionMiniTitle{
  min-height: 0;
}
body.page-profile .profilePane--likes .likesCardGrid{
  grid-template-columns: repeat(auto-fit, minmax(var(--likes-card-min), 1fr));
  gap: 8px;
}
body.page-profile .profilePane--likes .likesCard.likesCard--compact{
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  padding: 10px 11px !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
body.page-profile .profilePane--likes .likesCard.likesCard--compact:hover,
body.page-profile .profilePane--likes .likesCard.likesCard--compact:focus-visible{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 20px rgba(0,0,0,.14);
}
body.page-profile .profilePane--likes .likesCard--compact .likesCard__media{
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
body.page-profile .profilePane--likes .likesCard--compact .likesCard__body{
  gap: 7px;
}
body.page-profile .profilePane--likes .likesCard--compact .likesCard__top,
body.page-profile .profilePane--likes .likesCard--compact .likesCard__top--compact{
  display: block;
}
body.page-profile .profilePane--likes .likesCard--compact .likesCard__identity{
  gap: 3px;
}
body.page-profile .profilePane--likes .likesCard--compact .likesCard__name{
  font-size: 12px;
  line-height: 1.22;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-profile .profilePane--likes .likesCard--compact .likesCard__metaRow{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
body.page-profile .profilePane--likes .likesCard--compact .likesCard__flag{
  flex: 0 0 auto;
  max-width: none;
  padding: 3px 7px;
  font-size: 9px;
  line-height: 1.15;
  white-space: nowrap;
}
body.page-profile .profilePane--likes .likesCard--compact .likesCard__meta,
body.page-profile .profilePane--likes .likesCard--compact .likesCard__steam{
  font-size: 10px;
  line-height: 1.2;
}
body.page-profile .profilePane--likes .likesCard--compact .likesCard__meta{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.page-profile .profilePane--likes .likesCard--compact .likesCard__steam{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .82;
}
body.page-profile .profilePane--likes .likesCard--compact .likesCard__actions,
body.page-profile .profilePane--likes .likesCard__actions--compact{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 0;
}
body.page-profile .profilePane--likes .likesCard--compact .likeMini{
  transform-origin: left center;
}
body.page-profile .profilePane--likes .likesCard--compact .likesCard__openBtn,
body.page-profile .profilePane--likes .likesCard--compact .likesCard__actions .btn{
  min-width: 0;
  padding-inline: 9px !important;
  height: 30px;
  font-size: 10px !important;
  border-radius: 9px !important;
}
body.page-profile .profilePane--likes .likesPager__meta{
  font-size: 11px;
}
@media (max-width: 1280px){
  body.page-profile .profilePane--likes{
    --likes-card-min: 196px;
  }
}
@media (max-width: 980px){
  body.page-profile .profilePane--likes{
    --likes-card-min: 184px;
  }
}
@media (max-width: 760px){
  body.page-profile .profilePane--likes{
    --likes-card-min: 100%;
  }
  body.page-profile .profilePane--likes .likesCardGrid{
    grid-template-columns: 1fr;
  }
  body.page-profile .profilePane--likes .likesCard.likesCard--compact{
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 10px !important;
  }
  body.page-profile .profilePane--likes .likesCard--compact .likesCard__metaRow{
    flex-wrap: wrap;
  }
  body.page-profile .profilePane--likes .likesCard--compact .likesCard__meta{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* =========================================================
   Public UI P2.66 — profile likes micro tiles
   Goal: keep liked-player cards visually tiny, non-stretched,
   and packed like avatar tiles instead of wide content cards.
========================================================= */
body.page-profile .profilePane--likes{
  --likes-card-width: 172px;
}
body.page-profile .profilePane--likes .likesCardGrid{
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 8px;
}
body.page-profile .profilePane--likes .likesCard.likesCard--micro{
  width: var(--likes-card-width);
  flex: 0 0 var(--likes-card-width);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-height: 0;
  padding: 8px 9px !important;
  border-radius: 13px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
body.page-profile .profilePane--likes .likesCard.likesCard--micro:hover,
body.page-profile .profilePane--likes .likesCard.likesCard--micro:focus-visible{
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 20px rgba(0,0,0,.14);
}
body.page-profile .profilePane--likes .likesCard--micro .likesCard__media{
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
body.page-profile .profilePane--likes .likesCard--micro .likesCard__body{
  gap: 4px;
}
body.page-profile .profilePane--likes .likesCard--micro .likesCard__identity{
  display: grid;
  gap: 2px;
}
body.page-profile .profilePane--likes .likesCard--micro .likesCard__head{
  display: flex;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}
body.page-profile .profilePane--likes .likesCard--micro .likesCard__name{
  min-width: 0;
  flex: 1 1 auto;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-profile .profilePane--likes .likesCard--micro .likesCard__flag{
  flex: 0 0 auto;
  max-width: none;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1.05;
  white-space: nowrap;
}
body.page-profile .profilePane--likes .likesCard--micro .likesCard__meta,
body.page-profile .profilePane--likes .likesCard--micro .likesCard__steam{
  font-size: 10px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-profile .profilePane--likes .likesCard--micro .likesCard__meta{
  color: rgba(231,237,243,.76);
}
body.page-profile .profilePane--likes .likesCard--micro .likesCard__steam{
  color: rgba(231,237,243,.56);
}
body.page-profile .profilePane--likes .likesCard--micro .likesCard__sub{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
body.page-profile .profilePane--likes .likesCard--micro .likesCard__sub .likeMini{
  flex: 0 0 auto;
  transform: scale(.88);
  transform-origin: right center;
}
body.page-profile .profilePane--likes .likesCard--micro .likesCard__actions,
body.page-profile .profilePane--likes .likesCard--micro .likesCard__openBtn{
  display: none !important;
}
@media (max-width: 1440px){
  body.page-profile .profilePane--likes{
    --likes-card-width: 166px;
  }
}
@media (max-width: 1080px){
  body.page-profile .profilePane--likes{
    --likes-card-width: 160px;
  }
}
@media (max-width: 760px){
  body.page-profile .profilePane--likes{
    --likes-card-width: 100%;
  }
  body.page-profile .profilePane--likes .likesCard.likesCard--micro{
    width: 100%;
    flex-basis: 100%;
    grid-template-columns: 34px minmax(0, 1fr);
  }
}

/* ===== Profile / Inventory refresh (micro poster tiles, paged, scoped) ===== */
body.page-profile .profilePane--inv{
  --inv-tile-w: 152px;
  --inv-tile-gap: 12px;
}
body.page-profile .profilePane--inv .profileLikesToolbar{
  display: grid !important;
  grid-template-columns: auto minmax(280px, 1fr) !important;
  align-items: center !important;
  gap: 10px 12px !important;
}
body.page-profile .profilePane--inv .profileLikesSearch{
  width: 100% !important;
}
body.page-profile .profilePane--inv #profileInvList,
body.page-profile .profilePane--inv #profileInvPager{
  width: 100% !important;
}
body.page-profile .profilePane--inv .profilePanel__footerActions--inv{
  margin-top: 10px !important;
  padding-top: 0 !important;
  justify-content: stretch !important;
}
body.page-profile .profilePane--inv .invCatalog{
  display: grid;
  gap: 10px;
}
body.page-profile .profilePane--inv .profileSectionMiniTitle--withMeta{
  margin-bottom: 0 !important;
}
body.page-profile .profilePane--inv .invTileGrid{
  display: flex;
  flex-wrap: wrap;
  gap: var(--inv-tile-gap);
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
}
body.page-profile .profilePane--inv .invTile{
  position: relative;
  display: block;
  flex: 0 0 var(--inv-tile-w);
  width: var(--inv-tile-w);
  max-width: var(--inv-tile-w);
  min-width: var(--inv-tile-w);
  aspect-ratio: 0.86;
  min-height: 176px;
  border-radius: 16px !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.14);
  isolation: isolate;
}
body.page-profile .profilePane--inv button.invTile{
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
body.page-profile .profilePane--inv .invTile--claim{
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.page-profile .profilePane--inv .invTile--claim:hover,
body.page-profile .profilePane--inv .invTile--claim:focus-visible{
  transform: translateY(-2px);
  border-color: rgba(255,171,73,.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 30px rgba(0,0,0,.20);
  outline: none;
}
body.page-profile .profilePane--inv .invTile.is-busy{
  pointer-events: none;
  opacity: .88;
}
body.page-profile .profilePane--inv .invTile__media,
body.page-profile .profilePane--inv .invTile__body,
body.page-profile .profilePane--inv .invTile__topline,
body.page-profile .profilePane--inv .invTile__caption,
body.page-profile .profilePane--inv .invTile__titleWrap,
body.page-profile .profilePane--inv .invTile__title,
body.page-profile .profilePane--inv .invTile__metaLine,
body.page-profile .profilePane--inv .invTile__date,
body.page-profile .profilePane--inv .invTile__actionPill{
  display: block;
}
body.page-profile .profilePane--inv .invTile__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}
body.page-profile .profilePane--inv .invTile__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.08), rgba(13,18,30,.55));
}
body.page-profile .profilePane--inv .invTile__image--empty{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: rgba(255,255,255,.88);
}
body.page-profile .profilePane--inv .invTile__shade{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,10,18,.08) 0%, rgba(7,10,18,.18) 26%, rgba(7,10,18,.74) 100%),
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.12), rgba(255,255,255,0) 44%);
  pointer-events: none;
}
body.page-profile .profilePane--inv .invTile__topline{
  position: absolute;
  inset: 8px 8px auto 8px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
}
body.page-profile .profilePane--inv .invTile__body{
  position: absolute;
  inset: auto 8px 8px 8px;
  z-index: 2;
}
body.page-profile .profilePane--inv .invTile__badge,
body.page-profile .profilePane--inv .invTile__date,
body.page-profile .profilePane--inv .invTile__metaLine,
body.page-profile .profilePane--inv .invTile__actionPill{
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .02em;
}
body.page-profile .profilePane--inv .invTile__badge{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,22,.54);
  color: #f6f8fd;
}
body.page-profile .profilePane--inv .invTile__badge--ready{
  border-color: rgba(255,171,73,.28);
  background: rgba(255,140,0,.18);
  color: #ffe8ca;
}
body.page-profile .profilePane--inv .invTile__badge--queue{
  border-color: rgba(242,175,64,.30);
  background: rgba(242,175,64,.16);
  color: #ffe7bf;
}
body.page-profile .profilePane--inv .invTile__badge--done{
  border-color: rgba(89,218,146,.26);
  background: rgba(89,218,146,.15);
  color: #d9ffe9;
}
body.page-profile .profilePane--inv .invTile__badge--fail{
  border-color: rgba(255,115,115,.28);
  background: rgba(255,115,115,.14);
  color: #ffd7d7;
}
body.page-profile .profilePane--inv .invTile__badge--ghost{
  opacity: .82;
}
body.page-profile .profilePane--inv .invTile__date{
  margin-left: auto;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,22,.42);
  color: rgba(239,243,251,.78);
  font-weight: 700;
}
body.page-profile .profilePane--inv .invTile__caption{
  display: grid;
  gap: 0;
}
body.page-profile .profilePane--inv .invTile__titleWrap{
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(8,11,18,.22), rgba(8,11,18,.84));
  backdrop-filter: blur(5px);
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
body.page-profile .profilePane--inv .invTile--claim:hover .invTile__titleWrap,
body.page-profile .profilePane--inv .invTile--claim:focus-visible .invTile__titleWrap{
  background: linear-gradient(180deg, rgba(18,14,10,.56), rgba(24,15,9,.86));
  border-color: rgba(255,171,73,.24);
  box-shadow: 0 10px 24px rgba(255,140,0,.16);
}
body.page-profile .profilePane--inv .invTile__title{
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.42);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-profile .profilePane--inv .invTile__metaLine,
body.page-profile .profilePane--inv .invTile__date{
  display: none !important;
}
body.page-profile .profilePane--inv .invTile__actionPill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,171,73,.20);
  background: rgba(255,140,0,.18);
  color: #ffe9cc;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
body.page-profile .profilePane--inv .invTile--claim:hover .invTile__actionPill,
body.page-profile .profilePane--inv .invTile--claim:focus-visible .invTile__actionPill{
  background: rgba(255,140,0,.26);
  border-color: rgba(255,171,73,.32);
  color: #fff4e3;
}
body.page-profile .profilePane--inv .invTile__metaLine--action{
  display: none !important;
}
body.page-profile .profilePane--inv .invPager{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  flex-wrap: wrap;
}
body.page-profile .profilePane--inv .invPager__meta{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: rgba(235,240,255,.74);
  font-size: 10px;
}
body.page-profile .profilePane--inv .invPager__note{
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(245,247,251,.86);
}
body.page-profile .profilePane--inv .invPager__controls{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
body.page-profile .profilePane--inv .invPager__btn{
  min-width: 34px;
  min-height: 28px;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}
body.page-profile .profilePane--inv .invPager__btn--nav{
  min-width: 74px;
}
body.page-profile .profilePane--inv .invPager__btn.is-active,
body.page-profile .profilePane--inv .invPager__btn[aria-current="page"]{
  background: linear-gradient(180deg, rgba(255,171,73,.20), rgba(255,140,0,.12)) !important;
  border-color: rgba(255,154,59,.40) !important;
  color: #fff2d9 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 24px rgba(255,140,0,.12) !important;
}
body.page-profile .profilePane--inv .invPager__dots{
  color: rgba(235,240,255,.42);
  padding: 0 2px;
  user-select: none;
}
@media (max-width: 1180px){
  body.page-profile .profilePane--inv{
    --inv-tile-w: 144px;
    --inv-tile-gap: 10px;
  }
}
@media (max-width: 980px){
  body.page-profile .profilePane--inv .profileLikesToolbar{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 860px){
  body.page-profile .profilePane--inv{
    --inv-tile-w: 136px;
    --inv-tile-gap: 10px;
  }
}
@media (max-width: 620px){
  body.page-profile .profilePane--inv{
    --inv-tile-w: calc((100% - 10px) / 2);
    --inv-tile-gap: 10px;
  }
  body.page-profile .profilePane--inv .invTile{
    flex-basis: var(--inv-tile-w);
    width: var(--inv-tile-w);
    max-width: var(--inv-tile-w);
    min-width: var(--inv-tile-w);
    min-height: 170px;
  }
  body.page-profile .profilePane--inv .invPager{
    align-items: stretch;
  }
  body.page-profile .profilePane--inv .invPager__controls{
    width: 100%;
  }
}
@media (max-width: 420px){
  body.page-profile .profilePane--inv .invTile{
    min-height: 160px;
    border-radius: 14px !important;
  }
  body.page-profile .profilePane--inv .invTile__body{
    inset: auto 6px 6px 6px;
  }
  body.page-profile .profilePane--inv .invTile__topline{
    inset: 6px 6px auto 6px;
  }
  body.page-profile .profilePane--inv .invTile__titleWrap{
    padding: 7px 8px;
  }
  body.page-profile .profilePane--inv .invTile__title{
    font-size: 12px;
  }
  body.page-profile .profilePane--inv .invTile__metaLine,
  body.page-profile .profilePane--inv .invTile__badge,
  body.page-profile .profilePane--inv .invTile__date,
  body.page-profile .profilePane--inv .invTile__actionPill{
    font-size: 9px;
    padding: 4px 7px;
  }
}

/* Profile achievements: compact square tiles final fix */
body.page-profile .profilePane--ach{
  --ach-tile-w: 136px;
  --ach-tile-gap: 10px;
}
body.page-profile .profilePane--ach #profileAchList{
  align-content: start !important;
}
body.page-profile .profilePane--ach .achCatalog{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.page-profile .profilePane--ach .achTileGrid{
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--ach-tile-w), var(--ach-tile-w))) !important;
  justify-content: start !important;
  align-items: start !important;
  gap: var(--ach-tile-gap) !important;
}
body.page-profile .profilePane--ach .achTile{
  width: var(--ach-tile-w) !important;
  min-width: var(--ach-tile-w) !important;
  max-width: var(--ach-tile-w) !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
body.page-profile .profilePane--ach .achTile__chips{
  top: 7px !important;
  left: 7px !important;
  right: 7px !important;
  gap: 5px !important;
}
body.page-profile .profilePane--ach .achTile__pill{
  padding: 4px 7px !important;
  font-size: 10px !important;
  line-height: 1.08 !important;
}
body.page-profile .profilePane--ach .achTile__body{
  left: 7px !important;
  right: 7px !important;
  bottom: 7px !important;
  gap: 5px !important;
}
body.page-profile .profilePane--ach .achTile__titleBand{
  min-height: 34px !important;
  padding: 8px 9px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1.14 !important;
}
body.page-profile .profilePane--ach .achTile__progress{
  font-size: 11px !important;
  padding: 0 2px !important;
}
body.page-profile .profilePane--ach .achTile__progress--done{
  display: inline-flex !important;
  align-self: flex-start !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(43,153,87,.96), rgba(24,112,60,.94)) !important;
  border: 1px solid rgba(133,255,181,.28) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12) !important;
  color: #f4fff7 !important;
  text-shadow: none !important;
}
body.page-profile .profilePane--ach .achTile__bar{
  height: 6px !important;
}
body.page-profile .profilePane--ach .achTile__foot{
  font-size: 10px !important;
  padding: 0 2px !important;
}
@media (max-width: 1380px){
  body.page-profile .profilePane--ach{
    --ach-tile-w: 132px;
  }
}
@media (max-width: 1180px){
  body.page-profile .profilePane--ach{
    --ach-tile-w: 124px;
    --ach-tile-gap: 9px;
  }
}
@media (max-width: 920px){
  body.page-profile .profilePane--ach{
    --ach-tile-w: 116px;
    --ach-tile-gap: 8px;
  }
  body.page-profile .profilePane--ach .achTile__titleBand{
    min-height: 32px !important;
    padding: 7px 8px !important;
    font-size: 12px !important;
  }
  body.page-profile .profilePane--ach .achTile__progress,
  body.page-profile .profilePane--ach .achTile__foot,
  body.page-profile .profilePane--ach .achTile__pill{
    font-size: 9px !important;
  }
}
@media (max-width: 620px){
  body.page-profile .profilePane--ach{
    --ach-tile-gap: 10px;
  }
  body.page-profile .profilePane--ach .achTileGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.page-profile .profilePane--ach .achTile{
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}
@media (max-width: 420px){
  body.page-profile .profilePane--ach .achTile{
    border-radius: 15px !important;
  }
  body.page-profile .profilePane--ach .achTile__chips{
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
  }
  body.page-profile .profilePane--ach .achTile__body{
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
  }
  body.page-profile .profilePane--ach .achTile__titleBand{
    min-height: 30px !important;
    padding: 6px 7px !important;
    font-size: 11px !important;
  }
}


/* Profile achievements: top title chip instead of status/tier */
body.page-profile .profilePane--ach .achTile__chips{
  display: block !important;
}
body.page-profile .profilePane--ach .achTile__titleChip{
  display: -webkit-box !important;
  max-width: 100% !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(6,10,18,.88), rgba(6,10,18,.72)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.34) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: .01em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
body.page-profile .profilePane--ach .achTile__titleBand{
  display: none !important;
}
body.page-profile .profilePane--ach .achTile__body{
  gap: 6px !important;
}
@media (max-width: 920px){
  body.page-profile .profilePane--ach .achTile__titleChip{
    padding: 6px 8px !important;
    font-size: 11px !important;
    border-radius: 11px !important;
  }
}
@media (max-width: 420px){
  body.page-profile .profilePane--ach .achTile__titleChip{
    padding: 6px 7px !important;
    font-size: 10px !important;
    border-radius: 10px !important;
  }
}

/* Profile achievements: compact semantic filters instead of open/closed tabs */
body.page-profile .profilePane--ach .profileLikesToolbar--ach{
  align-items:flex-start;
  gap:12px;
}
body.page-profile .profilePane--ach .profileAchFilters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}
body.page-profile .profilePane--ach .profileAchFilter{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  color:rgba(231,237,243,.9);
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
body.page-profile .profilePane--ach .profileAchFilter:hover{
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.04));
  transform:translateY(-1px);
}
body.page-profile .profilePane--ach .profileAchFilter.is-active{
  color:#fff;
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(240,140,40,.34), rgba(214,109,26,.20));
  box-shadow:0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
body.page-profile .profilePane--ach .profileAchFilter:focus-visible{
  outline:none;
  border-color:rgba(255,255,255,.22);
  box-shadow:0 0 0 3px rgba(240,140,40,.18), 0 12px 28px rgba(0,0,0,.2);
}
@media (max-width: 760px){
  body.page-profile .profilePane--ach .profileLikesToolbar--ach{
    align-items:stretch;
  }
  body.page-profile .profilePane--ach .profileAchFilters{
    width:100%;
  }
  body.page-profile .profilePane--ach .profileAchFilter{
    flex:1 1 calc(50% - 4px);
    justify-content:center;
    text-align:center;
  }
}
@media (max-width: 460px){
  body.page-profile .profilePane--ach .profileAchFilters{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  body.page-profile .profilePane--ach .profileAchFilter{
    width:100%;
    min-height:32px;
    padding:0 10px;
    font-size:11px;
  }
}


/* =========================================================
   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;
  }
}

/* =========================================================
   Community page — compact full-screen layout
   ========================================================= */
.communityShell{
  min-height:100dvh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.communityWorkspace{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 250px;
  gap:10px;
}
.communityTopbar,
.communitySidebar,
.communityBoard,
.communityComposer,
.communityHistory,
.communityChannel,
.communityMessage,
.communityRoster,
.communityRosterCard{
  border:1px solid rgba(255,255,255,.06);
  background:rgba(8,12,18,.84);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
}
.communityBrand__kicker,
.communityBoard__eyebrow,
.communityRosterSection__title,
.communitySidebar__hint,
.communityComposer__hint,
.communityMessage__time,
.communityMessage__edited,
.communityMessage__deleted,
.communityChannel__count,
.communityMiniProfile__meta,
.communityRoster__hint{
  color:var(--text700);
}
.communityTopbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 11px;
  border-radius:14px;
}
.communityTopbar__left,
.communityTopbar__right,
.communityBoard__meta,
.communityComposer__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.communityTopbar__right{
  justify-content:flex-end;
}
.communityTopbar__back,
.communityTopbar .btn,
.communityBoard__channelsBtn,
.communityMessage__actions .btn{
  min-height:36px;
  border-radius:12px;
}
.communityMiniProfile{
  min-width:0;
  display:inline-grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:6px 10px 6px 6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  text-decoration:none;
  color:inherit;
}
.communityMiniProfile--brand{ pointer-events:none; }
.communityMiniProfile__avatar{
  width:42px;
  height:42px;
  border-radius:12px;
  object-fit:cover;
  background:rgba(255,255,255,.06);
}
.communityMiniProfile__body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.communityMiniProfile__name{
  font-size:14px;
  line-height:1.2;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.communityMiniProfile__meta,
.communitySidebar__hint,
.communityComposer__status,
.communityComposer__hint,
.communityChannel__count,
.communityMessage__time,
.communityMessage__edited,
.communityMessage__deleted,
.communityRoster__hint{
  font-size:12px;
}
.communitySidebar__close,
.communityBoard__channelsBtn,
.communityDrawerBackdrop{
  display:none;
}
.communitySidebar,
.communityRoster{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:20px;
}
.communitySidebar__head,
.communityRoster__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.communitySidebar__title,
.communityRoster__title{
  font-size:15px;
  line-height:1.2;
  font-weight:900;
}
.communitySearch{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  min-height:42px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.communitySearch .input{
  min-height:40px;
  border:none;
  background:transparent;
  box-shadow:none;
  padding:0;
  font-size:14px;
}
.communitySearch .input:focus{ outline:none; }
.communityChannels,
.communityRoster__sections,
.communityRosterSection__list{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
}
.communityChannel{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:11px 12px;
  border-radius:16px;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
  cursor:pointer;
}
.communityChannel:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.12);
}
.communityChannel.is-active{
  border-color:rgba(114,209,255,.30);
  background:rgba(32,61,92,.28);
}
.communityChannel.is-disabled{ opacity:.58; }
.communityChannel__main{ min-width:0; }
.communityChannel__title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:800;
}
.communityChannel__desc{
  margin-top:4px;
  line-height:1.35;
  font-size:13px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.communityChannel__meta{
  flex:0 0 auto;
  min-width:72px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.communityUnread{
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  background:linear-gradient(135deg, rgba(255,112,112,.94), rgba(255,71,119,.92));
  color:#fff;
}
.communityChannel__lock{
  color:var(--text700);
  font-size:11px;
}
.communityBoard{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
  padding:12px;
  border-radius:20px;
  overflow:hidden;
}
.communityBoard__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.communityBoard__topLeft{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.communityBoard__heading{ min-width:0; }
.communityBoard__eyebrow{
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.communityBoard__title{
  font-size:24px;
  line-height:1.05;
  font-weight:900;
}
.communityBoard__desc{
  margin-top:4px;
  line-height:1.4;
  font-size:13px;
  color:var(--text700);
}
.communityBoard__meta .pill{
  min-height:30px;
  padding:0 10px;
  font-size:11px;
}
.communityHistory{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px;
  border-radius:16px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
.communityLoadMore{ align-self:flex-start; }
.communityMessages{
  min-height:0;
  height:100%;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-right:2px;
}
.communityMessage{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:end;
  gap:10px;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  position:relative;
}
.communityMessage:hover{
  background:transparent;
  border-color:transparent;
}
.communityMessage.is-own{
  grid-template-columns:minmax(0,1fr);
  justify-items:end;
}
.communityMessage.is-replying .communityMessage__body{
  border-color:rgba(114,209,255,.38);
  box-shadow:0 0 0 1px rgba(114,209,255,.14) inset;
}
.communityMessage__avatar{
  width:38px;
  height:38px;
  border-radius:11px;
  object-fit:cover;
  background:rgba(255,255,255,.06);
  align-self:end;
}
.communityMessage.is-own .communityMessage__avatar{
  display:none;
}
.communityMessage__body{
  min-width:0;
  width:fit-content;
  justify-self:start;
  max-width:min(78%, 860px);
  padding:11px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(11,16,24,.92);
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.communityMessage.is-own .communityMessage__body{
  grid-column:1;
  justify-self:end;
  border-color:rgba(201,118,44,.32);
  background:linear-gradient(180deg, rgba(72,42,18,.94), rgba(42,26,14,.94));
}
.communityMessage__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.communityMessage__meta{
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.communityMessage.is-own .communityMessage__meta,
.communityMessage.is-own .communityMessage__top,
.communityMessage.is-own .communityMessage__reply,
.communityMessage.is-own .communityMessage__text,
.communityMessage.is-own .communityMessage__media{
  text-align:right;
}
.communityMessage__name{
  font-size:14px;
  font-weight:800;
}
.communityMessage__actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  opacity:0;
  pointer-events:none;
  transition:.16s ease;
}
.communityMessageAction{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
  border-radius:999px;
  color:var(--text700);
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.communityMessageAction:hover,
.communityMessageAction:focus-visible{
  color:var(--text900);
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.communityMessageAction:active{ transform:translateY(1px); }
.communityMessage.is-own .communityMessageAction{
  color:rgba(255,232,210,.82);
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
.communityMessage.is-own .communityMessageAction:hover,
.communityMessage.is-own .communityMessageAction:focus-visible{
  color:#fff4ea;
  background:rgba(255,255,255,.12);
}
.communityMessage:hover .communityMessage__actions,
.communityMessage:focus-within .communityMessage__actions{
  opacity:1;
  pointer-events:auto;
}
.communityMessage.is-own .communityMessage__actions{
  justify-content:flex-end;
}
.communityMessage__reply{
  margin-top:7px;
  padding:7px 9px;
  border-radius:12px;
  border-left:3px solid rgba(114,209,255,.38);
  background:rgba(255,255,255,.04);
  color:var(--text700);
  font-size:12px;
}
.communityMessage.is-own .communityMessage__reply{
  border-left:none;
  border-right:3px solid rgba(255,182,90,.48);
  background:rgba(255,255,255,.06);
}
.communityMessage__reply b{ color:var(--text900); }
.communityMessage__body > *{ max-width:100%; }
.communityMessage__text{
  margin-top:7px;
  line-height:1.48;
  font-size:14px;
  white-space:pre-wrap;
  word-break:break-word;
}
.communityMessage__text.is-deleted{
  color:var(--text700);
  font-style:italic;
}
.communityMessage.is-own .communityMessage__time,
.communityMessage.is-own .communityMessage__edited,
.communityMessage.is-own .communityMessage__deleted{
  color:rgba(255,226,194,.7);
}
.communityMessage.is-own .communityMessage__link{
  color:rgba(255,233,208,.96);
}
.communityMessage.is-own .communityLinkCard,
.communityMessage.is-own .communityEmbedCard,
.communityMessage.is-own .communityMediaCard,
.communityMessage.is-own .communityMessage__reply{
  margin-left:auto;
}
.communityMessage.is-own .communityLinkCard{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
}
.communityMessage.is-own .communityEmbedCard__badge{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
}
.communityComposer{
  padding:9px;
  border-radius:14px;
  box-shadow:none;
}
.communityComposer__context{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid rgba(114,209,255,.2);
  background:rgba(114,209,255,.06);
}
.communityComposer__contextText{
  min-width:0;
  font-size:12px;
  color:var(--text700);
}
.communityComposer__field{ display:block; }
.communityComposer__input{
  width:100%;
  min-height:88px;
  max-height:220px;
  resize:vertical;
  border-radius:14px;
  font-size:14px;
}
.communityComposer__bottom{
  margin-top:10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.communityComposer__statusWrap{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.communityComposer__counter,
.communityRoster__count{
  font-size:12px;
  color:var(--text700);
  font-variant-numeric:tabular-nums;
}
.communityAuthNotice,
.communityState{
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.025);
  color:var(--text700);
  font-size:13px;
}
.communityMessageEmpty{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

@media (max-width: 1180px){
  .communityMessage__body{ max-width:min(84%, 100%); }
}
@media (max-width: 720px){
  .communityMessage{
    grid-template-columns:32px minmax(0,1fr);
    gap:8px;
  }
  .communityMessage.is-own{
    grid-template-columns:minmax(0,1fr);
  }
  .communityMessage__avatar{ width:32px; height:32px; border-radius:10px; }
  .communityMessage__body{ max-width:100%; padding:10px 11px; }
}

.communityRosterSection{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.communityRosterSection__title{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.communityRosterCard{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:9px;
  border-radius:14px;
}
.communityRosterCard__avatar{
  width:34px;
  height:34px;
  border-radius:10px;
  object-fit:cover;
  background:rgba(255,255,255,.06);
}
.communityRosterCard__body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.communityRosterCard__name{
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.communityRosterCard__meta{
  font-size:11px;
  color:var(--text700);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.communityRosterCard__badges{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.communityRosterBadge{
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.communityRosterBadge--accent{
  border-color:rgba(114,209,255,.24);
  background:rgba(114,209,255,.10);
}
.communityRoster__empty{
  padding:10px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.07);
  color:var(--text700);
  font-size:12px;
}

html.page-community,
html.page-community body{
  min-height:100%;
}
body.page-community{
  min-height:100dvh;
  background:#070b11;
}
body.page-community.community-lock-scroll,
html.communitySidebarOpen,
html.communitySidebarOpen body.page-community{
  overflow:hidden;
}
body.page-community main.wrap--community{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:none;
  min-height:100dvh;
  margin:0;
  padding:0;
}
body.page-community main.wrap--community::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,7,11,.78), rgba(4,7,11,.92)),
    radial-gradient(900px 380px at 0% 0%, rgba(223,126,34,.08), transparent 55%),
    radial-gradient(760px 360px at 100% 0%, rgba(60,120,210,.08), transparent 60%);
}
body.page-community .communityShell.panel{
  position:relative;
  z-index:1;
  min-height:100dvh;
  height:100dvh;
  margin:0;
  padding:10px;
  border:none;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  overflow:hidden;
}

@media (min-width: 1121px){
  body.page-community{ overflow:hidden; }
}
@media (max-width: 1440px){
  .communityWorkspace{
    grid-template-columns:240px minmax(0,1fr) 220px;
  }
}
@media (max-width: 1260px){
  .communityWorkspace{
    grid-template-columns:240px minmax(0,1fr);
    grid-template-areas:'sidebar board' 'sidebar roster';
  }
  .communitySidebar{ grid-area:sidebar; }
  .communityBoard{ grid-area:board; }
  .communityRoster{
    grid-area:roster;
    max-height:220px;
  }
}
@media (max-width: 1120px){
  body.page-community{ overflow:auto; }
  body.page-community .communityShell.panel{
    min-height:100dvh;
    height:auto;
    overflow:visible;
  }
  .communityWorkspace{
    grid-template-columns:1fr;
    grid-template-areas:none;
  }
  .communitySidebar{
    position:fixed;
    inset:10px auto 10px 10px;
    width:min(320px, calc(100vw - 20px));
    max-width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
    z-index:40;
    transform:translateX(calc(-100% - 20px));
    transition:transform .18s ease;
  }
  .communityShell.is-sidebar-open .communitySidebar,
  .communitySidebar.is-open{
    transform:translateX(0);
  }
  .communityDrawerBackdrop{
    position:fixed;
    inset:0;
    z-index:35;
    display:block;
    background:rgba(2,5,9,.62);
    border:none;
    padding:0;
    cursor:pointer;
  }
  .communitySidebar__close,
  .communityBoard__channelsBtn{
    display:inline-flex;
  }
  .communityBoard{
    min-height:68vh;
  }
  .communityRoster{
    max-height:none;
  }
}
@media (max-width: 760px){
  body.page-community .communityShell.panel{
    padding:8px;
    gap:8px;
  }
  .communityTopbar,
  .communitySidebar,
  .communityBoard,
  .communityComposer,
  .communityHistory,
  .communityChannel,
  .communityMessage,
  .communityRoster,
  .communityRosterCard{
    border-radius:16px;
  }
  .communityTopbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .communityTopbar__left,
  .communityTopbar__right{
    width:100%;
  }
  .communityBoard__top,
  .communityComposer__bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .communityBoard__topLeft{
    width:100%;
  }
  .communityBoard__title{
    font-size:20px;
  }
  .communityMessage{
    grid-template-columns:34px minmax(0,1fr);
    padding:9px 10px;
  }
  .communityMessage__avatar,
  .communityRosterCard__avatar{
    width:34px;
    height:34px;
  }
  .communityMessage__actions{
    opacity:1;
    pointer-events:auto;
  }
}
@media (max-width: 560px){
  .communityTopbar .btn,
  .communityComposer__actions .btn,
  .communityBoard__channelsBtn{
    width:100%;
    justify-content:center;
  }
  .communityTopbar__right,
  .communityComposer__actions{
    width:100%;
  }
  .communityMiniProfile{
    width:100%;
  }
  .communitySidebar{
    inset:8px auto 8px 8px;
    width:min(310px, calc(100vw - 16px));
    max-height:calc(100dvh - 16px);
  }
}