.notification-container { position: fixed; z-index: 1000; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
.notification-toast { position: relative; width: 100%; padding: 12px 14px; border: 1px solid rgba(22, 199, 179, .45); border-radius: 8px; color: #dffaf6; background: rgba(18, 55, 70, .86); box-shadow: 0 10px 24px rgba(0, 0, 0, .26); backdrop-filter: blur(14px); font-size: 13px; pointer-events: none; animation: user-toast-in .2s ease-out forwards; }
.notification-toast.is-error { border-color: rgba(229, 105, 103, .55); color: #ffe4e1; background: rgba(69, 30, 43, .88); }
.notification-toast.is-warning { border-color: rgba(235, 180, 77, .55); color: #fff0c9; background: rgba(67, 54, 28, .88); }
@keyframes user-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }