.report-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.report-hero > div { display: flex; align-items: center; gap: 16px; }
.report-hero h2 { margin: 4px 0 5px; font-size: 24px; }
.report-hero p:last-child { margin: 0; color: var(--muted); font-size: 12px; }

.report-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #087e72;
  background: #e7f8f4;
  font-size: 24px;
}

.report-download-all,
.report-ready button {
  min-height: 45px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #07877a;
  font-weight: 800;
}

.report-form {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 16px;
}

.report-config-card { min-height: 250px; }
.report-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 22px; }
.report-field-grid label { display: grid; gap: 7px; color: #61718a; font-size: 11px; font-weight: 700; }
.report-field-grid select,
.report-field-grid input {
  width: 100%;
  height: 45px;
  padding: 0 13px;
  border: 1px solid #dce4ee;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.report-full-field { grid-column: 1 / -1; }
.report-form-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.report-form-actions p { margin: 0; color: var(--muted); font-size: 11px; }
.report-form-actions > div { display: flex; gap: 9px; }
.report-csv-button { color: #52627a; border-color: #dce4ee; }

.report-ready {
  margin-top: 14px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #a9e6d2;
  border-radius: 13px;
  background: #eafaf4;
  color: #08745c;
  font-size: 12px;
}
.report-ready[hidden], .report-pagination[hidden] { display: none !important; }

.report-pagination {
  margin-top: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.report-pagination button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #65758a; }
.report-pagination button:disabled { opacity: .35; cursor: default; }

.report-preview {
  margin-top: 14px;
  min-height: 420px;
  padding: 24px;
  display: grid;
  place-items: start center;
  border-radius: 18px;
  background: #dfe6ef;
  overflow: auto;
}
.report-preview img { width: min(900px, 100%); height: auto; display: block; background: #fff; box-shadow: 0 18px 45px rgba(28, 46, 73, .15); }
.report-preview-empty { place-self: center; color: #77869a; }

@media (max-width: 1000px) {
  .report-form { grid-template-columns: 1fr; }
  .report-form-actions { grid-column: auto; }
}

@media (max-width: 680px) {
  .report-hero, .report-form-actions, .report-ready { align-items: stretch; flex-direction: column; }
  .report-download-all { width: 100%; }
  .report-field-grid { grid-template-columns: 1fr; }
  .report-full-field { grid-column: auto; }
  .report-form-actions > div { flex-direction: column; }
  .report-preview { padding: 10px; }
}