:root {
  --app-version-panel-bg: rgba(12, 18, 32, .78);
  --app-version-panel-border: rgba(255, 255, 255, .14);
}

body.profile-has-custom-bg {
  background-image: linear-gradient(135deg, rgba(3, 6, 14, .82), rgba(7, 14, 30, .68)), var(--private-profile-bg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

body.profile-has-custom-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .36), rgba(0, 0, 0, .72)), var(--private-profile-bg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  filter: saturate(1.08);
}

body.profile-has-custom-bg #profileTab .profile-panel {
  background: rgba(7, 12, 24, .76);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42);
  backdrop-filter: blur(18px);
}

body.profile-has-custom-bg #profileTab .profile-card,
body.profile-has-custom-bg #profileTab .profile-data {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
}

.public-profile-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  margin: .35rem 0 .75rem;
}

.public-profile-meta .public-profile-handle,
.public-profile-meta .public-profile-joined {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  line-height: 1.25;
}

.public-profile-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  align-content: start;
  max-width: 440px;
}

.public-profile-stats > div {
  min-height: 0;
  padding: .8rem .9rem;
  border-radius: 18px;
}

.public-profile-stats strong {
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  line-height: 1;
}

.public-profile-stats span {
  font-size: .78rem;
  letter-spacing: .01em;
}

.public-profile-section.is-empty {
  display: none !important;
}

.app-version-panel {
  display: grid;
  gap: .65rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--app-version-panel-border);
  border-radius: 18px;
  background: var(--app-version-panel-bg);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .18);
}

.app-version-panel strong {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
}

.app-version-panel small {
  opacity: .82;
  line-height: 1.45;
}

.app-version-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.65rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
}

.app-version-status.is-current {
  background: rgba(33, 197, 94, .16);
  border-color: rgba(33, 197, 94, .35);
}

.app-version-status.is-old {
  background: rgba(245, 158, 11, .16);
  border-color: rgba(245, 158, 11, .35);
}

.app-version-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

@media (max-width: 720px) {
  body.profile-has-custom-bg {
    background-attachment: scroll;
  }

  body.profile-has-custom-bg::before {
    background-attachment: scroll;
  }

  .public-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: none;
  }

  .app-version-panel strong {
    align-items: flex-start;
    flex-direction: column;
  }
}