.notification-panel{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);z-index:1000;flex-direction:column;width:380px;max-height:520px;animation:.2s ease-out notifSlideIn;display:flex;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 12px 40px #0000004d}.notification-panel.hidden{display:none}@keyframes notifSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.notif-panel-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:14px 16px 10px;display:flex}.notif-panel-header h3{color:var(--text-primary);margin:0;font-size:1rem;font-weight:700}.notif-mark-all-btn{color:var(--accent-primary);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:4px 8px;font-size:.75rem;font-weight:500;transition:background .15s}.notif-mark-all-btn:hover{background:var(--bg-tertiary)}.notif-tabs{border-bottom:1px solid var(--border-color);padding:0 8px;display:flex}.notif-tab{color:var(--text-tertiary);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 4px;font-size:.8rem;font-weight:500;transition:color .15s,border-color .15s;display:flex}.notif-tab:hover{color:var(--text-secondary)}.notif-tab.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.notif-tab-badge{background:var(--accent-danger);border-radius:var(--radius-full);color:#fff;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 5px;font-size:.65rem;font-weight:700;line-height:1;display:inline-flex}.notif-tab-badge:empty,.notif-tab-badge.hidden{display:none}.notif-list{flex:1;min-height:120px;max-height:380px;overflow-y:auto}.notif-list::-webkit-scrollbar{width:5px}.notif-list::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:10px}.notif-empty{color:var(--text-tertiary);justify-content:center;align-items:center;padding:40px 20px;font-size:.85rem;display:flex}.notif-item{cursor:pointer;border-bottom:1px solid var(--border-color);align-items:flex-start;gap:12px;padding:12px 16px;transition:background .15s;display:flex}.notif-item:last-child{border-bottom:none}.notif-item:hover{background:var(--bg-tertiary)}.notif-item.notif-unread{background:rgba(var(--accent-primary-rgb,99, 102, 241), .06)}.notif-item.notif-unread:hover{background:rgba(var(--accent-primary-rgb,99, 102, 241), .1)}.notif-avatar{object-fit:cover;border-radius:50%;flex-shrink:0;width:36px;height:36px}.notif-body{flex:1;min-width:0}.notif-icon{margin-right:4px}.notif-text{color:var(--text-secondary);font-size:.82rem;line-height:1.45;display:block}.notif-text strong{color:var(--text-primary);font-weight:600}.notif-time{color:var(--text-tertiary);margin-top:3px;font-size:.7rem;display:block}html[data-theme=light] .notification-panel{background:#fff;border-color:#e2e8f0;box-shadow:0 12px 40px #00000014}html[data-theme=light] .notif-item.notif-unread{background:#6366f10d}html[data-theme=light] .notif-item.notif-unread:hover{background:#6366f117}@media (max-width:768px){.notification-panel{top:calc(var(--navbar-height,64px) + 6px);border-radius:var(--radius-md);width:min(380px,100vw - 16px);max-height:calc(100vh - 80px);position:fixed;left:auto;right:8px}}@media (max-width:480px){.notification-panel{width:auto;left:8px;right:8px}}.nav-user{position:relative}