.notification-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-sm);position:relative;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05);background:transparent;transition:all var(--transition-medium);overflow:hidden}.notification-item:last-child{border-bottom:none}.notification-item:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 49%,rgba(255,67,108,.08) 50%,transparent 51%),linear-gradient(0deg,transparent 49%,rgba(255,67,108,.08) 50%,transparent 51%);background-size:20px 20px;opacity:0;transition:opacity var(--transition-medium);pointer-events:none;z-index:0}.notification-item:hover{background:linear-gradient(135deg,#ff436c1a,#ff65890d);border-color:#ff436c33}.notification-item:hover:before{opacity:1}.notification-item.unread{background:#ff436c14;border-color:#ff436c4d}.notification-item.unread:after{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--gradient-primary);box-shadow:0 0 10px var(--color-primary),0 0 20px #ff436c80;z-index:1}.notification-item.unread:before{opacity:.4}.notification-item.unread:hover{background:linear-gradient(135deg,#ff436c2e,#ff65891a);box-shadow:inset 4px 0 #ff436c80,0 0 20px #ff436c26}.notification-avatar-wrap{position:relative;flex-shrink:0;z-index:1}.notification-avatar-wrap.clickable{cursor:pointer}.notification-avatar-wrap.clickable:hover .notification-avatar-img{border-color:#ff436ccc;box-shadow:0 0 20px #ff436c80}.notification-avatar-wrap.clickable:hover .notification-avatar-placeholder{background:linear-gradient(135deg,#ff436c73,#ff65894d);box-shadow:0 0 20px #ff436c80;transform:scale(1.06)}.notification-avatar-img{width:52px;height:52px;border-radius:50%;object-fit:cover;display:block;border:2px solid rgba(255,67,108,.4);box-shadow:0 0 14px #ff436c40,inset 0 1px #ffffff1a;transition:all var(--transition-medium)}.notification-avatar-placeholder{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid rgba(255,67,108,.4);background:linear-gradient(135deg,#ff436c4d,#ff658933);color:var(--color-primary);box-shadow:0 0 14px #ff436c40,inset 0 1px #ffffff1a;transition:all var(--transition-medium)}.notification-avatar-placeholder.type-message{color:#60a5fa;border-color:#60a5fa66;background:#60a5fa1f}.notification-avatar-placeholder.type-like{color:#f472b6;border-color:#f472b666;background:#f472b61f}.notification-avatar-placeholder.type-comment{color:#34d399;border-color:#34d39966;background:#34d3991f}.notification-avatar-placeholder.type-reply{color:#a78bfa;border-color:#a78bfa66;background:#a78bfa1f}.notification-avatar-placeholder.type-follow{color:#fbbf24;border-color:#fbbf2466;background:#fbbf241f}.notification-avatar-placeholder.type-mention{color:#f87171;border-color:#f8717166;background:#f871711f}.notification-avatar-placeholder.type-donation{color:#fb7185;border-color:#fb718566;background:#fb71851f}.notification-avatar-placeholder.type-channel_invite{color:#38bdf8;border-color:#38bdf866;background:#38bdf81f}.notification-avatar-placeholder.type-system{color:#94a3b8;border-color:#94a3b84d;background:#94a3b814}.notification-type-badge{position:absolute;bottom:-4px;right:-2px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;border:2px solid rgba(18,18,18,.95);z-index:2}.notification-page .notification-badge-count{top:-26px}.notification-badge-count{position:absolute;top:-22px;right:-7px;background:var(--gradient-primary, linear-gradient(135deg, #ff436c, #ff6589));color:#fff;font-size:12px;font-weight:800;min-width:18px;height:18px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;border:1.5px solid rgba(18,18,18,.95);box-shadow:0 0 6px #ff436c99;line-height:1}.notification-expanded-content{font-size:12px;color:var(--color-text-secondary);opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.notification-type-badge.type-message{background:#2563eb;color:#fff;box-shadow:0 0 8px #2563eb99}.notification-type-badge.type-like{background:#db2777;color:#fff;box-shadow:0 0 8px #db277799}.notification-type-badge.type-comment{background:#059669;color:#fff;box-shadow:0 0 8px #05966999}.notification-type-badge.type-reply{background:#7c3aed;color:#fff;box-shadow:0 0 8px #7c3aed99}.notification-type-badge.type-follow{background:#d97706;color:#fff;box-shadow:0 0 8px #d9770699}.notification-type-badge.type-mention{background:#dc2626;color:#fff;box-shadow:0 0 8px #dc262699}.notification-type-badge.type-donation{background:#be185d;color:#fff;box-shadow:0 0 8px #be185d99}.notification-type-badge.type-channel_invite{background:#0284c7;color:#fff;box-shadow:0 0 8px #0284c799}.notification-type-badge.type-system{background:#475569;color:#fff}.notification-item-body{flex:1;min-width:0;z-index:1;padding:2px 0}.notification-item-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-sm);margin-bottom:3px}.notification-item-title{margin:0;font-size:14px;font-weight:600;font-family:var(--font-family-headings);letter-spacing:.02em;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.notification-item-time{font-size:11px;color:var(--color-text-secondary);flex-shrink:0;white-space:nowrap;opacity:.7}.notification-item-content{margin:0 0 6px;font-size:13px;color:var(--color-text-secondary);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;overflow-wrap:break-word}.notification-action-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:var(--border-radius-md);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:1px solid transparent;cursor:pointer;transition:all var(--transition-medium);position:relative;overflow:hidden}.notification-action-btn:after{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transition:left .4s ease;pointer-events:none}.notification-action-btn:hover:after{left:150%}.notification-action-btn.type-message{background:linear-gradient(135deg,#60a5fa33,#3b82f61f);border-color:#60a5fa66;color:#93c5fd}.notification-action-btn.type-message:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f633);border-color:#60a5fab3;box-shadow:0 0 12px #60a5fa4d;transform:translateY(-1px)}.notification-action-btn.type-like{background:linear-gradient(135deg,#f472b633,#db27771f);border-color:#f472b666;color:#f9a8d4}.notification-action-btn.type-like:hover{background:linear-gradient(135deg,#f472b64d,#db277733);border-color:#f472b6b3;box-shadow:0 0 12px #f472b64d;transform:translateY(-1px)}.notification-action-btn.type-comment,.notification-action-btn.type-reply,.notification-action-btn.type-mention{background:linear-gradient(135deg,#ff436c33,#ff65891f);border-color:#ff436c66;color:var(--color-primary, #ff436c)}.notification-action-btn.type-comment:hover,.notification-action-btn.type-reply:hover,.notification-action-btn.type-mention:hover{background:linear-gradient(135deg,#ff436c4d,#ff658933);border-color:#ff436cb3;box-shadow:0 0 12px #ff436c59;transform:translateY(-1px)}.notification-action-btn.type-channel_invite{background:linear-gradient(135deg,#38bdf833,#0284c71f);border-color:#38bdf866;color:#7dd3fc}.notification-action-btn.type-channel_invite:hover{background:linear-gradient(135deg,#38bdf84d,#0284c733);border-color:#38bdf8b3;box-shadow:0 0 12px #38bdf84d;transform:translateY(-1px)}.notification-filter-tabs{display:flex;gap:var(--spacing-sm)}.filter-tab{display:inline-flex;align-items:center;font-size:12px;font-weight:600;text-transform:uppercase;border-radius:var(--border-radius-md);letter-spacing:.04em;padding:var(--spacing-xs) var(--spacing-md);border:1px solid transparent;cursor:pointer;gap:var(--spacing-xs);transition:all var(--transition-medium);background:transparent;color:var(--color-text-secondary)}.filter-tab:hover{background:#ff436c14;border-color:#ff436c33;color:var(--color-text)}.filter-tab.active{background:linear-gradient(135deg,#ff436c40,#ff658926);border-color:#ff436c80;color:var(--color-text);box-shadow:0 0 12px #ff436c33,inset 0 1px #ffffff14}.filter-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;font-size:10px;font-weight:700;background:var(--gradient-primary, linear-gradient(135deg, #ff436c, #ff6589));color:#fff;box-shadow:0 0 8px #ff436c80}.mark-all-read-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--border-radius-md);border:1px solid rgba(255,67,108,.35);background:linear-gradient(135deg,#ff436c26,#ff658914);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-medium);box-shadow:0 2px 8px #ff436c1a}.mark-all-read-btn:hover{background:linear-gradient(135deg,#ff436c47,#ff65892e);border-color:#ff436c99;color:var(--color-text);transform:translateY(-2px);box-shadow:0 0 16px #ff436c59,0 4px 12px #ff436c33}.notification-mark-all-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--border-radius-md);border:1px solid rgba(255,67,108,.3);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-medium)}.notification-mark-all-btn:hover{background:linear-gradient(135deg,#ff436c33,#ff65891f);border-color:#ff436c8c;color:var(--color-text);box-shadow:0 0 10px #ff436c40}.notification-dropdown-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:10px;font-weight:700;background:var(--gradient-primary, linear-gradient(135deg, #ff436c, #ff6589));color:#fff;margin-left:6px;vertical-align:middle;box-shadow:0 0 8px #ff436c80}.notification-page .notification-list{display:flex;flex-direction:column;gap:0;border:1px solid rgba(255,255,255,.06);overflow:hidden}.notification-page .notification-item{padding:var(--spacing-sm)}.notification-page .notification-avatar-wrap{width:62px;height:62px}.notification-page .notification-avatar-img,.notification-page .notification-avatar-placeholder{width:62px;height:62px;font-size:22px}.notification-item.expanded{flex-wrap:wrap}.notification-item-actions{display:flex;gap:6px;flex-wrap:wrap}.notification-action-btn.type-expand{background:linear-gradient(135deg,#ff436c26,#ff658914);border-color:#ff436c59;color:var(--color-primary)}.notification-action-btn.type-expand:hover{background:linear-gradient(135deg,#ff436c40,#ff658926);border-color:#ff436c99;box-shadow:0 0 12px #ff436c4d;transform:translateY(-1px)}.notification-expanded-list{width:100%;margin-top:var(--spacing-xs);border-top:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column}.notification-expanded-item{display:flex;align-items:center;gap:var(--spacing-md);padding:8px var(--spacing-xs);border-bottom:1px solid rgba(255,255,255,.04);transition:background var(--transition-medium)}.notification-expanded-item:last-child{border-bottom:none}.notification-expanded-item:hover{background:#ff436c0f}.notification-expanded-avatar img,.notification-expanded-avatar .notification-avatar-placeholder{width:28px;height:28px;border-radius:50%;font-size:12px}.notification-expanded-body{flex:1;display:flex;align-items:center;gap:var(--spacing-xs);min-width:0}.notification-expanded-name{font-size:13px;font-weight:500;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-expanded-link{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-primary);background:none;border:none;cursor:pointer;padding:2px 6px;border-radius:var(--border-radius-sm);transition:all var(--transition-medium);flex-shrink:0}.notification-expanded-link:hover{background:#ff436c1f}.notification-expanded-time{font-size:11px;color:var(--color-text-secondary);opacity:.6;flex-shrink:0;white-space:nowrap}.notification-page{min-height:calc(100vh - 330px);margin-top:60px}.notification-page-container{max-width:1200px;margin:0 auto;background:#121212b3;overflow:hidden;box-shadow:var(--shadow-lg),0 0 20px #ff436c26;min-height:calc(100vh - 500px)}.notification-header-wrapper{background:#1e1e1e99;border-bottom:1px solid rgba(255,67,108,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-sm);position:sticky;top:0;z-index:10}.notification-page-header{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md)}.notification-header-left{display:flex;align-items:center;gap:var(--spacing-md);flex:1}.notification-header-title-wrapper{display:flex;align-items:center;gap:var(--spacing-sm)}.notification-page-title{margin:0;font-size:24px;font-weight:700;font-family:var(--font-family-headings);color:var(--color-text);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.notification-header-badge{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);color:var(--color-text);font-size:12px;font-weight:700;padding:var(--spacing-xs) 10px;border-radius:var(--border-radius-md);min-width:24px;text-align:center}.notification-header-actions{display:flex;align-items:center;gap:var(--spacing-md)}.filter-dropdown-wrapper{position:relative}.filter-button{position:relative;display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:1px solid rgba(255,67,108,.15);border-radius:var(--border-radius-md);color:#a0a0a0;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.mark-all-read-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff436c66}.notification-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.notification-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl) var(--spacing-lg);text-align:center}.notification-empty-state .empty-state-icon{font-size:64px;opacity:.3}.notification-empty-state h3{margin:0 0 var(--spacing-md) 0;font-size:20px;font-weight:600;color:#fffc}.notification-empty-state p{margin:0;font-size:14px;color:var(--color-text-secondary);max-width:400px}@media(max-width:768px){.notification-page{padding:0;margin-top:55px}.notification-header-wrapper,.notification-header-left{gap:var(--spacing-sm)}.notification-page-container{border-radius:0;border-left:none;border-right:none;min-height:100vh}.notification-page-title{font-size:20px}.notification-header-actions{justify-content:space-between}.mark-all-read-btn span{display:none}.notification-list{gap:var(--spacing-sm)}}.notification-content::-webkit-scrollbar{width:6px}.notification-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.notification-content::-webkit-scrollbar-thumb{background:#ff436c4d;border-radius:3px}.notification-content::-webkit-scrollbar-thumb:hover{background:#ff436c80}