.save-feedback {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 12000;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(420px, calc(100vw - 36px));
  padding: 16px 18px;
  border: 1px solid #add6c1;
  border-left: 5px solid #25835a;
  border-radius: 8px;
  background: #f2fcf6;
  color: #154d32;
  box-shadow: 0 8px 28px rgb(12 39 61 / 20%);
  font-size: 15px;
  line-height: 1.4;
}
.save-feedback strong, .save-feedback span:not(.save-feedback-icon) { display: block; }
.save-feedback strong { margin-bottom: 3px; color: inherit; font-size: 17px; }
.save-feedback-icon { flex: 0 0 auto; font-size: 22px; font-weight: 700; }
.save-feedback button {
  margin: -6px -7px 0 auto;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 24px;
  line-height: 1;
  box-shadow: none;
}
.save-feedback.is-pending { background: #edf6ff; color: #153f6d; border-color: #a9c8e8; border-left-color: #3979b4; }
.save-feedback.is-delayed { background: #fff9eb; color: #714808; border-color: #edd29a; border-left-color: #b88021; }
html[data-theme="dark"] .save-feedback { background: #143529; color: #edfff4; border-color: #3a765d; }
html[data-theme="dark"] .save-feedback.is-pending { background: #16334d; color: #eef7ff; border-color: #416f97; }
html[data-theme="dark"] .save-feedback.is-delayed { background: #43351b; color: #fff3d6; border-color: #98743b; }
@media (max-width: 600px) { .save-feedback { top: 10px; right: 10px; width: calc(100vw - 20px); } }