.report-page {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, #161d29 0%, #101620 100%);
  color: #eef5ff;
}

.report-page__content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: calc(var(--report-top-gap, 0px) + 20rpx) 24rpx 56rpx;
  box-sizing: border-box;
}

.report-page__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.report-page__glow--one {
  top: 18rpx;
  right: -54rpx;
  width: 320rpx;
  height: 320rpx;
  background: radial-gradient(circle, rgba(43, 226, 198, 0.18) 0%, rgba(43, 226, 198, 0) 68%);
}

.report-page__glow--two {
  top: 260rpx;
  left: -90rpx;
  width: 280rpx;
  height: 280rpx;
  background: radial-gradient(circle, rgba(36, 174, 255, 0.14) 0%, rgba(36, 174, 255, 0) 70%);
}

.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.report-header__action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 68rpx;
  height: 52rpx;
  padding: 0 16rpx;
  border-radius: 18rpx;
  background: rgba(32, 42, 58, 0.82);
  box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.04);
}

.report-header__action--share {
  min-width: 96rpx;
}

.report-header__action-text {
  color: #dce7f8;
  font-size: 24rpx;
}

.report-header__content {
  flex: 1;
  padding: 0 20rpx;
}

.report-header__title {
  display: block;
  color: #f7fbff;
  font-size: 34rpx;
  font-weight: 600;
}

.report-header__subtitle {
  display: block;
  margin-top: 6rpx;
  color: #8ea0b6;
  font-size: 22rpx;
}

.report-toolbar {
  margin-bottom: 24rpx;
}

.report-filters {
  margin-top: 16rpx;
  padding: 22rpx;
  border-radius: 24rpx;
  background: rgba(24, 33, 47, 0.92);
  box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.04);
}

.report-filter + .report-filter {
  margin-top: 18rpx;
}

.report-filter__label {
  display: block;
  margin-bottom: 10rpx;
  color: #91a3b8;
  font-size: 22rpx;
}

.report-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.report-chip-group--compact {
  gap: 10rpx;
}

.report-chip {
  min-width: 112rpx;
  padding: 14rpx 20rpx;
  border-radius: 18rpx;
  background: rgba(32, 43, 60, 0.95);
  box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.04);
}

.report-chip--active {
  background: linear-gradient(135deg, rgba(47, 224, 190, 0.24), rgba(36, 174, 255, 0.18));
  box-shadow:
    inset 0 0 0 2rpx rgba(52, 222, 194, 0.42),
    0 10rpx 28rpx rgba(18, 129, 165, 0.24);
}

.report-chip__text {
  color: #9eb0c5;
  font-size: 24rpx;
  text-align: center;
}

.report-chip-group--compact .report-chip {
  min-width: 0;
  padding: 10rpx 18rpx;
  border-radius: 16rpx;
}

.report-chip-group--compact .report-chip__text {
  font-size: 22rpx;
}

.report-chip__text--active {
  color: #ecfffb;
  font-weight: 600;
}

.score-overview,
.report-card,
.metric-grid {
  margin-bottom: 24rpx;
}

.score-overview {
  padding: 24rpx;
  border-radius: 28rpx;
  background: rgba(24, 33, 47, 0.94);
  box-shadow:
    inset 0 0 0 2rpx rgba(255, 255, 255, 0.04),
    0 20rpx 40rpx rgba(4, 10, 20, 0.2);
}

.score-overview__top {
  display: flex;
  gap: 24rpx;
}

.score-overview__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 248rpx;
  height: 248rpx;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(16, 23, 35, 0.92) 0 59%, transparent 60%),
    conic-gradient(#2de1c2 0 33%, #23b6ff 33% 61%, #ffbf4d 61% 82%, #ff6b6b 82% 100%);
}

.score-overview__ring-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-overview__caption {
  color: #8da0b5;
  font-size: 22rpx;
}

.score-overview__score {
  margin-top: 8rpx;
  color: #ff9950;
  font-size: 72rpx;
  font-weight: 700;
  line-height: 1;
}

.score-overview__summary {
  flex: 1;
}

.score-overview__level {
  display: inline-flex;
  align-items: center;
  height: 44rpx;
  padding: 0 18rpx;
  border-radius: 999rpx;
  font-size: 22rpx;
  font-weight: 600;
}

.score-overview__level--excellent,
.metric-card__status--excellent,
.summary-grid__status--excellent,
.kv-list__status--excellent,
.daytime-card__status--excellent {
  background: rgba(45, 225, 194, 0.16);
  color: #4ef0cb;
}

.score-overview__level--good,
.metric-card__status--good,
.summary-grid__status--good,
.kv-list__status--good,
.daytime-card__status--good {
  background: rgba(35, 182, 255, 0.16);
  color: #67cbff;
}

