.v23-settings {
  display: grid;
  gap: 1rem;
}

.v23-settings-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--v23-color-border, #ccd4ce);
}

.v23-settings-header :where(.eyebrow, h1, p),
.v23-settings-panel :where(h2, p),
.v23-settings-definitions {
  margin: 0;
}

.v23-settings-header h1 {
  margin-block: 0.15rem;
  font-size: 1.75rem;
}

.v23-settings-note {
  color: var(--v23-color-text-muted, #526159);
  font-size: 0.875rem;
}

.v23-settings-refresh {
  min-block-size: 2.25rem;
  padding-inline: 0.75rem;
  color: var(--v23-color-text, #1f2924);
  border: 1px solid var(--v23-color-border, #aeb9b1);
  border-radius: 0.2rem;
  background: var(--v23-color-surface, #fff);
  font-weight: 700;
  cursor: pointer;
}

.v23-settings-refresh:hover {
  background: var(--v23-color-surface-subtle, #edf1ed);
}

.v23-settings-refresh:focus-visible,
.v23-settings-button:focus-visible,
.v23-settings-input:focus-visible,
.v23-settings-select:focus-visible,
.v23-settings-console-link:focus-visible {
  outline: 2px solid var(--v23-color-accent, #087c70);
  outline-offset: 2px;
}

.v23-settings-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

.v23-settings-panel {
  padding: 0.85rem;
  border: 1px solid var(--v23-color-border, #ccd4ce);
  background: var(--v23-color-surface, #fff);
}

.v23-settings-panel h2 {
  margin-block-end: 0.65rem;
  font-size: 1rem;
}

.v23-settings-definitions {
  display: grid;
}

.v23-settings-definition {
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
  gap: 0.75rem;
  padding-block: 0.42rem;
  border-block-start: 1px solid var(--v23-color-border-subtle, #e2e7e3);
}

.v23-settings-definition:first-child {
  border-block-start: 0;
}

.v23-settings-definition :where(dt, dd) {
  margin: 0;
}

.v23-settings-definition dt {
  color: var(--v23-color-text-muted, #526159);
  font-size: 0.82rem;
  font-weight: 700;
}

.v23-settings-table-scroll {
  overflow-x: auto;
  margin-block-start: 0.65rem;
}

.v23-settings-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.v23-settings-table :where(th, td) {
  padding: 0.55rem 0.6rem;
  border-block-start: 1px solid var(--v23-color-border-subtle, #e2e7e3);
  text-align: start;
  vertical-align: top;
}

.v23-settings-table thead th {
  color: var(--v23-color-text-muted, #526159);
  border-block-start: 0;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.v23-settings-table tbody th {
  font-weight: 700;
}

.v23-settings-detail,
.v23-settings-version {
  display: block;
  margin-block-start: 0.2rem;
  color: var(--v23-color-text-muted, #526159);
  font-size: 0.75rem;
  font-weight: 400;
}

.v23-settings-action,
.v23-settings-user-action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-inline-size: 15rem;
}

.v23-settings-user-form {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(8rem, auto) minmax(8rem, auto) auto minmax(8rem, 1fr);
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.8rem;
  padding: 0.65rem;
  border: 1px solid var(--v23-color-border-subtle, #e2e7e3);
  background: var(--v23-color-surface-subtle, #f7f9f7);
}

.v23-settings-input,
.v23-settings-select {
  min-block-size: 2.2rem;
  max-inline-size: 100%;
  padding-inline: 0.55rem;
  color: var(--v23-color-text, #1f2924);
  border: 1px solid var(--v23-color-border, #aeb9b1);
  border-radius: 0.2rem;
  background: var(--v23-color-surface, #fff);
  font: inherit;
}

.v23-settings-secret-input {
  inline-size: min(18rem, 100%);
}

.v23-settings-button {
  min-block-size: 2.2rem;
  padding-inline: 0.65rem;
  color: #fff;
  border: 1px solid #075f57;
  border-radius: 0.2rem;
  background: #075f57;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.v23-settings-button:hover {
  background: #064b45;
}

.v23-settings-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.v23-settings-console-link {
  color: #075f57;
  font-size: 0.8rem;
  font-weight: 700;
}

.v23-settings-feedback {
  min-block-size: 1.1rem;
  color: var(--v23-color-text-muted, #526159);
  font-size: 0.75rem;
}

.v23-settings-feedback--success {
  color: #075f57;
}

.v23-settings-feedback--error {
  color: #8a2b22;
}

.v23-settings-status {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--v23-color-border, #ccd4ce);
  border-radius: 999px;
  color: var(--v23-color-text-muted, #526159);
  background: var(--v23-color-surface-subtle, #edf1ed);
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
}

.v23-settings-status--ready,
.v23-settings-status--configured,
.v23-settings-status--active {
  color: #075f57;
  border-color: #91c3b9;
  background: #edf8f5;
}

.v23-settings-status--error,
.v23-settings-status--unhealthy,
.v23-settings-status--suspended {
  color: #8a2b22;
  border-color: #d8aaa5;
  background: #fff1ef;
}

.v23-settings-status--incomplete,
.v23-settings-status--disabled {
  color: #765b09;
  border-color: #d6c47e;
  background: #fff9df;
}

@media (max-width: 48rem) {
  .v23-settings-header {
    align-items: stretch;
    flex-direction: column;
  }

  .v23-settings-summary {
    grid-template-columns: 1fr;
  }

  .v23-settings-definition {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .v23-settings-user-form {
    grid-template-columns: 1fr;
  }

  .v23-settings-action,
  .v23-settings-user-action {
    min-inline-size: 12rem;
  }
}