fohow_xcx/packageWellness/pages/tcm/report/report.wxss

.report-page {
  min-height: 100%;
  background: #f7f4ed;
  padding: 24rpx;
  box-sizing: border-box;
}

.ai-banner {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 18rpx 22rpx;
  margin-bottom: 20rpx;
  background: #fff6e0;
  border: 1rpx solid #f0c97a;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(212, 147, 43, 0.08);
}

.ai-banner-tag {
  flex-shrink: 0;
  padding: 6rpx 16rpx;
  background: #d49500;
  color: #fff;
  font-size: 22rpx;
  font-weight: 600;
  border-radius: 999rpx;
  letter-spacing: 1rpx;
}

.ai-banner-text {
  flex: 1;
  font-size: 24rpx;
  color: #6b4a14;
  line-height: 1.5;
}

.state-box,
.state-card,
.hero-card,
.info-card,
.section-card,
.disclaimer-card {
  background: #fff;
  border-radius: 22rpx;
  box-shadow: 0 10rpx 22rpx rgba(0, 0, 0, 0.05);
}

.state-box,
.state-card {
  padding: 80rpx 40rpx;
  text-align: center;
}

.state-title,
.hero-title,
.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #2b2b2b;
}

.state-desc,
.hero-sub,
.section-content,
.question-value {
  margin-top: 16rpx;
  font-size: 24rpx;
  color: #666;
  line-height: 1.8;
}

.state-btn {
  width: 240rpx;
  height: 82rpx;
  line-height: 82rpx;
  margin: 28rpx auto 0;
  border-radius: 999rpx;
  color: #fff;
  font-size: 28rpx;
  background: linear-gradient(135deg, #efc57b, #d4932b);
}

.generating-card {
  background: linear-gradient(180deg, #fffaf1, #ffffff);
}

.loading-dot {
  width: 28rpx;
  height: 28rpx;
  margin: 28rpx auto 0;
  border-radius: 50%;
  background: #eab86a;
  box-shadow: 0 0 0 20rpx rgba(234, 184, 106, 0.16);
}

.hero-card,
.info-card,
.section-card,
.disclaimer-card {
  margin-bottom: 20rpx;
  padding: 28rpx;
}

.hero-card {
  background: linear-gradient(135deg, #efe2bd, #eab86a);
}

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hero-main {
  flex: 1;
  padding-right: 18rpx;
}

.hero-badge-wrap {
  display: flex;
  align-items: center;
}

.hero-badge-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.hero-badge {
  display: inline-block;
  padding: 8rpx 18rpx;
  border-radius: 999rpx;
  background: rgba(255, 255, 255, 0.35);
  color: #6b5630;
  font-size: 22rpx;
}

.hero-title {
  margin-top: 14rpx;
  color: #4f3d1c;
}

.hero-sub {
  color: #6b5630;
}

.hero-status {
  min-width: 110rpx;
  height: 52rpx;
  padding: 0 18rpx;
  box-sizing: border-box;
  border-radius: 999rpx;
  background: rgba(255, 255, 255, 0.35);
  color: #7b5e2b;
  text-align: center;
  line-height: 52rpx;
  font-size: 22rpx;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: 22rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.28);
}

.hero-stat {
  width: 33.33%;
  margin-bottom: 16rpx;
}

.hero-stat-label {
  font-size: 22rpx;
  color: rgba(79, 61, 28, 0.72);
}

.hero-stat-value {
  margin-top: 8rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #4f3d1c;
}

.disclaimer-card {
  background: #fff9ec;
  border: 1rpx solid #f0dfbc;
}

.card-title.small {
  font-size: 28rpx;
}

.data-list,
.image-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 18rpx;
}

.card-head,
.section-head {
  display: flex;
  align-items: center;
}

.card-accent {
  width: 8rpx;
  height: 28rpx;
  margin-right: 12rpx;
  border-radius: 999rpx;
  background: #d4932b;
}

.card-accent.warn {
  background: #e0a643;
}

.section-badge {
  width: 46rpx;
  height: 46rpx;
  margin-right: 12rpx;
  border-radius: 50%;
  background: #f7ead0;
  color: #b7802a;
  text-align: center;
  line-height: 46rpx;
  font-size: 22rpx;
  font-weight: 600;
}

.data-item {
  width: 33.33%;
  margin-bottom: 18rpx;
}

.data-key,
.question-title,
.image-title {
  font-size: 24rpx;
  color: #999;
}

.data-value {
  display: block;
  margin-top: 10rpx;
  font-size: 30rpx;
  color: #b7802a;
  font-weight: 600;
}

.question-item {
  margin-top: 18rpx;
  padding-top: 18rpx;
  border-top: 1rpx solid #f1f1f1;
}

.question-item:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.image-item {
  width: 31%;
  margin-right: 3.5%;
  margin-bottom: 20rpx;
}

.image-item:nth-child(3n) {
  margin-right: 0;
}

.report-image {
  width: 100%;
  height: 190rpx;
  border-radius: 16rpx;
  background: #f3f3f3;
}

.image-title {
  margin-top: 10rpx;
  text-align: center;
}

.section-content {
  white-space: pre-wrap;
}