:root {
  --chemryttga-bg: #f4f7fb;
  --chemryttga-surface: #ffffff;
  --chemryttga-surface-alt: #eef3f8;
  --chemryttga-border: #d7e1ec;
  --chemryttga-border-strong: #bfd0e1;
  --chemryttga-text: #15324a;
  --chemryttga-muted: #607a92;
  --chemryttga-primary: #0f7b82;
  --chemryttga-primary-deep: #0b5f64;
  --chemryttga-accent: #ea9c2d;
  --chemryttga-success: #1f8b4c;
  --chemryttga-warning: #b16f00;
  --chemryttga-danger: #b23535;
  --chemryttga-shadow: 0 22px 56px rgba(21, 50, 74, 0.1);
  --chemryttga-radius-lg: 24px;
  --chemryttga-radius-md: 16px;
  --chemryttga-radius-sm: 12px;
  --chemryttga-content-width: 1120px;
}

.chemryttga-page {
  background:
    radial-gradient(circle at top right, rgba(15, 123, 130, 0.16), transparent 26%),
    radial-gradient(circle at left center, rgba(234, 156, 45, 0.12), transparent 22%),
    var(--chemryttga-bg);
  color: var(--chemryttga-text);
  padding: 36px 18px 56px;
}

.chemryttga-shell {
  margin: 0 auto;
  max-width: var(--chemryttga-content-width);
}

.chemryttga-top-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  align-items: start;
}

.chemryttga-results-stack {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

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

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

.chemryttga-inline-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.chemryttga-field--wide {
  grid-column: 1 / -1;
}

.chemryttga-action-row,
.chemryttga-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chemryttga-metrics-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chemryttga-data-list {
  display: grid;
  gap: 12px;
}

@media (max-width: 1100px) {
  .chemryttga-top-grid,
  .chemryttga-summary-grid,
  .chemryttga-inline-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .chemryttga-page {
    padding: 24px 12px 40px;
  }

  .chemryttga-fields,
  .chemryttga-metrics-grid {
    grid-template-columns: 1fr;
  }

  .chemryttga-action-row,
  .chemryttga-card-actions {
    flex-direction: column;
  }
}