/* Toasts, connection banner, confetti canvas */
/* ---------- overlays ---------- */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;display:grid;gap:8px;justify-items:center;pointer-events:none;width:calc(100% - 32px)}
.toast{padding:12px 18px;border-radius:14px;background:var(--text);color:var(--bg);font-weight:500;font-size:14px;box-shadow:var(--shadow-lg);animation:fadeUp .4s var(--ease) both;max-width:100%}
.toast.out{animation:rollOut .4s var(--ease) both}
.banner{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .3s both;padding:16px}
.banner .card{padding:28px;display:grid;gap:14px;justify-items:center;text-align:center;max-width:360px;width:100%}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--surface-3);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:95}