.config-center {
  display: grid;
  gap: 18px;
}

.config-hero,
.config-tabs,
.config-toolbar,
.config-builder,
.config-grid,
.config-kpis {
  width: 100%;
}

.config-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  background: #d8e1ea;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.config-hero h2 {
  margin: 0;
  font-size: 1.65rem;
}

.config-hero p {
  color: var(--color-text-secondary);
}

.config-hero-actions,
.config-form-actions,
.item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.config-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 2px;
}

.config-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  color: var(--color-text-primary);
  background: #d6dfe8;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
  white-space: nowrap;
}

.config-tab.active {
  color: #fff;
  background: #0b79d7;
  box-shadow: var(--shadow-blue);
}

.config-tab strong {
  min-width: 22px;
  padding: 2px 7px;
  background: rgba(255,255,255,.24);
  border-radius: 999px;
}

.config-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.config-kpi {
  padding: 18px;
  background: #d8e1ea;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.config-kpi span,
.config-kpi small {
  display: block;
  color: var(--color-text-secondary);
}

.config-kpi strong {
  display: block;
  margin: 8px 0;
  color: var(--color-primary);
  font-size: 1.7rem;
}

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

.config-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, auto);
  gap: 12px;
  align-items: end;
  padding: 16px;
}

.config-table-card {
  overflow-x: auto;
}

.config-table td strong,
.config-table td small {
  display: block;
}

.config-builder {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 16px;
  align-items: start;
}

.config-form {
  padding: 0;
}

.config-step-grid {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.config-step-grid fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 16px;
  background: #d5dee8;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
}

.config-step-grid legend {
  padding: 0 8px;
  font-weight: 800;
}

.config-step-grid label,
.config-toolbar label,
.config-grid label {
  display: grid;
  gap: 6px;
  color: var(--color-text-secondary);
  font-weight: 700;
}

.config-step-grid input,
.config-step-grid select,
.config-step-grid textarea,
.config-grid textarea,
.config-toolbar select {
  width: 100%;
}

.config-validation,
.config-form-actions {
  padding: 0 18px 18px;
}

.form-success,
.form-error,
.form-warning {
  margin: 6px 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}

.form-success { background: #cce9da; color: #236a4c; }
.form-error { background: #efc9c8; color: #9b2f2c; }
.form-warning { background: #efd9b8; color: #875516; }

.config-preview {
  max-height: calc(100vh - 150px);
  overflow: auto;
}

.config-preview pre {
  margin: 0;
  padding: 16px;
  white-space: pre-wrap;
  color: var(--color-text-secondary);
  font-size: .78rem;
}

.config-list,
.config-catalog-list,
.config-recommendations {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.config-mini-row,
.config-catalog-list article,
.config-recommendations p {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: #d5dee8;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
}

.config-mini-row {
  grid-template-columns: minmax(160px, .8fr) minmax(0, 1fr) auto;
  align-items: center;
}

.config-mini-row span,
.config-mini-row code,
.config-catalog-list span {
  color: var(--color-text-secondary);
  font-size: .85rem;
}

.config-catalog-list {
  max-height: 520px;
  overflow: auto;
}

.coverage-meter {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.coverage-meter strong {
  color: var(--color-primary);
  font-size: 2rem;
}

.coverage-meter div {
  height: 14px;
  overflow: hidden;
  background: #ccd6e0;
  border-radius: 999px;
  box-shadow: var(--shadow-pressed);
}

.coverage-meter i {
  display: block;
  height: 100%;
  background: #0b79d7;
  border-radius: inherit;
}

.empty-state.compact {
  padding: 18px;
}

@media (max-width: 1024px) {
  .config-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .config-grid,
  .config-builder {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .config-hero,
  .config-toolbar {
    grid-template-columns: 1fr;
    display: grid;
  }

  .config-kpis,
  .config-step-grid fieldset {
    grid-template-columns: 1fr;
  }

  .config-mini-row {
    grid-template-columns: 1fr;
  }
}