/* Settings modal polish, scoped only after JS identifies the settings modal */
.pp-settings-polished{
  color: #f7f4ff;
}

.pp-settings-polished .pp-settings-quick-controls{
  display: grid;
  gap: 14px;
  margin: 16px 0 18px;
}

.pp-settings-polished .pp-settings-quick-controls > *{
  margin: 0 !important;
  background: rgba(18,19,27,.72) !important;
  border: 1px solid color-mix(in srgb, var(--pp-accent, #7c2cff) 42%, rgba(255,255,255,.14)) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.pp-settings-polished select,
.pp-settings-polished input,
.pp-settings-polished .pp-settings-control{
  border-color: rgba(255,255,255,.14) !important;
}

html[data-pp-accent] .pp-settings-polished button:not([id*="Close"]):not([aria-label*="Close"]),
html[data-pp-accent] .pp-settings-polished .pp-settings-control[type="button"]{
  background: var(--pp-accent-action) !important;
  border-color: var(--pp-accent-border) !important;
  color: #fff !important;
}

html[data-pp-accent] .pp-settings-polished button[aria-pressed="true"],
html[data-pp-accent] .pp-settings-polished button.active,
html[data-pp-accent] .pp-settings-polished [data-active="true"]{
  background: var(--pp-accent-action) !important;
  border-color: var(--pp-accent-border) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pp-accent) 48%, transparent) !important;
}

html[data-pp-accent] .pp-settings-polished h2,
html[data-pp-accent] .pp-settings-polished h3,
html[data-pp-accent] .pp-settings-polished label,
html[data-pp-accent] .pp-settings-polished strong{
  color: #fff !important;
}

html[data-pp-accent] .pp-settings-polished .pp-settings-quick-controls label,
html[data-pp-accent] .pp-settings-polished .pp-settings-quick-controls [class*="label" i]{
  color: color-mix(in srgb, var(--pp-accent) 48%, #d9d2eb) !important;
}

html[data-pp-accent] .pp-settings-polished code,
html[data-pp-accent] .pp-settings-polished pre{
  color: color-mix(in srgb, var(--pp-accent) 35%, #f5d77a) !important;
}

/* Settings modal: make all sections match the top selector boxes */
.pp-settings-polished > div,
.pp-settings-polished section,
.pp-settings-polished .pp-settings-quick-controls > *{
  border-radius: 18px !important;
}

.pp-settings-polished section,
.pp-settings-polished .pp-settings-card,
.pp-settings-polished .pp-settings-quick-controls > *,
.pp-settings-polished div:has(> h3),
.pp-settings-polished div:has(> h2 + p){
  background: rgba(18,19,27,.70) !important;
  border: 1px solid color-mix(in srgb, var(--pp-accent, #7c2cff) 36%, rgba(255,255,255,.13)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.pp-settings-polished section,
.pp-settings-polished div:has(> h3){
  padding: 20px 22px !important;
  margin: 16px 0 !important;
}

.pp-settings-polished h2,
.pp-settings-polished h3{
  margin-top: 0 !important;
}

.pp-settings-polished label{
  display: block !important;
  margin: 16px 0 8px !important;
  color: rgba(245,242,255,.78) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.pp-settings-polished select,
.pp-settings-polished input:not([type="checkbox"]):not([type="radio"]),
.pp-settings-polished textarea{
  width: 100% !important;
  min-height: 58px !important;
  border-radius: 14px !important;
  background: rgba(12,14,18,.78) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
  padding: 0 18px !important;
  font-weight: 850 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.pp-settings-polished select:focus,
.pp-settings-polished input:focus,
.pp-settings-polished textarea:focus{
  outline: none !important;
  border-color: var(--pp-accent-border, #7c2cff) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pp-accent, #7c2cff) 26%, transparent) !important;
}

.pp-settings-polished button:not([id*="Close"]):not([aria-label*="Close"]){
  min-height: 60px !important;
  border-radius: 16px !important;
  margin-top: 12px !important;
  font-weight: 900 !important;
}

.pp-settings-polished pre,
.pp-settings-polished code,
.pp-settings-polished .device-id,
.pp-settings-polished [class*="device" i] code{
  display: block !important;
  border-radius: 14px !important;
  background: rgba(12,14,18,.50) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  padding: 14px 16px !important;
}