.notification-container{position:fixed;top:80px;right:20px;z-index:9999;pointer-events:none}.notification{display:flex;align-items:center;min-width:300px;max-width:500px;margin-bottom:15px;padding:16px 20px;background:#fff;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.15);pointer-events:all;transform:translateX(400px);opacity:0;animation:slideIn .3s cubic-bezier(.68,-.55,.265,1.55) forwards;position:relative;overflow:hidden}.notification.removing{animation:slideOut .3s ease-in forwards}@keyframes slideIn{to{transform:translateX(0);opacity:1}}@keyframes slideOut{to{transform:translateX(400px);opacity:0}}.notification::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px}.notification.success::before{background:linear-gradient(135deg,#10b981 0,#34d399 100%)}.notification.error::before{background:linear-gradient(135deg,#ef4444 0,#f87171 100%)}.notification.warning::before{background:linear-gradient(135deg,#f59e0b 0,#fbbf24 100%)}.notification.info::before{background:linear-gradient(135deg,#3b82f6 0,#60a5fa 100%)}.notification-icon{flex-shrink:0;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-right:15px;font-size:20px}.notification.success .notification-icon{background:rgba(16,185,129,.1);color:#10b981}.notification.error .notification-icon{background:rgba(239,68,68,.1);color:#ef4444}.notification.warning .notification-icon{background:rgba(245,158,11,.1);color:#f59e0b}.notification.info .notification-icon{background:rgba(59,130,246,.1);color:#3b82f6}.notification-content{flex:1;margin-right:10px}.notification-title{font-weight:600;font-size:14px;color:#1f2937;margin-bottom:2px;text-transform:capitalize}.notification-message{font-size:14px;color:#6b7280;line-height:1.4}.notification-close{flex-shrink:0;background:0 0;border:none;color:#9ca3af;cursor:pointer;padding:5px;font-size:18px;transition:all .2s;border-radius:6px}.notification-close:hover{background:rgba(0,0,0,.05);color:#4b5563}.notification-progress{position:absolute;bottom:0;left:0;height:3px;background:rgba(0,0,0,.1);animation:progress 3s linear forwards}@keyframes progress{from{width:100%}to{width:0%}}.notification.success .notification-progress{background:rgba(16,185,129,.3)}.notification.error .notification-progress{background:rgba(239,68,68,.3)}.notification.warning .notification-progress{background:rgba(245,158,11,.3)}.notification.info .notification-progress{background:rgba(59,130,246,.3)}@media (max-width:576px){.notification-container{left:10px;right:10px;top:70px}.notification{min-width:auto;max-width:none;width:100%}}