.pa .toast {
  position:fixed; z-index:60; left:50%; transform:none; margin-left:-170px; width:340px;
  max-width:calc(100% - 24px); padding:12px 16px; border-radius:12px; background:var(--toast-bg);
  color:var(--toast-fg); font-size:13px; text-align:center; box-shadow:var(--shadow-md);
  animation:pa-fade-in .18s ease both; bottom:auto; top:76px;
}
.toast.undo .toast-txt { flex:1; min-width:0; overflow-wrap:anywhere; }
/* toasts */
.toasts {
  position:fixed; z-index:60; top:76px; left:50%; transform:translateX(-50%); width:min(380px, calc(100% - 24px));
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.pa .toasts .toast { position:static; margin:0; width:auto; max-width:none; pointer-events:auto; }
.toasts .toast.err { background:var(--danger-bg); color:var(--danger-fg); }
/* undo toast: message plus "Desfazer"; the button keeps the toast's own colours, and its focus ring
   uses the toast foreground so it shows on both the light and the dark toast */
.pa .toasts .toast.undo { display:flex; align-items:center; gap:12px; text-align:left; padding:8px 8px 8px 16px; position:relative; overflow:hidden; }
.toast-act {
  flex:none; border:0; background:transparent; color:inherit; font:inherit; font-weight:700;
  text-decoration:underline; text-underline-offset:3px; min-height:36px; padding:0 10px; border-radius:8px;
  cursor:pointer;
}
.toast-act:hover { text-decoration-thickness:2px; }
.pa .toast-act:focus-visible { outline-color:var(--toast-fg); }
.toast-sub { display:block; margin-top:2px; font-size:12px; opacity:.8; font-variant-numeric:tabular-nums; }
.toast-bar {
  position:absolute; left:0; right:0; bottom:0; height:3px; background:currentColor; opacity:.55;
  transform-origin:left center; transition:transform .25s linear;
}
@container (max-width: 719px) {
  .pa .toast { left:12px; right:12px; margin-left:0; width:auto; }
}
@media (prefers-reduced-motion: reduce) {
  .toast-bar { transition:none; }
}