.notification{overflow:hidden;transform:translateX(400px);border-left:4px solid;padding:16px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;max-width:400px;opacity:0;min-width:320px;gap:12px;align-items:center;box-shadow:0 8px 32px rgba(0,0,0,.12);border-radius:12px;background:#fff;display:flex}.notification.show{transform:translateX(0);opacity:1}.notification.hide{transform:translateX(400px);opacity:0}.notification-success{border-left-color:#10b981}.notification-error{border-left-color:#ef4444}.notification-info{border-left-color:#3b82f6}.notification-warning{border-left-color:#f59e0b}.notification-icon{height:40px;flex-shrink:0;justify-content:center;font-size:20px;align-items:center;border-radius:50%;width:40px;display:flex}.notification-success .notification-icon{color:#10b981;background:rgba(16,185,129,.1)}.notification-error .notification-icon{color:#ef4444;background:rgba(239,68,68,.1)}.notification-info .notification-icon{color:#3b82f6;background:rgba(59,130,246,.1)}.notification-warning .notification-icon{color:#f59e0b;background:rgba(245,158,11,.1)}.notification-content{flex:1}.notification-message{font-size:14px;font-weight:500;color:#1f2937;line-height:1.5}.notification-close{height:28px;flex-shrink:0;padding:4px;justify-content:center;border:none;color:#6b7280;transition:all .2s;align-items:center;border-radius:6px;background:none;cursor:pointer;width:28px;display:flex}.notification-close:hover{color:#1f2937;background:#f3f4f6}.notification-close i{font-size:14px}@media (max-width:480px){.notification{max-width:calc(100vw - 40px);min-width:calc(100vw - 40px)}#notification-container{right:10px;bottom:10px;left:10px}}@keyframes slideInRight{0%{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideOutRight{0%{transform:translateX(0);opacity:1}to{transform:translateX(400px);opacity:0}}