/*
  Profile overview unified composition module.
  Extracted from the former pages/57-profile-overview.css; keep after 57-1-profile-overview-compact.css.
*/

/* =========================================================
   Public UI P2.45 — profile overview visual polish
   Goal: make the “Информация” tab look richer, cleaner and
   more premium while preserving the current data structure.
========================================================= */
#profileOverview.profilePane{
  position: relative;
}
#profileOverview.profilePane::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 320px at 10% -10%, rgba(255,145,58,.10), transparent 52%),
    radial-gradient(900px 260px at 100% 0%, rgba(255,255,255,.05), transparent 46%);
  opacity: .95;
}
#profileOverview .profileOverviewShell{
  position: relative;
  z-index: 1;
  gap: 12px !important;
}
#profileOverview .profileOverviewShell > *{
  animation: profileOverviewFloatIn .45s ease both;
}
#profileOverview .profileOverviewShell > *:nth-child(2){ animation-delay: .05s; }
#profileOverview .profileOverviewShell > *:nth-child(3){ animation-delay: .09s; }
#profileOverview .profileOverviewShell > *:nth-child(4){ animation-delay: .13s; }
#profileOverview .profileOverviewShell > *:nth-child(5){ animation-delay: .17s; }

#profileOverview .profileOverviewHero,
#profileOverview .profileHeroStat,
#profileOverview .statTile,
#profileOverview .profileInfoTile,
#profileOverview .profileSection--embedded{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08) !important;
  background:
    linear-gradient(180deg, rgba(20,23,31,.82), rgba(11,13,18,.88)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 28px rgba(0,0,0,.24);
}
#profileOverview .profileOverviewHero::before,
#profileOverview .profileHeroStat::before,
#profileOverview .statTile::before,
#profileOverview .profileInfoTile::before,
#profileOverview .profileSection--embedded::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 38%);
  opacity: .8;
}
#profileOverview .profileHeroStat::after,
#profileOverview .statTile::after,
#profileOverview .profileInfoTile::after,
#profileOverview .profileSection--embedded::after{
  content: "";
  position: absolute;
  inset: auto auto -38px -34px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,145,58,.14), transparent 68%);
  pointer-events: none;
  opacity: .85;
}
#profileOverview .profileOverviewHero{
  padding: 12px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255,145,58,.08), rgba(255,145,58,.02) 28%, rgba(18,20,27,.92) 68%),
    linear-gradient(180deg, rgba(20,23,31,.84), rgba(11,13,18,.9)) !important;
}
#profileOverview .profileOverviewHero__aside{
  justify-content: flex-start;
}
#profileOverview .profileOverviewIdentity__ava{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09),
    0 10px 22px rgba(0,0,0,.32),
    0 0 0 6px rgba(255,145,58,.06);
}
#profileOverview .profileOverviewIdentity__name{
  font-size: clamp(16px, 1.2vw, 20px) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  text-shadow: 0 1px 8px rgba(0,0,0,.28);
}
#profileOverview .profileOverviewIdentity__sid{
  color: rgba(235,239,245,.62) !important;
}
#profileOverview .profileOverviewIdentity__meta,
#profileOverview .profileOverviewIdentity__chips{
  gap: 6px !important;
}
#profileOverview .profileOverviewIdentity__meta .pill,
#profileOverview .profileOverviewIdentity__chips .pill{
  min-height: 24px;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(6px);
}
#profileOverview .profileOverviewMode .modeSwitch,
#profileOverview .profileOverviewActions .btn{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
#profileOverview .profileOverviewActions .btn:hover,
#profileOverview .profileOverviewMode .modeSwitch__btn:hover,
#profileOverview .profileOverviewActions .btn:focus-visible,
#profileOverview .profileOverviewMode .modeSwitch__btn:focus-visible,
#profileOverview .profileHeroStat:hover,
#profileOverview .statTile:hover,
#profileOverview .profileInfoTile:hover,
#profileOverview .profileSection--embedded:hover{
  transform: translateY(-2px);
  border-color: rgba(255,145,58,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 36px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,145,58,.06);
}
#profileOverview .profileOverviewActions .btn,
#profileOverview .profileOverviewMode .modeSwitch__btn,
#profileOverview .profileHeroStat,
#profileOverview .statTile,
#profileOverview .profileInfoTile,
#profileOverview .profileSection--embedded{
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

