// 全局动画
@keyframes pulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.limo-mobile {
  min-height: 100vh;
  background: #ffffff;
  position: relative;

  // Header with subtle gradient
  .header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 1%, rgba(248, 250, 252, 0.8) 100%);
    padding: 88rpx 32rpx 32rpx 32rpx; /* 增加顶部padding给状态栏留空间 */
    position: sticky;
    top: 0;
    z-index: 10;
    /* backdrop-filter 在小程序中不支持，使用多层背景模拟 */
    box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.02);
    border-bottom: 2rpx solid rgba(229, 231, 235, 0.3);
    
    // 使用伪元素模拟背景模糊
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 100%, rgba(248, 250, 252, 0.2) 0%);
      z-index: -1;
    }

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      margin: 50rpx 0 80rpx 0;

      .logo {
        height: 100rpx;
        width: 200rpx;
        object-fit: contain;
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      .energy-button {
        background: linear-gradient(135deg, #05C7C7 0%, #04B5B5 100%);
        width: 80rpx;
        height: 80rpx;
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8rpx 24rpx rgba(5, 199, 199, 0.2);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &:active {
          transform: scale(0.95);
        }

        .energy-icon {
          color: #ffffff;
          font-size: 32rpx;
        }
      }
    }

    // Navigation Tabs with enhanced styling
    .nav-tabs {
      display: flex;
      margin-top: 48rpx;
      gap: 64rpx;

      .tab-item {
        position: relative;

        .tab-text {
          font-size: 32rpx;
          font-weight: 600;
          color: #9CA3AF;
          transition: color 0.3s;
        }

        .tab-underline {
          position: absolute;
          bottom: -24rpx;
          left: 0;
          right: 0;
          height: 4rpx;
          background: linear-gradient(90deg, #05C7C7 0%, #04B5B5 100%);
          border-radius: 2rpx;
        }

        &.active .tab-text {
          color: #05C7C7;
        }
      }
    }
  }

  // Sports Categories with glassmorphism effect
  .sports-section {
    background: rgba(255, 255, 255, 0.8);
    /* backdrop-filter 在小程序中不支持，使用多层背景模拟 */
    position: relative;
    padding: 30rpx 32rpx;
    margin-bottom: 32rpx;
    border-bottom: 2rpx solid rgba(229, 231, 235, 0.3);
    
    // 使用伪元素模拟背景模糊
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.2);
      z-index: -1;
    }

    .sports-container {
      display: flex;
      gap: 40rpx;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;

      /* 小程序不支持 webkit-scrollbar，已移除 */

      .sport-item {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rpx;

        &.all-category {
          .category-content {
            background: #f2f2f2;
            color: #6B7280;
            border-radius: 32rpx;
            font-size: 24rpx;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 100rpx;
            height: 100rpx;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            &:active {
              transform: scale(0.95);
            }

            .category-text {
              line-height: 1.2;
            }
          }

          &.active {
            .category-content {
              background: linear-gradient(135deg, #05C7C7 0%, #04B5B5 100%);
              color: #ffffff;
              box-shadow: 0 8rpx 24rpx rgba(5, 199, 199, 0.2);
            }
          }
        }

        .sport-icon-container {
          width: 100rpx;
          height: 100rpx;
          border-radius: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          background: #f2f2f2;

          &:active {
            transform: scale(0.95);
          }

          .sport-emoji {
            font-size: 48rpx;
            line-height: 1;
          }
        }

        &.active {
          .sport-icon-container {
            box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
            
            &.basketball {
              background: linear-gradient(135deg, #FEF0E5 0%, #FEE5E5 100%);
            }

            &.football {
              background: linear-gradient(135deg, #E8F5E8 0%, #E0F2E0 100%);
            }

            &.tennis {
              background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
            }
          }
        }

        .sport-label {
          font-size: 24rpx;
          color: #6B7280;
          font-weight: 500;
        }
      }
    }
  }

  // Location with enhanced styling
  .location-bar {
    padding: 0 32rpx 48rpx;

    .location-content {
      display: flex;
      align-items: center;
      background: rgba(249, 250, 251, 0.8);
      border-radius: 24rpx;
      padding: 24rpx;
      font-size: 28rpx;

      .location-pin {
        color: #05C7C7;
        margin-right: 16rpx;
        font-size: 32rpx;
      }

      .location-text {
        flex: 1;
        color: #6B7280;
        font-size: 24rpx;
        
        &.location-loading {
          color: #9CA3AF;
          opacity: 0.8;
          animation: pulse 1.5s infinite;
        }
      }

      .location-switch {
        color: #05C7C7;
        font-size: 24rpx;
        font-weight: 500;
      }
    }
  }

  // 位置状态提示页面
  .location-status-section {
    padding: 120rpx 32rpx;
    min-height: 600rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .status-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 32rpx;

      .loading-spinner {
        width: 80rpx;
        height: 80rpx;
        border: 6rpx solid #f3f3f3;
        border-top: 6rpx solid #05C7C7;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      .status-icon {
        font-size: 80rpx;
        opacity: 0.5;
      }

      .status-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #374151;
      }

      .status-subtitle {
        font-size: 24rpx;
        color: #6B7280;
        line-height: 1.5;
        max-width: 400rpx;
      }

      .retry-button {
        background: linear-gradient(135deg, #05C7C7 0%, #04B5B5 100%);
        color: #ffffff;
        padding: 24rpx 48rpx;
        border-radius: 32rpx;
        margin-top: 24rpx;
        box-shadow: 0 8rpx 24rpx rgba(5, 199, 199, 0.2);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &:active {
          transform: scale(0.95);
        }

        .retry-text {
          font-size: 28rpx;
          font-weight: 600;
        }
      }
    }
  }

  // Venue Cards with premium styling
  .venue-section {
    padding: 0 32rpx;
    position: relative;

    // Timeline
    .timeline-container {
      position: absolute;
      left: 60rpx;
      top: 0;
      bottom: 0;
      width: 2rpx;

      .timeline-line {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2rpx;
        background: linear-gradient(180deg, rgba(5, 199, 199, 0.3) 0%, #E5E7EB 30%, #E5E7EB 80%, rgba(229, 231, 235, 0) 100%);
      }
    }

    .venue-card {
      position: relative;
      margin-bottom: 80rpx;

      .timeline-dot {
        position: absolute;
        left: 18rpx;
        top: 10rpx;
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        border: 4rpx solid #ffffff;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
        background: linear-gradient(135deg, #D1D5DB 0%, #9CA3AF 100%);
        z-index: 2;

        &.active {
          background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
          box-shadow: 0 0 0 4rpx #FBBF24, 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
        }
      }

      .venue-meta {
        margin-left: 76rpx;
        margin-bottom: 24rpx;
        display: flex;
        align-items: center;
        gap: 16rpx;

        .distance {
          font-size: 24rpx;
          color: #9CA3AF;
          font-weight: 500;
        }

        .separator {
          width: 8rpx;
          height: 8rpx;
          background: #D1D5DB;
          border-radius: 50%;
        }

        .update-time {
          display: flex;
          align-items: center;
          gap: 8rpx;

          .clock-icon {
            font-size: 24rpx;
          }

          .time-text {
            font-size: 24rpx;
            color: #9CA3AF;
          }
        }
      }

      .venue-content {
        margin-left: 76rpx;
        background: linear-gradient(135deg, #ffffff 0%, rgba(248, 250, 252, 0.5) 100%);
        border-radius: 48rpx;
        overflow: hidden;
        box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.08);
        border: 2rpx solid rgba(229, 231, 235, 0.5);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;

        // 模拟 backdrop-blur 效果
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(255, 255, 255, 0.4);
          border-radius: 48rpx;
          z-index: -1;
        }

        &:active {
          transform: translateY(-4rpx);
          box-shadow: 0 24rpx 64rpx rgba(0, 0, 0, 0.12);
        }

        .venue-image {
          position: relative;
          width: 100%;
          height: 384rpx;
          overflow: hidden;

          .image-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #374151 0%, #1F2937 100%);

            &.ronin-bg {
              background: linear-gradient(135deg, blue 0%, #DC2626 100%);
            }

            &.panda-bg {
              background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
            }

            .placeholder-text {
              color: #ffffff;
              font-size: 36rpx;
              font-weight: 600;
              text-align: center;
            }
          }

          .hot-badge {
            position: absolute;
            top: 24rpx;
            left: 24rpx;
            background: rgba(0, 0, 0, 0.2);
            /* backdrop-filter 在小程序中不支持，已移除 */
            color: #ffffff;
            padding: 8rpx 16rpx;
            border-radius: 16rpx;
            font-size: 24rpx;
            font-weight: 500;

            .hot-text {
              font-size: 24rpx;
            }
          }

          .live-badge {
            position: absolute;
            top: 24rpx;
            left: 24rpx;
            background: rgba(239, 68, 68, 0.9);
            /* backdrop-filter 在小程序中不支持，已移除 */
            color: #ffffff;
            padding: 8rpx 16rpx;
            border-radius: 16rpx;
            font-size: 24rpx;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8rpx;

            .live-dot {
              width: 12rpx;
              height: 12rpx;
              background: #ffffff;
              border-radius: 50%;
              animation: pulse 1.5s infinite;
            }

            .live-text {
              font-size: 24rpx;
            }
          }

          .status-dot {
            position: absolute;
            top: 24rpx;
            right: 24rpx;
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            background: #10B981;

            &.online {
              animation: pulse 2s infinite;
            }
          }

          .play-overlay {
            display: none;

            .play-button {
              width: 128rpx;
              height: 128rpx;
              background: rgba(255, 255, 255, 0.95);
              /* backdrop-filter 在小程序中不支持，已移除 */
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
              position: relative;

              // 模拟 backdrop-blur 效果
              &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(255, 255, 255, 0.5);
                border-radius: 50%;
                z-index: -1;
              }

              &:active {
                transform: scale(1.1);
              }

              .play-icon {
                color: #374151;
                font-size: 48rpx;
                margin-left: 4rpx;
              }
            }
          }
        }

        .venue-info {
          padding: 40rpx;

          .venue-header {
            display: flex;
            align-items: center;
            margin-bottom: 0;

            .venue-logo {
              width: 96rpx;
              height: 96rpx;
              border-radius: 24rpx;
              margin-right: 24rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);

              &.ronin-logo {
                background: transparent;
              }

              &.panda-logo {
                background: linear-gradient(135deg, #374151 0%, #1F2937 100%);
              }

              .logo-text {
                color: #ffffff;
                font-size: 36rpx;
                font-weight: bold;
              }

              .venue-logo-image {
                width: 100%;
                height: 100%;
                border-radius: 24rpx;
                object-fit: cover;
              }
            }

            .venue-details {
              flex: 1;

              .venue-name {
                display: block;
                font-size: 32rpx;
                font-weight: bold;
                color: #111827;
                margin-bottom: 8rpx;
                line-height: 1.2;
              }

              .venue-address {
                display: block;
                font-size: 24rpx;
                color: #6B7280;
                line-height: 1.4;
              }
            }
          }

          .venue-action {
            display: flex;
            justify-content: flex-end;

            .zone-button {
              background: linear-gradient(135deg, #FB923C 0%, #F97316 100%);
              color: #ffffff;
              padding: 16rpx 32rpx;
              border-radius: 24rpx;
              font-size: 24rpx;
              font-weight: 600;
              box-shadow: 0 8rpx 24rpx rgba(251, 146, 60, 0.3);
              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
              position: relative;
              z-index: 10;
              cursor: pointer;

              &:active {
                transform: scale(0.95);
                background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
              }

              .button-text {
                color: #ffffff;
                pointer-events: none;
              }
            }
          }
        }
      }
    }
  }

  // Bottom Spacing for Fixed Navigation
  .bottom-spacing {
    height: 192rpx;
  }

  // Bottom Navigation with glassmorphism
  .bottom-nav {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 1) 100%);
    /* backdrop-filter 在小程序中不支持，使用多层背景模拟 */
    box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.08);
    border-top: 2rpx solid rgba(229, 231, 235, 0.3);
    padding: 24rpx 32rpx;
    display: flex;
    justify-content: space-around;
    
    // 使用伪元素模拟背景模糊
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.8);
      z-index: -1;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16rpx;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      &:active {
        transform: scale(0.95);
      }

      .nav-icon-container {
        width: 64rpx;
        height: 64rpx;
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F3F4F6;
        margin-bottom: 8rpx;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &.home-active {
          background: linear-gradient(135deg, #05C7C7 0%, #04B5B5 100%);
          box-shadow: 0 8rpx 24rpx rgba(5, 199, 199, 0.3);

          .nav-icon {
            color: #ffffff;
          }

          .nav-icon-svg {
            filter: brightness(0) saturate(100%) invert(100%);
          }
        }

        &.profile-active {
          background: linear-gradient(135deg, #05C7C7 0%, #04B5B5 100%);
          box-shadow: 0 8rpx 24rpx rgba(5, 199, 199, 0.3);

          .nav-icon-svg {
            filter: brightness(0) saturate(100%) invert(100%);
          }
        }

        .nav-icon {
          font-size: 32rpx;
          color: #9CA3AF;
        }

        .nav-icon-svg {
          width: 32rpx;
          height: 32rpx;
          filter: brightness(0) saturate(100%) invert(69%) sepia(5%) saturate(447%) hue-rotate(175deg) brightness(94%) contrast(88%);
        }
      }

      .nav-label {
        font-size: 24rpx;
        color: #9CA3AF;

        &.active {
          color: #05C7C7;
          font-weight: 600;
        }
      }
    }
  }

  // Bottom Watermark with fade effect
  .watermark {
    position: fixed;
    bottom: 160rpx;
    left: 50%;
    transform: translateX(-50%);

    .watermark-text {
      color: #D1D5DB;
      font-size: 24rpx;
      font-weight: 300;
      letter-spacing: 2rpx;
      opacity: 0.6;
      font-style: italic;
    }
  }
}

