.notif-bell-btn,.notif-root{position:relative}.notif-bell-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:10px;color:white;cursor:pointer;transition:background var(--pudo-transition,.18s ease),border-color var(--pudo-transition,.18s ease)}.notif-bell-btn--active,.notif-bell-btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4)}.notif-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;background:var(--pudo-orange,#ff6b35);color:white;border-radius:999px;font-size:10px;font-weight:800;line-height:18px;text-align:center;border:2px solid var(--pudo-blue-dark,#055f91);pointer-events:none}.notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:360px;max-height:480px;background:var(--surface,#ffffff);border:1px solid var(--pudo-border,#d9e6f2);border-radius:14px;box-shadow:0 12px 36px rgba(22,106,173,.18);z-index:2000;display:flex;flex-direction:column;overflow:hidden;animation:notif-slide-in .15s ease}@keyframes notif-slide-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.notif-panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--pudo-border,#d9e6f2);background:var(--pudo-page,#f4f8fc);flex-shrink:0}.notif-panel-title{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:800;color:var(--pudo-text,#162235)}.notif-panel-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;background:var(--pudo-orange,#ff6b35);color:white;border-radius:999px;font-size:11px;font-weight:800}.notif-mark-all{background:none;border:1px solid var(--pudo-border,#d9e6f2);border-radius:6px;cursor:pointer;font-size:.75rem;font-weight:700;color:var(--pudo-blue,#166aad);padding:4px 10px;transition:background var(--pudo-transition,.18s ease),border-color var(--pudo-transition,.18s ease)}.notif-mark-all:hover{background:var(--pudo-page,#f4f8fc);border-color:var(--pudo-blue,#166aad)}.notif-list{overflow-y:auto;flex:1}.notif-item{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid var(--pudo-border,#d9e6f2);background:var(--surface,#ffffff);cursor:pointer;transition:background var(--pudo-transition,.18s ease)}.notif-item:last-child{border-bottom:none}.notif-item:hover{background:var(--pudo-page,#f4f8fc)}.notif-item--unread{background:rgba(22,106,173,.05)}.notif-item--unread:hover{background:rgba(22,106,173,.09)}.notif-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}.notif-dot--urgent{background:#dc2626}.notif-dot--high{background:var(--pudo-orange,#ff6b35)}.notif-dot--normal{background:var(--pudo-blue,#166aad)}.notif-dot--low{background:var(--pudo-muted,#66758a)}.notif-body{flex:1;min-width:0}.notif-item-title{font-size:.825rem;color:var(--pudo-text,#162235);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notif-item-title--bold{font-weight:700}.notif-item-msg{font-size:.775rem;color:var(--pudo-muted,#66758a);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notif-item-time{font-size:.7rem;color:var(--pudo-muted,#66758a);margin-top:5px;opacity:.75}.notif-dismiss{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;color:var(--pudo-muted,#66758a);margin-top:2px;transition:background var(--pudo-transition,.18s ease),color var(--pudo-transition,.18s ease),border-color var(--pudo-transition,.18s ease)}.notif-dismiss:hover{background:#fde8e8;color:#dc2626;border-color:#fca5a5}.notif-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:36px 24px;color:var(--pudo-muted,#66758a);font-size:.85rem}.notif-empty-icon{opacity:.3;color:var(--pudo-blue,#166aad)}.notif-loading-dots{display:flex;gap:5px}.notif-loading-dots span{width:7px;height:7px;border-radius:50%;background:var(--pudo-blue,#166aad);animation:notif-pulse 1.2s ease-in-out infinite}.notif-loading-dots span:nth-child(2){animation-delay:.2s}.notif-loading-dots span:nth-child(3){animation-delay:.4s}@keyframes notif-pulse{0%,80%,to{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}@media (max-width:480px){.notif-panel{width:calc(100vw - 24px);right:-12px}}