.report-top-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--wq-bg-card);
  border-bottom: 1px solid var(--wq-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top, 12px));
}

.report-top-bar h1 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--wq-text-primary);
}

.report-main {
  flex: 1;
  padding-bottom: 80px;
  overflow-y: auto;
}

.time-selector {
  padding: 16px 16px 8px;
}

.time-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--wq-radius-full);
  background: var(--wq-neutral-100);
}

.time-tab {
  flex: 1;
  padding: 8px 0;
  border-radius: var(--wq-radius-full);
  border: none;
  background: transparent;
  color: var(--wq-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.15s ease;
}

.time-tab.active {
  background: var(--wq-primary);
  color: var(--wq-text-inverse);
  font-weight: var(--weight-semibold);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px 16px 0;
}

.stat-card {
  background: var(--wq-bg-card);
  border: 1px solid var(--wq-border);
  border-radius: var(--wq-radius-lg);
  padding: 12px;
  text-align: center;
}

.stat-card.success {
  background: var(--state-success-light);
  border-color: transparent;
}

.stat-card.info {
  background: var(--state-info-light);
  border-color: transparent;
}

.stat-card .stat-label {
  font-size: var(--text-xs);
  color: var(--wq-text-tertiary);
  margin-bottom: 4px;
}

.stat-card.success .stat-label,
.stat-card.info .stat-label {
  color: var(--wq-text-secondary);
}

.stat-card .stat-big {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--wq-text-primary);
}

.stat-card.success .stat-big {
  color: var(--state-success);
}

.stat-card.info .stat-big {
  color: var(--wq-primary);
}

.report-section {
  padding: 16px 16px 0;
}

.report-section .section-card {
  padding: 16px;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-title-row h2 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--wq-text-primary);
}

.completion-badge {
  font-size: var(--text-xs);
  padding: 2px 10px;
  border-radius: var(--wq-radius-full);
  background: var(--state-info-light);
  color: var(--wq-primary);
  font-weight: var(--weight-medium);
}

.report-section h2 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--wq-text-primary);
  margin-bottom: 12px;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  height: 120px;
}

.bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bar-label-top {
  font-size: 10px;
  color: var(--wq-text-tertiary);
}

.bar-fill {
  width: 100%;
  border-radius: var(--wq-radius-sm) var(--wq-radius-sm) 0 0;
  min-height: 4px;
  transition: height 0.3s ease;
}

.bar-fill.success {
  background: var(--state-success);
}

.bar-fill.primary {
  background: var(--wq-primary);
}

.bar-fill.warning {
  background: var(--state-warning);
}

.bar-fill.neutral {
  background: var(--wq-neutral-200);
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.chart-labels span {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: var(--wq-text-tertiary);
}

.kp-distribution {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kp-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kp-name {
  font-size: var(--text-xs);
  width: 64px;
  flex-shrink: 0;
  text-align: right;
  color: var(--wq-text-secondary);
}

.kp-bar-wrap {
  flex: 1;
  height: 20px;
  border-radius: var(--wq-radius-full);
  overflow: hidden;
  background: var(--wq-primary-lightest);
  position: relative;
}

.kp-bar-fill {
  height: 100%;
  border-radius: var(--wq-radius-full);
  background: var(--wq-primary);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  transition: width 0.5s ease;
}

.kp-bar-text {
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: white;
}

.error-reason-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.error-reason-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.error-reason-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.error-reason-name {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--wq-text-primary);
}

.error-reason-count {
  font-size: var(--text-xs);
  color: var(--wq-text-secondary);
}

.error-reason-percent {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--wq-text-primary);
  width: 40px;
  text-align: right;
}

.trend-subtitle {
  font-size: var(--text-xs);
  color: var(--wq-text-tertiary);
  margin-bottom: 12px;
  margin-top: -8px;
}

.trend-chart {
  position: relative;
  height: 80px;
}

.trend-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.trend-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

.trend-labels span {
  font-size: 10px;
  color: var(--wq-text-tertiary);
}

.trend-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.trend-text {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.trend-text.good {
  color: var(--state-success);
}

.trend-text.bad {
  color: var(--state-error);
}

.kp-trend-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kp-trend-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kp-trend-name {
  width: 80px;
  font-size: var(--text-xs);
  color: var(--wq-text-secondary);
  font-weight: var(--weight-medium);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kp-trend-chart {
  flex: 1;
  height: 32px;
  position: relative;
}

.kp-trend-chart svg {
  width: 100%;
  height: 100%;
}

.kp-trend-value {
  width: 40px;
  text-align: right;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

.kp-trend-value.up {
  color: var(--state-success);
}

.kp-trend-value.down {
  color: var(--state-error);
}