/* Toast notification system */
.toast-container {
    position: fixed; top: calc(var(--safe-top, 0px) + 16px); left: 50%; transform: translateX(-50%);
    width: calc(100% - 32px); max-width: 448px; z-index: 10000;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    border-radius: var(--radius-md, 12px); box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    pointer-events: auto; animation: toastSlideIn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1);
    backdrop-filter: blur(10px); position: relative;
}
.toast.removing { animation: toastSlideOut 0.3s ease forwards; }
.toast-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.toast-message { flex: 1; font-size: 14px; font-weight: 500; line-height: 1.4; }
.toast-close { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; opacity: 0.6; cursor: pointer; border-radius: 50%; flex-shrink: 0; }
.toast-close:hover { opacity: 1; }

.toast-success { background: rgba(232, 245, 233, 0.95); border: 1px solid #A5D6A7; color: #2E7D32; }
.toast-success .toast-icon { background: #4CAF50; color: #fff; }
.toast-error { background: rgba(255, 235, 238, 0.95); border: 1px solid #EF9A9A; color: #C62828; }
.toast-error .toast-icon { background: #F44336; color: #fff; }
.toast-warning { background: rgba(255, 248, 225, 0.95); border: 1px solid #FFE082; color: #E65100; }
.toast-warning .toast-icon { background: #FF9800; color: #fff; }
.toast-info { background: rgba(227, 242, 253, 0.95); border: 1px solid #90CAF9; color: #1565C0; }
.toast-info .toast-icon { background: #2196F3; color: #fff; }

.toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 0 0 12px 12px; animation: toastProgress linear forwards; }
.toast-success .toast-progress { background: #4CAF50; }
.toast-error .toast-progress { background: #F44336; }
.toast-warning .toast-progress { background: #FF9800; }
.toast-info .toast-progress { background: #2196F3; }

@keyframes toastSlideIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastSlideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
@keyframes toastProgress { from { width: 100%; } to { width: 0%; } }