/* =============================================
   Laplapky Toast + Sparkle
   ============================================= */

/* ─────────────────────────────────────────────
   Toast notification
   ───────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(160%);
  z-index: var(--z-toast);
  background: var(--color-ink);
  color: var(--color-white);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-family);
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  transition: transform var(--ease-slow);
  pointer-events: none;
  visibility: hidden;
}
#toast.is-visible {
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}

/* ─────────────────────────────────────────────
   Sparkle burst particles
   ───────────────────────────────────────────── */
.spark-pop {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-spark);
  font-size: 20px;
  animation: sparkBurst .9s ease-out forwards;
  user-select: none;
}

@keyframes sparkBurst {
  0%   { opacity: 1; transform: translate(0, 0) scale(.4) }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.3) }
}