#notification-bell-wrapper{position:relative;display:inline-flex;align-items:center;vertical-align:middle}#notification-bell-btn{position:relative;cursor:pointer;font-size:18px;font-weight:normal;color:#8b8b8b;background:transparent;border:none;padding:0 10px;outline:none;line-height:1}#notification-bell-btn:hover{color:#555}#notification-badge{position:absolute;top:-2px;right:4px;min-width:16px;height:16px;padding:0 3px;font-size:10px;font-weight:700;line-height:16px;text-align:center;border-radius:8px;background:#e03131;color:#fff;display:none;pointer-events:none}#notification-panel{display:none;position:absolute;top:calc(100% + 6px);right:0;width:360px;max-height:480px;flex-direction:column;background:#fff;border:1px solid #dce1e7;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:9999;overflow:hidden}#notification-panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #eee;flex-shrink:0}.notif-panel-title{font-size:13px;font-weight:700;color:#333}#btn-mark-all-read{font-size:11px;color:#4263eb;background:transparent;border:none;cursor:pointer;padding:0}#btn-mark-all-read:hover{text-decoration:underline}#notification-list{overflow-y:auto;flex:1}.notif-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid #f3f4f6;cursor:pointer;transition:background .15s}.notif-item:hover{background:#f8f9fa}.notif-item.unread{background:#eef3ff}.notif-item.unread:hover{background:#e4ecff}.notif-dot{flex-shrink:0;margin-top:4px;font-size:8px}.notif-body{flex:1;min-width:0}.notif-action-badge{display:inline-block;font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px;margin-bottom:2px;color:#fff}.notif-title-text{font-size:12px;font-weight:600;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notif-item.unread .notif-title-text{font-weight:700}.notif-message{font-size:11px;color:#555;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}.notif-date{font-size:10px;color:#aaa;margin-top:4px}.notif-read-icon{flex-shrink:0;margin-top:2px;font-size:12px;color:#aaa}.notif-empty,.notif-loading{padding:24px 14px;text-align:center;color:#aaa;font-size:12px}