.notification-launch{position:relative;display:grid;place-items:center;width:2.25rem;height:2.25rem;margin-inline-end:.35rem;padding:.38rem;border:1px solid var(--border,currentColor);border-radius:50%;background:transparent;color:var(--fg,currentColor);cursor:pointer}.notification-launch:hover,.notification-launch:focus-visible{background:color-mix(in srgb,var(--accent,#5267df) 15%,transparent);color:var(--accent,#5267df)}.notification-launch svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.notification-badge{position:absolute;top:-.1rem;right:-.1rem;width:.58rem;height:.58rem;border-radius:50%;background:#e5484d;border:2px solid var(--bg,#111)}.notification-badge[hidden]{display:none}.notification-dialog{width:min(34rem,calc(100vw - 2rem));max-height:min(38rem,calc(100vh - 2rem));padding:0;border:1px solid var(--border);border-radius:.75rem;background:var(--bg);color:var(--fg);box-shadow:0 1.5rem 5rem #0009}.notification-dialog::backdrop{background:#0008;backdrop-filter:blur(2px)}.notification-dialog form{margin:0;padding:1rem}.notification-dialog header,.notifications-page>header{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.notification-dialog h2,.notifications-page h1{margin:0;font-size:1.15rem}.notification-dialog button,.notifications-page button{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}.notification-dialog .notifications-list{max-height:24rem;overflow:auto;margin-top:.8rem}.notifications-list{display:grid;gap:.5rem}.notification-item{display:grid;gap:.25rem;padding:.65rem .75rem;border:1px solid var(--border-soft,var(--border));border-radius:.45rem;text-decoration:none;color:inherit}.notification-item:hover{background:var(--row-hover,var(--surface,var(--bg)))}.notification-item time{font-size:.78rem;color:var(--muted)}.notification-item.unread{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));background:color-mix(in srgb,var(--accent) 7%,transparent)}.notification-dialog footer{margin-top:.8rem;text-align:right}.notifications-page{max-width:54rem;margin-inline:auto}.notifications-page .notifications-list{margin-top:1rem}.notifications-page .notification-item{grid-template-columns:1fr auto;align-items:center}
