people-reading/miniprogram/pages/report/report.wxss

.header {
  padding: 28rpx 0 18rpx;
}

.eyebrow {
  display: block;
  color: #d8a84e;
  font-size: 22rpx;
  font-weight: 800;
}

.title {
  display: block;
  margin-top: 10rpx;
  color: #f2e9d8;
  font-size: 46rpx;
  font-weight: 800;
  line-height: 1.2;
}

.time {
  display: block;
  margin-top: 12rpx;
  color: #728389;
  font-size: 23rpx;
}

.insight-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(0, 224, 184, 0.42);
  background: linear-gradient(135deg, rgba(0, 224, 184, 0.16), rgba(16, 25, 28, 0.95) 46%);
}

.insight-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26rpx;
  right: 26rpx;
  height: 2rpx;
  background: linear-gradient(90deg, transparent, #00e0b8, transparent);
}

.insight-label,
.block-label,
.column-title {
  display: block;
  color: #d8a84e;
  font-size: 23rpx;
  font-weight: 800;
}

.summary {
  display: block;
  margin-top: 16rpx;
  color: #d9e4e1;
  font-size: 30rpx;
  line-height: 1.75;
}

.keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.keywords.inline {
  margin-top: 22rpx;
}

.keyword,
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44rpx;
  box-sizing: border-box;
  border-radius: 999rpx;
  padding: 8rpx 18rpx;
  font-size: 24rpx;
}

.keyword {
  color: #06100e;
  background: #00e0b8;
}

.chip {
  color: #bcefe5;
  background: rgba(0, 224, 184, 0.1);
  border: 1rpx solid rgba(0, 224, 184, 0.24);
}

.chip.warn {
  color: #f2d3c9;
  background: rgba(255, 107, 74, 0.1);
  border-color: rgba(255, 107, 74, 0.28);
}

.metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
  margin-top: 18rpx;
}

.metric {
  padding: 22rpx;
  border: 1rpx solid rgba(242, 233, 216, 0.1);
  border-radius: 16rpx;
  background: rgba(16, 25, 28, 0.78);
}

.metric-value,
.metric-label {
  display: block;
}

.metric-value {
  color: #00e0b8;
  font-size: 38rpx;
  font-weight: 800;
}

.metric-label {
  margin-top: 6rpx;
  color: #8da0a4;
  font-size: 23rpx;
}

.quality-note {
  margin-top: 14rpx;
  color: #8da0a4;
  font-size: 24rpx;
  line-height: 1.6;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 38rpx 0 16rpx;
}

.section-title,
.section-subtitle {
  display: block;
}

.section-title {
  color: #f2e9d8;
  font-size: 34rpx;
  font-weight: 800;
}

.section-subtitle {
  color: #728389;
  font-size: 22rpx;
}

.dimension {
  margin-bottom: 18rpx;
}

.dimension-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20rpx;
}

.dimension-index {
  display: block;
  color: rgba(242, 233, 216, 0.28);
  font-size: 22rpx;
  font-weight: 800;
}

.dimension-name {
  display: block;
  margin-top: 4rpx;
  color: #f2e9d8;
  font-size: 32rpx;
  font-weight: 800;
}

.confidence-pill {
  flex-shrink: 0;
  min-width: 88rpx;
  padding: 8rpx 14rpx;
  border: 1rpx solid rgba(0, 224, 184, 0.3);
  border-radius: 999rpx;
  color: #00e0b8;
  font-size: 23rpx;
  font-weight: 800;
  text-align: center;
}

.block {
  margin-top: 22rpx;
}

.body,
.advice,
.list-item,
.disclaimer {
  display: block;
  line-height: 1.75;
}

.body {
  margin-top: 10rpx;
  color: #c5d4d3;
  font-size: 28rpx;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 12rpx;
}

.advice-box {
  margin-top: 22rpx;
  padding: 22rpx;
  border-radius: 14rpx;
  background: rgba(216, 168, 78, 0.08);
  border: 1rpx solid rgba(216, 168, 78, 0.18);
}

.advice {
  margin-top: 8rpx;
  color: #eadcc1;
  font-size: 27rpx;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22rpx;
}

.summary-column {
  min-width: 0;
}

.divider {
  height: 1rpx;
  background: rgba(242, 233, 216, 0.1);
}

.list-item {
  position: relative;
  margin-top: 12rpx;
  padding-left: 26rpx;
  color: #c5d4d3;
  font-size: 27rpx;
}

.list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20rpx;
  width: 9rpx;
  height: 9rpx;
  border-radius: 50%;
  background: #00e0b8;
}

.challenge-card {
  margin-top: 18rpx;
}

.disclaimer-box {
  margin-top: 34rpx;
  padding-top: 22rpx;
  border-top: 1rpx solid rgba(242, 233, 216, 0.1);
}

.disclaimer {
  color: #728389;
  font-size: 23rpx;
}

.action {
  margin-top: 28rpx;
}

.share-status {
  display: block;
  margin-top: 16rpx;
  color: #9db0b4;
  font-size: 24rpx;
  line-height: 1.6;
  text-align: center;
}