.notification-container{position:fixed;top:80px;right:20px;z-index:99999;display:flex;flex-direction:column;gap:12px;max-width:420px;pointer-events:none}.notification{background:linear-gradient(135deg,rgba(26,31,46,.98),rgba(20,25,40,.98));backdrop-filter:blur(20px);border-radius:16px;padding:18px 24px;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1);display:flex;align-items:center;gap:16px;min-width:300px;max-width:420px;pointer-events:all;cursor:pointer;animation:slideInRight .4s cubic-bezier(.16,1,.3,1);transition:all .3s ease;position:relative;overflow:hidden}.notification::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--notification-color);box-shadow:0 0 20px var(--notification-color)}.notification:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 25px 70px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.15)}.notification-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.05);flex-shrink:0;font-size:24px;position:relative}.notification-icon::after{content:'';position:absolute;inset:-2px;border-radius:14px;padding:2px;background:linear-gradient(135deg,var(--notification-color),transparent);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5}.notification-content{flex:1;display:flex;flex-direction:column;gap:4px}.notification-title{font-size:15px;font-weight:700;color:#fff;margin:0;line-height:1.3}.notification-message{font-size:13px;color:rgba(255,255,255,.7);margin:0;line-height:1.4}.notification-close{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.05);border:none;color:rgba(255,255,255,.5);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease}.notification-close:hover{background:rgba(255,255,255,.1);color:#fff;transform:rotate(90deg)}.notification-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.1);overflow:hidden}.notification-progress-bar{height:100%;background:var(--notification-color);width:100%;animation:progressBar 5s linear forwards;box-shadow:0 0 10px var(--notification-color)}.notification.success{--notification-color:#10b981}.notification.success .notification-icon{background:rgba(16,185,129,.15);color:#10b981}.notification.error{--notification-color:#ef4444}.notification.error .notification-icon{background:rgba(239,68,68,.15);color:#ef4444}.notification.warning{--notification-color:#f59e0b}.notification.warning .notification-icon{background:rgba(245,158,11,.15);color:#f59e0b}.notification.info{--notification-color:#3b82f6}.notification.info .notification-icon{background:rgba(59,130,246,.15);color:#3b82f6}@keyframes slideInRight{from{transform:translateX(120%) scale(.9);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}@keyframes slideOutRight{from{transform:translateX(0) scale(1);opacity:1}to{transform:translateX(120%) scale(.9);opacity:0}}@keyframes progressBar{from{width:100%}to{width:0%}}.notification.removing{animation:slideOutRight .3s cubic-bezier(.6,0,.8,.3) forwards}@media (max-width:768px){.notification-container{right:10px;left:10px;max-width:none}.notification{min-width:auto;max-width:none}}