ai-c/pages/profile/profile.wxss

page {
  background: #E8C3D4;
  min-height: 100vh;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.page {
  padding-top: 194rpx;
  padding-bottom: 200rpx; /* Extra space for TabBar */
}

/* Custom Nav已移除，改用全局 unified-header */

.btn-reset {
  padding: 0;
  margin: 0;
  line-height: inherit;
  background: transparent;
  border-radius: 0;
  text-align: center;
  width: auto !important;
  min-width: 0 !important;
}
.btn-reset::after { border: none; }

/* Common Card Styles */
.section-wrapper {
  padding: 0 32rpx;
  margin-bottom: 32rpx;
}

.white-card {
  background: #FFFFFF;
  border-radius: 48rpx;
  padding: 42rpx;
  box-shadow: 0 2rpx 4rpx -2rpx rgba(0, 0, 0, 0.1), 0 2rpx 6rpx 0 rgba(0, 0, 0, 0.1);
  border: 2rpx solid #F9FAFB;
}

.main-title {
  font-size: 48rpx;
  font-weight: 700;
  color: #101828;
}

.card-title-row {
  margin-bottom: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.border-bottom {
  border-bottom: 2rpx solid #F9FAFB;
  padding-bottom: 2rpx;
  margin-bottom: 40rpx;
}

/* Header Profile */
.profile-outer {
  padding: 16rpx 32rpx 32rpx;
}

.profile-card {
  background: #FFFFFF;
  border-radius: 48rpx;
  padding: 40rpx;
  display: flex;
  align-items: center;
  gap: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.02);
  border: 2rpx solid #F9FAFB;
}

.avatar-wrap {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 4rpx solid #F3D1EA;
  padding: 4rpx;
  flex-shrink: 0;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.profile-info {
  flex: 1;
  overflow: hidden;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 16rpx;
}

.nickname {
  font-size: 40rpx;
  font-weight: 900;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vip-badge {
  background: linear-gradient(90deg, #B06AB3, #8E44AD); /* Default/fallback */
  padding: 4rpx 20rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
}

.vip-badge.vip-soulmate {
  background: linear-gradient(90deg, #F472B6, #991B1B); /* Pink to Deep Red */
}

.vip-badge.vip-guardian {
  background: linear-gradient(90deg, #FFD700, #DAA520); /* Gold */
}

.vip-badge.vip-companion {
  background: linear-gradient(90deg, #9B59B6, #8E44AD); /* Purple (Similar to main, maybe slightly distinct) -> Let's try Deep Blue/Purple */
  background: linear-gradient(90deg, #6C5CE7, #a29bfe); /* Soft Royal Blue/Purple */
}

.vip-badge.vip-listener {
  background: linear-gradient(90deg, #2ecc71, #27ae60); /* Green */
}

.vip-badge.vip-partner {
  background: linear-gradient(90deg, #E84393, #D63031); /* Pink/Red */
}

.vip-badge.vip-normal {
  background: linear-gradient(90deg, #B06AB3, #8E44AD); /* Standard VIP Color */
}

.vip-text {
  color: #FFFFFF;
  font-size: 24rpx;
  font-weight: 700;
}

.id-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  color: #9CA3AF;
  font-size: 28rpx;
  font-weight: 500;
}

/* Wallet Section Specifics */
.wallet-stack {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.inner-card {
  border-radius: 32rpx;
  padding: 40rpx;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* VIP Inner Card */
.vip-card {
  background: linear-gradient(180deg, #EEB8DD, #D489BE);
  box-shadow: 0 10rpx 15rpx -3rpx rgba(238, 184, 221, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 200rpx;
  overflow: hidden;
}

.vip-content {
  position: relative;
  z-index: 2;
}

.vip-header-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 4rpx;
  opacity: 0.95;
}

.vip-label {
  color: #FFFFFF;
  font-size: 28rpx;
  font-weight: 700;
}

.vip-main-text {
  color: #FFFFFF;
  font-size: 44rpx;
  font-weight: 900;
  letter-spacing: -1rpx;
}

.vip-action-btn {
  background: rgba(0, 0, 0, 0.15);
  color: #FFFFFF;
  padding: 16rpx 0;
  border-radius: 999rpx;
  font-size: 28rpx;
  font-weight: 800;
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
  position: relative;
  z-index: 2;
  width: 160rpx !important;
  margin-left: auto;
  margin-right: 0 !important;
}

.vip-card::after {
  content: '';
  position: absolute;
  bottom: -20rpx;
  right: -20rpx;
  width: 140rpx;
  height: 140rpx;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.15;
  transform: rotate(-15deg);
  pointer-events: none;
}

/* Earnings Inner Card */
.earnings-card {
  background: #FFFFFF;
  border: 2rpx solid #F3F4F6;
}

.earnings-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.earnings-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #111827;
}

.commission-btn {
  background: #FDF4F9;
  padding: 12rpx 24rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  gap: 4rpx;
  color: #B06AB3;
  font-size: 26rpx;
  font-weight: 700;
}

.earnings-body-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}

.earnings-info {
  display: flex;
  flex-direction: column;
}

.earnings-label {
  font-size: 24rpx;
  color: #9CA3AF;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.earnings-amount {
  font-size: 60rpx;
  font-weight: 900;
  color: #B06AB3;
  line-height: 1;
}

.withdraw-btn {
  background: linear-gradient(135deg, #B06AB3 0%, #9B4D9E 100%);
  color: #FFFFFF;
  height: 72rpx;
  border-radius: 999rpx;
  font-size: 28rpx;
  font-weight: 800;
  box-shadow: 0 16rpx 32rpx rgba(176, 106, 179, 0.25);
  width: 160rpx !important;
  margin-left: auto;
  margin-right: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stats Grid New Design */
.stats-grid {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.stats-grid .stat-card + .stat-card {
  margin-left: 32rpx;
}

.stat-card {
  flex: 1;
  min-width: 0;
  border-radius: 32rpx;
  padding: 42rpx 42rpx 36rpx;
  background: linear-gradient(180deg, #FDF4F9 0%, #FFF0F5 100%);
  border: 2rpx solid rgba(243, 209, 234, 0.5);
  position: relative;
  box-sizing: border-box;
}

.card-top {
  display: flex;
  align-items: center;
  gap: 3rpx;
  margin-bottom: 14rpx;
}

.icon-wrap-sm {
  width: 50rpx;
  height: 50rpx;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 4rpx -2rpx rgba(0, 0, 0, 0.1), 0 2rpx 6rpx 0 rgba(0, 0, 0, 0.1);
}

.card-name {
  font-size: 36rpx;
  font-weight: 900;
  color: #101828;
}

.card-bottom {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
}

.card-num {
  font-size: 50rpx;
  font-weight: 900;
  color: #B06AB3;
  line-height: 1;
}

.card-unit {
  font-size: 28rpx;
  font-weight: 700;
  color: #6A7282;
}

.card-icon-img {
  width: 40rpx;
  height: 40rpx;
}

/* Menu List */
.menu-card {
  padding: 24rpx 0;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 48rpx;
}

.menu-divider {
  height: 2rpx;
  background: #F9FAFB;
  margin: 0 40rpx;
}

.menu-left {
  display: flex;
  align-items: center;
  gap: 32rpx;
}

.menu-text {
  font-size: 32rpx;
  font-weight: 700;
  color: #374151;
}

.menu-right {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.tag-pink {
  background: #FDF4F9;
  color: #B06AB3;
  font-size: 24rpx;
  font-weight: 700;
  padding: 8rpx 24rpx;
  border-radius: 999rpx;
}

.safe-bottom-spacer {
  height: 200rpx;
}

/* 自定义底部导航栏 */
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 194rpx;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding-top: 24rpx;
  z-index: 999;
  border-top: 2rpx solid #F3F4F6;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  width: 150rpx;
  height: 120rpx;
}

.tabbar-icon {
  width: 68rpx;
  height: 68rpx;
}

.tabbar-text {
  font-family: Arial, sans-serif;
  font-size: 40rpx;
  font-weight: 700;
  color: #A58AA5;
  line-height: 1;
}

.tabbar-text.active {
  color: #B06AB3;
}

.message-icon-wrapper {
  position: relative;
  width: 68rpx;
  height: 68rpx;
}

.message-icon-wrapper .tabbar-icon {
  width: 68rpx;
  height: 68rpx;
}

.message-badge {
  position: absolute;
  top: -10rpx;
  right: -16rpx;
  min-width: 36rpx;
  height: 36rpx;
  padding: 0 8rpx;
  background: #FB2C36;
  border: 3rpx solid #fff;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.message-badge text {
  font-size: 22rpx;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}

/* ==================== 弹窗样式 ==================== */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8rpx);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.promoter-modal {
  width: 100%;
  max-width: 640rpx;
  background: #FFFFFF;
  border-radius: 48rpx;
  padding: 48rpx;
  position: relative;
  animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.modal-close-btn {
  position: absolute;
  top: 32rpx;
  right: 32rpx;
  padding: 16rpx;
  z-index: 10;
}

.modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 48rpx;
}

.modal-icon-bg {
  width: 128rpx;
  height: 128rpx;
  background: #FDF4F9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
}

.modal-title {
  font-size: 40rpx;
  font-weight: 900;
  color: #111827;
  margin-bottom: 12rpx;
}

.modal-subtitle {
  font-size: 28rpx;
  color: #6B7280;
  font-weight: 600;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  margin-bottom: 48rpx;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
  padding: 32rpx;
  background: #F9FAFB;
  border-radius: 32rpx;
  border: 2rpx solid #F3F4F6;
}

.benefit-num {
  width: 48rpx;
  height: 48rpx;
  background: #B06AB3;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 4rpx;
}

.benefit-info {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.benefit-title {
  font-size: 32rpx;
  font-weight: 800;
  color: #111827;
}

.benefit-desc {
  font-size: 28rpx;
  color: #4B5563;
  line-height: 1.4;
}

.apply-btn {
  width: 100%;
  background: #B06AB3;
  padding: 32rpx 0;
  border-radius: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  box-shadow: 0 16rpx 32rpx rgba(176, 106, 179, 0.25);
}

.apply-text {
  font-size: 34rpx;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 2rpx;
}

.apply-subtext {
  font-size: 24rpx;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}

/* Success Modal Specifics */
.success-modal .qr-container {
  display: flex;
  justify-content: center;
  margin-bottom: 32rpx;
}

.qr-placeholder {
  padding: 32rpx;
  border: 8rpx solid #B06AB3;
  border-radius: 40rpx;
  background: #FFFFFF;
}

.qr-grid {
  width: 300rpx;
  height: 300rpx;
  background: #F3F4F6;
  border-radius: 24rpx;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8rpx;
  padding: 24rpx;
  position: relative;
  overflow: hidden;
}

.qr-dot {
  width: 100%;
  height: 100%;
  border-radius: 4rpx;
}

.qr-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-logo app-icon {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.success-desc {
  text-align: center;
  color: #9CA3AF;
  font-size: 28rpx;
  line-height: 1.6;
  margin-bottom: 48rpx;
  display: flex;
  flex-direction: column;
}

.close-btn {
  width: 100%;
  background: #B06AB3;
  padding: 28rpx 0;
  border-radius: 24rpx;
  font-size: 32rpx;
  font-weight: 800;
  color: #FFFFFF;
  box-shadow: 0 8rpx 24rpx rgba(176, 106, 179, 0.2);
}

/* ==================== GF100 弹窗样式 ==================== */
.gf100-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(5px);
}

.gf100-content {
  position: relative;
  width: 62.5%;
  max-width: 480rpx;
  animation: gf100In 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes gf100In {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.gf100-image {
  width: 100%;
  display: block;
  border-radius: 20rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
}

.gf100-close {
  position: absolute;
  top: -80rpx;
  right: 0;
  width: 60rpx;
  height: 60rpx;
  border: 2rpx solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  color: #fff;
  font-size: 40rpx;
  line-height: 1;
}