﻿body { background: var(--bg); }
    .profile-header {
      background: var(--primary-gradient);
      padding: 24px 16px 28px;
      color: white;
      position: relative;
    }
    .profile-header::after {
      content: '';
      position: absolute;
      bottom: -20px;
      left: 0;
      right: 0;
      height: 20px;
      background: var(--bg);
      border-radius: 20px 20px 0 0;
    }
    .profile-top {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
    }
    .profile-avatar {
      width: 64px;
      height: 64px;
      border-radius: var(--radius-full);
      background: rgba(255,255,255,0.25);
      border: 3px solid rgba(255,255,255,0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 700;
      color: white;
    }
    .profile-info { flex: 1; }
    .profile-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
    .profile-id { font-size: 12px; opacity: 0.8; }
    .profile-badge-row { display: flex; gap: 6px; margin-top: 6px; }
    .profile-badge {
      padding: 2px 8px;
      border-radius: var(--radius-full);
      font-size: 11px;
      font-weight: 600;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(8px);
    }
    .profile-badge.verified { background: rgba(38,222,129,0.3); }
    .profile-badge.credit-gold { background: rgba(255,184,0,0.3); color: #FFD700; }
    .profile-badge.credit-diamond { background: rgba(185,242,255,0.3); color: #B9F2FF; }
    .profile-badge.credit-silver { background: rgba(192,192,192,0.3); color: #E8E8E8; }
    .profile-badge.credit-bronze { background: rgba(205,127,50,0.3); color: #CD7F32; }
    .profile-badge.credit-warning { background: rgba(255,71,87,0.3); color: #FF6B7A; }
    .profile-settings {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-full);
      background: rgba(255,255,255,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .profile-settings svg { width: 20px; height: 20px; color: white; }
    .profile-stats {
      display: flex;
      background: rgba(255,255,255,0.15);
      border-radius: var(--radius-md);
      padding: 14px 0;
      backdrop-filter: blur(8px);
    }
    .profile-stat {
      flex: 1;
      text-align: center;
      position: relative;
    }
    .profile-stat + .profile-stat::before {
      content: '';
      position: absolute;
      left: 0;
      top: 4px;
      bottom: 4px;
      width: 1px;
      background: rgba(255,255,255,0.2);
    }
    .profile-stat-value { font-size: 22px; font-weight: 700; }
    .profile-stat-label { font-size: 12px; opacity: 0.8; margin-top: 2px; }
    .points-card {
      margin: -8px 16px 12px;
      background: linear-gradient(135deg, #1A1D26 0%, #2D3140 100%);
      border-radius: var(--radius-lg);
      padding: 18px 20px;
      color: white;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    .points-card::before {
      content: '';
      position: absolute;
      top: -30px;
      right: -30px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: rgba(255,184,0,0.15);
    }
    .points-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .points-card-label { font-size: 13px; opacity: 0.7; }
    .points-card-detail {
      font-size: 12px;
      color: var(--accent-gold);
      display: flex;
      align-items: center;
      gap: 3px;
    }
    .points-card-detail svg { width: 14px; height: 14px; }
    .points-card-value { font-size: 36px; font-weight: 700; letter-spacing: -1px; }
    .points-card-value .points-unit { font-size: 14px; font-weight: 400; opacity: 0.7; margin-left: 4px; }
    .points-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.1);
    }
    .points-card-hint { font-size: 12px; opacity: 0.5; }
    .points-card-btn {
      padding: 6px 16px;
      border-radius: var(--radius-full);
      background: var(--accent-gold);
      color: #1A1D26;
      font-size: 12px;
      font-weight: 600;
    }
    .section { padding: 0 16px; margin-bottom: 16px; }
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0 10px;
    }
    .section-title { font-size: 16px; font-weight: 600; }
    .section-more { font-size: 13px; color: var(--text-tertiary); }
    .skill-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .skill-tag {
      padding: 8px 16px;
      border-radius: var(--radius-full);
      font-size: 13px;
      font-weight: 500;
    }
    .skill-tag.skill { background: rgba(255,107,53,0.08); color: var(--primary); }
    .skill-tag.hobby { background: rgba(46,196,182,0.08); color: var(--secondary); }
    .skill-tag .tag-icon { margin-right: 4px; }
    .menu-list { background: var(--bg-white); border-radius: var(--radius-md); overflow: hidden; }
    .menu-item {
      display: flex;
      align-items: center;
      padding: 15px 16px;
      gap: 12px;
      transition: background 0.2s;
    }
    .menu-item:active { background: var(--border-light); }
    .menu-item + .menu-item { border-top: 1px solid var(--border-light); }
    .menu-icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
    .menu-icon.orange { background: rgba(255,107,53,0.1); }
    .menu-icon.green { background: rgba(38,222,129,0.1); }
    .menu-icon.blue { background: rgba(75,123,236,0.1); }
    .menu-icon.gold { background: rgba(255,184,0,0.1); }
    .menu-icon.red { background: rgba(255,71,87,0.1); }
    .menu-icon.teal { background: rgba(46,196,182,0.1); }
    .menu-icon.purple { background: rgba(114,46,209,0.1); }
    .menu-text { flex: 1; font-size: 15px; font-weight: 500; }
    .menu-extra { font-size: 13px; color: var(--text-tertiary); }
    .menu-arrow { color: var(--text-tertiary); }
    .menu-arrow svg { width: 16px; height: 16px; }
    .deposit-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: var(--bg-white);
      border-radius: var(--radius-md);
      margin-bottom: 12px;
    }
    .deposit-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      background: rgba(255,184,0,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    .deposit-info { flex: 1; }
    .deposit-label { font-size: 14px; font-weight: 500; }
    .deposit-desc { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
    .deposit-amount { font-size: 18px; font-weight: 700; color: var(--accent-gold); }