/* The small notice public/js/fx.js shows (bottom centre). Works on every page style. */
.fx-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 200;
  display: grid; gap: 2px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 18px 12px 52px;
  border-radius: 16px; background: #0b0d12; color: #fff; text-decoration: none;
  font: 500 14px/1.35 Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .55);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .3s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cellipse cx='12' cy='17' rx='10' ry='12' fill='%23fde68a'/%3E%3Cpath d='M3 15 q4.5-4 9 0 t9 0' stroke='%23f472b6' stroke-width='2.5' fill='none'/%3E%3Cpath d='M3 20 q4.5-3 9 0 t9 0' stroke='%2360a5fa' stroke-width='2.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 16px center; background-size: 24px 30px;
}
.fx-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.fx-toast b { font-weight: 700; }
.fx-toast span { color: #c9cdd6; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .fx-toast { transition: opacity .2s; transform: translate(-50%, 0); } }