.score-overview__level--warning,
.metric-card__status--warning,
.summary-grid__status--warning,
.kv-list__status--warning,
.daytime-card__status--warning {
  background: rgba(255, 191, 77, 0.16);
  color: #ffc766;
}

.score-overview__level--danger,
.metric-card__status--danger,
.summary-grid__status--danger,
.kv-list__status--danger,
.daytime-card__status--danger {
  background: rgba(255, 107, 107, 0.16);
  color: #ff8787;
}

.score-overview__status {
  display: block;
  margin-top: 18rpx;
  color: #e7eef8;
  font-size: 30rpx;
  font-weight: 600;
  line-height: 1.4;
}

.score-overview__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12rpx;
  margin-top: 20rpx;
}

.score-overview__meta-item {
  padding: 16rpx;
  border-radius: 18rpx;
  background: rgba(18, 26, 39, 0.88);
}

.score-overview__meta-label {
  display: block;
  color: #90a1b5;
  font-size: 20rpx;
}

.score-overview__meta-value {
  display: block;
  margin-top: 8rpx;
  color: #f2f7ff;
  font-size: 26rpx;
  font-weight: 600;
}

.score-overview__factors {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12rpx;
  margin-top: 22rpx;
}

.score-overview__factor {
  padding: 14rpx 10rpx;
  border-radius: 16rpx;
  background: rgba(18, 26, 39, 0.88);
  text-align: center;
}

.score-overview__factor-label {
  display: block;
  color: #91a3b8;
  font-size: 20rpx;
  line-height: 1.4;
}

.score-overview__factor-value {
  display: block;
  margin-top: 6rpx;
  color: #f4f8ff;
  font-size: 28rpx;
  font-weight: 700;
}

.report-card {
  padding: 24rpx;
  border-radius: 28rpx;
  background: rgba(24, 33, 47, 0.94);
  box-shadow:
    inset 0 0 0 2rpx rgba(255, 255, 255, 0.04),
    0 16rpx 36rpx rgba(4, 10, 20, 0.18);
}

.report-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20rpx;
  margin-bottom: 18rpx;
}

.report-card__title {
  color: #f4f8ff;
  font-size: 28rpx;
  font-weight: 600;
}

.report-card__subtitle {
  display: block;
  margin-top: 6rpx;
  color: #90a3b8;
  font-size: 22rpx;
}

.report-card__badge {
  display: inline-flex;
  align-items: center;
  height: 40rpx;
  padding: 0 14rpx;
  border-radius: 999rpx;
  background: rgba(35, 182, 255, 0.16);
  color: #67cbff;
  font-size: 20rpx;
}

.report-chart__tooltip {
  margin-bottom: 16rpx;
  padding: 16rpx 18rpx;
  border-radius: 18rpx;
  background: rgba(16, 23, 35, 0.86);
}

.report-chart__tooltip-title {
  display: block;
  color: #f3f8ff;
  font-size: 24rpx;
  font-weight: 600;
}

.report-chart__tooltip-value {
  display: block;
  margin-top: 8rpx;
  color: #41e0c4;
  font-size: 30rpx;
  font-weight: 700;
}

.report-chart__tooltip-meta {
  display: block;
  margin-top: 8rpx;
  color: #8ea1b8;
  font-size: 22rpx;
  line-height: 1.5;
}

.report-chart {
  position: relative;
  height: 260rpx;
  padding: 16rpx 18rpx 48rpx;
  border-radius: 24rpx;
  background: rgba(16, 23, 35, 0.84);
  overflow: hidden;
}

.report-chart--scatter {
  height: 220rpx;
}

