.app-topbar .top-utility{contain:none;overflow:visible}
.notification-center{position:relative;display:grid;place-items:center}
.notification-bell[aria-expanded="true"]{background:#e8eee2}
.notification-popover{position:absolute;z-index:260;top:48px;right:0;width:min(390px,calc(100vw - 24px));max-height:min(560px,calc(100dvh - 82px));overflow:hidden;border:1px solid var(--border);border-radius:14px;background:#fffefa;box-shadow:0 24px 64px #1c30233b;animation:notification-in .16s ease-out}
.notification-popover[hidden]{display:none}
.notification-popover>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface-soft)}
.notification-popover>header h2{margin:0;color:var(--ink);font-size:14px}
.notification-popover>header p{margin:3px 0 0;color:var(--muted);font-size:8px}
.notification-popover>header>span{display:grid;place-items:center;min-width:25px;height:25px;padding:0 7px;border:1px solid var(--border);border-radius:999px;background:#fff;color:#657461;font-size:8px;font-weight:800}
.notification-feed{max-height:min(490px,calc(100dvh - 150px));overflow:auto;overscroll-behavior:contain}
.notification-item{display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:stretch;border-bottom:1px solid var(--border);background:#fff}
.notification-item:last-child{border-bottom:0}
.notification-item.unread{background:#f0f5ed}
.notification-open{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;min-width:0;min-height:66px;padding:10px 8px 10px 13px;border:0;background:transparent;color:inherit;text-align:left}
.notification-open:hover{background:#f7f9f5}
.notification-item.unread .notification-open:hover{background:#e9f1e5}
.notification-open .notification-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:#dfeadc;color:#446b50;font-size:10px;font-weight:800}
.notification-open>span:last-child{min-width:0}
.notification-open strong,.notification-open small{display:block;overflow:hidden;text-overflow:ellipsis}
.notification-open strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--ink);font-size:9px;line-height:1.35}
.notification-open small{margin-top:3px;color:var(--muted);font-size:7px;text-transform:capitalize;white-space:nowrap}
.notification-clear{display:grid;place-items:center;align-self:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;color:#829080}
.notification-clear:hover{background:#f3e9e5;color:#9a5848}
.notification-clear svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.notification-empty{display:grid;justify-items:center;gap:5px;padding:30px 18px;color:var(--muted);text-align:center}
.notification-empty>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e8f0e4;color:#4f7558;font-size:12px}
.notification-empty strong{color:#536252;font-size:10px}
.notification-empty p{margin:0;font-size:8px}
.notification-target{outline:2px solid #7b9a76;outline-offset:3px;animation:notification-target 1.6s ease-out}
@keyframes notification-in{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:none}}
@keyframes notification-target{0%,45%{background:#eaf2e5}100%{background:inherit}}
@media(max-width:900px){.notification-popover{position:fixed;top:66px;right:max(8px,var(--safe-right));left:max(8px,var(--safe-left));width:auto;max-height:calc(var(--app-viewport-height,100dvh) - 76px);border-radius:13px}.notification-feed{max-height:calc(var(--app-viewport-height,100dvh) - 142px)}.notification-open{min-height:68px;padding-left:12px}.notification-clear{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.notification-popover,.notification-target{animation:none}}