.middle-settings-entry {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  background: #f4f8fa;
  border: 1px solid #e8edef;
  border-radius: 13px;
}
.middle-settings-entry:focus-within { border-color: #b2c5c7; }
.middle-settings-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 54px 10px 12px;
  background: transparent;
  border: 0;
  border-radius: inherit;
  outline: none;
  color: #161d1f;
  font: 400 16px/24px system-ui, sans-serif;
}
.middle-settings-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #a33b2c; }
.middle-settings-save {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.middle-settings-save > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffe0d9;
  color: #823b2c;
  font-size: 18px;
}
.middle-settings-save:focus-visible { outline: 2px solid #006a65; outline-offset: 1px; }
.middle-settings-save:disabled { opacity: .4; cursor: default; }
.middle-settings-save[hidden], .middle-settings-feedback[hidden], .middle-settings-feedback:empty { display: none; }
.middle-settings-feedback {
  margin: 7px 3px 0;
  font: 400 12px/18px system-ui, sans-serif;
  color: #647174;
  overflow-wrap: anywhere;
}
.middle-settings-feedback--success { color: #006a65; }
.middle-settings-feedback--error { color: #a33b2c; }
.middle-settings-feedback--enter { animation: middle-settings-feedback-in .5s ease both; }
.middle-password-reset-action {
  min-height: 48px;
  padding: 12px 20px;
  font: 600 16px/24px system-ui, sans-serif;
}
.middle-blocked-users-row { min-height: 65px; }
.middle-blocked-users-row__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #ffe0d9;
  color: #a34b38;
}
.middle-blocked-users-row__icon > span { font-size: 20px; }
@keyframes middle-settings-feedback-in { from { opacity: 0; } to { opacity: 1; } }
.middle-settings-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: #dce1e3;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .16s;
}
.middle-settings-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  transition: transform .16s;
}
.middle-settings-switch:checked { background: #ff7e67; }
.middle-settings-switch:checked::before { transform: translateX(18px); }
.middle-settings-switch:focus-visible { outline: 2px solid #006a65; outline-offset: 3px; }
.middle-settings-switch:disabled { opacity: .5; cursor: wait; }
label:has(> .middle-settings-switch) { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .middle-settings-feedback--enter { animation: none; } }
@media (prefers-reduced-motion: reduce) { .middle-settings-switch, .middle-settings-switch::before { transition: none; } }