.user-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f2fbf6 0%, #f8fbff 38%, #f9fafb 100%);
}

.header-bg {
  position: relative;
  overflow: hidden;
  padding-top: 12px;
  background: transparent;
}

/* 右上角光晕点缀 */
.header-bg::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, rgba(96, 165, 250, 0.1) 55%, transparent 75%);
  z-index: 0;
}

.user-card-wrap {
  position: relative;
  z-index: 1;
  padding: 16px;
}

.user-card {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 252, 255, 0.94) 100%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.user-card-header {
  height: 100%;
  padding-top: 0 !important;
}

.user-card .nut-avatar {
  border: 3px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.user-card__name {
  max-width: 300px;
  overflow: hidden;
  color: #ffffff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-card__profile {
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 999px;
  background: #ecfdf5;
  color: #0f3076;
  white-space: nowrap;
}

.user-card__scan {
  padding: 6px;
  border-radius: 999px;
  background: #ecfeff;
  color: #0f766e;
}

.grade .nut-tag {
  border-radius: 999px;
}