.notification-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;background:transparent;border:0;color:var(--sb-graphite);padding:10px;border-radius:10px;margin:0}
.notification-bell:hover,.notification-bell:focus-visible{background:#a5d4bf33}
.notification-count{position:absolute;right:0;bottom:0;display:inline-flex;background:#bb352b;color:#fff;border:2px solid var(--sb-paper);border-radius:999px;min-width:18px;height:18px;align-items:center;justify-content:center;font-size:10px;font-weight:700;line-height:1;padding:0 3px;pointer-events:none}
.notification-panel{position:absolute;z-index:300;top:calc(100% - 4px);right:max(12px,env(safe-area-inset-right));width:min(420px,calc(100vw - 24px));max-height:min(70dvh,650px);overflow:auto;overscroll-behavior:contain;box-shadow:0 18px 50px #0003;border:1px solid var(--sb-line);border-radius:18px;background:#fffcf8;color:#242a28;padding:18px;color-scheme:light}
.notification-panel[hidden]{display:none}
.notification-panel-header{display:flex;gap:8px;align-items:center;justify-content:space-between}
.notification-panel-header h2{font-size:18px;margin:0;color:#242a28}
.notification-list{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.notification-item{border:1px solid var(--sb-line);border-radius:12px;padding:12px;background:#fff;color:#242a28}
.notification-item.unread{border-left:4px solid #bb352b}
.notification-item-title{display:block;font-weight:650;color:#242a28}
.notification-item a,.notification-panel>a{display:inline-block;margin:7px 8px 0 0;color:#923126;text-decoration:underline;font-weight:600}
.notification-item p{margin:6px 0 0;overflow-wrap:anywhere;color:#242a28}
.notification-item time,.notification-panel .muted{font-size:12px;color:#515c55}
.notification-secondary{background:transparent;color:#242a28;border:1px solid #8b968f;min-height:44px}
@media(max-width:760px){.notification-bell{color:#fff1df}.notification-count{border-color:#242a28}}