.settings-page {
  display: grid;
  gap: 20px;
}

.settings-page__header {
  margin-bottom: 0;
}

.settings-page__notice {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  color: var(--text);
  font-size: 15px;
}

.settings-page__notice--hidden {
  display: none;
}

.settings-page__content {
  display: grid;
  gap: 20px;
}

.settings-section {
  display: grid;
  gap: 16px;
}

.settings-section__header {
  margin-bottom: 0;
}

.settings-section--soft {
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
}

.settings-form {
  display: grid;
  gap: 16px;
}

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

.settings-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.settings-inline-message {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 14px;
}

.settings-inline-message--hidden {
  display: none;
}

.settings-inline-message--error {
  background: #fff4f4;
  border-color: #f2caca;
  color: #b13a3a;
}

.settings-inline-message--success {
  background: #eefaf3;
  border-color: #cdecd9;
  color: #1f7f4b;
}

.settings-meta,
.settings-callout {
  color: var(--muted);
  font-size: 13px;
}

.settings-form code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.settings-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.settings-callout {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
}

.settings-roadmap {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  color: var(--text);
}

@media (max-width: 920px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .settings-actions {
    justify-content: stretch;
  }

  .settings-actions .button {
    width: 100%;
  }
}

:root[data-theme='dark'] .settings-inline-message--error {
  background: rgba(118, 32, 32, 0.22);
  border-color: rgba(235, 106, 106, 0.35);
  color: #ffb1b1;
}

:root[data-theme='dark'] .settings-inline-message--success {
  background: rgba(23, 95, 59, 0.24);
  border-color: rgba(88, 202, 138, 0.28);
  color: #9de4bd;
}