.notification-center{position:relative;flex:none}
.notification-center[hidden],.notification-center [hidden]{display:none!important}
.notification-bell{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--muted,#aaa);cursor:pointer}
.notification-bell:hover,.notification-bell[aria-expanded=true]{background:var(--hover,#ffffff0a);color:var(--text,#fff)}
.notification-bell svg{width:21px;height:21px}
.notification-badge{position:absolute;right:0;top:0;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border:2px solid var(--bg,#0c0d0f);border-radius:12px;background:#c3afea;color:#20172f;font-size:10px;font-weight:700}
.notification-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:300;width:min(370px,calc(100vw - 24px));color:var(--text,#fff);background:var(--surface,#1c1d20);border:1px solid var(--line,#ffffff12);border-radius:20px;box-shadow:0 18px 70px #0008;overflow:hidden;animation:notification-enter .16s ease-out}
.notification-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px}
.notification-head h2{margin:0;font-size:15px;font-weight:650}
.notification-close{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--muted,#aaa);font-size:23px;cursor:pointer}
.notification-close:hover{background:var(--hover,#ffffff0a)}
.notification-settings{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 13px;border-bottom:1px solid var(--line,#ffffff12)}
.notification-setting-button{min-height:36px;padding:7px 11px;border:1px solid var(--line,#ffffff12);border-radius:10px;color:var(--text,#fff);background:var(--hover,#ffffff0a);font-size:12px;cursor:pointer}
.notification-push-status{width:100%;margin:0;color:var(--muted,#aaa);font-size:11px;line-height:1.5}
.notification-push-status:empty{display:none}
.notification-actions{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 6px;color:var(--muted,#aaa);font-size:11px}
.notification-mark-read{padding:5px 0;border:0;background:none;color:#c8b7e9;font-size:11px;cursor:pointer}
.notification-center button:disabled{cursor:default;opacity:.45}
.notification-list{list-style:none;margin:0;padding:4px 8px 8px;max-height:min(430px,56dvh);overflow-y:auto;overscroll-behavior:contain}
.notification-list li{margin:0;padding:0}
.notification-item{width:100%;min-height:85px;display:flex;flex-direction:column;gap:5px;margin:3px 0;padding:12px;border:0;border-radius:12px;text-align:left;background:transparent;color:var(--text,#fff);cursor:pointer;font:inherit}
.notification-item.is-unread{background:#bca1ed0c}
.notification-item:hover{background:var(--selected,#ffffff10)}
.notification-item-meta{display:flex;justify-content:space-between;gap:12px;width:100%;font-size:11px;color:var(--muted,#aaa)}
.notification-item-meta strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:500}
.notification-item-meta time{flex:none;font-size:10px;color:var(--dim,#ffffff66)}
.notification-item-title{font-size:12px;font-weight:550}
.notification-item-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.5;color:var(--muted,#aaa);overflow-wrap:anywhere}
.notification-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 12px!important;text-align:center;font-size:12px;color:var(--muted,#aaa);line-height:1.6}
.notification-empty strong{color:var(--text,#fff);font-weight:500}
.notification-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.notification-center button:focus-visible{outline:2px solid #c3afea;outline-offset:2px}
@keyframes notification-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.notification-panel{position:fixed;top:68px;right:12px;left:12px;width:auto;max-height:calc(100dvh - 84px)}.notification-list{max-height:calc(100dvh - 290px)}}
@media(prefers-reduced-motion:reduce){.notification-panel{animation:none}}