#profileOverview .profileOverviewStats,
#profileOverview .statTiles--profile,
#profileOverview .profileInfoGrid{
  gap: 10px !important;
}
#profileOverview .profileHeroStat,
#profileOverview .statTile,
#profileOverview .profileInfoTile{
  min-height: 94px !important;
  padding: 12px !important;
  border-radius: 16px !important;
}
#profileOverview .profileHeroStat{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#profileOverview .profileHeroStat:nth-child(1){
  background:
    linear-gradient(180deg, rgba(255,145,58,.12), rgba(11,13,18,.9)) !important;
}
#profileOverview .profileHeroStat:nth-child(2)::after{ background: radial-gradient(circle, rgba(255,186,58,.12), transparent 68%); }
#profileOverview .profileHeroStat:nth-child(3)::after{ background: radial-gradient(circle, rgba(94,153,255,.12), transparent 68%); }
#profileOverview .profileHeroStat:nth-child(4)::after{ background: radial-gradient(circle, rgba(176,119,255,.12), transparent 68%); }
#profileOverview .profileHeroStat__label,
#profileOverview .statTile__label,
#profileOverview .profileInfoTile__label{
  color: rgba(235,239,245,.72) !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
}
#profileOverview .profileHeroStat__value,
#profileOverview .statTile__value,
#profileOverview .profileInfoTile__value{
  font-size: clamp(15px, 1.08vw, 18px) !important;
  font-weight: 800 !important;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.2);
}
#profileOverview .profileHeroStat__sub,
#profileOverview .profileInfoTile__sub,
#profileOverview .lvlMeta{
  color: rgba(229,233,240,.68) !important;
}
#profileOverview .statTile[data-pref="level"]{
  background:
    linear-gradient(135deg, rgba(255,145,58,.12), rgba(255,145,58,.03) 34%, rgba(11,13,18,.9) 100%) !important;
}
#profileOverview .statTile[data-pref="level"] .lvlBar{
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
#profileOverview .statTile[data-pref="level"] .lvlBar i{
  background: linear-gradient(90deg, #ff8d3b, #ffb25a);
  box-shadow: 0 0 14px rgba(255,145,58,.35);
}
#profileOverview .profileInfoTile[data-pref="prefix"]::after{ background: radial-gradient(circle, rgba(255,85,85,.16), transparent 68%); }
#profileOverview .profileInfoTile[data-pref="colorNick"]::after{ background: radial-gradient(circle, rgba(155,112,219,.18), transparent 68%); }
#profileOverview .profileInfoTile[data-pref="colorMsg"]::after{ background: radial-gradient(circle, rgba(230,230,250,.16), transparent 68%); }
#profileOverview .profileInfoTile[data-pref="groups"]::after{ background: radial-gradient(circle, rgba(94,153,255,.14), transparent 68%); }
#profileOverview .profileInfoTile__pillList{
  gap: 6px !important;
  margin-top: 4px;
}
#profileOverview .profileInfoTile .pill{
  min-height: 22px;
  padding: 4px 8px !important;
  border-radius: 999px !important;
}
#profileOverview .profileSection--embedded{
  border-radius: 16px !important;
  padding: 12px !important;
}
#profileOverview .profileSection--embedded .profileSection__head{
  align-items: center;
}
#profileOverview .profileSection--embedded .profileSection__title{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
}
#profileOverview .profileSection--embedded .hint{
  color: rgba(229,233,240,.68) !important;
}
#profileOverview .profileMyShopsList{
  gap: 8px !important;
  margin-top: 10px;
}
#profileOverview .profileMyShopRow{
  min-height: 72px !important;
  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.025) !important;
}
#profileOverview .profileMyShopName{
  font-size: 12px !important;
  font-weight: 700;
}
#profileOverview .profileMyShopMeta{
  color: rgba(229,233,240,.68) !important;
}

