.notification-wrapper{position:relative;width:100%;max-width:400px}.notification-popup{color:var(--text-color);background:var(--notification-popup);border-radius:16px;padding:20px;position:absolute;top:54px;right:-10px;min-width:400px;box-shadow:0 4px 20px #0006;z-index:999}.notification-popup:before{content:"";position:absolute;top:-10px;right:30px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid var(--notification-popup)}.notification-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.notification-header h4{margin:0;font-size:18px}.mark-all-btn{background:none;border:none;color:#4ade80;cursor:pointer;font-size:14px}.notification-list{max-height:300px;overflow-y:auto;padding-right:6px;scroll-behavior:smooth;scrollbar-width:none}.notification-list::-webkit-scrollbar{width:0}.notification-list:hover::-webkit-scrollbar{width:6px}.notification-list::-webkit-scrollbar-track{background:transparent}.notification-list::-webkit-scrollbar-thumb{background:rgba(90,194,104,.6);border-radius:10px}.notification-list::-webkit-scrollbar-thumb:hover{background:#22c55e}.notification-list:hover{scrollbar-width:thin;scrollbar-color:#5ac268 transparent}.empty-text{text-align:center;padding:20px;color:#888}.notification-item-overview{padding:12px;border-radius:10px;margin-bottom:6px;transition:all .2s ease;cursor:pointer}.notification-item-overview.unread{background:rgba(74,222,128,.08)}.notification-item-overview:hover{background:rgba(255,255,255,.05)}.notification-item-overview.unread:hover{background:rgba(74,222,128,.15)}.notification-row{display:flex;gap:10px;align-items:flex-start}.unread-dot{width:10px;height:10px;background:#22c55e;border-radius:50%;margin-top:6px;flex-shrink:0}.notification-content{flex:1}.notification-top{display:flex;justify-content:space-between;align-items:center}.notification-title{font-size:15px;font-weight:500}.notification-item-overview.unread .notification-title{font-weight:700;color:#4ade80}.notification-time{font-size:12px;color:#888;white-space:nowrap}.notification-message{margin-top:4px;font-size:14px;color:#ccc}.notification-date{font-size:12px;opacity:.6;white-space:nowrap}