.notification-bell-container{display:inline-block;position:relative}.notification-bell-button{cursor:pointer;width:40px;height:40px;color:var(--text-color,#333);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;transition:background-color .2s;display:flex;position:relative}.notification-bell-button:hover{background-color:#0000000d}.notification-bell-icon{width:20px;height:20px}.notification-bell-badge{color:#fff;background-color:#ef4444;border-radius:9px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:600;line-height:1;display:flex;position:absolute;top:4px;right:4px}.notification-inbox{z-index:1000;background:#fff;border:1px solid #e5e7eb;border-radius:8px;flex-direction:column;width:360px;max-height:500px;display:flex;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.notification-inbox-header{border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.notification-inbox-title{color:#111827;margin:0;font-size:16px;font-weight:600}.notification-inbox-mark-all{color:#3b82f6;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:14px;transition:background-color .2s}.notification-inbox-mark-all:hover{background-color:#f3f4f6}.notification-inbox-view-all{color:#3b82f6;border-radius:4px;padding:4px 8px;font-size:14px;text-decoration:none;transition:background-color .2s}.notification-inbox-view-all:hover{background-color:#f3f4f6;text-decoration:underline}.notification-inbox-content{flex:1;max-height:400px;overflow-y:auto}.notification-inbox-empty{text-align:center;color:#6b7280;padding:32px 16px;font-size:14px}.notification-inbox-list{flex-direction:column;display:flex}.notification-inbox-item{cursor:pointer;border-bottom:1px solid #f3f4f6;align-items:flex-start;gap:12px;padding:12px 16px;transition:background-color .2s;display:flex}.notification-inbox-item:hover{background-color:#f9fafb}.notification-inbox-item.unread{background-color:#eff6ff}.notification-inbox-item.unread:hover{background-color:#dbeafe}.notification-inbox-item-content{flex:1;min-width:0}.notification-inbox-item-title{color:#111827;margin-bottom:4px;font-size:14px;font-weight:600}.notification-inbox-item-message{color:#6b7280;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:4px;font-size:13px;line-height:1.4;display:-webkit-box;overflow:hidden}.notification-inbox-item-time{color:#9ca3af;font-size:12px}.notification-inbox-item-dot{background-color:#3b82f6;border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:6px}@media (max-width:640px){.notification-inbox{width:320px;right:-40px}}.notifications-tab-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.notifications-tab-controls{align-items:center;gap:12px;display:flex}.notifications-tab-mark-all{color:#3b82f6;cursor:pointer;background:0 0;border:1px solid #e5e7eb;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;transition:background-color .2s,color .2s}.notifications-tab-mark-all:hover{color:#2563eb;background-color:#f3f4f6}.notifications-tab-filter{color:#6b7280;cursor:pointer;background:0 0;border:1px solid #e5e7eb;border-radius:6px;align-items:center;gap:6px;padding:8px 16px;font-size:14px;font-weight:500;transition:background-color .2s,color .2s,border-color .2s;display:flex}.notifications-tab-filter:hover{color:#4b5563;background-color:#f9fafb;border-color:#d1d5db}.notifications-tab-filter.active{color:#3b82f6;background-color:#eff6ff;border-color:#93c5fd}.notifications-tab-content{margin-top:16px}.notifications-tab-empty{text-align:center;color:#6b7280;flex-direction:column;align-items:center;gap:16px;padding:64px 16px;font-size:14px;display:flex}.notifications-empty-icon{color:#d1d5db;margin-bottom:8px}.notifications-tab-empty p{margin:0;font-size:16px}.notifications-tab-list{flex-direction:column;gap:0;display:flex}.notifications-tab-item{cursor:pointer;background:#fff;border-bottom:1px solid #f3f4f6;align-items:flex-start;gap:12px;padding:16px;transition:background-color .2s;display:flex}.notifications-tab-item:hover{background-color:#f9fafb}.notifications-tab-item.unread{background-color:#eff6ff}.notifications-tab-item.unread:hover{background-color:#dbeafe}.notifications-tab-item-content{flex:1;min-width:0}.notifications-tab-item-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;display:flex}.notifications-tab-item-title{color:#111827;flex:1;font-size:15px;font-weight:600}.notifications-tab-item-mark-read{cursor:pointer;color:#6b7280;background:0 0;border:1px solid #e5e7eb;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;padding:0;transition:background-color .2s,border-color .2s,color .2s;display:flex}.notifications-tab-item-mark-read:hover{color:#3b82f6;background-color:#f3f4f6;border-color:#d1d5db}.notifications-tab-item-message{color:#6b7280;margin-bottom:8px;font-size:14px;line-height:1.5}.notifications-tab-item-time{color:#9ca3af;font-size:12px}.notifications-tab-item-dot{background-color:#3b82f6;border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:8px}.notification-inbox-item-actions,.notifications-tab-item-actions{gap:8px;margin-top:12px;margin-bottom:8px;display:flex}.notification-action-button{cursor:pointer;border:none;border-radius:6px;flex:1;max-width:120px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .2s}.notification-action-primary{color:#fff;background-color:#3b82f6}.notification-action-primary:hover{background-color:#2563eb;transform:translateY(-1px);box-shadow:0 2px 4px #3b82f64d}.notification-action-secondary{color:#6b7280;background-color:#f3f4f6;border:1px solid #e5e7eb}.notification-action-secondary:hover{color:#4b5563;background-color:#e5e7eb;border-color:#d1d5db}.notification-action-button:active{transform:translateY(0)}@media (max-width:640px){.notifications-tab-header{flex-direction:column;align-items:flex-start}.notifications-tab-controls{flex-wrap:wrap;width:100%}.notifications-tab-mark-all,.notifications-tab-filter{flex:1;min-width:0}.notifications-tab-item{padding:12px}.notification-inbox-item-actions,.notifications-tab-item-actions{flex-direction:column}.notification-action-button{max-width:none}}