// Profile Content Styles
.profile-content {
  min-height: 100vh;
  background: #F9FAFB;

  // Profile Section
  .profile-section {
    padding: 188rpx 0 24rpx 0x;

    .profile-card {
      background: #ffffff;
      padding: 120rpx 32rpx 32rpx 32rpx;
      margin-bottom: 30rpx;

      .profile-header-info {
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        margin-bottom: 52rpx;

        .avatar-container {
          position: relative;
          margin-right: 32rpx;

                      .avatar {
              width: 120rpx;
              height: 120rpx;
              background: linear-gradient(135deg, #05C7C7 0%, #04B5B5 100%);
              border-radius: 32rpx;
              display: flex;
              align-items: center;
              justify-content: center;

              .avatar-initial {
                font-size: 48rpx;
                color: #ffffff;
                font-weight: 600;
              }
            }

          .online-status {
            position: absolute;
            bottom: -8rpx;
            right: -8rpx;
            width: 48rpx;
            height: 48rpx;
            background: #10B981;
            border-radius: 50%;
            border: 4rpx solid #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;

            &::after {
              content: '';
              width: 16rpx;
              height: 16rpx;
              background: #ffffff;
              border-radius: 50%;
            }
          }
        }

        .profile-info {
          flex: 1;

          .profile-name-row {
            display: flex;
            align-items: center;
            margin-bottom: 0;
            line-height: 1.2;

            .profile-name {
              font-size: 36rpx;
              font-weight: bold;
              color: #111827;
              margin-right: 12rpx;
            }

            .edit-icon {
              margin-right: 12rpx;
              padding: 4rpx;
              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

              &:active {
                opacity: 0.6;
                transform: scale(0.9);
              }

              .edit-text {
                font-size: 28rpx;
                color: #9CA3AF;
              }
            }

            .vip-badge {
              background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
              padding: 4rpx 12rpx;
              border-radius: 12rpx;

              .vip-text {
                font-size: 18rpx;
                color: #ffffff;
                font-weight: 600;
              }
            }
          }

          .profile-id {
            font-size: 22rpx;
            color: #6B7280;
            margin-bottom: 12rpx;
          }

          .profile-stats {
            display: flex;
            align-items: center;

            .stat-divider {
              width: 6rpx;
              height: 6rpx;
              background: #D1D5DB;
              border-radius: 50%;
              margin: 0 20rpx;
            }

            .stat-text {
              font-size: 20rpx;
              color: #6B7280;
            }
          }
        }


      }

      .member-card-button {
        width: 100%;
        height: 200rpx;
        position: relative;
        border-radius: 24rpx;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 2rpx solid #F59E0B;

        &:active {
          transform: scale(0.98);
        }

        .card-background {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #D97706 100%);
          
          .card-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
              radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
          }

          .card-shine {
            position: absolute;
            top: -50%;
            left: -50%;
            right: -50%;
            bottom: -50%;
            background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%);
            animation: cardShine 5s infinite;
          }
        }

        .card-content {
          position: relative;
          z-index: 2;
          height: 100%;
          padding: 24rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .card-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;

            .card-header {
              display: flex;
              align-items: baseline;
              gap: 12rpx;

              .card-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #ffffff;
                text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
              }

              .card-subtitle {
                font-size: 20rpx;
                color: rgba(255, 255, 255, 0.9);
                font-weight: 500;
              }
            }

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

              .member-level {
                font-size: 24rpx;
                color: #ffffff;
                font-weight: 600;
                text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
              }

              .member-expiry {
                font-size: 20rpx;
                color: rgba(255, 255, 255, 0.8);
                font-weight: 500;
              }
            }
          }

          .card-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48rpx;
            height: 48rpx;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            margin-left: 16rpx;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            .arrow-icon {
              font-size: 28rpx;
              color: #ffffff;
              font-weight: 300;
              text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
            }
          }
        }
      }
    }
  }

  // Stats Section
  .stats-section {
    padding: 0 24rpx 24rpx 24rpx;

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24rpx;

      .stat-card {
        background: #ffffff;
        border-radius: 24rpx;
        padding: 24rpx;
        text-align: center;
        border: 2rpx solid #F3F4F6;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;

        &:active {
          background: #F9FAFB;
          transform: scale(0.98);
          border-color: #05C7C7;
        }

        .stat-number {
          font-size: 48rpx;
          font-weight: bold;
          color: #111827;
          display: block;
        }

        .stat-label {
          font-size: 24rpx;
          color: #6B7280;
          margin-top: -5rpx;
          display: block;
        }
      }
    }
  }

  // Menu Section
  .menu-section {
    padding: 0 24rpx 24rpx 24rpx;

    .menu-card {
      background: #ffffff;
      border-radius: 32rpx;
      border: 2rpx solid #F3F4F6;
      overflow: hidden;

              .menu-item {
          display: flex;
          align-items: center;
          padding: 32rpx;
          border-bottom: 2rpx solid #F3F4F6;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

          &:last-child {
            border-bottom: none;
          }

          &:active {
            background: #F9FAFB;
          }

        .menu-content {
          flex: 1;

          .menu-title {
            font-size: 28rpx;
            font-weight: 500;
            color: #111827;
          }

          .vip-subtitle {
            margin-top: 6rpx;

            .vip-subtitle-text {
              background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
              color: #ffffff;
              padding: 4rpx 16rpx;
              border-radius: 16rpx;
              font-size: 20rpx;
              font-weight: 500;
              display: inline-block;
            }
          }
        }

        .menu-right {
          display: flex;
          align-items: center;

          .badge {
            background: #EF4444;
            color: #ffffff;
            padding: 4rpx 12rpx;
            border-radius: 16rpx;
            margin-right: 12rpx;

            .badge-text {
              font-size: 18rpx;
              font-weight: 500;
            }
          }

          .notification-dot {
            width: 12rpx;
            height: 12rpx;
            background: #EF4444;
            border-radius: 50%;
            margin-right: 12rpx;
          }
        }

        .menu-arrow {
          font-size: 28rpx;
          color: #9CA3AF;
          font-weight: 300;
        }

        &.vip-item {
          .menu-arrow {
            color: #FBBF24;
          }
          
          &:active {
            background: rgba(254, 243, 199, 0.3);
          }
        }
      }
    }
  }

  // Activity Section
  .activity-section {
    padding: 0 24rpx 24rpx 24rpx;

          .activity-card {
        background: #ffffff;
        border-radius: 32rpx;
        padding: 32rpx;
        border: 2rpx solid #F3F4F6;

      .activity-header {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;

        .activity-indicator {
          width: 6rpx;
          height: 32rpx;
          background: linear-gradient(135deg, #05C7C7 0%, #04B5B5 100%);
          border-radius: 3rpx;
          margin-right: 16rpx;
        }

        .activity-title {
          font-size: 28rpx;
          font-weight: bold;
          color: #111827;
        }
      }

      .activity-list {
        .activity-item {
          display: flex;
          align-items: flex-start;
          padding: 20rpx;
          background: #F9FAFB;
          border-radius: 24rpx;
          margin-bottom: 12rpx;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

          &:last-child {
            margin-bottom: 0;
          }

          &:active {
            background: #F3F4F6;
          }

          .activity-content {
            flex: 1;

            .activity-title-text {
              font-size: 24rpx;
              font-weight: 500;
              color: #111827;
              display: block;
              margin-bottom: 6rpx;
              line-height: 1.4;
            }

            .activity-subtitle {
              font-size: 20rpx;
              color: #6B7280;
              line-height: 1.3;
            }
          }


        }
      }

      .activity-more-link {
        margin-top: 24rpx;
        text-align: center;
        padding: 16rpx;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &:active {
          transform: scale(0.98);
        }

        .more-link-text {
          font-size: 26rpx;
          color: #05C7C7;
          font-weight: 500;
        }
      }
    }
  }
}

