.notification-bell{cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.notification-bell:hover{background:#ffffff1a;border-color:#fff3;transform:scale(1.05)}.notification-bell svg{color:#ffffffe6;transition:transform .3s}.notification-bell:hover svg{transform:rotate(15deg)}.notification-badge{color:#fff;background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);border:2px solid #0a0a0a;border-radius:9px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 5px;font-size:10px;font-weight:700;animation:2s ease-in-out infinite badge-pulse;display:flex;position:absolute;top:-4px;right:-4px}@keyframes badge-pulse{0%,to{box-shadow:0 0 #ef444466}50%{box-shadow:0 0 0 6px #ef444400}}.notification-panel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1000;background:#121212f2;border:1px solid #ffffff1a;border-radius:16px;width:380px;max-height:480px;position:absolute;top:calc(100% + 12px);right:0;overflow:hidden;box-shadow:0 25px 50px -12px #00000080,0 0 0 1px #ffffff0d}.notification-panel-header{background:#ffffff05;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.notification-panel-title{color:#fff;letter-spacing:-.02em;font-size:16px;font-weight:600}.notification-mark-all{color:#8b5cf6e6;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:6px 12px;font-size:12px;transition:all .2s}.notification-mark-all:hover{color:#a78bfa;background:#8b5cf61a}.notification-list{scrollbar-width:thin;scrollbar-color:#fff3 transparent;max-height:360px;overflow-y:auto}.notification-list::-webkit-scrollbar{width:6px}.notification-list::-webkit-scrollbar-track{background:0 0}.notification-list::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.notification-list::-webkit-scrollbar-thumb:hover{background:#ffffff40}.notification-item{cursor:pointer;border-bottom:1px solid #ffffff0d;gap:14px;padding:16px 20px;transition:background .2s;display:flex}.notification-item:hover{background:#ffffff08}.notification-item.unread{background:#8b5cf60d}.notification-item.unread:before{content:"";background:linear-gradient(#8b5cf6 0%,#6366f1 100%);width:3px;position:absolute;top:0;bottom:0;left:0}.notification-icon{background:linear-gradient(135deg,#8b5cf633 0%,#6366f133 100%);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.notification-icon svg{color:#a78bfa;width:20px;height:20px}.notification-content{flex:1;min-width:0}.notification-title{color:#fffffff2;margin-bottom:4px;font-size:14px;font-weight:600;line-height:1.3}.notification-message{color:#fff9;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;font-size:13px;line-height:1.4;display:-webkit-box;overflow:hidden}.notification-time{color:#fff6;margin-top:6px;font-size:11px}.notification-empty{color:#fff6;flex-direction:column;justify-content:center;align-items:center;padding:48px 24px;display:flex}.notification-empty svg{opacity:.5;width:48px;height:48px;margin-bottom:16px}.notification-empty p{font-size:14px}.notification-toast{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:9999;background:#121212fa;border:1px solid #ffffff1a;border-radius:14px;align-items:flex-start;gap:14px;width:360px;padding:16px 20px;display:flex;position:fixed;top:24px;right:24px;box-shadow:0 20px 40px -12px #0006,0 0 0 1px #ffffff0d}.notification-toast-close{cursor:pointer;color:#ffffff80;background:#ffffff1a;border:none;border-radius:6px;justify-content:center;align-items:center;width:24px;height:24px;transition:all .2s;display:flex;position:absolute;top:12px;right:12px}.notification-toast-close:hover{color:#fff;background:#ffffff26}.notification-status{color:#ffffff80;border-top:1px solid #ffffff0d;align-items:center;gap:6px;padding:8px 16px;font-size:11px;display:flex}.notification-status-dot{border-radius:50%;width:6px;height:6px}.notification-status-dot.connected{background:#22c55e;box-shadow:0 0 8px #22c55e}.notification-status-dot.disconnected{background:#ef4444}.notification-status-dot.connecting{background:#f59e0b;animation:1s ease-in-out infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}@media (max-width:480px){.notification-panel{width:calc(100vw - 32px);right:-8px}.notification-toast{width:calc(100vw - 32px);left:16px;right:16px}}