.notification-bell{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-s);width:100%;border:none;background:transparent;color:var(--text-muted);font-size:var(--t-s);font-weight:500;text-decoration:none;border-radius:var(--radius-m);cursor:pointer;transition:all var(--transition-fast)}.notification-bell:hover{background-color:var(--surface-hover)}.notification-bell--has-unread,.notification-bell:hover{color:var(--text-primary)}.notification-bell--loading{opacity:.6;cursor:default}.notification-bell__icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0}.notification-bell__icon{width:1.25rem;height:1.25rem}.notification-bell__badge{position:absolute;top:-2px;right:-2px;width:8px;height:8px;background-color:var(--error);border-radius:var(--radius-full);border:2px solid var(--surface-elevated)}.notification-bell__label{flex:1;text-align:left}.notification-bell__count{margin-left:auto;min-width:1.6rem;padding:0 var(--space-2xs);font-size:var(--t-xs);font-weight:600;text-align:center;color:var(--error);background-color:color-mix(in srgb,var(--error) 15%,transparent);border-radius:var(--radius-full)}.notification-panel-popover{z-index:var(--z-popover);animation:notification-panel-slide-in .2s ease-out}@keyframes notification-panel-slide-in{0%{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}.notification-panel-popover__arrow{fill:var(--surface-elevated)}.notification-panel{width:360px;max-width:calc(100vw - var(--space-l));max-height:480px;display:flex;flex-direction:column;background-color:var(--surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-l);box-shadow:var(--shadow-lg);overflow:hidden}.notification-panel__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xs) var(--space-m);border-bottom:1px solid var(--border-subtle);background-color:var(--surface-default)}.notification-panel__header-title{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--t-s);font-weight:600;color:var(--text-primary)}.notification-panel__header-icon{width:1rem;height:1rem;color:var(--text-muted)}.notification-panel__unread-badge{padding:.15rem .45rem;font-size:.7rem;font-weight:600;color:var(--white);background-color:var(--primary);border-radius:var(--radius-full);min-width:1.1rem;text-align:center;line-height:1}.notification-panel__header-actions{display:flex;align-items:center;gap:var(--space-2xs)}.notification-panel__action-btn{display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;padding:0;border:none;background:transparent;color:var(--text-muted);border-radius:var(--radius-s);cursor:pointer;transition:all var(--transition-fast)}.notification-panel__action-btn:hover{background-color:var(--surface-hover);color:var(--text-primary)}.notification-panel__action-btn:disabled{opacity:.5;cursor:not-allowed}.notification-panel__action-icon{width:1.4rem;height:1.4rem}.notification-panel__action-icon--spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.notification-panel__content{flex:1;overflow-y:auto;overscroll-behavior:contain}.notification-panel__loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-s);padding:var(--space-2xl);color:var(--text-muted);font-size:var(--t-s)}.notification-panel__loading-icon{width:1.5rem;height:1.5rem;animation:spin 1s linear infinite}.notification-panel__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-s);padding:var(--space-xl) var(--space-l);text-align:center;min-height:16rem}.notification-panel__empty-icon{width:3rem;height:3rem;color:var(--fg-muted);margin-bottom:var(--space-s)}.notification-panel__empty p{font-size:var(--t-m);font-weight:500;color:var(--fg);margin:0}.notification-panel__empty span{font-size:var(--t-s);color:var(--fg-muted)}.notification-panel__list{list-style:none;margin:0;padding:0}.notification-item{display:flex;gap:var(--space-s);padding:var(--space-m) var(--space-l);border-bottom:1px solid var(--border-subtle);transition:background-color var(--transition-fast)}.notification-item:first-child{padding-top:var(--space-l)}.notification-item:last-child{border-bottom:none;padding-bottom:var(--space-l)}.notification-item:hover{background-color:var(--surface-hover)}.notification-item--unread{background-color:color-mix(in srgb,var(--primary) 5%,transparent)}.notification-item--unread:hover{background-color:color-mix(in srgb,var(--primary) 10%,transparent)}.notification-item--urgent{border-left:3px solid var(--warning)}.notification-item__icon-wrapper{display:flex;align-items:flex-start;justify-content:center;width:2rem;height:2rem;flex-shrink:0;background-color:var(--surface-default);border-radius:var(--radius-full);padding:var(--space-2xs)}.notification-item__icon{width:1rem;height:1rem;color:var(--primary)}.notification-item--urgent .notification-item__icon{color:var(--warning)}.notification-item__content{flex:1;min-width:0}.notification-item__header{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-3xs)}.notification-item__time{font-size:var(--t-xs);color:var(--text-muted);margin-left:auto}.notification-item__title{font-size:var(--t-s);font-weight:600;color:var(--text-primary);margin:0 0 var(--space-3xs);line-height:1.3}.notification-item__body{font-size:var(--t-xs);color:var(--text-secondary);margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-item__action{display:inline-flex;align-items:center;gap:var(--space-3xs);margin-top:var(--space-xs);padding:var(--space-3xs) var(--space-xs);font-size:var(--t-xs);font-weight:500;color:var(--primary);background:transparent;border:1px solid var(--primary);border-radius:var(--radius-s);cursor:pointer;transition:all var(--transition-fast)}.notification-item__action:hover{background-color:var(--primary);color:var(--white)}.notification-item__action:disabled{opacity:.5;cursor:not-allowed}.notification-item__action-icon{width:.875rem;height:.875rem}.notification-item__action-icon--spinning{animation:spin 1s linear infinite}.notification-item__actions{display:flex;flex-direction:column;gap:var(--space-3xs);flex-shrink:0;opacity:0;transition:opacity var(--transition-fast)}.notification-item:hover .notification-item__actions{opacity:1}.notification-item__dismiss,.notification-item__mark-read{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;background:transparent;color:var(--text-muted);border-radius:var(--radius-s);cursor:pointer;transition:all var(--transition-fast)}.notification-item__mark-read:hover{background-color:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success)}.notification-item__dismiss:hover{background-color:color-mix(in srgb,var(--error) 15%,transparent);color:var(--error)}.notification-item__dismiss-icon,.notification-item__mark-read-icon{width:1.1rem;height:1.1rem}@media (max-width:480px){.notification-panel{width:100vw;max-width:100vw;max-height:70vh;border-radius:var(--radius-l) var(--radius-l) 0 0}}