:root{--notification-on-badge:#fff}
html[data-theme="dark"]{--notification-on-badge:var(--bg-shell)}
.community-notification-center{position:relative;display:flex;align-items:center}
.header-right .notification-trigger{position:relative;display:grid;width:40px;height:40px;place-items:center;padding:0;border-radius:50%}
.notification-trigger:hover,.notification-trigger:focus-visible{border-color:var(--blue);color:var(--blue);background:var(--surface-2)}
.notification-trigger:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.notification-trigger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.notification-badge{position:absolute;top:-6px;right:-7px;display:grid;min-width:20px;height:20px;place-items:center;padding:0 5px;border:2px solid var(--surface);border-radius:999px;background:var(--red);color:var(--notification-on-badge);font-size:10px;font-weight:800;line-height:1}
.notification-badge[hidden]{display:none}
.notification-panel{position:fixed;z-index:180;display:flex;flex-direction:column;width:min(390px,calc(100vw - 24px));max-height:min(620px,calc(100dvh - 24px));overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 18px 48px color-mix(in srgb,var(--ink) 24%,transparent);color:var(--ink)}
.notification-panel[hidden]{display:none}
.notification-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 18px;border-bottom:1px solid var(--line)}
.notification-panel-heading p{margin:0 0 2px;color:var(--blue);font:10px "DM Mono";letter-spacing:1px}
.notification-panel-heading h2{margin:0;font-size:20px;letter-spacing:-.5px}
.notification-panel-heading>span{color:var(--muted);font-size:11px}
.notification-list{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.notification-item{display:grid;grid-template-columns:9px minmax(0,1fr);gap:8px;padding:15px 17px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.notification-item:hover,.notification-item:focus-visible{background:var(--surface-2);outline:none}
.notification-item.is-unread{background:color-mix(in srgb,var(--surface) 88%,var(--blue))}
.notification-item.is-unread:hover,.notification-item.is-unread:focus-visible{background:color-mix(in srgb,var(--surface-2) 80%,var(--blue))}
.notification-unread-dot{width:7px;height:7px;margin-top:7px;border-radius:50%;background:transparent}
.notification-item.is-unread .notification-unread-dot{background:var(--blue)}
.notification-item-content{display:block;min-width:0}
.notification-item-content strong{display:block;margin-bottom:5px;font-size:13px}
.notification-item-preview{display:-webkit-box;overflow:hidden;color:var(--ink);font-size:13px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.notification-item-content time{display:block;margin-top:7px;color:var(--muted);font-size:11px}
.notification-empty{margin:0;padding:36px 20px;color:var(--muted);line-height:1.6;text-align:center}
.notification-error{color:var(--red)}
@media(max-width:760px){.header-right{gap:7px}.header-right .notification-trigger{display:grid;width:36px;height:36px}}