/* ----------------- toast ------------------ */
.toast-container { position: fixed; top: 14px; right: 14px; left: 14px; z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; max-width: 360px; width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 10px; padding: 10px 12px; animation: toast-in 0.25s ease-out; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.toast.closing { animation: toast-out 0.25s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }
.toast .toast-title { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 13px; }
.toast .toast-close { appearance: none; background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.toast .toast-body { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* ----------------- pull to refresh ------------------ */
.ptr { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: center; transform: translateY(-56px); opacity: 0; z-index: 40; pointer-events: none; }
.ptr.snap { transition: transform 0.25s ease, opacity 0.25s ease; }
.ptr-spinner { width: 26px; height: 26px; margin-top: 14px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; transform: rotate(var(--ptr-rot, 0deg)); }
.ptr.loading .ptr-spinner { animation: ptr-spin 0.7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }