/* pages/category/category.wxss */
.fenlei-page {
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }
  
  /* 1. 毛玻璃搜索框区域（固定） */
  .search-container {
    padding: 24rpx 32rpx;
    background: transparent;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
  }
  
  .search-box {
    backdrop-filter: blur(30rpx);
    -webkit-backdrop-filter: blur(30rpx);
    box-shadow:
      0 8rpx 32rpx rgba(31, 38, 135, 0.1),
      inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
  }
  
  .search-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
    border-radius: 50rpx;
    z-index: -1;
  }
  
  .search-icon {
    width: 34rpx;
    height: 34rpx;
    margin-right: 18rpx;
    opacity: 0.6;
  }
  
  .search-input {
    margin-left: 0;
    color: #222;
    font-weight: 400;
  }
  
  .search-placeholder {
    color: #aaa;
    font-size: 28rpx;
  }
  
  .search-btn {
    margin-left: 20rpx;
    box-shadow: 0 6rpx 20rpx rgba(255, 170, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .search-btn:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 15rpx rgba(255, 170, 0, 0.4);
  }
  
  .search-btn-text {
    font-size: 26rpx;
    color: white;
    font-weight: 600;
    position: relative;
    z-index: 1;
  }
  
  .search-btn-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
  }
  
  .search-btn:active .search-btn-glow {
    transform: translateX(100%);
  }
  
  .search-clear {
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16rpx;
    opacity: 0.6;
    transition: opacity 0.3s;
  }
  
  .search-clear:active {
    opacity: 1;
  }
  
  .clear-icon {
    width: 24rpx;
    height: 24rpx;
  }
  
  /* 2. 商品类型选择区域（固定） */
  .leixing-container {
    padding: 0 32rpx 24rpx;
    flex-shrink: 0;
    position: relative;
  }
  
  .leixing-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300rpx;
    height: 300rpx;
    background: radial-gradient(circle, rgba(255, 204, 0, 0.1) 0%, transparent 70%);
    z-index: -1;
  }
  
  .leixing-scroll {
    white-space: nowrap;
    height: 180rpx; /* 恢复原大小 */
  }
  
  .leixing-list {
    display: inline-flex;
    padding-right: 32rpx;
  }
  
  .leixing-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-right: 48rpx; /* 增加间距 */
    position: relative;
    padding: 12rpx;
  }
  
  .leixing-image-box {
    width: 100rpx; /* 恢复原大小 */ /* 恢复原大小 */
    height: 100rpx; /* 恢复原大小 */ /* 恢复原大小 */
    border-radius: 50%;
    position: relative;
    margin-bottom: 16rpx;
    overflow: hidden;
    background: white;
    box-shadow: 
      0 12rpx 30rpx rgba(0, 0, 0, 0.12),
      0 4rpx 8rpx rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .leixing-active .leixing-image-box {
    transform: scale(1.12);
    box-shadow: 
      0 18rpx 40rpx rgba(255, 204, 0, 0.3),
      0 8rpx 16rpx rgba(255, 170, 0, 0.2);
  }
  
  .leixing-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .leixing-glow {
    position: absolute;
    top: -3rpx;
    left: -3rpx;
    right: -3rpx;
    bottom: -3rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffcc00, #ffaa00, #ff8800);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: -1;
    filter: blur(10rpx);
  }
  
  .leixing-glow-active {
    opacity: 0.6;
    animation: glowPulse 2s infinite;
  }
  
  .leixing-sparkle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20rpx;
    height: 20rpx;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
  }
  
  .sparkle-animation {
    animation: sparkleFlash 1.5s infinite;
  }
  
  .leixing-text {
    font-size: 24rpx;
    color: #555;
    font-weight: 500;
    transition: all 0.3s;
    white-space: nowrap;
  }
  
  .leixing-active .leixing-text {
    color: #ff9900;
    font-weight: 600;
    transform: translateY(-2rpx);
    text-shadow: 0 2rpx 4rpx rgba(255, 153, 0, 0.2);
  }
  
  .leixing-active-bar {
    position: absolute;
    bottom: -4rpx;
    width: 44rpx;
    height: 4rpx;
    background: linear-gradient(90deg, #ffcc00, #ffaa00);
    border-radius: 2rpx;
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2rpx 8rpx rgba(255, 170, 0, 0.4);
  }
  
  .leixing-active-bar-show {
    opacity: 1;
    transform: scaleX(1);
  }
  
  .leixing-border-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 2rpx solid transparent;
    opacity: 0;
    pointer-events: none;
  }
  
  .border-effect-active {
    opacity: 1;
    border-color: rgba(255, 204, 0, 0.5);
    animation: borderGlow 2s infinite;
  }
  
  /* 3. 左右分栏布局（可滚动区域） */
  .main-container {
    flex: 1;
    display: flex;
    height: calc(100vh - 300rpx);
    overflow: hidden;
  }
  
  /* 左边：商品专区列表 */
  .zhuanqu-left {
    width: 200rpx;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10rpx);
    border-right: 1rpx solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    position: relative;
  }
  
  .zhuanqu-list {
    padding: 0;
  }
  
  .zhuanqu-item {
    position: relative;
    padding: 32rpx 0;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
  }
  
  .zhuanqu-item:active {
    background: rgba(255, 204, 0, 0.05);
  }
  
  .zhuanqu-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20rpx;
  }
  
  .zhuanqu-name {
    font-size: 26rpx;
    color: #444;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 8rpx;
    transition: all 0.3s;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-weight: 500;
  }
  
  .zhuanqu-active .zhuanqu-name {
    color: #ff9900;
    font-weight: 600;
    text-shadow: 0 2rpx 4rpx rgba(255, 153, 0, 0.2);
  }
  
  .zhuanqu-count {
    font-size: 22rpx;
    color: #888;
    transition: all 0.3s;
  }
  
  .zhuanqu-active .zhuanqu-count {
    color: #ffaa00;
    font-weight: 500;
  }
  
  .zhuanqu-active-indicator {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 44rpx;
    background: linear-gradient(180deg, #ffcc00, #ffaa00);
    border-radius: 3rpx 0 0 3rpx;
    opacity: 0;
    transition: all 0.3s;
    overflow: hidden;
  }
  
  .zhuanqu-indicator-glow {
    opacity: 1;
    animation: indicatorGlow 2s infinite;
    box-shadow: 0 0 20rpx rgba(255, 204, 0, 0.5);
  }
  
  .indicator-sparkle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10rpx;
    background: rgba(255, 255, 255, 0.6);
    animation: sparkleMove 1.5s infinite;
  }
  
  .zhuanqu-hover-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  
  .zhuanqu-item:active .zhuanqu-hover-glow {
    opacity: 1;
  }
  
  .zhuanqu-click-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 204, 0, 0.1);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
  }
  
  .zhuanqu-item:active .zhuanqu-click-effect {
    animation: rippleEffect 0.6s ease-out;
  }
  
  .zhuanqu-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120rpx 0;
  }
  
  .zhuanqu-empty-icon {
    width: 120rpx;
    height: 120rpx;
    opacity: 0.2;
    margin-bottom: 28rpx;
  }
  
  .zhuanqu-empty-text {
    font-size: 26rpx;
    color: #999;
  }
  
  /* 右边：商品列表（紧凑布局） */
  .shangpin-right {
    flex: 1;
    background: #fafafa;
  }
  
  .shangpin-list {
    padding: 0;
  }
  
  .shangpin-item {
    background: white;
    padding: 28rpx 30rpx 22rpx;
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 140rpx;
    overflow: hidden;
  }
  
  .shangpin-item:active {
    background: rgba(0, 0, 0, 0.02);
  }
  
  .shangpin-image-box {
    margin-right: 24rpx;
    flex-shrink: 0;
    position: relative;
  }
  
  .shangpin-image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 14rpx;
    background: #f5f5f5;
    object-fit: cover;
  }
  
  .shangpin-image-glow {
    position: absolute;
    top: -4rpx;
    left: -4rpx;
    right: -4rpx;
    bottom: -4rpx;
    border-radius: 18rpx;
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  
  .shangpin-item:active .shangpin-image-glow {
    opacity: 0.5;
  }
  
  .image-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 20rpx;
    height: 20rpx;
    background: linear-gradient(135deg, #ffcc00, transparent 70%);
    border-radius: 0 14rpx 0 0;
  }
  
  .shangpin-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 120rpx;
    justify-content: space-between;
    padding-top: 2rpx; /* 标题与图片顶部对齐 */
  }
  
  .shangpin-title {
    margin-bottom: 0;
    position: relative;
  }
  
  .shangpin-title-text {
    font-size: 30rpx;
    font-weight: 500;
    color: #222; /* 黑色加深 */
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  
  .title-underline {
    position: absolute;
    bottom: -4rpx;
    left: 0;
    width: 0;
    height: 2rpx;
    background: linear-gradient(90deg, #ffcc00, #ffaa00);
    transition: width 0.3s;
  }
  
  .shangpin-item:active .title-underline {
    width: 40rpx;
  }
  
  .shangpin-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
  }
  
  .shangpin-price {
    display: flex;
    align-items: baseline;
    position: relative;
  }
  
  .price-icon {
    font-size: 24rpx;
    color: #ff6600;
    font-weight: 500;
  }
  
  .price-integer {
    font-size: 36rpx; /* 适当调整大小 */
    color: #ff6600;
    font-weight: 600;
    margin-left: 2rpx;
  }
  
  .price-decimal {
    font-size: 24rpx;
    color: #ff6600;
    font-weight: 500;
  }
  
  .price-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80rpx;
    height: 80rpx;
    background: radial-gradient(circle, rgba(255, 102, 0, 0.1) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
  }
  
  .shangpin-item:active .price-glow {
    animation: priceGlow 0.6s;
  }
  
  .detail-btn {
    position: relative;
    padding: 12rpx 28rpx;
    background: linear-gradient(135deg, #ffcc00, #ffaa00);
    border-radius: 40rpx;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    box-shadow: 0 6rpx 20rpx rgba(255, 170, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120rpx;
  }
  
  .detail-btn:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 15rpx rgba(255, 170, 0, 0.4);
  }
  
  .detail-btn-text {
    font-size: 24rpx;
    color: white;
    font-weight: 500;
    position: relative;
    z-index: 2;
    line-height: 1;
  }
  
  .btn-glow-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
  }
  
  .detail-btn:active .btn-glow-effect {
    transform: translateX(100%);
  }
  
  .btn-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
  }
  
  .detail-btn:active .btn-halo {
    animation: buttonHalo 0.6s ease-out;
  }
  
  .btn-star {
    position: absolute;
    width: 6rpx;
    height: 6rpx;
    background: white;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
  }
  
  .detail-btn:active .btn-star {
    animation: starSparkle 0.8s ease-out;
  }
  
  .item-divider {
    position: absolute;
    left: 30rpx;
    right: 30rpx;
    bottom: 0;
    height: 1rpx;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.08));
  }
  
  .item-hover-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 204, 0, 0.03), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  
  .shangpin-item:active .item-hover-glow {
    opacity: 1;
  }
  
  .item-ripple-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 204, 0, 0.1);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
  }
  
  .shangpin-item:active .item-ripple-effect {
    animation: rippleEffect 0.6s ease-out;
  }
  
  .shangpin-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 150rpx 0;
  }
  
  .shangpin-empty-icon {
    width: 180rpx;
    height: 180rpx;
    opacity: 0.15;
    margin-bottom: 36rpx;
  }
  
  .shangpin-empty-text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 40rpx;
  }
  
  .shangpin-empty-btn {
    background: linear-gradient(135deg, #ffcc00, #ffaa00);
    color: white;
    font-size: 26rpx;
    font-weight: 500;
    padding: 16rpx 44rpx;
    border-radius: 40rpx;
    box-shadow: 0 8rpx 24rpx rgba(255, 170, 0, 0.3);
    transition: all 0.3s;
  }
  
  .shangpin-empty-btn:active {
    transform: scale(0.95);
    box-shadow: 0 4rpx 16rpx rgba(255, 170, 0, 0.4);
  }
  
  .load-more-line {
    width: 60rpx;
    height: 1rpx;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
  }
  
  .load-more-text {
    font-size: 24rpx;
    color: #bbb;
    margin: 0 20rpx;
  }
  
  /* 搜索结果弹窗 */
  .search-results-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
  }
  
  .search-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5rpx);
  }
  
  .search-results-content {
    position: absolute;
    top: 100rpx;
    left: 32rpx;
    right: 32rpx;
    bottom: 100rpx;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30rpx);
    border-radius: 24rpx;
    box-shadow: 
      0 20rpx 60rpx rgba(0, 0, 0, 0.2),
      inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
    border: 1rpx solid rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .search-results-header {
    padding: 32rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }
  
  .search-header-left {
    display: flex;
    align-items: baseline;
  }
  
  .search-results-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #333;
  }
  
  .search-results-count {
    font-size: 24rpx;
    color: #999;
    margin-left: 12rpx;
  }
  
  .search-close {
    width: 44rpx;
    height: 44rpx;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
  }
  
  .search-close:active {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(0.9);
  }
  
  .close-icon {
    width: 20rpx;
    height: 20rpx;
    opacity: 0.6;
  }
  
  .search-results-list {
    flex: 1;
    height: 100%;
  }
  
  .search-result-item {
    display: flex;
    padding: 28rpx 32rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.04);
    position: relative;
    transition: all 0.3s;
  }
  
  .search-result-item:active {
    background: rgba(0, 0, 0, 0.02);
    transform: translateY(-2rpx);
  }
  
  .search-result-left {
    margin-right: 24rpx;
    position: relative;
  }
  
  .search-result-image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 16rpx;
    background: #f5f5f5;
    object-fit: cover;
  }
  
  .search-image-glow {
    position: absolute;
    top: -4rpx;
    left: -4rpx;
    right: -4rpx;
    bottom: -4rpx;
    border-radius: 20rpx;
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  
  .search-result-item:active .search-image-glow {
    opacity: 0.5;
  }
  
  .search-result-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .search-result-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    margin-bottom: 16rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  
  .search-result-info {
    display: flex;
    gap: 12rpx;
    margin-bottom: 20rpx;
  }
  
  .info-tag {
    padding: 6rpx 12rpx;
    background: rgba(255, 204, 0, 0.1);
    border-radius: 6rpx;
  }
  
  .search-result-category {
    font-size: 22rpx;
    color: #666;
  }
  
  .search-result-zhuanqu {
    font-size: 22rpx;
    color: #888;
  }
  
  .search-result-price {
    display: flex;
    align-items: baseline;
  }
  
  .search-item-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 204, 0, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  
  .search-result-item:active .search-item-glow {
    opacity: 1;
  }
  
  .search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 160rpx 0;
  }
  
  .search-empty-icon {
    width: 160rpx;
    height: 160rpx;
    opacity: 0.2;
    margin-bottom: 36rpx;
  }
  
  .search-empty-text {
    font-size: 30rpx;
    color: #999;
    margin-bottom: 16rpx;
  }
  
  .search-empty-tip {
    font-size: 24rpx;
    color: #bbb;
  }
  
  .search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 160rpx 0;
  }
  
  .search-spinner {
    width: 60rpx;
    height: 60rpx;
    position: relative;
    margin-bottom: 24rpx;
  }
  
  .spinner-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4rpx solid transparent;
    border-top-color: #ffcc00;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  .search-loading-text {
    font-size: 26rpx;
    color: #999;
  }
  
  /* 全局加载状态 */
  .loading-toast {
    backdrop-filter: blur(10rpx);
    z-index: 3000;
  }
  
  .loading-content {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20rpx);
    padding: 60rpx 80rpx;
    border-radius: 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border: 1rpx solid rgba(255, 255, 255, 0.1);
  }
  
  .loading-spinner {
    width: 80rpx;
    height: 80rpx;
    position: relative;
    margin-bottom: 30rpx;
  }
  
  .spinner-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4rpx solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
  }
  
  .spinner-dot {
    position: absolute;
    top: 0;
    left: 50%;
    width: 12rpx;
    height: 12rpx;
    background: #ffcc00;
    border-radius: 50%;
    transform: translateX(-50%);
    animation: spin 1s linear infinite;
  }
  
  .loading-text {
    font-size: 28rpx;
    font-weight: 500;
  }
  
  .loading-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200rpx;
    height: 200rpx;
    background: radial-gradient(circle, rgba(255, 204, 0, 0.2) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    z-index: -1;
  }
  
  /* 动画定义 */
  @keyframes glowPulse {
    0%, 100% {
      opacity: 0.4;
      transform: scale(1);
    }
    50% {
      opacity: 0.8;
      transform: scale(1.05);
    }
  }
  
  @keyframes sparkleFlash {
    0%, 100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0);
    }
    50% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
      filter: blur(0);
    }
  }
  
  @keyframes borderGlow {
    0%, 100% {
      border-color: rgba(255, 204, 0, 0.3);
    }
    50% {
      border-color: rgba(255, 204, 0, 0.8);
    }
  }
  
  @keyframes indicatorGlow {
    0%, 100% {
      box-shadow: 0 0 20rpx rgba(255, 204, 0, 0.3);
    }
    50% {
      box-shadow: 0 0 30rpx rgba(255, 204, 0, 0.8);
    }
  }
  
  @keyframes sparkleMove {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translateY(400%);
      opacity: 0;
    }
  }
  
  @keyframes rippleEffect {
    0% {
      width: 0;
      height: 0;
      opacity: 0.5;
    }
    100% {
      width: 200rpx;
      height: 200rpx;
      opacity: 0;
    }
  }
  
  @keyframes priceGlow {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
      opacity: 0.6;
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1.5);
    }
  }
  
  @keyframes buttonHalo {
    0% {
      width: 0;
      height: 0;
      opacity: 0.6;
    }
    100% {
      width: 200rpx;
      height: 200rpx;
      opacity: 0;
    }
  }
  
  @keyframes starSparkle {
    0% {
      opacity: 0;
      transform: translate(0, 0) scale(0);
    }
    20% {
      opacity: 1;
      transform: translate(-40rpx, -30rpx) scale(1);
    }
    40% {
      opacity: 1;
      transform: translate(30rpx, -20rpx) scale(1);
    }
    60% {
      opacity: 1;
      transform: translate(-20rpx, 40rpx) scale(1);
    }
    80% {
      opacity: 1;
      transform: translate(40rpx, 20rpx) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(0, 0) scale(0);
    }
  }