.notification-button{position:relative}.notification-badge{position:absolute;right:-7px;top:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#b42318;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}.notification-scrim{position:fixed;inset:0;background:rgba(18,25,38,.32);z-index:70}.notification-drawer{position:fixed;z-index:71;right:0;top:0;height:100dvh;width:min(620px,100vw);background:var(--surface,#fff);box-shadow:-12px 0 40px rgba(16,24,40,.18);display:flex;flex-direction:column}.notification-drawer>header{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--line,#e5e7eb)}.notification-drawer h2{margin:3px 0 0}.notification-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line,#e5e7eb)}.notification-toolbar select{max-width:165px}.notification-list{overflow:auto;padding:8px 20px 24px;flex:1}.notification-item{position:relative;display:grid;grid-template-columns:5px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line,#e5e7eb)}.notification-item.unread h3{font-weight:800}.notification-tone{border-radius:999px;background:#98a2b3}.notification-tone.critical{background:#b42318}.notification-tone.important{background:#dc6803}.notification-tone.info{background:#175cd3}.notification-meta{display:flex;justify-content:space-between;gap:12px;color:#667085;font-size:12px}.notification-item h3{margin:6px 0}.notification-item p{margin:6px 0;color:#475467}.notification-item dl{display:grid;gap:5px;margin:12px 0}.notification-item dl div{display:grid;grid-template-columns:90px 1fr;gap:8px}.notification-item dt{font-size:12px;color:#667085}.notification-item dd{margin:0;font-size:13px}.notification-actions{display:flex;gap:8px;margin-top:12px}.notification-empty{padding:36px 0;color:#667085;text-align:center}.notification-drawer>footer{padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line,#e5e7eb);display:flex;gap:12px;align-items:center;justify-content:space-between;font-size:12px;color:#667085}@media(max-width:760px){.notification-drawer>header{padding-top:calc(18px + env(safe-area-inset-top))}.notification-drawer>footer{align-items:stretch;flex-direction:column}.notification-toolbar select{max-width:none;flex:1}.notification-item dl div{grid-template-columns:1fr}.notification-item dt{font-weight:700}}