.notification-bell{position:relative}.notification-unread{top:6px;background:#a478fa;border-radius:50%;width:7px;height:7px;position:absolute;inset-inline-end:6px;box-shadow:0 0 0 2px #fff}.dark .notification-unread{box-shadow:0 0 0 2px #17131f}.notification-overlay{z-index:130;background:#16102230;justify-content:center;align-items:flex-start;padding:76px 16px 24px;display:flex;position:fixed;inset:0}.notification-panel{color:#241c31;background:#faf8ff;border:1px solid #e4ddef;border-radius:20px;flex-direction:column;width:100%;max-width:420px;max-height:calc(100dvh - 100px);font-family:Plus Jakarta Sans,sans-serif;animation:.16s ease-out notification-enter;display:flex;overflow:hidden;box-shadow:0 18px 64px #160d3233}.dark .notification-panel{color:#ede6f8;background:#17131f;border-color:#37303f;box-shadow:0 18px 64px #0008}html[lang=ar] .notification-panel{font-family:Tajawal,sans-serif}.notification-heading{justify-content:space-between;align-items:center;padding:18px 18px 12px;display:flex}.notification-heading h2{font-size:18px;font-weight:600}.notification-heading p{color:#82778e;margin-top:4px;font-size:11px}.notification-heading button{color:#71598c;background:#eee7f7;border-radius:50%;place-items:center;width:32px;height:32px;display:grid}.dark .notification-heading button{color:#ccb4e8;background:#282032}.notification-actions{border-bottom:1px solid #e8e0f1;justify-content:space-between;align-items:center;gap:8px;padding:0 18px 14px;display:flex}.dark .notification-actions{border-color:#342a40}.notification-actions button{color:#7c51bd;align-items:center;gap:5px;font-size:11px;font-weight:500;display:flex}.dark .notification-actions button{color:#be98ef}.notification-actions button:disabled{opacity:.5;cursor:default}.notification-list{overscroll-behavior:contain;overflow-y:auto}.notification-item{text-align:start;border-bottom:1px solid #eee8f5;align-items:flex-start;gap:11px;width:100%;padding:15px 18px;transition:background .12s;display:flex}.dark .notification-item{border-color:#2d2437}.notification-item.unread{background:#9a6be80c}.notification-item:hover{background:#9a6be815}.notification-icon{color:#9265cf;background:#a478fa18;border-radius:10px;flex:none;place-items:center;width:32px;height:32px;display:grid}.notification-icon.success{color:#13a07b;background:#17b48b17}.notification-icon.warning{color:#cc8740;background:#df9a5718}.notification-content{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.notification-content strong{font-size:12px;font-weight:600}.notification-content>span{color:#81738e;overflow-wrap:anywhere;font-size:11px;line-height:1.5}.dark .notification-content>span{color:#b1a3bf}.notification-content small{color:#91849d;font-size:9px}.notification-item>svg{color:#9d88b7;flex:none;margin-top:6px}.notification-empty{text-align:center;color:#9985b3;flex-direction:column;align-items:center;gap:12px;padding:40px 25px;display:flex}.notification-empty h3{color:#6e5b85;font-size:14px;font-weight:500}.dark .notification-empty h3{color:#c0a6dd}.notification-empty p{max-width:280px;font-size:12px;line-height:1.6}.notification-error{color:#b66f4e;padding:12px 18px;font-size:11px;line-height:1.5}.notification-spin{animation:1s linear infinite notification-spin}.notification-panel button:focus-visible,.notification-panel a:focus-visible,.notification-bell:focus-visible{outline-offset:2px;outline:2px solid #a478fa}@keyframes notification-enter{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes notification-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.notification-panel,.notification-spin{animation:none}.notification-item{transition:none}}