/* ============================================================
 * toast.css
 * ------------------------------------------------------------
 * Notificação flutuante ("toast") exibida ao apagar o
 * formulário, com barra de contagem regressiva e botão
 * "Desfazer". Controlada por js/clear-form.js.
 * ============================================================ */

  /* ---------- toast ---------- */
  .toast-stack{ position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 200; display:flex; flex-direction:column; gap:10px; align-items:center; width: 100%; max-width: 420px; padding: 0 16px; pointer-events:none; }
  .toast{ pointer-events:auto; width:100%; background: var(--ink); color:#fff; border-radius: 14px; box-shadow: var(--shadow-lg); padding: 13px 14px 11px; display:flex; flex-direction:column; gap:9px; opacity:0; transform: translateY(14px) scale(.98); transition: opacity .22s ease, transform .22s ease; }
  .toast.show{ opacity:1; transform: translateY(0) scale(1); }
  .toast.leaving{ opacity:0; transform: translateY(10px) scale(.97); }
  .toast-row{ display:flex; align-items:center; gap:10px; }
  .toast-icon{ width:26px; height:26px; border-radius:50%; background: rgba(224,57,63,.22); color:#ff8b8e; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .toast-icon svg{ width:14px; height:14px; }
  .toast-text{ flex:1; font-size: 13px; font-weight:600; line-height:1.35; }
  .toast-text small{ display:block; font-weight:500; font-size:11.5px; color: rgba(255,255,255,.6); margin-top:1px; }
  .toast-undo{ flex-shrink:0; background: rgba(255,255,255,.12); border:none; color:#fff; font-family: var(--sans); font-size: 12px; font-weight:700; padding: 7px 13px; border-radius: 9px; cursor:pointer; transition: background .15s ease, transform .08s ease; }
  .toast-undo:hover{ background: rgba(255,255,255,.2); }
  .toast-undo:active{ transform: scale(.94); }
  .toast-bar{ height:3px; border-radius:3px; background: rgba(255,255,255,.14); overflow:hidden; }
  .toast-bar-fill{ height:100%; width:100%; background: linear-gradient(90deg, #ff8b8e, var(--danger)); border-radius:3px; transform-origin:left; animation: toastCountdown 5s linear forwards; }
  @keyframes toastCountdown{ from{ transform: scaleX(1);} to{ transform: scaleX(0);} }