/* Approved option 1: compact white confirmation, green accent; no layout shifts. */
.bk-save-feedback {
  position: fixed; inset: max(76px, calc(env(safe-area-inset-top, 0px) + 16px)) 20px auto auto;
  width: min(370px, calc(100vw - 32px)); margin: 0; padding: 0; border: 0;
  background: transparent; overflow: visible; color: #12315a; z-index: 2147483000;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
  font-family: inherit; font-size: 14px; text-align: left;
}
.bk-save-feedback::backdrop { background: transparent; pointer-events: none; }
.bk-save-toast {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 28px;
  align-items: start; gap: 10px; padding: 17px 12px 20px 16px;
  background: #fff; border: 1px solid #d9e9e2; border-left: 4px solid #0b9962;
  border-radius: 13px; box-shadow: 0 8px 26px #17345424;
  pointer-events: auto; animation: bk-save-in 220ms ease-out both;
}
.bk-save-check { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #ddf6e9; color: #008553; font: 700 23px/1 Arial,sans-serif; }
.bk-save-copy { min-width: 0; overflow-wrap: anywhere; }
.bk-save-copy strong { display: block; color: #12315a; font-size: 14px; line-height: 1.4; font-weight: 700; }
.bk-save-copy p { margin: 4px 0 0; color: #49617d; font-size: 12px; line-height: 1.4; }
.bk-save-close { appearance: none; min-width: 28px; min-height: 28px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #49617d; font: 23px/1 Arial,sans-serif; cursor: pointer; }
.bk-save-close:hover { background: #eef4f8; }
.bk-save-close:focus-visible { outline: 2px solid #276ef1; outline-offset: 2px; }
.bk-save-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #e7efeb; overflow: hidden; border-radius: 0 0 10px 10px; }
.bk-save-progress i { display: block; width: 100%; height: 100%; background: #0b9962; transform-origin: left; }
.bk-save-toast.bk-save-leaving { animation: bk-save-out 180ms ease-in both; }
@keyframes bk-save-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bk-save-out { to { opacity: 0; transform: translateX(12px); } }
@media (max-width: 600px) {
  .bk-save-feedback { inset: max(12px, env(safe-area-inset-top, 0px)) 12px auto 12px; width: auto; }
  .bk-save-close { min-width: 32px; min-height: 32px; }
  .bk-save-toast { grid-template-columns: 36px minmax(0, 1fr) 32px; }
}
@media (prefers-reduced-motion: reduce) { .bk-save-toast, .bk-save-toast.bk-save-leaving { animation: none; } }