@keyframes profileOverviewFloatIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (max-width: 1180px){
  #profileOverview .profileOverviewHero{
    padding: 11px !important;
  }
  #profileOverview .profileHeroStat,
  #profileOverview .statTile,
  #profileOverview .profileInfoTile{
    min-height: 88px !important;
  }
}
@media (max-width: 860px){
  #profileOverview .profileOverviewHero,
  #profileOverview .profileHeroStat,
  #profileOverview .statTile,
  #profileOverview .profileInfoTile,
  #profileOverview .profileSection--embedded{
    border-radius: 14px !important;
  }
  #profileOverview .profileHeroStat,
  #profileOverview .statTile,
  #profileOverview .profileInfoTile,
  #profileOverview .profileSection--embedded,
  #profileOverview .profileMyShopRow{
    padding: 10px !important;
  }
}
@media (max-width: 640px){
  #profileOverview .profileOverviewShell{
    gap: 9px !important;
  }
  #profileOverview .profileOverviewHero,
  #profileOverview .profileHeroStat,
  #profileOverview .statTile,
  #profileOverview .profileInfoTile,
  #profileOverview .profileSection--embedded,
  #profileOverview .profileMyShopRow{
    padding: 9px !important;
    border-radius: 12px !important;
  }
  #profileOverview .profileHeroStat,
  #profileOverview .statTile,
  #profileOverview .profileInfoTile,
  #profileOverview .profileMyShopRow{
    min-height: 80px !important;
  }
  #profileOverview .profileOverviewIdentity__meta .pill,
  #profileOverview .profileOverviewIdentity__chips .pill,
  #profileOverview .profileInfoTile .pill{
    min-height: 21px;
  }
}
@media (prefers-reduced-motion: reduce){
  #profileOverview .profileOverviewShell > *,
  #profileOverview .profileOverviewActions .btn,
  #profileOverview .profileOverviewMode .modeSwitch__btn,
  #profileOverview .profileHeroStat,
  #profileOverview .statTile,
  #profileOverview .profileInfoTile,
  #profileOverview .profileSection--embedded{
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   Public UI P2.46 — profile overview unified composition
   Goal: remove tile feeling in the Information tab and turn
   it into one cohesive highlighted profile surface.
========================================================= */
#profileOverview .profileOverviewShell--unified{
  display: block;
  gap: 0 !important;
}
#profileOverview .profileOverviewUnified{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(12,16,24,.92), rgba(10,13,20,.94)),
    radial-gradient(circle at top left, rgba(255,145,58,.08), transparent 34%),
    radial-gradient(circle at right center, rgba(121,96,255,.08), transparent 30%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 44px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.03);
  isolation: isolate;
  animation: profileOverviewUnifiedIn .32s ease both;
}
#profileOverview .profileOverviewUnified__glow{
  position: absolute;
  inset: -22% auto auto -12%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,145,58,.16), rgba(255,145,58,0) 70%);
  pointer-events: none;
  filter: blur(8px);
  opacity: .9;
  z-index: 0;
}
#profileOverview .profileOverviewUnified > *{
  position: relative;
  z-index: 1;
}
#profileOverview .profileOverviewUnified__hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(248px, 312px);
  gap: 14px;
  align-items: stretch;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity,
#profileOverview .profileOverviewUnified .profileOverviewHero__aside,
#profileOverview .profileOverviewUnified .profileOverviewSection,
#profileOverview .profileOverviewUnified .profileOverviewMetric{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.016));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity{
  display: grid;
  grid-template-columns: 74px minmax(0,1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity__ava{
  width: 74px;
  height: 74px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity__body{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity__top,
#profileOverview .profileOverviewUnified .profileOverviewIdentity__nameWrap{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity__name{
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.22);
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity__sid{
  font-size: 12px;
  color: rgba(226,232,240,.56);
  overflow-wrap: anywhere;
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity__meta,
#profileOverview .profileOverviewUnified .profileOverviewIdentity__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity__meta .pill,
#profileOverview .profileOverviewUnified .profileOverviewIdentity__chips .pill{
  min-height: 26px;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.09) !important;
}
#profileOverview .profileOverviewUnified .profileOverviewHero__aside{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
}
#profileOverview .profileOverviewUnified .profileOverviewMode,
#profileOverview .profileOverviewUnified .profileOverviewMode .modeSwitch{
  width: 100%;
}
#profileOverview .profileOverviewUnified .profileOverviewActions{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}
#profileOverview .profileOverviewUnified .profileOverviewActions .btn,
#profileOverview .profileOverviewUnified .profileOverviewMode .modeSwitch__btn{
  min-height: 40px;
  border-radius: 14px !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
