.header-notification-menu{flex:none}
.header-notification-menu [hidden]{display:none!important}
.header-notification-menu>summary.notification-bell{position:relative;display:grid;place-items:center;width:42px;height:42px;min-height:42px;padding:0;border:1px solid transparent;border-radius:12px;list-style:none;color:var(--muted-strong)}
.notification-bell>.ui-icon{width:23px;height:23px;stroke-width:1.65}
.header-notification-menu[open]>.notification-bell{background:var(--brand-soft);color:var(--link);border-color:var(--brand-border)}
.notification-badge{position:absolute;top:0;inset-inline-end:-2px;display:grid;place-items:center;min-width:18px;height:18px;padding-inline:4px;border:2px solid var(--surface);border-radius:20px;background:var(--danger);color:#fff;font-size:.59rem;line-height:1;font-weight:800;box-sizing:content-box}
.header-notification-menu .notification-popover{display:block;width:380px;max-width:calc(100vw - 24px);padding:0;overflow:hidden;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-lg);gap:0}
.notification-popover>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px;border-bottom:1px solid var(--border)}
.notification-popover>header strong{display:block;font-size:.97rem;line-height:1.8}
.notification-popover>header small{display:block;margin-top:3px;font-size:.69rem;color:var(--muted);line-height:1.8}
.notification-popover>header form{margin:0;flex:none}
.notification-popover>header button,.notification-popover-error button{min-height:34px;padding:6px 9px;border:0;border-radius:8px;background:var(--surface-subtle);color:var(--link);font-size:.66rem;cursor:pointer}
.notification-popover>header button:disabled{opacity:.5}
.notification-popover-list{max-height:min(420px,calc(100dvh - var(--header-height) - 180px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:6px}
.header-notification-menu .notification-preview{display:grid;grid-template-columns:36px minmax(0,1fr) 6px;align-items:start;gap:11px;margin:3px 0;padding:14px 12px;min-height:80px;border-radius:12px;text-align:start;color:var(--text);background:transparent}
.header-notification-menu .notification-preview:hover{background:var(--surface-subtle)}
.header-notification-menu .notification-preview.is-unread{background:color-mix(in srgb,var(--brand-soft) 60%,var(--surface))}
.notification-preview-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--link)}
.notification-preview-icon>.ui-icon{width:18px;height:18px}
.notification-preview-copy{min-width:0}
.notification-preview-copy>strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.77rem;font-weight:700;line-height:1.85;overflow-wrap:anywhere}
.notification-preview-copy>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.72rem;line-height:1.9;color:var(--muted-strong);margin-top:3px;overflow-wrap:anywhere}
.notification-preview-copy>small{display:block;font-size:.62rem;color:var(--muted);line-height:1.8;margin-top:7px}
.notification-unread-dot{width:6px;height:6px;margin-top:10px;border-radius:50%;background:var(--brand-active)}
.notification-popover>footer{padding:10px 14px;border-top:1px solid var(--border);background:var(--surface-subtle)}
.header-notification-menu .notification-popover>footer>a{display:flex;align-items:center;justify-content:space-between;min-height:36px;padding:6px 8px;color:var(--link);font-size:.75rem;font-weight:700}
.notification-popover-empty{display:grid;place-items:center;padding:36px 20px;text-align:center;gap:10px}
.notification-popover-empty>span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--success-soft);color:var(--success);font-size:1.25rem}
.notification-popover-empty strong{font-size:.82rem}
.notification-popover-empty small{font-size:.7rem;line-height:1.9;color:var(--muted)}
.notification-popover-error{margin:6px 14px 14px;font-size:.7rem;line-height:1.9;color:var(--danger)}
@media(max-width:600px){.header-notification-menu>summary.notification-bell{width:36px;height:38px;min-height:38px}.header-notification-menu .notification-popover{position:fixed;top:calc(var(--header-height) + 5px);left:12px;right:12px;width:auto;max-width:none;transform:none}.notification-popover>header{padding:16px 18px}.notification-badge{font-size:.55rem;height:16px;min-width:16px;inset-inline-end:-3px}}
@media(prefers-reduced-motion:reduce){.header-notification-menu *{transition:none!important}}