.notification-container{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:1000000}.notification{display:flex;align-items:center;position:relative;background-color:#f8f9fa;padding:10px 15px;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);width:320px;animation:slideIn .3s ease-in-out;margin-bottom:10px}.notification.success{background:#e6ffed}.notification.info{background:#deeaf9}.notification.warning{background:#fff8e1}.notification.danger{background:#fdecea}.notification.exiting{animation:slideOut .3s ease-in forwards}.notification .icon{margin-right:20px;font-size:1.5rem}.notification .content strong{display:block;font-size:1rem;color:#333}.notification .content p{margin:0;font-size:.9rem;color:#666}.notification .timer{position:absolute;left:0;bottom:0;height:3px;width:100%;animation-name:progressShrink;animation-timing-function:linear;animation-fill-mode:forwards}.notification.success .timer{background-color:#28a745}.notification.info .timer{background-color:#78a9ed}.notification.warning .timer{background-color:#ffc107}.notification.danger .timer{background-color:#dc3545}@keyframes slideIn{0%{transform:translateY(-200%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{0%{transform:translateY(0);opacity:1}to{transform:translateY(-200%);opacity:0}}@keyframes progressShrink{0%{width:100%}to{width:0}}