#profileOverview .profileOverviewRibbon{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
#profileOverview .profileOverviewMetric{
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 13px;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
#profileOverview .profileOverviewMetric::after{
  content: "";
  position: absolute;
  inset: auto -24px -42px auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  opacity: .8;
  pointer-events: none;
}
#profileOverview .profileOverviewMetric--level::after{
  background: radial-gradient(circle, rgba(255,145,58,.24), transparent 70%);
}
#profileOverview .profileOverviewMetric--rads::after{
  background: radial-gradient(circle, rgba(255,183,59,.18), transparent 70%);
}
#profileOverview .profileOverviewMetric--time::after{
  background: radial-gradient(circle, rgba(87,161,255,.18), transparent 70%);
}
#profileOverview .profileOverviewMetric--points::after{
  background: radial-gradient(circle, rgba(173,121,255,.18), transparent 70%);
}
#profileOverview .profileOverviewMetric__top{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#profileOverview .profileOverviewMetric__label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(226,232,240,.62);
  font-weight: 800;
}
#profileOverview .profileOverviewMetric__value{
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.1;
  font-weight: 800;
  color: #fff;
}
#profileOverview .profileOverviewMetric__sub{
  font-size: 12px;
  line-height: 1.45;
  color: rgba(226,232,240,.68);
}
#profileOverview .profileOverviewMetric__bar{
  margin-top: 2px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
#profileOverview .profileOverviewMetric__bar i{
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8d3b, #ffc46f);
  box-shadow: 0 0 16px rgba(255,145,58,.34);
}
#profileOverview .profileOverviewUnified__content{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 12px;
}
#profileOverview .profileOverviewSection{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
#profileOverview .profileOverviewSection--summary{
  grid-column: 1;
}
#profileOverview .profileOverviewSection--appearance{
  grid-column: 2;
}
#profileOverview .profileOverviewSection--rights{
  grid-column: 1;
}
#profileOverview .profileOverviewSection--shops{
  grid-column: 2;
}
#profileOverview .profileOverviewSection__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
#profileOverview .profileOverviewSection__eyebrow{
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,145,58,.82);
  font-weight: 800;
}
#profileOverview .profileOverviewSection__title{
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
  color: #fff;
}
#profileOverview .profileOverviewSection__meta,
#profileOverview .profileOverviewSection .hint,
#profileOverview .profileOverviewEmpty{
  color: rgba(226,232,240,.68);
  font-size: 12px;
  line-height: 1.5;
}
#profileOverview .profileOverviewSection__meta b{
  color: #fff;
}
#profileOverview .profileOverviewEntryList,
#profileOverview .profileOverviewShopList{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#profileOverview .profileOverviewEntry,
#profileOverview .profileOverviewShopRow{
  min-width: 0;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
