{% if toast %}
<div x-data="{show: true}" x-show="show"
     x-transition:enter="transition ease-out duration-200"
     x-transition:enter-start="opacity-0 -translate-y-4"
     x-transition:enter-end="opacity-100 translate-y-0"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100 translate-y-0"
     x-transition:leave-end="opacity-0 -translate-y-4"
     x-init="setTimeout(()=>{ show=false; setTimeout(()=>$el.remove(), 300); }, 4000)"
     style="position:fixed; top:24px; left:50%; transform:translateX(-50%); z-index:9999; pointer-events:none;">
{% endif %}
{% if ok %}
<span style="font-size:13px; color:#fff; padding:8px 14px;
             border-radius:var(--rad); background:#16a34a;
             display:inline-flex; align-items:center; gap:6px;
             box-shadow:0 2px 8px rgba(0,0,0,.4);">
  <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-check"></use></svg>
  {{ msg }}
</span>
{% else %}
<span style="font-size:13px; color:#fff; padding:8px 14px;
             border-radius:var(--rad); background:#dc2626;
             display:inline-flex; align-items:center; gap:6px;
             box-shadow:0 2px 8px rgba(0,0,0,.4);">
  <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-close"></use></svg>
  {{ msg }}
</span>
{% endif %}
{% if toast %}</div>{% endif %}