.settings-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-control-gap-md);
  margin-bottom: var(--ui-sidebar-title-gap);
}

.settings-header .sidebar__title { margin: 0; }

.settings-header__menu { position: relative; }

.settings-menu-button {
  color: var(--ui-icon-color);
  font-size: calc(var(--ui-font-size-action-glyph) + 2px);
  line-height: 1;
  cursor: pointer;
}

.settings-menu-button:hover,
.settings-menu-button[aria-expanded="true"] { color: var(--ui-accent); }

.settings-actions-menu {
  position: absolute;
  top: calc(100% + var(--space-3));
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 144px;
  padding: var(--ui-floating-padding-sm);
  border-radius: var(--ui-radius-field);
  box-shadow: var(--ui-shadow-nested-floating);
}

.settings-actions-menu[hidden] { display: none; }

.settings-actions-menu__item {
  min-height: var(--ui-field-height-sm);
  padding: var(--space-4) var(--space-6);
  border: 0;
  border-radius: var(--ui-radius-field);
  background: transparent;
  color: var(--ui-value-primary);
  font: inherit;
  font-size: var(--ui-font-size-control);
  text-align: start;
  cursor: pointer;
}

.settings-actions-menu__item:hover,
.settings-actions-menu__item:focus-visible {
  background: color-mix(in srgb, var(--ui-accent) 9%, transparent);
  color: var(--ui-value-primary);
}

.sidebar--settings .control-section {
  display: grid;
  row-gap: var(--ui-panel-item-gap);
}

.sidebar--settings .control-section__title {
  margin-bottom: 0;
}

.setting-subsection {
  display: grid;
  row-gap: 0;
  margin: 0;
  padding-inline-start: var(--ui-section-content-indent);
}

.setting-subsection[open] {
  row-gap: var(--ui-panel-item-gap);
}

.setting-subsection > summary {
  min-height: var(--ui-panel-row-height);
  margin: 0 calc(0px - var(--ui-section-content-indent));
  color: var(--ui-subsection-title-color);
  font-size: var(--ui-subsection-title-font-size);
  font-weight: var(--ui-subsection-title-font-weight);
  line-height: var(--ui-panel-row-height);
  cursor: pointer;
}
.setting-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  align-items: center;
  min-height: var(--ui-panel-row-height);
  gap: var(--ui-control-gap-lg);
  margin-bottom: 0;
}
.setting-field--select { grid-template-columns: minmax(0, 1fr) minmax(112px, 44%); }
.setting-field__label {
  min-width: 0;
  color: var(--ui-field-label-color);
  font-size: var(--ui-field-label-font-size);
  font-weight: var(--ui-field-label-font-weight);
  line-height: var(--ui-field-label-line-height);
}
.setting-field--range {
  grid-template-columns: auto minmax(52px, 1fr) 32px;
  gap: var(--ui-control-gap-md);
}
.setting-field--range .setting-field__label { grid-column: 1; grid-row: 1; }
.setting-field--range input { grid-column: 2; grid-row: 1; align-self: center; }
.setting-field__value {
  grid-column: 3;
  grid-row: 1;
  color: var(--ui-field-value-color);
  font-size: var(--ui-field-value-font-size);
  font-weight: var(--ui-field-value-font-weight);
  text-align: end;
}
.setting-field input[type="color"] {
  padding: 0;
  overflow: hidden;
}
.setting-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.setting-field input[type="color"]::-webkit-color-swatch { border: 0; }
.setting-field input[type="color"]::-moz-color-swatch { border: 0; }

.setting-field--segmented {
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--ui-control-gap-md);
  padding-block: var(--ui-control-gap-md);
}
.setting-segmented-options {
  display: grid;
  grid-template-columns: repeat(var(--setting-segment-count, 3), minmax(0, 1fr));
  gap: var(--ui-control-gap-sm);
}
.setting-segmented-option {
  min-width: 0;
  min-height: var(--ui-field-height-md);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--ui-radius-field);
  background: var(--ui-control-bg);
  color: var(--ui-field-label-color);
  font-size: var(--ui-font-size-caption);
  cursor: pointer;
}
.setting-segmented-option:hover { color: var(--ui-value-primary); }
.setting-segmented-option[aria-pressed="true"] { background: var(--ui-accent); color: var(--ui-text-on-accent); }
.setting-segmented-option--icon {
  display: grid;
  place-items: center;
  padding: 0;
}
.setting-segmented-option__icon {
  display: block;
  width: var(--ui-tool-icon-size);
  height: var(--ui-tool-icon-size);
}
.setting-segmented-option--icon:disabled { color: var(--ui-value-disabled); opacity: 1; }

.setting-action {
  --ui-quiet-button-color: var(--ui-danger-muted);
  --ui-quiet-button-hover-color: var(--ui-danger-muted);
}

.setting-action:disabled { color: var(--ui-value-disabled); cursor: default; opacity: 1; }

.setting-action-confirmation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--ui-control-gap-sm);
  min-height: var(--ui-panel-row-height);
  color: var(--ui-field-label-color);
  font-size: var(--ui-font-size-caption);
}
.setting-action-confirmation[hidden] { display: none; }
.setting-action-confirmation__confirm { color: var(--ui-danger); }

.settings-footer {
  display: grid;
  gap: var(--ui-control-gap-md);
  margin-top: var(--ui-panel-section-gap);
}
.settings-footer__reset-row {
  display: flex;
  align-items: center;
  gap: var(--ui-control-gap-md);
}
.settings-footer__reset-row { justify-content: space-between; }
.settings-footer .ui-quiet-button--settings-footer {
  width: auto;
  margin: 0;
  border: 0;
}
.settings-customization-state,
.settings-import-status {
  color: var(--ui-panel-meta-color);
  font-size: var(--ui-font-size-micro);
  line-height: var(--ui-line-height-summary);
}
.settings-customization-state[hidden],
.settings-import-status:empty { display: none; }
.settings-reset-button:disabled { color: var(--ui-value-disabled); opacity: .32; }
.settings-reset-button.is-active { opacity: 1; }