.notification-bell{position:relative;display:inline-flex;align-items:center}.notification-bell__btn{position:relative}.notification-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--color-accent,#e53935);color:#fff;font-size:.65rem;font-weight:700;line-height:16px;text-align:center;pointer-events:none}.notification-dropdown{position:absolute;top:calc(100% + 8px);right:0;z-index:1000;width:340px;max-width:90vw;background:var(--color-surface,#fff);border:1px solid var(--color-border,#e0e0e0);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.12);overflow:hidden}.notification-dropdown__header{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--color-border,#e0e0e0);background:var(--color-surface-alt,#f9f9f9);font-weight:600;font-size:.85rem}.notification-dropdown__header .material-symbols-outlined{font-size:18px;color:var(--color-accent,#e53935)}.notification-dropdown__title{flex:1}.notification-loading{font-size:.75rem;color:var(--color-muted,#888);animation:pulse 1s ease-in-out infinite}.notification-list{max-height:360px;overflow-y:auto;overscroll-behavior:contain}.notification-item{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-bottom:1px solid var(--color-border-subtle,#f0f0f0);transition:background .15s}.notification-item:last-child {border-bottom:none}.notification-item:hover {background:var(--color-surface-hover,#f5f5f5)}.notification-item__body{flex:1;min-width:0}.notification-item__subject{margin:0 0 2px;font-size:.83rem;font-weight:600;color:var(--color-text,#1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-item__message{margin:0 0 4px;font-size:.78rem;color:var(--color-text-secondary,#555);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-item__time{font-size:.72rem;color:var(--color-muted,#999)}.notification-mark-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:var(--color-muted,#888);cursor:pointer;transition:background .15s,color .15s}.notification-mark-btn:hover {background:var(--color-accent-light,#fce4e4);color:var(--color-accent,#e53935)}.notification-mark-btn .material-symbols-outlined{font-size:16px}.notification-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 16px;color:var(--color-muted,#aaa);font-size:.82rem}.notification-empty .material-symbols-outlined{font-size:32px;opacity:.5}.notification-footer{padding:8px 14px;border-top:1px solid var(--color-border,#e0e0e0);background:var(--color-surface-alt,#f9f9f9);text-align:center}.notification-mark-all-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border:1px solid var(--color-border,#e0e0e0);border-radius:6px;background:transparent;color:var(--color-text-secondary,#555);font-size:.78rem;cursor:pointer;transition:background .15s,color .15s}.notification-mark-all-btn:hover {background:var(--color-accent,#e53935);border-color:var(--color-accent,#e53935);color:#fff}.notification-mark-all-btn .material-symbols-outlined{font-size:16px}@keyframes pulse{0%, 100%{opacity:1}50%{opacity:.4}}