.notification-btn{position:relative;display:grid;place-items:center;flex:none}
.admin-mode .topbar .notification-btn{display:grid}
.notification-count{position:absolute;top:-5px;right:-6px;min-width:17px;height:17px;padding:0 3px;border-radius:10px;background:#00dce8;color:#03253e;font-size:10px;font-weight:800;line-height:17px;text-align:center}
.notification-count[hidden]{display:none}
.notification-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-right:24px}
.notification-heading h2{margin:0}
.notification-list{display:grid;gap:11px;max-height:min(65vh,600px);overflow:auto;margin-top:20px;padding-right:4px}
.notification-item{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:#ffffff05}
.notification-item.is-unread{border-color:#39c9de77;background:#00dce80b}
.notification-item>div{display:flex;align-items:start;justify-content:space-between;gap:12px}
.notification-item strong{font-size:13px}
.notification-item time{font-size:10px;color:var(--muted);white-space:nowrap}
.notification-item p{white-space:pre-wrap;overflow-wrap:anywhere;margin:9px 0;font-size:12px;line-height:1.6}
.notification-item .btn{padding:7px 0;font-size:11px}
.announcement-composer{max-width:720px;padding:28px}
.announcement-composer h2{margin:12px 0;font-size:25px}
.announcement-composer>p{color:var(--muted);font-size:12px;line-height:1.7;margin-bottom:22px}
.announcement-composer textarea{min-height:145px}
.announcement-composer [role=status]{font-size:12px;color:var(--cyan)}
@media(max-width:650px){.notification-heading{align-items:start;flex-direction:column}.notification-item>div{flex-direction:column;gap:4px}.announcement-composer{padding:20px}}