.bell-btn,.notification-bell{cursor:pointer;position:relative}.bell-btn{align-items:center;background:#8b5cf61a;border:1px solid rgba(139,92,246,.2);border-radius:12px;display:flex;height:44px;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);width:44px}.bell-btn:hover{background:#8b5cf633;border-color:#8b5cf666;transform:scale(1.05)}.bell-btn.has-unread{animation:bellPulse 2s ease-in-out infinite}.bell-btn.has-unread .bell-icon{animation:bellSwing 1s ease-in-out}.bell-icon{color:#a78bfa;font-size:1.25rem}.notif-badge{align-items:center;animation:badgePop .3s ease-out;background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:10px;box-shadow:0 2px 10px #ef444480;color:#fff;display:flex;font-size:11px;font-weight:700;height:20px;justify-content:center;min-width:20px;padding:0 6px;position:absolute;right:-6px;top:-6px}.notif-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;inset:0;z-index:9998}.notif-overlay,.notif-slide-panel{pointer-events:auto;position:fixed}.notif-slide-panel{background:linear-gradient(180deg,#1a1a24,#13131a);border-left:1px solid rgba(139,92,246,.2);box-shadow:-10px 0 50px #00000080;display:flex;flex-direction:column;height:100vh;max-width:100vw;overflow:hidden;right:0;top:0;width:400px;z-index:9999}.panel-header{background:#8b5cf60d;border-bottom:1px solid rgba(139,92,246,.1);justify-content:space-between;padding:1.25rem 1.5rem}.panel-header,.panel-title{align-items:center;display:flex}.panel-title{color:#fff;font-size:1.125rem;font-weight:600;gap:.75rem}.title-icon{color:#a78bfa;font-size:1.5rem}.count-badge{background:#8b5cf633;border-radius:20px;color:#a78bfa;font-size:.75rem;font-weight:600;padding:.25rem .625rem}.close-btn{align-items:center;background:#ffffff0d;border:1px solid hsla(0,0%,100%,.1);border-radius:10px;color:#fff9;cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .2s;width:36px}.close-btn:hover{background:#ef444433;border-color:#ef44444d;color:#ef4444}.panel-actions{border-bottom:1px solid hsla(0,0%,100%,.05);display:flex;gap:.75rem;padding:1rem 1.5rem}.action-btn{align-items:center;background:#8b5cf61a;border:1px solid rgba(139,92,246,.2);border-radius:10px;color:#a78bfa;cursor:pointer;display:flex;flex:1;font-size:.8125rem;font-weight:500;gap:.5rem;justify-content:center;padding:.625rem 1rem;transition:all .2s}.action-btn:hover{background:#8b5cf633}.action-btn.danger{background:#ffffff0d;border-color:#ffffff1a;color:#ffffff80}.action-btn.danger:hover{background:#ef44441a;border-color:#ef444433;color:#ef4444}.panel-content{flex:1;overflow-y:auto;padding:1rem}.notif-list{display:flex;flex-direction:column;gap:.75rem}.notif-card{background:#ffffff08;border:1px solid hsla(0,0%,100%,.05);border-radius:14px;cursor:pointer;display:flex;gap:1rem;overflow:hidden;padding:1rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.notif-card:hover{background:#ffffff0f;border-color:#8b5cf633;transform:translate(-4px)}.notif-card.unread{background:#8b5cf614;border-color:#8b5cf626}.notif-card.unread:hover{background:#8b5cf61f}.card-indicator{border-radius:0 3px 3px 0;bottom:0;left:0;position:absolute;top:0;width:3px}.card-indicator.info{background:linear-gradient(180deg,#3b82f6,#2563eb)}.card-indicator.success{background:linear-gradient(180deg,#22c55e,#16a34a)}.card-indicator.warning{background:linear-gradient(180deg,#fb923c,#f97316)}.card-indicator.error{background:linear-gradient(180deg,#ef4444,#dc2626)}.card-indicator.punishment{background:linear-gradient(180deg,#8b5cf6,#7c3aed)}.card-indicator.vacation{background:linear-gradient(180deg,#22d3ee,#06b6d4)}.card-indicator.bonus{background:linear-gradient(180deg,#facc15,#eab308)}.card-indicator.achievement{background:linear-gradient(180deg,#fb923c,#f97316)}.card-icon{align-items:center;border-radius:12px;display:flex;flex-shrink:0;font-size:1.25rem;height:42px;justify-content:center;width:42px}.card-icon.info{background:#3b82f626;color:#3b82f6}.card-icon.success{background:#22c55e26;color:#22c55e}.card-icon.warning{background:#fb923c26;color:#fb923c}.card-icon.error{background:#ef444426;color:#ef4444}.card-icon.punishment{background:#8b5cf626;color:#8b5cf6}.card-icon.vacation{background:#22d3ee26;color:#22d3ee}.card-icon.bonus{background:#facc1526;color:#facc15}.card-icon.achievement{background:#fb923c26;color:#fb923c}.card-body{flex:1;min-width:0}.card-title{color:#fff;font-size:.9375rem;font-weight:600;margin:0 0 .375rem}.card-message{color:#fff9;display:-webkit-box;font-size:.8125rem;-webkit-line-clamp:2;margin:0 0 .5rem;-webkit-box-orient:vertical;line-height:1.4;overflow:hidden}.card-time{align-items:center;color:#fff6;display:flex;font-size:.75rem;gap:.375rem}.card-time .iconify{font-size:.875rem}.empty-state{flex-direction:column;padding:4rem 2rem;text-align:center}.empty-icon,.empty-state{align-items:center;display:flex;justify-content:center}.empty-icon{background:#8b5cf61a;border-radius:50%;color:#a78bfa;font-size:2.5rem;height:80px;margin-bottom:1.5rem;width:80px}.empty-title{color:#fff;font-size:1.125rem;font-weight:600;margin:0 0 .5rem}.empty-text{color:#ffffff80;font-size:.875rem;margin:0}@keyframes bellPulse{0%,to{box-shadow:0 0 #8b5cf666}50%{box-shadow:0 0 0 8px #8b5cf600}}@keyframes bellSwing{0%,to{transform:rotate(0)}20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}}@keyframes badgePop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}.slide-enter-active,.slide-leave-active{transition:transform .4s cubic-bezier(.4,0,.2,1)}.slide-enter-from,.slide-leave-to{transform:translate(100%)}.list-enter-active,.list-leave-active{transition:all .3s ease}.list-enter-from{opacity:0;transform:translate(30px)}.list-leave-to{opacity:0;transform:translate(-30px)}.panel-content::-webkit-scrollbar{width:6px}.panel-content::-webkit-scrollbar-track{background:transparent}.panel-content::-webkit-scrollbar-thumb{background:#8b5cf64d;border-radius:3px}.panel-content::-webkit-scrollbar-thumb:hover{background:#8b5cf680}@media(max-width:480px){.notif-slide-panel{width:100vw}.panel-actions{flex-direction:column}}