#profileOverview .profileOverviewEntry__head{
  margin-bottom: 7px;
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(226,232,240,.58);
  font-weight: 800;
}
#profileOverview .profileOverviewEntry__body{
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
#profileOverview .profileOverviewEntry__accent{
  color: #fff;
  font-size: clamp(16px, 1.15vw, 19px);
  font-weight: 800;
  letter-spacing: -.01em;
}
#profileOverview .profileOverviewEntry__accent--warm{
  color: #ffd79e;
}
#profileOverview .profileOverviewEntry__note{
  margin-top: 7px;
  color: rgba(226,232,240,.66);
  font-size: 12px;
  line-height: 1.5;
}
#profileOverview .profileOverviewEntry__pillList{
  gap: 6px !important;
}
#profileOverview .profileOverviewEntry__pillList .pill{
  min-height: 24px;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.08) !important;
}
#profileOverview .profileOverviewShopRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#profileOverview .profileOverviewShopRow__name{
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
  overflow-wrap: anywhere;
}
#profileOverview .profileOverviewShopRow__meta{
  margin-top: 4px;
  color: rgba(226,232,240,.66);
  font-size: 12px;
  line-height: 1.45;
}
#profileOverview .profileOverviewMetric:hover,
#profileOverview .profileOverviewSection:hover,
#profileOverview .profileOverviewEntry:hover,
#profileOverview .profileOverviewShopRow:hover,
#profileOverview .profileOverviewUnified .profileOverviewActions .btn:hover,
#profileOverview .profileOverviewUnified .profileOverviewMode .modeSwitch__btn:hover,
#profileOverview .profileOverviewUnified .profileOverviewActions .btn:focus-visible,
#profileOverview .profileOverviewUnified .profileOverviewMode .modeSwitch__btn:focus-visible{
  transform: translateY(-2px);
  border-color: rgba(255,145,58,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 28px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,145,58,.05);
}
#profileOverview .profileOverviewUnified__hero,
#profileOverview .profileOverviewRibbon,
#profileOverview .profileOverviewSection--summary,
#profileOverview .profileOverviewSection--appearance,
#profileOverview .profileOverviewSection--rights,
#profileOverview .profileOverviewSection--shops{
  animation: profileOverviewUnifiedIn .36s ease both;
}
#profileOverview .profileOverviewRibbon{ animation-delay: .04s; }
#profileOverview .profileOverviewSection--summary{ animation-delay: .08s; }
#profileOverview .profileOverviewSection--appearance{ animation-delay: .12s; }
#profileOverview .profileOverviewSection--rights{ animation-delay: .16s; }
#profileOverview .profileOverviewSection--shops{ animation-delay: .2s; }

@keyframes profileOverviewUnifiedIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}

