.notification-button{position:relative;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:#eef1eb;font-size:18px}.notification-button i{position:absolute;right:-3px;top:-4px;min-width:19px;height:19px;padding:0 4px;border-radius:10px;background:#a82d2d;color:#fff;font:800 10px/19px system-ui}.notification-layer{position:fixed;inset:0;z-index:10030;background:#f5f6f2;overflow:auto}.notification-layer.hidden{display:none}.notification-app{width:min(760px,100%);margin:auto;min-height:100%;background:#fff}.notification-app header{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 16px;background:rgba(255,255,255,.96);border-bottom:1px solid #e4e8e0}.notification-app header button{min-height:40px;border:0;border-radius:10px;background:#eef1eb;padding:0 12px;font-weight:800}.notification-app header div{display:grid}.notification-app header small{font-size:10px;font-weight:900;letter-spacing:.08em;color:#738075}.notification-list{padding:12px 14px 80px;display:grid;gap:8px}.notification-item{width:100%;display:grid;grid-template-columns:44px 1fr 8px;gap:10px;text-align:left;border:1px solid #e3e8df;background:#fff;border-radius:16px;padding:13px;color:#27342b}.notification-item.unread{background:#f6faf4;border-color:#cfdacb}.notification-item>span{font-size:24px}.notification-item div{display:grid;gap:3px}.notification-item p{margin:0;color:#58655b;line-height:1.4}.notification-item small{color:#7a877d}.notification-item>i{width:7px;height:7px;border-radius:50%;background:#4f765d;align-self:center}.notification-empty{text-align:center;padding:70px 24px;color:#69746c}.notification-empty span{font-size:42px}.notification-open{overflow:hidden}