.report-chart__grid {
  position: absolute;
  inset: 16rpx 18rpx 48rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.report-chart__grid-line {
  border-top: 2rpx dashed rgba(255, 255, 255, 0.06);
}

.report-chart__item {
  position: absolute;
  top: 16rpx;
  bottom: 48rpx;
  width: 44rpx;
  margin-left: -22rpx;
}

.report-chart__stem {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 4rpx;
  margin-left: -2rpx;
  border-radius: 999rpx;
  background: linear-gradient(180deg, rgba(35, 182, 255, 0.18), rgba(45, 225, 194, 0.7));
}

.report-chart__point {
  position: absolute;
  left: 50%;
  width: 16rpx;
  height: 16rpx;
  margin-left: -8rpx;
  border-radius: 50%;
  box-shadow: 0 0 0 6rpx rgba(255, 255, 255, 0.03);
}

.report-chart__point.is-active {
  width: 22rpx;
  height: 22rpx;
  margin-left: -11rpx;
  box-shadow: 0 0 0 10rpx rgba(255, 255, 255, 0.05);
}

.report-chart__point--excellent {
  background: #2de1c2;
}

.report-chart__point--good {
  background: #23b6ff;
}

.report-chart__point--warning {
  background: #ffbf4d;
}

.report-chart__point--danger {
  background: #ff6b6b;
}

.report-chart__label {
  position: absolute;
  left: 50%;
  bottom: -6rpx;
  width: 72rpx;
  margin-left: -36rpx;
  color: #8193a9;
  font-size: 18rpx;
  text-align: center;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16rpx;
}

.metric-card {
  padding: 22rpx;
  border-radius: 24rpx;
  background: rgba(24, 33, 47, 0.94);
  box-shadow:
    inset 0 0 0 2rpx rgba(255, 255, 255, 0.04),
    0 14rpx 30rpx rgba(4, 10, 20, 0.18);
}

.metric-card__label {
  display: block;
  color: #90a2b7;
  font-size: 22rpx;
}

.metric-card__value {
  display: block;
  margin-top: 12rpx;
  color: #f4f8ff;
  font-size: 34rpx;
  font-weight: 700;
}

.metric-card__unit {
  margin-left: 8rpx;
  color: #8fa3b7;
  font-size: 20rpx;
  font-weight: 400;
}

.metric-card__status,
.summary-grid__status,
.kv-list__status,
.daytime-card__status {
  display: inline-flex;
  align-items: center;
  height: 38rpx;
  margin-top: 14rpx;
  padding: 0 14rpx;
  border-radius: 999rpx;
  font-size: 20rpx;
  font-weight: 600;
}

.insight-list {
  display: flex;
  flex-direction: column;
  gap: 14rpx;
}

.insight-card {
  display: flex;
  gap: 14rpx;
  padding: 18rpx;
  border-radius: 20rpx;
  background: rgba(16, 23, 35, 0.84);
}

.insight-card__tone {
  width: 8rpx;
  border-radius: 999rpx;
}

.insight-card__tone--excellent {
  background: #2de1c2;
}

.insight-card__tone--good {
  background: #23b6ff;
}

.insight-card__tone--warning {
  background: #ffbf4d;
}

.insight-card__tone--danger {
  background: #ff6b6b;
}

.insight-card__content {
  flex: 1;
}

.insight-card__title {
  display: block;
  color: #f3f8ff;
  font-size: 24rpx;
  font-weight: 600;
}

.insight-card__body {
  display: block;
  margin-top: 8rpx;
  color: #91a3b8;
  font-size: 22rpx;
  line-height: 1.7;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14rpx;
}

.summary-grid__item {
  padding: 18rpx;
  border-radius: 20rpx;
  background: rgba(16, 23, 35, 0.84);
}

.summary-grid__label {
  display: block;
  color: #8ea1b8;
  font-size: 22rpx;
}

.summary-grid__value {
  display: block;
  margin-top: 12rpx;
  color: #f3f8ff;
  font-size: 30rpx;
  font-weight: 700;
}

.summary-grid__unit {
  margin-left: 6rpx;
  color: #8fa2b9;
  font-size: 20rpx;
  font-weight: 400;
}

.kv-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.kv-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
  padding: 16rpx 0;
  border-bottom: 2rpx solid rgba(255, 255, 255, 0.04);
}

.kv-list__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.kv-list__label {
  color: #8fa1b6;
  font-size: 22rpx;
}

.kv-list__value-wrap {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.kv-list__value {
  color: #f3f8ff;
  font-size: 24rpx;
  font-weight: 600;
}

.distribution-card {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.distribution-card__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 188rpx;
  height: 188rpx;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(16, 23, 35, 0.92) 0 54%, transparent 55%),
    conic-gradient(#2de1c2 0 29%, #23b6ff 29% 66%, #ffb84d 66% 88%, #ff6b6b 88% 100%);
}

.distribution-card__ring-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112rpx;
  height: 112rpx;
  border-radius: 50%;
  background: rgba(16, 23, 35, 0.94);
}

.distribution-card__ring-text {
  color: #d7e3f3;
  font-size: 20rpx;
  text-align: center;
  line-height: 1.5;
}

.distribution-card__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14rpx;
}

.distribution-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.distribution-card__legend {
  display: flex;
  align-items: center;
}

.distribution-card__dot {
  width: 14rpx;
  height: 14rpx;
  margin-right: 10rpx;
  border-radius: 50%;
}

.distribution-card__label {
  color: #8fa2b8;
  font-size: 22rpx;
}

.distribution-card__value {
  color: #f3f8ff;
  font-size: 24rpx;
  font-weight: 600;
}

.daytime-list {
  display: flex;
  flex-direction: column;
  gap: 14rpx;
}

.daytime-card {
  padding: 18rpx;
  border-radius: 20rpx;
  background: rgba(16, 23, 35, 0.84);
}

.daytime-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.daytime-card__label {
  color: #f3f8ff;
  font-size: 24rpx;
  font-weight: 600;
}

.daytime-card__detail {
  display: block;
  margin-top: 10rpx;
  color: #8ea1b8;
  font-size: 22rpx;
  line-height: 1.6;
}