// Animations
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes cardShine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(50%) translateY(50%) rotate(45deg);
  }
  100% {
    transform: translateX(200%) translateY(200%) rotate(45deg);
  }
}

// Responsive Design
@media (max-width: 480px) {
  .limo-mobile {
    .header {
      padding: 68rpx 24rpx 24rpx 24rpx; /* 调整小屏幕的状态栏空间 */

      .header-content {
        .logo {
          height: 56rpx;
        }

        .energy-button {
          width: 72rpx;
          height: 72rpx;
          border-radius: 20rpx;

          .energy-icon {
            font-size: 28rpx;
          }
        }
      }

      .nav-tabs {
        margin-top: 40rpx;
        gap: 48rpx;

        .tab-item .tab-text {
          font-size: 28rpx;
        }
      }
    }

    .sports-section {
      padding: 30rpx 24rpx;

      .sports-container {
        gap: 32rpx;

        .sport-item {
          &.all-category .category-content {
            padding: 20rpx 24rpx;
            min-width: 120rpx;
            font-size: 24rpx;
          }

          .sport-icon-container {
            width: 96rpx;
            height: 96rpx;
            border-radius: 28rpx;

            .sport-emoji {
              font-size: 40rpx;
            }
          }

          .sport-label {
            font-size: 22rpx;
          }
        }
      }
    }

    .location-bar {
      padding: 0 24rpx 40rpx;

      .location-content {
        padding: 20rpx;
        font-size: 26rpx;

        .location-switch {
          font-size: 22rpx;
        }
      }
    }

    .venue-section {
      padding: 0 24rpx;

      .venue-card {
        margin-bottom: 64rpx;

        .venue-meta {
          margin-left: 72rpx;
        }

        .venue-content {
          margin-left: 72rpx;

          .venue-image {
            height: 320rpx;

            .image-placeholder .placeholder-text {
              font-size: 32rpx;
            }
          }

          .venue-info {
            padding: 32rpx;

            .venue-header {
              .venue-logo {
                width: 80rpx;
                height: 80rpx;
                border-radius: 20rpx;

                .logo-text {
                  font-size: 32rpx;
                }
              }

              .venue-details {
                .venue-name {
                  font-size: 28rpx;
                }

                .venue-address {
                  font-size: 22rpx;
                }
              }
            }

            .venue-action .zone-button {
              padding: 16rpx 32rpx;
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }
}