.notification-center{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;z-index:980}
.notification-bell-btn{position:relative;width:40px;height:40px;border:1px solid var(--border-color);border-radius:50%;background:var(--bg-surface-elevated);color:var(--text-main);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.notification-bell-btn:hover,.notification-bell-btn[aria-expanded="true"]{transform:translateY(-1px);border-color:var(--primary);background:var(--bg-surface)}
.notification-bell-btn svg{width:21px;height:21px;fill:currentColor}
.notification-badge{position:absolute;top:-5px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;border:2px solid var(--bg-surface);font-size:10px;font-weight:800;line-height:16px;display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;box-shadow:0 3px 10px rgba(239,68,68,.35)}
.notification-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(410px,calc(100vw - 24px));max-height:min(70vh,620px);overflow:hidden;border:1px solid var(--border-color);border-radius:16px;background:var(--bg-surface-elevated);box-shadow:0 22px 60px rgba(0,0,0,.28);z-index:2200}
.notification-panel[hidden]{display:none!important}
.notification-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid var(--border-color);background:var(--bg-surface-elevated)}
.notification-panel-head>div{display:flex;align-items:center;gap:9px;min-width:0}
.notification-panel-head strong{font-size:16px;color:var(--text-main);white-space:nowrap}
.notification-live-label{font-size:10px;color:var(--text-dim);display:inline-flex!important;align-items:center;gap:5px!important;white-space:nowrap}
.notification-live-label i{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.14)}
.notification-mark-all{border:0;background:transparent;color:var(--primary);font-size:12px;font-weight:700;cursor:pointer;padding:6px 4px;white-space:nowrap}
.notification-mark-all:disabled{opacity:.45;cursor:default}
.notification-list{max-height:min(58vh,520px);overflow-y:auto;overscroll-behavior:contain}
.notification-item{display:grid;grid-template-columns:64px minmax(0,1fr) 8px;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border-color);text-decoration:none;color:inherit;background:transparent;transition:background .16s ease}
.notification-item:hover{background:var(--bg-surface)}
.notification-item.is-unread{background:linear-gradient(90deg,var(--primary-glow),transparent 72%)}
.notification-media{width:64px;height:44px;border-radius:9px;overflow:hidden;background:var(--bg-base);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.notification-media img{width:100%;height:100%;object-fit:cover;display:block}
.notification-media svg{width:22px;height:22px;fill:var(--primary)}
.notification-copy{min-width:0}
.notification-copy strong{display:block;color:var(--text-main);font-size:13px;line-height:1.35;margin-bottom:3px;white-space:normal;overflow-wrap:anywhere}
.notification-copy p{margin:0;color:var(--text-muted);font-size:12px;line-height:1.42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notification-time{display:block;margin-top:5px;color:var(--text-dim);font-size:10px}
.notification-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.notification-item:not(.is-unread) .notification-unread-dot{visibility:hidden}
.notification-empty{padding:34px 18px;text-align:center;color:var(--text-dim);font-size:13px}
.notification-center.is-loading .notification-bell-btn svg{animation:notificationPulse 1s ease-in-out infinite alternate}
@keyframes notificationPulse{to{opacity:.45}}
@media(max-width:768px){.notification-panel{position:fixed;top:68px;right:10px;left:10px;width:auto;max-height:calc(100vh - 82px)}.notification-list{max-height:calc(100vh - 145px)}.notification-bell-btn{width:38px;height:38px}.notification-item{grid-template-columns:58px minmax(0,1fr) 8px}.notification-media{width:58px;height:40px}}
@media(max-width:420px){.notification-panel-head{padding:13px 12px}.notification-live-label{display:none!important}.notification-item{padding:11px 12px;gap:10px}.notification-mark-all{font-size:11px}}