.report-page {
  --app-accent: #55d7ff;
  --app-accent-rgb: 85, 215, 255;
  --app-accent-ink: #04161c;
  --app-bg: #081118;
  --app-sidebar: #0d1822;
  --app-panel: #111f2b;
  --app-panel-strong: #182b39;
}

.report-period { flex: 0 1 190px; }
.report-detail { align-self: start; border-top: 3px solid var(--app-accent); }
.report-run { width: 100%; margin: 22px 0 12px; }
.report-pipeline,
.report-history { margin-top: 18px; }

.report-pipeline ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-pipeline li {
  position: relative;
  display: flex;
  min-height: 110px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.09), transparent);
}

.report-pipeline li:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -11px;
  z-index: 2;
  color: var(--app-accent);
  content: "→";
  transform: translateY(-50%);
}

.report-pipeline li > span { color: var(--app-accent); font-weight: 900; }
.report-pipeline strong,
.report-pipeline small { display: block; }
.report-pipeline small { color: var(--app-muted); }
.report-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

@media (max-width: 900px) {
  .report-pipeline ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-pipeline li::after { display: none; }
}

@media (max-width: 520px) {
  .report-pipeline ol { grid-template-columns: 1fr; }
}