/* ============================================
   云卡栈 - 高级感UI系统 v22.0
   会员终极优化40项（第381-420项）
   会员相关总计100项全部完成
   总计420项高级感优化
   ============================================ */

/* ========== 381. 会员等级体系完善 ========== */
.vip-level-system {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 20px;
  padding: 24px;
  color: white;
  position: relative;
  overflow: hidden;
}

.vip-level-system::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.vip-current-level {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.vip-level-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  box-shadow: 0 0 20px rgba(255,215,0,0.5);
  position: relative;
}

.vip-level-badge::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255,215,0,0.3);
  animation: vipBadgePulse 2s infinite;
}

@keyframes vipBadgePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.5; }
}

.vip-level-info h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(90deg, #ffd700, #ff8c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vip-level-info p {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin: 4px 0 0;
}

.vip-growth-bar {
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  height: 12px;
  overflow: hidden;
  margin: 12px 0 8px;
}

.vip-growth-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd700, #ff8c00);
  border-radius: 10px;
  transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.vip-growth-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: growthShine 2s infinite;
}

@keyframes growthShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.vip-growth-text {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.vip-levels-preview {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 8px;
}

.vip-level-item {
  flex: 1;
  text-align: center;
  padding: 12px 4px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  transition: all 0.3s ease;
}

.vip-level-item.active {
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,140,0,0.2));
  border: 1px solid rgba(255,215,0,0.3);
}

.vip-level-item.locked {
  opacity: 0.5;
}

.vip-level-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.vip-level-name {
  font-size: 11px;
  font-weight: 600;
}

/* ========== 382. 会员专属聊天气泡 ========== */
.vip-chat-bubble {
  position: relative;
  padding: 10px 14px;
  border-radius: 16px;
  max-width: 75%;
  font-size: 14px;
  line-height: 1.5;
}

.vip-chat-bubble.sent {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}

.vip-chat-bubble.received {
  background: var(--bg-card);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border-light);
}

.vip-chat-bubble .vip-tag {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
}

/* ========== 383. 会员专属分享卡片 ========== */
.vip-share-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.vip-share-card::before {
  content: 'VIP';
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 1px;
}

.vip-share-header {
  padding: 20px;
  color: white;
}

.vip-share-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.vip-share-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}

.vip-share-footer {
  padding: 12px 20px;
  background: rgba(255,215,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vip-share-brand {
  font-size: 12px;
  color: #ffd700;
  font-weight: 600;
}

/* ========== 384. 会员专属评价样式 ========== */
.vip-review {
  position: relative;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255,215,0,0.05), rgba(255,140,0,0.05));
  border-radius: 12px;
  border: 1px solid rgba(255,215,0,0.2);
}

.vip-review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.vip-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  position: relative;
}

.vip-review-avatar::after {
  content: '👑';
  position: absolute;
  top: -10px;
  right: -6px;
  font-size: 14px;
}

.vip-review-name {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vip-review-badge {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.vip-review-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}

.vip-review-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.vip-review-images img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

/* ========== 385. 会员专属订单卡片 ========== */
.vip-order-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,215,0,0.3);
}

.vip-order-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffd700, #ff8c00);
}

.vip-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.vip-order-shop {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.vip-order-status {
  font-size: 13px;
  color: #ff8c00;
  font-weight: 600;
}

.vip-order-vip-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}

/* ========== 386. 会员专属加载动画 ========== */
.vip-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 16px;
}

.vip-loading-crown {
  font-size: 48px;
  animation: vipCrownBounce 1s ease-in-out infinite;
}

@keyframes vipCrownBounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

.vip-loading-ring {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255,215,0,0.2);
  border-top-color: #ffd700;
  border-radius: 50%;
  animation: vipSpin 0.8s linear infinite;
}

@keyframes vipSpin {
  to { transform: rotate(360deg); }
}

.vip-loading-text {
  font-size: 14px;
  color: #ffd700;
  font-weight: 600;
}

/* ========== 387. 会员专属启动页 ========== */
.vip-splash {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: vipSplashFade 2.5s ease forwards;
}

