.profile-view {
  position: fixed;
  z-index: 7;
  inset: 0;
  display: flex;
  width: min(100%, 460px);
  flex-direction: column;
  gap: 14px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 14px max(98px, calc(90px + env(safe-area-inset-bottom)));
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(75, 77, 92, .18), transparent 43%),
    linear-gradient(180deg, #101012, #17171a 58%, #101012);
  overscroll-behavior: contain;
}

.profile-view[hidden] { display: none; }

.profile-header {
  display: grid;
  min-height: 36px;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
}

.profile-header h1 { margin: 0; font-size: 16px; font-weight: 800; text-align: center; }

.profile-back {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: #242427;
  color: #fff;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}

.profile-identity {
  display: flex;
  min-height: 86px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 1px;
}

.profile-photo {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: linear-gradient(145deg, #597a3e, #28452c);
  color: white;
  font-size: 26px;
  font-weight: 800;
}

.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-identity > strong { max-width: 100%; overflow: hidden; font-size: 16px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }

.profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.profile-stat-card {
  display: flex;
  min-height: 113px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.035);
  border-radius: 22px;
  background: linear-gradient(140deg, #242427, #19191b);
}

.profile-stat-icon { font-size: 18px; }
.profile-stat-label { color: #aaa9ae; font-size: 12px; font-weight: 700; }
.profile-stat-card > strong { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

.profile-referrals {
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.035);
  border-radius: 18px;
  background: linear-gradient(140deg, #242427, #19191b);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.profile-referral-icon { font-size: 19px; }
.profile-referral-copy { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.profile-referral-copy strong { font-size: 13px; font-weight: 800; }
.profile-referral-copy small { color: #aaa9ae; font-size: 10px; font-weight: 700; }
.profile-chevron { font-size: 24px; line-height: 1; }

.profile-referral-note, .profile-data-note {
  margin: -5px 2px 0;
  color: #99979d;
  font-size: 10px;
  line-height: 1.5;
}

.profile-data-note { margin-top: auto; text-align: center; }

.avatar-profile-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.profile-view ~ .bottom-nav { z-index: 8; }

@media (max-width: 360px) {
  .profile-view { padding-right: 11px; padding-left: 11px; }
  .profile-stat-card { min-height: 105px; padding: 12px; }
  .profile-stat-card > strong { font-size: 14px; }
}