:root {
  --chemryttga-page-max: 1120px;
  --chemryttga-bg: #f7fbff;
  --chemryttga-surface: #ffffff;
  --chemryttga-surface-soft: #f7fbff;
  --chemryttga-surface-muted: #edf4fb;
  --chemryttga-border: #d7e3ef;
  --chemryttga-border-strong: #c5d4e5;
  --chemryttga-text: #12304d;
  --chemryttga-text-soft: #59718a;
  --chemryttga-primary: #0f6dbb;
  --chemryttga-primary-strong: #2c7fd1;
  --chemryttga-primary-soft: #eff6ff;
  --chemryttga-accent: #d97706;
  --chemryttga-accent-soft: #fffbeb;
  --chemryttga-success: #1f8b4c;
  --chemryttga-warning: #b45309;
  --chemryttga-danger: #b23535;
  --chemryttga-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
  --chemryttga-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.06);
  --chemryttga-radius-lg: 1.5rem;
  --chemryttga-radius-md: 1rem;
  --chemryttga-radius-sm: 0.75rem;
}

.chemryttga-page,
.chemryttga-page *,
.chemryttga-page *::before,
.chemryttga-page *::after {
  box-sizing: border-box;
}

.chemryttga-page {
  color: var(--chemryttga-text);
  background:
    radial-gradient(circle at top right, rgba(15, 109, 187, 0.08), transparent 22%),
    radial-gradient(circle at left top, rgba(217, 119, 6, 0.08), transparent 18%),
    var(--chemryttga-bg);
  padding: 2rem 1.5rem 3rem;
}

.chemryttga-shell {
  width: min(100%, var(--chemryttga-page-max));
  max-width: var(--chemryttga-page-max);
  margin: 0 auto;
}

.chemryttga-hero-card,
.chemryttga-control-card,
.chemryttga-card {
  position: relative;
  overflow: hidden;
}

.chemryttga-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 1.5rem;
  align-items: start;
}

.chemryttga-results-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 1.5rem;
  align-items: start;
}

.chemryttga-results-main,
.chemryttga-results-side,
.chemryttga-side-stack,
.chemryttga-insight-sections,
.chemryttga-structure-readout,
.chemryttga-structure-tools {
  display: grid;
  gap: 1rem;
}

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

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

.chemryttga-card-actions,
.chemryttga-hero-actions,
.chemryttga-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.chemryttga-tabs {
  display: flex;
  gap: 0.75rem;
  padding: 0 1.5rem 1rem;
  border-bottom: 1px solid var(--chemryttga-border);
}

.chemryttga-tab-panels {
  position: relative;
}

.chemryttga-tab-panel {
  padding: 1.5rem;
}

.chemryttga-tab-panel[hidden] {
  display: none;
}

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

.chemryttga-molecule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.chemryttga-data-list {
  display: grid;
  gap: 0.75rem;
}

@media (max-width: 1080px) {
  .chemryttga-workspace-grid,
  .chemryttga-results-grid {
    grid-template-columns: 1fr;
  }

  .chemryttga-results-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 760px) {
  .chemryttga-page {
    padding: 1.5rem 1rem 2.25rem;
  }

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

  .chemryttga-hero-actions,
  .chemryttga-card-actions,
  .chemryttga-inline-actions,
  .chemryttga-tabs {
    flex-direction: column;
  }
}