@media (max-width: 1260px){
  #profileOverview .profileOverviewUnified__hero{
    grid-template-columns: 1fr;
  }
  #profileOverview .profileOverviewUnified__content{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 980px){
  #profileOverview .profileOverviewRibbon,
  #profileOverview .profileOverviewUnified__content{
    grid-template-columns: 1fr 1fr;
  }
  #profileOverview .profileOverviewSection--summary,
  #profileOverview .profileOverviewSection--appearance,
  #profileOverview .profileOverviewSection--rights,
  #profileOverview .profileOverviewSection--shops{
    grid-column: auto;
  }
}
@media (max-width: 760px){
  #profileOverview .profileOverviewUnified{
    padding: 14px;
    gap: 12px;
    border-radius: 18px;
  }
  #profileOverview .profileOverviewUnified__hero{
    gap: 12px;
    padding-bottom: 12px;
  }
  #profileOverview .profileOverviewUnified .profileOverviewIdentity{
    grid-template-columns: 64px minmax(0,1fr);
    padding: 12px;
    border-radius: 16px;
  }
  #profileOverview .profileOverviewUnified .profileOverviewIdentity__ava{
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }
  #profileOverview .profileOverviewRibbon,
  #profileOverview .profileOverviewUnified__content,
  #profileOverview .profileOverviewUnified .profileOverviewActions{
    grid-template-columns: 1fr;
  }
  #profileOverview .profileOverviewSection,
  #profileOverview .profileOverviewMetric,
  #profileOverview .profileOverviewEntry,
  #profileOverview .profileOverviewShopRow{
    border-radius: 14px;
  }
  #profileOverview .profileOverviewShopRow{
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 520px){
  #profileOverview .profileOverviewUnified{
    padding: 12px;
  }
  #profileOverview .profileOverviewUnified .profileOverviewIdentity{
    grid-template-columns: 1fr;
  }
  #profileOverview .profileOverviewUnified .profileOverviewIdentity__ava{
    width: 58px;
    height: 58px;
  }
  #profileOverview .profileOverviewMetric,
  #profileOverview .profileOverviewSection,
  #profileOverview .profileOverviewEntry,
  #profileOverview .profileOverviewShopRow{
    padding: 10px 11px;
  }
}
@media (prefers-reduced-motion: reduce){
  #profileOverview .profileOverviewUnified,
  #profileOverview .profileOverviewUnified__hero,
  #profileOverview .profileOverviewRibbon,
  #profileOverview .profileOverviewSection,
  #profileOverview .profileOverviewMetric,
  #profileOverview .profileOverviewEntry,
  #profileOverview .profileOverviewShopRow,
  #profileOverview .profileOverviewUnified .profileOverviewActions .btn,
  #profileOverview .profileOverviewUnified .profileOverviewMode .modeSwitch__btn{
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   Public UI P2.47 — profile viewport composition and bottom fit
   Goal: keep the whole profile block visually attached to the
   lower working area of the screen, remove the giant dead gap
   in the Information tab, and compact the unified overview
   into a denser composition that still stays responsive.
========================================================= */
body.page-profile .wrap{
  margin-bottom: 8px !important;
}
body.page-profile .siteFooter{
  margin-top: 0 !important;
}
.sitePanel--profile{
  --profile-shell-fit: clamp(520px, calc(100dvh - 292px), 760px);
  min-height: 0 !important;
}
.sitePanel--profile .panel-body{
  padding: 8px !important;
}
.profilePage__body{
  min-height: var(--profile-shell-fit);
  display: flex;
  flex-direction: column;
}
.profilePage .profileLayout{
  min-height: var(--profile-shell-fit);
  height: auto;
  align-items: stretch !important;
  gap: 12px !important;
}
.profileAside,
.profileMain,
.profileMain > .pPanel.is-active{
  min-height: 0;
}
.profileAside{
  display: flex;
}
.profileNav{
  width: 100%;
  padding: 8px !important;
  border-radius: 18px !important;
}
.profileNav--side{
  gap: 6px !important;
  max-height: none !important;
  overflow: visible !important;
}
.pTab{
  min-height: 36px !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
}
.profilePane{
  min-height: var(--profile-shell-fit);
  padding: 10px !important;
  gap: 10px !important;
  border-radius: 20px !important;
  align-content: start;
}
.profilePane .card__head{
  margin-bottom: 8px !important;
  gap: 8px 10px !important;
}
.profilePane .card__title{
  font-size: 15px !important;
}
.profilePane .hint{
  font-size: 11.5px !important;
  line-height: 1.42 !important;
}

#profileOverview.profilePane{
  min-height: var(--profile-shell-fit);
  padding: 0 !important;
  overflow: hidden !important;
  display: block !important;
}
#profileOverview .profileOverviewShell--unified{
  height: 100%;
  min-height: var(--profile-shell-fit);
}
#profileOverview .profileOverviewUnified{
  min-height: var(--profile-shell-fit) !important;
  height: 100%;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: start !important;
  justify-content: stretch !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 20px !important;
}
#profileOverview .profileOverviewUnified__glow{
  inset: -14% auto auto -8% !important;
  width: 260px !important;
  height: 260px !important;
  opacity: .72 !important;
  filter: blur(10px) !important;
}
#profileOverview .profileOverviewUnified__hero,
#profileOverview .profileOverviewRibbon,
#profileOverview .profileOverviewUnified__content{
  margin: 0 !important;
  align-self: start !important;
}
#profileOverview .profileOverviewUnified__hero{
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding-bottom: 12px !important;
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity,
#profileOverview .profileOverviewUnified .profileOverviewHero__aside,
#profileOverview .profileOverviewUnified .profileOverviewSection,
#profileOverview .profileOverviewUnified .profileOverviewMetric{
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.018)) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity{
  grid-template-columns: 60px minmax(0,1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  padding: 12px !important;
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity__ava{
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity__body{
  gap: 6px !important;
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity__name{
  font-size: clamp(18px, 1.25vw, 22px) !important;
  line-height: 1.06 !important;
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity__sid{
  font-size: 11.5px !important;
  line-height: 1.3 !important;
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity__meta,
#profileOverview .profileOverviewUnified .profileOverviewIdentity__chips{
  gap: 6px !important;
}
#profileOverview .profileOverviewUnified .profileOverviewIdentity__meta .pill,
#profileOverview .profileOverviewUnified .profileOverviewIdentity__chips .pill{
  min-height: 23px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
}
#profileOverview .profileOverviewUnified .profileOverviewHero__aside{
  padding: 10px !important;
  gap: 8px !important;
  min-width: 220px !important;
}
#profileOverview .profileOverviewUnified .profileOverviewMode .modeSwitch__btn,
#profileOverview .profileOverviewUnified .profileOverviewActions .btn{
  min-height: 34px !important;
  padding: 7px 9px !important;
  font-size: 12px !important;
  border-radius: 12px !important;
}
#profileOverview .profileOverviewUnified .profileOverviewActions{
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 6px !important;
}
#profileOverview .profileOverviewRibbon{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
#profileOverview .profileOverviewMetric{
  min-height: 88px !important;
  padding: 12px !important;
  gap: 7px !important;
}
#profileOverview .profileOverviewMetric__label{
  font-size: 10px !important;
  letter-spacing: .08em !important;
}
#profileOverview .profileOverviewMetric__value{
  font-size: clamp(16px, 1.08vw, 19px) !important;
  line-height: 1.08 !important;
}
#profileOverview .profileOverviewMetric__sub{
  font-size: 11.5px !important;
  line-height: 1.36 !important;
}
#profileOverview .profileOverviewMetric__bar{
  height: 5px !important;
  margin-top: 0 !important;
}

