.benefit-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;
}

.top-banner {
  position: relative;
  background: linear-gradient(135deg, #ff6b35 0%, #ff9a56 100%);
  padding: 32rpx 32rpx 40rpx;
}

.banner-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 8rpx;
}

.banner-sub {
  display: block;
  font-size: 24rpx;
  color: rgba(255,255,255,0.85);
}

.history-link {
  position: absolute;
  right: 32rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24rpx;
  color: rgba(255,255,255,0.9);
}

.pkg-list {
  flex: 1;
  padding: 24rpx;
}

.pkg-card {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
}

.pkg-cover {
  width: 100%;
  height: 280rpx;
  display: block;
}

.pkg-body {
  padding: 24rpx;
}

.pkg-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 12rpx;
}

.pkg-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.pkg-tag {
  font-size: 20rpx;
  color: #ff6b35;
  background: rgba(255, 107, 53, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.pkg-desc {
  display: block;
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 16rpx;
}

.pkg-footer {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.pkg-cost {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 8rpx;
}

.cost-points {
  font-size: 30rpx;
  font-weight: bold;
  color: #ff6b35;
}

.cost-balance {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff6b35;
}

.cost-free {
  font-size: 30rpx;
  font-weight: bold;
  color: #07c160;
}

.pkg-stock {
  font-size: 22rpx;
  color: #999;
}

.exchange-btn {
  padding: 16rpx 32rpx;
  background: linear-gradient(135deg, #ff6b35 0%, #ff9a56 100%);
  color: #fff;
  font-size: 26rpx;
  font-weight: bold;
  border-radius: 32rpx;
}

.exchange-btn.disabled {
  background: #ccc;
}