/* tab3.page.scss */
:host {
    --primary-green: #2ecc71;
    --secondary-green: #27ae60;
    --light-green: #d4efdf;
    --text-dark: #2c3e50;
  }
  
  .header-bar {
    --background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
    --color: white;
  
    .app-title {
      font-weight: 500;
      letter-spacing: 1px;
    }
  
    .header-icon {
      font-size: 1.8rem;
      margin-right: 12px;
    }
  }
  
  .profile-content {
    background: linear-gradient(var(--light-green) 30%, #ffffff 70%);
  }
  
  .user-section {
    padding: 2rem 1rem;
    text-align: center;
  
    .avatar-container {
      position: relative;
      display: inline-block;
  
      .glow-avatar {
        width: 100px;
        height: 100px;
        border: 3px solid white;
        box-shadow: 0 0 20px rgba(46, 204, 113, 0.3);
        transition: transform 0.3s ease;
  
        &:active {
          transform: scale(0.95);
        }
      }
  
      .id-badge {
        position: absolute;
        bottom: -10px;
        right: -10px;
        border-radius: 15px;
        font-size: 0.8rem;
      }
    }
  
    .user-info {
      margin-top: 1.5rem;
  
      .username {
        color: var(--text-dark);
        margin: 0;
        font-size: 1.4rem;
        font-weight: 600;
      }
  
      .user-id {
        color: #7f8c8d;
        margin: 0.3rem 0;
        font-size: 0.9rem;
      }
    }
  }
  
  .stats-grid {
    padding: 0 1rem;
  
    .stat-card {
      background: white;
      border-radius: 15px;
      //margin: 0.5rem;
      padding: 1.2rem;
      box-shadow: 0 4px 12px rgba(46, 204, 113, 0.1);
      transition: all 0.3s ease;
  
      &:active {
        transform: scale(0.98);
      }
  
      &.history {
        border-left: 4px solid var(--primary-green);
        // 添加 flex 相关属性为初始值
        flex: initial;
        flex-grow: initial;
        flex-shrink: initial;
        flex-basis: initial;
      }
  
      &.favorite {
        border-left: 4px solid #e74c3c;
        // 添加 flex 相关属性为初始值
        flex: initial;
        flex-grow: initial;
        flex-shrink: initial;
        flex-basis: initial;
      }
    }
  
    .stat-icon {
      font-size: 2.2rem;
      color: var(--primary-green);
      margin-bottom: 0.8rem;
    }
  
    .stat-content {
      h3 {
        color: var(--text-dark);
        margin: 0;
        font-size: 1.6rem;
      }
  
      p {
        color: #7f8c8d;
        margin: 0.3rem 0 0;
        font-size: 0.9rem;
      }
    }
  }
  
  .menu-list {
    background: transparent;
    margin: 1.5rem 0;
  
    .menu-item {
      --background-hover: #e8f8f1;
      --border-radius: 12px;
      margin: 0.5rem 1rem;
      transition: transform 0.3s ease;
  
      ion-icon {
        transition: transform 0.3s ease;
      }
  
      &:active {
        transform: scale(0.98);
      }
  
      ion-label {
        color: var(--text-dark);
        font-weight: 500;
      }
  
      ion-note {
        font-size: 0.85rem;
      }
    }
  }
  
  .version-section {
    text-align: center;
    padding: 2rem 1rem;
  
    ion-text {
      display: block;
      margin: 0.3rem 0;
      font-size: 0.85rem;
    }
  }
  
  /* 动画效果 */
  @keyframes avatarGlow {
    0% { box-shadow: 0 0 10px rgba(46, 204, 113, 0.3); }
    50% { box-shadow: 0 0 20px rgba(46, 204, 113, 0.5); }
    100% { box-shadow: 0 0 10px rgba(46, 204, 113, 0.3); }
  }
  
  .glow-avatar {
    animation: avatarGlow 2s ease-in-out infinite;
  }