.banner {
  position: relative;
  width: 100%;
  height: 280rpx;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 主题渐变降级（背景图加载失败时） */
.banner--blue { background: linear-gradient(135deg, #0052d9, #0080ff); }
.banner--red { background: linear-gradient(135deg, #e34d59, #ff6b6b); }
.banner--orange { background: linear-gradient(135deg, #ed7b2f, #ffaa44); }
.banner--pink { background: linear-gradient(135deg, #d94da0, #ff6bcc); }
.banner--teal { background: linear-gradient(135deg, #00a870, #00d68f); }
.banner--coral { background: linear-gradient(135deg, #e06c5a, #ff8a7a); }
.banner--dark-gold { background: linear-gradient(135deg, #8b6914, #c9a227); }

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 32rpx;
  box-sizing: border-box;
}

.banner-title {
  font-size: var(--font-lg);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16rpx;
}

.banner-metrics {
  display: flex;
  gap: 40rpx;
}

.metric-item {
  display: flex;
  flex-direction: column;
}

.metric-value {
  font-size: var(--font-2xl);
  font-weight: 700;
  color: #ffffff;
}

.metric-label {
  font-size: var(--font-xs);
  color: rgba(255, 255, 255, 0.8);
  margin-top: 4rpx;
}