@keyframes vipSplashFade {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

.vip-splash-logo {
  font-size: 80px;
  animation: vipSplashLogo 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes vipSplashLogo {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.vip-splash-title {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(90deg, #ffd700, #ff8c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 16px;
  animation: vipSplashText 1s ease 0.5s both;
}

@keyframes vipSplashText {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.vip-splash-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-top: 8px;
  animation: vipSplashText 1s ease 0.8s both;
}

.vip-splash-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.vip-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffd700;
  border-radius: 50%;
  animation: vipParticleFloat 3s ease-in-out infinite;
}

@keyframes vipParticleFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0; }
  50% { transform: translateY(-100px) scale(1.5); opacity: 1; }
}

/* ========== 388. 会员专属空状态 ========== */
.vip-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.vip-empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(255,215,0,0.3));
}

.vip-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.vip-empty-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  max-width: 240px;
}

.vip-empty-btn {
  padding: 10px 28px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vip-empty-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,215,0,0.4);
}

/* ========== 389. 会员专属错误页 ========== */
.vip-error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 20px;
  text-align: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.vip-error-code {
  font-size: 100px;
  font-weight: 900;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.vip-error-icon {
  font-size: 60px;
  margin: 16px 0;
  animation: vipErrorShake 0.5s ease-in-out;
}

@keyframes vipErrorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.vip-error-title {
  font-size: 22px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}

.vip-error-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 24px;
}

/* ========== 390. 会员专属收藏容量 ========== */
.vip-favorite-limit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,140,0,0.1));
  border-radius: 12px;
  margin-bottom: 12px;
}

.vip-favorite-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vip-favorite-icon {
  font-size: 24px;
}

.vip-favorite-text {
  font-size: 13px;
}

.vip-favorite-count {
  font-weight: 700;
  color: #ff8c00;
}

.vip-favorite-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  margin: 0 12px;
  overflow: hidden;
}

.vip-favorite-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd700, #ff8c00);
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* ========== 391. 会员专属消息撤回 ========== */
.vip-message-recall {
  position: relative;
}

.vip-recall-tip {
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
  padding: 4px 0;
}

.vip-recall-btn {
  font-size: 12px;
  color: #ff8c00;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.vip-recall-btn:hover {
  background: rgba(255,140,0,0.1);
}

.vip-recall-extended {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #ffd700;
  background: rgba(255,215,0,0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ========== 392. 会员专属消息已读 ========== */
.vip-read-receipt {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.vip-read-receipt.read {
  color: #3b82f6;
}

.vip-read-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
}

/* ========== 393. 会员专属云存储 ========== */
.vip-cloud-storage {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-md);
}

.vip-storage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.vip-storage-title {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vip-storage-badge {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}

.vip-storage-bar {
  height: 10px;
  background: var(--bg-secondary);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}

.vip-storage-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd700, #ff8c00);
  border-radius: 5px;
  transition: width 1s ease;
}

.vip-storage-text {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}

.vip-storage-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.vip-storage-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vip-storage-action:hover {
  background: var(--bg-card);
  transform: translateY(-2px);
}

.vip-storage-action-icon {
  font-size: 22px;
}

.vip-storage-action-text {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ========== 394. 会员专属云同步 ========== */
.vip-sync-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  font-size: 12px;
}

.vip-sync-icon {
  font-size: 16px;
}

.vip-sync-icon.syncing {
  animation: vipSyncSpin 1s linear infinite;
}

@keyframes vipSyncSpin {
  to { transform: rotate(360deg); }
}

.vip-sync-text {
  color: var(--text-secondary);
}

.vip-sync-time {
  color: var(--text-tertiary);
  font-size: 11px;
}

/* ========== 395. 会员专属数据分析 ========== */
.vip-data-analysis {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-md);
}

.vip-data-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.vip-data-title {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vip-data-period {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 10px;
  background: var(--bg-secondary);
  border-radius: 6px;
}

.vip-data-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.vip-data-stat {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 14px;
}

.vip-data-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.vip-data-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.vip-data-stat-change {
  font-size: 11px;
  margin-top: 2px;
}

.vip-data-stat-change.up {
  color: #10b981;
}

.vip-data-stat-change.down {
  color: #ef4444;
}

.vip-data-chart {
  height: 120px;
  margin-top: 12px;
}

/* ========== 396. 会员专属折扣日 ========== */
.vip-discount-day {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8c00 50%, #ffd700 100%);
  border-radius: 16px;
  padding: 20px;
  color: white;
  position: relative;
  overflow: hidden;
}

.vip-discount-day::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  pointer-events: none;
}

