.settings-form {
  display: grid;
  gap: 16px;
}
.settings-section {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.settings-section h3 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 500;
}
.settings-list {
  display: grid;
  gap: 10px;
}
.stepper-row,
.toggle-row,
.range-setting {
  display: grid;
  gap: 8px;
}
.stepper-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}
.stepper {
  display: grid;
  grid-template-columns: 44px 76px 44px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stepper button {
  background: var(--surface-alt);
  color: var(--text-1);
}
.stepper strong {
  text-align: center;
  font-weight: 500;
}
.toggle-row {
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 44px;
}
.toggle-row input {
  width: 52px;
  height: 30px;
  min-height: 30px;
  accent-color: var(--accent);
}
.range-setting span,
.toggle-row span,
.stepper-row > span,
.sound-profile-setting > span {
  color: var(--text-1);
}
.sound-profile-setting {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.range-setting strong {
  color: var(--text-2);
  font-weight: 400;
}
.range-setting input {
  width: 100%;
  accent-color: var(--accent);
}
.sound-test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.sound-test-grid button,
.secondary-action {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text-1);
}
.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.segmented button {
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
}
.segmented button.is-active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow);
}
.data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.secondary-action { padding: 0 16px; }
@media (min-width: 768px) {
  .settings-form {
    display: block;
    column-count: 2;
    column-gap: 16px;
  }
  .settings-section {
    display: inline-block;
    width: 100%;
    margin: 0 0 16px;
    break-inside: avoid;
  }
  .sound-section {
    break-before: column;
  }
}