.notif-bell-btn{cursor:pointer;color:#fff;box-sizing:border-box;background-color:#ffffff24;border:1px solid #ffffff38;border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;position:relative}.notif-bell-btn:hover{background-color:#ffffff40;transform:translateY(-1px)}.notif-bell-btn.is-active{background-color:#ffffff4d;box-shadow:0 0 0 2px #fff6}.notif-badge-pill{color:#fff;background-color:#ef4444;border:1.5px solid #1e3a8a;border-radius:9999px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 4px;font-size:10px;font-weight:700;animation:.35s ease-out notif-bounce;display:flex;position:absolute;top:-4px;right:-5px;box-shadow:0 2px 4px #ef444466}@keyframes notif-bounce{0%{opacity:0;transform:scale(.5)}60%{transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.notif-popover-container{z-index:1050;background:#fff;border-radius:16px;flex-direction:column;width:400px;max-width:calc(100vw - 24px);animation:.25s cubic-bezier(.16,1,.3,1) notif-slide-down;display:flex;position:absolute;top:calc(100% + 10px);right:0;overflow:hidden;box-shadow:0 16px 40px -8px #0000002e,0 0 0 1px #0000000f}@keyframes notif-slide-down{0%{opacity:0;transform:translateY(-8px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.notif-popover-header{border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding:16px 18px 12px;display:flex}.notif-popover-title{color:#0f172a;align-items:center;gap:8px;font-size:15px;font-weight:700;display:flex}.notif-count-chip{color:#ef4444;background-color:#fee2e2;border-radius:9999px;padding:2px 7px;font-size:11px;font-weight:700}.notif-read-all-btn{color:#2563eb;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:12.5px;font-weight:600;transition:all .15s}.notif-read-all-btn:hover{color:#1d4ed8;background-color:#eff6ff}.notif-tab-bar{background-color:#f8fafc;border-bottom:1px solid #f1f5f9;gap:6px;padding:6px 16px;display:flex}.notif-tab-item{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:600;transition:all .15s;display:flex}.notif-tab-item.is-active{color:#2563eb;background-color:#fff;box-shadow:0 1px 3px #00000014}.notif-tab-item:hover:not(.is-active){color:#334155;background-color:#ffffff80}.notif-list-body{max-height:380px;padding:6px 0;overflow-y:auto}.notif-card{cursor:pointer;border-bottom:1px solid #f8fafc;gap:12px;padding:12px 16px;transition:all .15s;display:flex;position:relative}.notif-card:hover{background-color:#f8fafc}.notif-card.is-unread{background-color:#f0f7ff}.notif-card.is-unread:hover{background-color:#e6f1fe}.notif-icon-box{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.notif-icon-critical{color:#ef4444;background-color:#fee2e2}.notif-icon-warning{color:#d97706;background-color:#fef3c7}.notif-icon-info{color:#0284c7;background-color:#e0f2fe}.notif-icon-success{color:#059669;background-color:#d1fae5}.notif-card-content{flex:1;min-width:0}.notif-card-header{justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:3px;display:flex}.notif-card-title{color:#0f172a;font-size:13.5px;font-weight:700;line-height:1.35}.notif-unread-dot{background-color:#2563eb;border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:4px}.notif-card-desc{color:#475569;word-break:break-word;margin-bottom:8px;font-size:12.5px;line-height:1.45}.notif-card-footer{justify-content:space-between;align-items:center;gap:8px;display:flex}.notif-time-text{color:#94a3b8;font-size:11.5px;font-weight:500}.notif-action-btn{cursor:pointer;border:none;border-radius:6px;align-items:center;gap:4px;padding:4px 10px;font-size:11.5px;font-weight:600;transition:all .15s;display:inline-flex}.notif-action-primary{color:#fff;background-color:#2563eb}.notif-action-primary:hover{background-color:#1d4ed8}.notif-action-danger{color:#fff;background-color:#ef4444}.notif-action-danger:hover{background-color:#dc2626}.notif-action-secondary{color:#334155;background-color:#f1f5f9}.notif-action-secondary:hover{background-color:#e2e8f0}.notif-popover-footer{text-align:center;background-color:#fafafa;border-top:1px solid #f1f5f9;padding:10px 16px}.notif-see-all-btn{color:#2563eb;cursor:pointer;background:0 0;border:1px dashed #cbd5e1;border-radius:8px;justify-content:center;align-items:center;gap:6px;width:100%;padding:7px;font-size:13px;font-weight:600;transition:all .15s;display:inline-flex}.notif-see-all-btn:hover{background-color:#eff6ff;border-color:#93c5fd}.notif-empty-state{text-align:center;color:#94a3b8;flex-direction:column;justify-content:center;align-items:center;padding:36px 20px;display:flex}.notif-empty-icon{color:#cbd5e1;margin-bottom:10px}.notif-empty-title{color:#475569;margin-bottom:4px;font-size:13.5px;font-weight:600}.notif-empty-desc{color:#94a3b8;font-size:12px}.notif-drawer-backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1100;background-color:#0f172a73;animation:.2s ease-out notif-fade-in;position:fixed;inset:0}@keyframes notif-fade-in{0%{opacity:0}to{opacity:1}}.notif-drawer-panel{z-index:1110;background-color:#fff;flex-direction:column;width:480px;max-width:90vw;animation:.25s cubic-bezier(.16,1,.3,1) notif-slide-left;display:flex;position:fixed;top:0;bottom:0;right:0;box-shadow:-8px 0 32px #0000002e}@keyframes notif-slide-left{0%{transform:translate(100%)}to{transform:translate(0)}}.notif-drawer-header{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:18px 24px;display:flex}.notif-drawer-title{color:#0f172a;align-items:center;gap:10px;font-size:17px;font-weight:700;display:flex}.notif-drawer-close-btn{color:#64748b;cursor:pointer;background:0 0;border:1px solid #e2e8f0;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .15s;display:flex}.notif-drawer-close-btn:hover{color:#0f172a;background-color:#f1f5f9}.notif-drawer-controls{background-color:#f8fafc;border-bottom:1px solid #f1f5f9;flex-direction:column;gap:10px;padding:14px 24px;display:flex}.notif-search-input-wrap{width:100%;position:relative}.notif-search-input{color:#0f172a;box-sizing:border-box;background-color:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;padding:8px 12px 8px 34px;font-size:13px;transition:border-color .15s}.notif-search-input:focus{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb26}.notif-search-icon{color:#94a3b8;pointer-events:none;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.notif-filter-chips{gap:6px;padding-bottom:2px;display:flex;overflow-x:auto}.notif-chip{color:#64748b;cursor:pointer;white-space:nowrap;background-color:#fff;border:1px solid #e2e8f0;border-radius:9999px;padding:4px 10px;font-size:12px;font-weight:600;transition:all .15s}.notif-chip.is-active{color:#fff;background-color:#2563eb;border-color:#2563eb}.notif-chip:hover:not(.is-active){color:#334155;background-color:#f1f5f9}.notif-drawer-body{flex:1;padding:12px 24px;overflow-y:auto}.notif-drawer-footer{background-color:#f8fafc;border-top:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:14px 24px;display:flex}.notif-drawer-footer-btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:600;transition:all .15s;display:inline-flex}.notif-delete-read-btn{color:#dc2626;background-color:#fee2e2}.notif-delete-read-btn:hover{background-color:#fecaca}