#notifications-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notification {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background-color: var(--success-light, #d1fae5);
    color: var(--success-dark, #065f46);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-width: 300px;
    animation: slideIn 0.3s ease-out, fadeOut 0.3s ease-in 2.7s forwards;
}

.notification-warning {
    background-color: var(--warning-light, #fef3c7);
    color: var(--warning-dark, #92400e);
}

.notification-error {
    background-color: var(--error-light, #fee2e2);
    color: var(--error-dark, #b91c1c);
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}