/* ---------- Modal ---------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4,4,8,.72);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: var(--sp-4);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease);
}
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.modal {
  width: min(440px, 100%);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  padding: var(--sp-6);
  transform: translateY(10px) scale(.985);
  transition: transform .22s var(--ease);
}
.modal-backdrop.is-open .modal { transform: none; }
.modal h3 { font-size: var(--step-2); margin-bottom: .5rem; }
.modal p { color: var(--text-muted); font-size: var(--step-0); }
.modal-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.modal-actions .btn { flex: 1; }
.modal-close {
  position: absolute; top: 12px; right: 14px;
  color: var(--text-faint); font-size: 1.2rem; line-height: 1; padding: .3rem;
}
.modal-wrap { position: relative; }

/* ---------- Toasts ---------------------------------------------------- */
.toast-stack {
  position: fixed; z-index: 300;
  bottom: var(--sp-5); right: var(--sp-5);
  display: grid; gap: .55rem; justify-items: end;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: .6rem;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--r-md);
  padding: .7rem 1rem;
  font-size: var(--step--1); font-weight: 600;
  box-shadow: var(--shadow-3);
  animation: toast-in .24s var(--ease);
  max-width: min(360px, calc(100vw - 2.5rem));
}
.toast.is-out { animation: toast-out .2s var(--ease) forwards; }
.toast .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.toast.ok    .dot { background: var(--ok); }
.toast.warn  .dot { background: var(--warn); }
.toast.error .dot { background: var(--danger); }
@keyframes toast-in  { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(6px); } }

@media (max-width: 640px) {
  .toast-stack { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); justify-items: stretch; }
}