#profileOverview .profileOverviewUnified__content{
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .95fr) minmax(0, .95fr) !important;
  grid-template-areas:
    "summary appearance rights"
    "summary shops shops" !important;
  gap: 10px !important;
  align-items: start !important;
  align-content: start !important;
}
#profileOverview .profileOverviewSection{
  gap: 10px !important;
  padding: 12px !important;
  min-height: 0 !important;
}
#profileOverview .profileOverviewSection--summary{ grid-area: summary !important; }
#profileOverview .profileOverviewSection--appearance{ grid-area: appearance !important; }
#profileOverview .profileOverviewSection--rights{ grid-area: rights !important; }
#profileOverview .profileOverviewSection--shops{ grid-area: shops !important; }
#profileOverview .profileOverviewSection__eyebrow{
  font-size: 9px !important;
  letter-spacing: .14em !important;
}
#profileOverview .profileOverviewSection__title{
  font-size: 14px !important;
  line-height: 1.2 !important;
}
#profileOverview .profileOverviewSection__meta,
#profileOverview .profileOverviewSection .hint,
#profileOverview .profileOverviewEmpty{
  font-size: 11.5px !important;
  line-height: 1.44 !important;
}
#profileOverview .profileOverviewEntryList{
  gap: 8px !important;
}
#profileOverview .profileOverviewShopList{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}
#profileOverview .profileOverviewEntry,
#profileOverview .profileOverviewShopRow{
  padding: 10px 11px !important;
  border-radius: 14px !important;
}
#profileOverview .profileOverviewEntry__head{
  margin-bottom: 6px !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
}
#profileOverview .profileOverviewEntry__body{
  gap: 6px !important;
  font-size: 13.5px !important;
  line-height: 1.32 !important;
}
#profileOverview .profileOverviewEntry__accent{
  font-size: clamp(14px, 1vw, 17px) !important;
}
#profileOverview .profileOverviewEntry__note{
  margin-top: 6px !important;
  font-size: 11px !important;
  line-height: 1.42 !important;
}
#profileOverview .profileOverviewEntry__pillList .pill{
  min-height: 22px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
}
#profileOverview .profileOverviewShopRow{
  min-height: 72px !important;
  gap: 10px !important;
}
#profileOverview .profileOverviewShopRow__name{
  font-size: 13px !important;
  line-height: 1.28 !important;
}
#profileOverview .profileOverviewShopRow__meta{
  margin-top: 3px !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

.profilePane:not(#profileOverview){
  padding: 10px !important;
}
.profileBox,
.profileSection--embedded,
.profileLikesToolbar,
.profilePane .panel,
.lvlCard,
.invSlot,
.achItem,
.refRow,
.likeUserRow,
.baseMiniRow,
.baseInviteRow,
.toggleRow{
  border-radius: 16px !important;
}
.profileBox,
.profileSection--embedded,
.profileLikesToolbar,
.profilePane .panel{
  padding: 10px !important;
}

