/* Toasts, Modal, Skeletons */
.toast-stack {
  position:fixed; z-index:80; left:50%; transform:translateX(-50%); width:min(calc(100% - 32px), 420px);
  bottom:calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;
}
body.in-play .toast-stack { bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
.toast-stack .toast {
  position:static; transform:none; left:auto; bottom:auto; pointer-events:auto;
  animation:toast-enter 260ms var(--ease) both;
}
.toast-stack .toast.is-leaving { animation:toast-exit 220ms var(--ease) forwards; }
.toast-success { border-color:var(--good) !important; box-shadow:none !important; }
.toast-error { border-color:var(--bad) !important; box-shadow:none !important; }
@keyframes toast-enter { from { opacity:0; transform:translateY(16px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes toast-exit { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(8px) scale(.96); } }

body.modal-open { overflow:hidden; }
.modal-backdrop {
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(0,0,0,.55); animation:modal-fade 180ms var(--ease);
}
.modal {
  width:min(100%, 480px); max-height:calc(100dvh - 32px); overflow:auto; padding:20px;
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius);
  display:flex; flex-direction:column; gap:12px; animation:modal-pop 220ms var(--ease);
}
.modal:focus { outline:none; }
.modal-title { margin:0; font-size:1.125rem; }
.modal-body { overflow-wrap:anywhere; }
.modal-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.modal .btn.danger { background:var(--bad); border-color:var(--bad); color:#fff; }
@keyframes modal-fade { from { opacity:0; } to { opacity:1; } }
@keyframes modal-pop { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }

.skeleton { display:grid; gap:12px; }
.sk-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.sk-tile, .sk-card, .sk-row { padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.sk-tile { display:grid; gap:10px; min-height:112px; }
.sk-row { display:flex; align-items:center; gap:12px; }
.sk-col { flex:1; display:grid; gap:8px; }
.sk-card { display:flex; align-items:center; gap:12px; min-height:64px; }
.sk { background:var(--surface-2); border-radius:var(--radius-sm); animation:sk-pulse 1.4s ease-in-out infinite; }
.sk-line { height:12px; width:100%; }
.sk-short { width:40%; } .sk-mid { width:65%; } .sk-grow { flex:1; } .sk-chip { width:56px; }
.sk-big { height:28px; width:50%; }
.sk-dot { width:36px; height:36px; border-radius:50%; flex:none; }
.sk-chart { height:140px; border-radius:var(--radius-md); }
@keyframes sk-pulse { 0%, 100% { opacity:1; } 50% { opacity:.45; } }
@media (prefers-reduced-motion: reduce) {
  .sk, .toast-stack .toast, .modal, .modal-backdrop { animation:none !important; }
}