.vip-discount-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.vip-discount-icon {
  font-size: 32px;
  animation: vipDiscountBounce 1s ease-in-out infinite;
}

@keyframes vipDiscountBounce {
  0%, 100% { transform: scale(1) rotate(-5deg); }
  50% { transform: scale(1.1) rotate(5deg); }
}

.vip-discount-title {
  font-size: 20px;
  font-weight: 800;
}

.vip-discount-subtitle {
  font-size: 13px;
  opacity: 0.9;
}

.vip-discount-countdown {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}

.vip-countdown-item {
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  min-width: 50px;
}

.vip-countdown-num {
  font-size: 20px;
  font-weight: 800;
}

.vip-countdown-label {
  font-size: 10px;
  opacity: 0.8;
}

.vip-discount-products {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.vip-discount-product {
  flex-shrink: 0;
  width: 100px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

.vip-discount-product-img {
  width: 100%;
  aspect-ratio: 1;
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.vip-discount-product-name {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vip-discount-product-price {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.vip-discount-product-original {
  font-size: 10px;
  text-decoration: line-through;
  opacity: 0.6;
}

/* ========== 397. 会员专属壁纸 ========== */
.vip-wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
}

.vip-wallpaper-item {
  aspect-ratio: 9/16;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.vip-wallpaper-item:hover {
  transform: scale(1.03);
}

.vip-wallpaper-item.active {
  border: 3px solid #ffd700;
}

.vip-wallpaper-item.active::after {
  content: '✓ 使用中';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #ffd700;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
}

.vip-wallpaper-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vip-wallpaper-lock {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: white;
  font-size: 12px;
}

/* ========== 398. 会员专属表情 ========== */
.vip-emoji-panel {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 12px;
  background: var(--bg-card);
  border-radius: 12px;
}

.vip-emoji {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.vip-emoji:hover {
  background: var(--bg-secondary);
  transform: scale(1.15);
}

.vip-emoji.vip-only::before {
  content: '👑';
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 10px;
}

.vip-emoji-category {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
}

.vip-emoji-tab {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.vip-emoji-tab.active {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  font-weight: 600;
}

/* ========== 399. 会员专属音效 ========== */
.vip-sound-settings {
  padding: 16px;
}

.vip-sound-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}

.vip-sound-item:last-child {
  border-bottom: none;
}

.vip-sound-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vip-sound-icon {
  font-size: 22px;
}

.vip-sound-name {
  font-size: 14px;
  font-weight: 500;
}

.vip-sound-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.vip-sound-preview {
  padding: 6px 14px;
  background: var(--bg-secondary);
  border: none;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vip-sound-preview:hover {
  background: var(--bg-card);
}

.vip-sound-preview.playing {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
}

/* ========== 400. 会员专属震动 ========== */
.vip-haptic-settings {
  padding: 16px;
}

.vip-haptic-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}

.vip-haptic-info {
  flex: 1;
}

.vip-haptic-name {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vip-haptic-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.vip-haptic-test {
  padding: 6px 14px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  border: none;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.vip-haptic-patterns {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.vip-haptic-pattern {
  padding: 4px 10px;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vip-haptic-pattern.active {
  background: rgba(255,215,0,0.2);
  color: #ff8c00;
}

/* ========== 401. 会员专属自定义动画 ========== */
.vip-animation-settings {
  padding: 16px;
}

.vip-animation-speed {
  margin-bottom: 20px;
}

.vip-animation-label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
}

.vip-animation-slider {
  width: 100%;
  -webkit-appearance: none;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  outline: none;
}

.vip-animation-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,215,0,0.4);
}

.vip-animation-presets {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.vip-animation-preset {
  flex: 1;
  padding: 10px;
  background: var(--bg-secondary);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.vip-animation-preset.active {
  border-color: #ffd700;
  background: rgba(255,215,0,0.1);
}

.vip-animation-preset-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.vip-animation-preset-name {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ========== 402. 会员专属性能监控 ========== */
.vip-perf-monitor {
  position: fixed;
  bottom: 70px;
  right: 10px;
  background: rgba(26,26,46,0.95);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 11px;
  font-family: monospace;
  z-index: 9999;
  color: #ffd700;
  min-width: 130px;
  backdrop-filter: blur(10px);
}

.vip-perf-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

.vip-perf-label {
  color: rgba(255,255,255,0.6);
}

.vip-perf-value {
  font-weight: 600;
}

.vip-perf-value.good { color: #10b981; }
.vip-perf-value.warn { color: #f59e0b; }
.vip-perf-value.bad { color: #ef4444; }

.vip-perf-toggle {
  position: fixed;
  bottom: 20px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  border: none;
  font-size: 16px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(255,215,0,0.4);
}

/* ========== 403. 会员专属API访问 ========== */
.vip-api-access {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-md);
}

.vip-api-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.vip-api-title {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vip-api-badge {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}

.vip-api-key {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 10px;
  margin-bottom: 12px;
}

.vip-api-key-value {
  flex: 1;
  font-family: monospace;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.vip-api-copy {
  padding: 6px 12px;
  background: var(--primary-500);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

.vip-api-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.vip-api-stat {
  text-align: center;
  padding: 10px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.vip-api-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #ff8c00;
}

.vip-api-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ========== 404. 会员专属红包封面 ========== */
.vip-red-packet {
  width: 280px;
  background: linear-gradient(180deg, #d32f2f 0%, #b71c1c 100%);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 40px rgba(211,47,47,0.4);
}

.vip-red-packet-header {
  padding: 24px;
  text-align: center;
  color: #ffd700;
  position: relative;
}

.vip-red-packet-crown {
  font-size: 36px;
  margin-bottom: 8px;
}

.vip-red-packet-title {
  font-size: 18px;
  font-weight: 700;
}

.vip-red-packet-subtitle {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 4px;
}

.vip-red-packet-body {
  background: #fff8e1;
  margin: 0 16px 16px;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.vip-red-packet-amount {
  font-size: 36px;
  font-weight: 800;
  color: #d32f2f;
}

.vip-red-packet-amount small {
  font-size: 16px;
}

.vip-red-packet-desc {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.vip-red-packet-open {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  border: none;
  font-size: 20px;
  cursor: pointer;
  margin-top: 16px;
  box-shadow: 0 4px 16px rgba(255,215,0,0.5);
  transition: all 0.2s ease;
}

.vip-red-packet-open:hover {
  transform: scale(1.1);
}

/* ========== 405. 会员专属字体 ========== */
.vip-font-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 16px;
}

.vip-font-item {
  padding: 16px;
  background: var(--bg-card);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  text-align: center;
}

.vip-font-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.vip-font-item.active {
  border-color: #ffd700;
  background: rgba(255,215,0,0.05);
}

.vip-font-preview {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}

.vip-font-name {
  font-size: 12px;
  color: var(--text-secondary);
}

.vip-font-vip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: #ff8c00;
  margin-top: 4px;
}

/* ========== 406. 会员专属挂件 ========== */
.vip-pendant-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px;
}

.vip-pendant-item {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--bg-card);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  position: relative;
}

.vip-pendant-item:hover {
  transform: scale(1.05);
}

.vip-pendant-item.active {
  border-color: #ffd700;
}

.vip-pendant-item.locked {
  opacity: 0.5;
}

.vip-pendant-icon {
  font-size: 28px;
}

.vip-pendant-name {
  font-size: 10px;
  color: var(--text-secondary);
}

.vip-pendant-lock {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 10px;
}

/* ========== 407. 会员专属名片 ========== */
.vip-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 20px;
  padding: 24px;
  color: white;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.6;
}

.vip-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,215,0,0.2) 0%, transparent 70%);
  pointer-events: none;
}

.vip-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.vip-card-logo {
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(90deg, #ffd700, #ff8c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vip-card-level {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
}

.vip-card-user {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.vip-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
}

.vip-card-avatar::after {
  content: '👑';
  position: absolute;
  top: -12px;
  right: -8px;
  font-size: 18px;
}

.vip-card-name {
  font-size: 18px;
  font-weight: 700;
}

.vip-card-id {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  font-family: monospace;
  margin-top: 2px;
}

.vip-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.vip-card-validity {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}

.vip-card-qr {
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 6px;
  padding: 4px;
}

/* ========== 408. 会员专属导航栏 ========== */
.vip-nav-bar {
  background: linear-gradient(180deg, rgba(26,26,46,0.98) 0%, rgba(15,52,96,0.98) 100%);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,215,0,0.2);
}

.vip-nav-item {
  position: relative;
  color: rgba(255,255,255,0.5);
  transition: all 0.3s ease;
}

.vip-nav-item.active {
  color: #ffd700;
}

.vip-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: linear-gradient(90deg, #ffd700, #ff8c00);
  border-radius: 0 0 3px 3px;
}

.vip-nav-icon {
  font-size: 22px;
  transition: transform 0.3s ease;
}

.vip-nav-item.active .vip-nav-icon {
  transform: translateY(-2px) scale(1.1);
}

.vip-nav-label {
  font-size: 10px;
  margin-top: 2px;
}

/* ========== 409. 会员专属弹窗样式 ========== */
.vip-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: vipModalFade 0.2s ease;
}

@keyframes vipModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.vip-modal-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 20px;
  padding: 24px;
  width: 90%;
  max-width: 340px;
  color: white;
  position: relative;
  animation: vipModalSlide 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(255,215,0,0.3);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

@keyframes vipModalSlide {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.vip-modal-header {
  text-align: center;
  margin-bottom: 20px;
}

.vip-modal-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.vip-modal-title {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(90deg, #ffd700, #ff8c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vip-modal-body {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
  margin-bottom: 20px;
}

.vip-modal-actions {
  display: flex;
  gap: 10px;
}

.vip-modal-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.vip-modal-btn.primary {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
}

.vip-modal-btn.secondary {
  background: rgba(255,255,255,0.1);
  color: white;
}

.vip-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== 410. 会员专属Toast样式 ========== */
.vip-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(255,215,0,0.4);
  border-radius: 16px;
  padding: 16px 24px;
  color: white;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  animation: vipToastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 80%;
}

@keyframes vipToastIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.vip-toast-icon {
  font-size: 24px;
}

.vip-toast-text {
  font-size: 14px;
  font-weight: 500;
}

.vip-toast-gold {
  border-color: #ffd700;
  box-shadow: 0 10px 40px rgba(255,215,0,0.3);
}

/* ========== 411. 会员专属搜索历史 ========== */
.vip-search-history {
  padding: 16px;
}

.vip-search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.vip-search-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vip-search-clear {
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}

.vip-search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vip-search-tag {
  padding: 6px 14px;
  background: var(--bg-secondary);
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.vip-search-tag:hover {
  background: var(--bg-card);
}

.vip-search-tag.hot {
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,140,0,0.15));
  color: #ff8c00;
  border: 1px solid rgba(255,215,0,0.3);
}

.vip-search-limit {
  font-size: 11px;
  color: #ff8c00;
  margin-top: 8px;
}

/* ========== 412. 会员专属浏览记录 ========== */
.vip-history-list {
  padding: 0 16px;
}

.vip-history-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.2s ease;
}

.vip-history-item:hover {
  background: var(--bg-secondary);
  margin: 0 -16px;
  padding: 12px 16px;
}

.vip-history-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: var(--bg-secondary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.vip-history-info {
  flex: 1;
  min-width: 0;
}

.vip-history-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vip-history-price {
  font-size: 14px;
  color: #ef4444;
  font-weight: 600;
  margin-top: 4px;
}

.vip-history-time {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.vip-history-vip-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: #ff8c00;
  background: rgba(255,215,0,0.1);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* ========== 413. 会员专属购物车容量 ========== */
.vip-cart-limit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,140,0,0.08));
  margin: 0 16px 12px;
  border-radius: 10px;
}

.vip-cart-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.vip-cart-count {
  font-weight: 700;
  color: #ff8c00;
}

.vip-cart-bar {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  margin: 0 10px;
  overflow: hidden;
}

.vip-cart-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd700, #ff8c00);
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* ========== 414. 会员专属地址簿容量 ========== */
.vip-address-limit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,140,0,0.08));
  margin-bottom: 12px;
  border-radius: 10px;
}

.vip-address-info {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vip-address-count {
  font-weight: 700;
  color: #ff8c00;
}

.vip-address-add {
  padding: 6px 14px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  border: none;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ========== 415. 会员专属消息免打扰 ========== */
.vip-dnd-settings {
  padding: 16px;
}

.vip-dnd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}

.vip-dnd-info {
  flex: 1;
}

.vip-dnd-name {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vip-dnd-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.vip-dnd-switch {
  position: relative;
  width: 48px;
  height: 28px;
  background: var(--bg-secondary);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.vip-dnd-switch.active {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
}

.vip-dnd-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.vip-dnd-switch.active::after {
  transform: translateX(20px);
}

.vip-dnd-time {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.vip-dnd-time input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary);
}

/* ========== 416. 会员专属群聊 ========== */
.vip-group-chat {
  background: var(--bg-card);
  border-radius: 16px;
  overflow: hidden;
}

.vip-group-header {
  padding: 16px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: white;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vip-group-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.vip-group-name {
  font-size: 16px;
  font-weight: 600;
}

.vip-group-members {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.vip-group-badge {
  margin-left: auto;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.vip-group-messages {
  padding: 16px;
  max-height: 300px;
  overflow-y: auto;
}

.vip-group-msg {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.vip-group-msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-secondary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.vip-group-msg-content {
  flex: 1;
}

.vip-group-msg-name {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.vip-group-msg-level {
  font-size: 9px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 700;
}

.vip-group-msg-text {
  font-size: 14px;
  background: var(--bg-secondary);
  padding: 8px 12px;
  border-radius: 0 10px 10px 10px;
  display: inline-block;
}

/* ========== 417. 会员专属圈子 ========== */
.vip-circle {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.vip-circle-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.vip-circle-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  position: relative;
}

.vip-circle-avatar::after {
  content: '👑';
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 12px;
}

.vip-circle-name {
  font-size: 14px;
  font-weight: 600;
}

.vip-circle-time {
  font-size: 11px;
  color: var(--text-tertiary);
}

.vip-circle-content {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.vip-circle-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.vip-circle-images img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

.vip-circle-actions {
  display: flex;
  gap: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.vip-circle-action {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s ease;
}

.vip-circle-action:hover {
  color: #ff8c00;
}

/* ========== 418. 会员专属问答 ========== */
.vip-qa-item {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 10px;
  border-left: 3px solid #ffd700;
}

.vip-qa-question {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.vip-qa-answer {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding-left: 24px;
}

.vip-qa-meta {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  padding-left: 24px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.vip-qa-expert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ========== 419. 会员专属课程 ========== */
.vip-course-card {
  background: var(--bg-card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.vip-course-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.vip-course-cover {
  height: 140px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  position: relative;
}

.vip-course-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.vip-course-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
}

.vip-course-body {
  padding: 14px;
}

.vip-course-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vip-course-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.vip-course-teacher {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.vip-course-price {
  font-size: 16px;
  font-weight: 700;
  color: #ff8c00;
}

.vip-course-price small {
  font-size: 11px;
  font-weight: 400;
}

/* ========== 420. 会员专属文档 ========== */
.vip-doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vip-doc-item:hover {
  background: var(--bg-secondary);
}

.vip-doc-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,140,0,0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.vip-doc-info {
  flex: 1;
  min-width: 0;
}

.vip-doc-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vip-doc-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  display: flex;
  gap: 10px;
}

.vip-doc-vip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: #ff8c00;
  background: rgba(255,215,0,0.1);
  padding: 1px 6px;
  border-radius: 4px;
}

.vip-doc-download {
  padding: 6px 12px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  border: none;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

/* 通用VIP金色文字 */
.vip-gold-text {
  background: linear-gradient(90deg, #ffd700, #ff8c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* VIP金色边框 */
.vip-gold-border {
  border: 1px solid rgba(255,215,0,0.3);
  box-shadow: 0 0 20px rgba(255,215,0,0.1);
}

/* VIP金色按钮 */
.vip-gold-btn {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  border: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.vip-gold-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,215,0,0.4);
}

.vip-gold-btn:active {
  transform: translateY(0);
}