/* Hub profiles — Instagram-like hero with stats on cover (ChatDRS colors) */

html[data-app='hub'] [class*='_profileHeroCard_'] {
  position: relative !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  background: linear-gradient(180deg, rgba(18, 20, 29, 0.96), rgba(8, 8, 12, 0.98)) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Cover plane */
html[data-app='hub'] [class*='_coverBanner_'] {
  position: relative !important;
  width: 100% !important;
  height: min(44vw, 236px) !important;
  min-height: 196px !important;
  max-height: 260px !important;
  overflow: hidden !important;
  background-color: #0a0a10 !important;
  background-image:
    radial-gradient(120% 90% at 0% 0%, rgba(122, 35, 72, 0.55), transparent 55%),
    radial-gradient(90% 80% at 100% 10%, rgba(212, 175, 55, 0.28), transparent 50%),
    linear-gradient(145deg, #140a12 0%, #0a0a10 55%, #12101a 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

html[data-app='hub'] [class*='_coverBanner_'].hubCoverHasPhoto {
  background-image: none !important;
}

html[data-app='hub'] [class*='_coverBanner_']::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.78) 100%);
  pointer-events: none;
  z-index: 1;
}

html[data-app='hub'] [class*='_coverBannerImg_'],
html[data-app='hub'] .hubCoverPhoto {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

html[data-app='hub'] [class*='_profileHeroBody_'] {
  position: relative !important;
  z-index: 2 !important;
  gap: 0.85rem !important;
  padding: 0 14px 16px !important;
}

/* Pull avatar + stats onto the cover — stats high, avatar lower */
html[data-app='hub'] [class*='_avatarStatsRow_'] {
  position: relative !important;
  z-index: 3 !important;
  margin-top: calc(-1 * min(40vw, 176px)) !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 0 2px 8px !important;
  flex-wrap: nowrap !important;
  min-height: 118px !important;
}

html[data-app='hub'] [class*='_avatarWrap_'] {
  flex-shrink: 0 !important;
  margin-top: 52px !important;
  padding: 3px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #f0d060, #a67c1a 55%, #7a2348) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

html[data-app='hub'] [class*='_profileAvatar_'],
html[data-app='hub'] [class*='_avatarBtn_'] [class*='avatar'],
html[data-app='hub'] [class*='_avatarBtn_'] img,
html[data-app='hub'] [class*='_avatarBtn_'] span {
  width: 86px !important;
  height: 86px !important;
  min-width: 86px !important;
  min-height: 86px !important;
  border-radius: 50% !important;
}

html[data-app='hub'] [class*='_avatarBtn_'] {
  border: 3px solid #0a0a0a !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #0a0a0a !important;
}

/* Stats glass panel — raised & centered in cover band */
html[data-app='hub'] [class*='_statsRow_'] {
  display: flex !important;
  align-items: stretch !important;
  align-self: flex-start !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 100px) !important;
  margin-top: 10px !important;
  padding: 10px 10px !important;
  border-radius: 16px !important;
  background: rgba(8, 8, 12, 0.58) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-app='hub'] [class*='_statItem_'] {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px 4px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
  text-align: center !important;
}

html[data-app='hub'] [class*='_statItem_']:hover {
  background: rgba(212, 175, 55, 0.12) !important;
  transform: none !important;
}

html[data-app='hub'] [class*='_statNum_'] {
  color: #f0d060 !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

html[data-app='hub'] [class*='_statLabel_'] {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

html[data-app='hub'] [class*='_bioSection_'] {
  margin-top: 0.35rem !important;
}

html[data-app='hub'] [class*='_nameTitle_'] {
  color: #fff !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
}

html[data-app='hub'] [class*='_handleText_'],
html[data-app='hub'] [class*='_bioText_'],
html[data-app='hub'] [class*='_metaItem_'] {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Cover edit control */
html[data-app='hub'] .hubCoverEditBtn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(8, 8, 12, 0.72);
  color: #f0d060;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

html[data-app='hub'] .hubCoverEditBtn:hover {
  background: rgba(18, 14, 22, 0.9);
  border-color: rgba(240, 208, 96, 0.7);
}

html[data-app='hub'] .hubCoverEditBtn:disabled {
  opacity: 0.6;
  cursor: wait;
}

html[data-app='hub'] .hubCoverEditBtn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Action buttons on profile — Hub gold theme */
html[data-app='hub'] [class*='_actionBtnPrimary_'],
html[data-app='hub'] [class*='_actionBtnSecondary_'] {
  background: linear-gradient(155deg, rgba(90, 36, 78, 0.45) 0%, #0c0c12 50%) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

html[data-app='hub'] [class*='_actionBtnPrimary_'] svg,
html[data-app='hub'] [class*='_actionBtnSecondary_'] svg {
  color: #f0d060 !important;
}

/* Views / control strip injected by hub-profile.js */
html[data-app='hub'] .hubProfileInsights {
  display: grid;
  gap: 0.2rem;
  margin: 0.15rem 0 0.35rem;
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(122, 35, 72, 0.28), transparent 55%),
    rgba(255, 255, 255, 0.04);
  color: #fff;
}

html[data-app='hub'] .hubProfileInsights strong {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

html[data-app='hub'] .hubProfileInsights span {
  color: rgba(240, 208, 96, 0.95);
  font-size: 0.86rem;
  font-weight: 700;
}

/* People profile sheet / other profile hero variants */
html[data-app='hub'] [class*='_hero_1g9zj_'],
html[data-app='hub'] [class*='_hero_'][class*='g9zj'] {
  position: relative !important;
}

html[data-app='hub'] [class*='_stats_1g9zj_'],
html[data-app='hub'] [class*='_stats_'][class*='g9zj'] {
  display: flex !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: rgba(8, 8, 12, 0.55) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  backdrop-filter: blur(12px) !important;
}

html[data-app='hub'] [class*='_stat_1g9zj_'],
html[data-app='hub'] [class*='_stat_'][class*='g9zj'] {
  flex: 1 !important;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
}

html[data-app='hub'] [class*='_stat_1g9zj_'] strong,
html[data-app='hub'] [class*='_stat_'][class*='g9zj'] strong {
  color: #f0d060 !important;
}

@media (max-width: 420px) {
  html[data-app='hub'] [class*='_avatarStatsRow_'] {
    margin-top: -150px !important;
    min-height: 108px !important;
  }

  html[data-app='hub'] [class*='_avatarWrap_'] {
    margin-top: 44px !important;
  }

  html[data-app='hub'] [class*='_statsRow_'] {
    margin-top: 8px !important;
    padding: 8px !important;
  }

  html[data-app='hub'] [class*='_profileAvatar_'],
  html[data-app='hub'] [class*='_avatarBtn_'] [class*='avatar'],
  html[data-app='hub'] [class*='_avatarBtn_'] img,
  html[data-app='hub'] [class*='_avatarBtn_'] span {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
  }

  html[data-app='hub'] [class*='_statNum_'] {
    font-size: 0.92rem !important;
  }

  html[data-app='hub'] [class*='_statLabel_'] {
    font-size: 0.62rem !important;
  }

  html[data-app='hub'] .hubCoverEditBtn span {
    display: none;
  }
}