@media (max-width: 1380px){
  .sitePanel--profile{
    --profile-shell-fit: clamp(500px, calc(100dvh - 304px), 720px);
  }
  #profileOverview .profileOverviewUnified__content{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "summary appearance"
      "rights shops" !important;
  }
  #profileOverview .profileOverviewShopList{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 1180px){
  body.page-profile .wrap{
    margin-bottom: 10px !important;
  }
  .sitePanel--profile{
    --profile-shell-fit: auto;
  }
  .profilePage__body,
  .profilePage .profileLayout,
  .profilePane,
  #profileOverview.profilePane,
  #profileOverview .profileOverviewShell--unified,
  #profileOverview .profileOverviewUnified{
    min-height: 0 !important;
    height: auto !important;
  }
  .profilePage .profileLayout{
    grid-template-columns: 1fr !important;
  }
  .profileAside{
    display: block;
  }
  .profileNav--side{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
  #profileOverview .profileOverviewUnified{
    gap: 10px !important;
    padding: 12px !important;
  }
  #profileOverview .profileOverviewUnified__hero{
    grid-template-columns: 1fr !important;
  }
  #profileOverview .profileOverviewUnified .profileOverviewHero__aside{
    min-width: 0 !important;
  }
  #profileOverview .profileOverviewUnified__content{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "summary appearance"
      "rights shops" !important;
  }
}
@media (max-width: 860px){
  #profileOverview .profileOverviewRibbon,
  #profileOverview .profileOverviewUnified__content{
    grid-template-columns: 1fr 1fr !important;
  }
  #profileOverview .profileOverviewUnified__content{
    grid-template-areas:
      "summary summary"
      "appearance rights"
      "shops shops" !important;
  }
  #profileOverview .profileOverviewUnified .profileOverviewActions{
    grid-template-columns: 1fr !important;
  }
  #profileOverview .profileOverviewUnified .profileOverviewIdentity{
    grid-template-columns: 56px minmax(0,1fr) !important;
    gap: 10px !important;
  }
  #profileOverview .profileOverviewUnified .profileOverviewIdentity__ava{
    width: 56px !important;
    height: 56px !important;
  }
}
@media (max-width: 640px){
  .sitePanel--profile .panel-body{
    padding: 6px !important;
  }
  .profilePane{
    padding: 8px !important;
  }
  .profileNav{
    padding: 6px !important;
  }
  .profileNav--side{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .pTab{
    min-width: max-content !important;
  }
  #profileOverview .profileOverviewUnified{
    padding: 10px !important;
    border-radius: 18px !important;
  }
  #profileOverview .profileOverviewUnified__hero,
  #profileOverview .profileOverviewRibbon,
  #profileOverview .profileOverviewUnified__content{
    grid-template-columns: 1fr !important;
  }
  #profileOverview .profileOverviewUnified__content{
    grid-template-areas:
      "summary"
      "appearance"
      "rights"
      "shops" !important;
  }
  #profileOverview .profileOverviewUnified .profileOverviewIdentity{
    grid-template-columns: 1fr !important;
  }
  #profileOverview .profileOverviewUnified .profileOverviewIdentity__ava{
    width: 54px !important;
    height: 54px !important;
  }
  #profileOverview .profileOverviewSection,
  #profileOverview .profileOverviewMetric,
  #profileOverview .profileOverviewEntry,
  #profileOverview .profileOverviewShopRow{
    padding: 9px !important;
    border-radius: 12px !important;
  }
}
@media (prefers-reduced-motion: reduce){
  #profileOverview .profileOverviewUnified,
  #profileOverview .profileOverviewUnified__hero,
  #profileOverview .profileOverviewRibbon,
  #profileOverview .profileOverviewUnified__content,
  #profileOverview .profileOverviewSection,
  #profileOverview .profileOverviewMetric,
  #profileOverview .profileOverviewEntry,
  #profileOverview .profileOverviewShopRow{
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}