.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: var(--space-lg); }
.modal-backdrop[hidden] { display: none !important; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; padding: var(--space-xl); }
.modal-close-btn { position: absolute; top: var(--space-md); right: var(--space-md); padding: var(--space-xs); color: var(--text-muted); }
.modal-close-btn:hover { color: var(--text-primary); }
.modal-close-btn svg { width: 20px; height: 20px; }
.toast-container { position: fixed; bottom: var(--space-lg); right: var(--space-lg); z-index: 10001; display: flex; flex-direction: column; gap: var(--space-sm); }
.toast { padding: var(--space-md) var(--space-lg); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: toastIn 0.3s var(--ease-out); }
.toast.success { border-left: 4px solid var(--emerald); }
.toast.error { border-left: 4px solid var(--rose); }
.toast.info { border-left: 4px solid var(--sky); }
.toast.warning { border-left: 4px solid var(--amber); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }