.notification-bell { position:relative; width:46px; min-height:46px; flex-shrink:0; display:grid; place-items:center; border:1px solid var(--app-border, #e6dfe4); border-radius:50%; background:var(--app-surface, #fff); color:var(--app-ink, #302536); cursor:pointer; }
.notification-bell svg { width:21px; height:21px; }
.notification-count { position:absolute; top:-5px; right:-5px; min-width:19px; padding:2px 4px; border-radius:20px; color:white; background:#aa315c; font-size:11px; font-weight:700; }
.notification-count[hidden] { display:none; }
.notification-dialog { margin:auto; width:min(600px, calc(100% - 24px)); max-height:85dvh; padding:26px; border:1px solid #e7dee5; border-radius:28px; color:#302536; background:#fbf8fa; box-shadow:0 24px 90px #30203626; }
.notification-dialog::backdrop { background:#20182d66; backdrop-filter:blur(5px); }
.notification-dialog header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:24px; }
.notification-dialog h2 { font-size:26px; letter-spacing:-.7px; margin:0 0 6px; }
.notification-dialog p { color:#756b77; line-height:1.5; margin:0; }
.notification-dialog button { font:inherit; cursor:pointer; }
.notification-dialog [data-close] { font-size:26px; width:44px; height:44px; border:0; border-radius:50%; background:#eee8ee; color:inherit; flex-shrink:0; }
.notification-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:20px; }
.notification-controls [role=group] { display:flex; gap:6px; }
.notification-controls button { border:1px solid #e7dee5; background:transparent; color:inherit; padding:10px 14px; min-height:44px; border-radius:24px; font-size:13px; font-weight:600; }
.notification-controls [aria-pressed=true] { background:#f5e2e9; border-color:#cd8fa5; color:#9a3154; }
.notification-controls [data-read-all] { border:0; color:#9a3154; }
.notification-row { display:flex; gap:13px; padding:17px; border:1px solid #eee5eb; border-radius:22px; background:#fff; margin-bottom:10px; }
.notification-row.is-unread { border-color:#deb9c8; }
.notification-symbol { width:38px; height:38px; display:grid; place-items:center; border-radius:13px; background:#f7e7ee; color:#9a3154; font-size:21px; flex-shrink:0; }
.notification-row > div { flex:1; min-width:0; }
.notification-row [data-open] { display:block; width:100%; border:0; padding:0; text-align:left; background:transparent; color:inherit; }
.notification-row strong { display:block; font-size:15px; line-height:1.4; margin-bottom:5px; overflow-wrap:anywhere; }
.notification-row [data-open] > span { display:block; font-size:14px; line-height:1.5; color:#756b77; overflow-wrap:anywhere; }
.notification-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:8px; background:#ad355e; }
.notification-meta { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; font-size:12px; color:#756b77; margin-top:8px; }
.notification-meta button { border:0; background:transparent; padding:8px 0; min-height:36px; color:#9a3154; }
.notification-empty { text-align:center; padding:46px 10px; }
.notification-empty > span { color:#ac3b63; font-size:38px; }
.notification-empty h3 { font-size:20px; margin:16px 0 8px; }
.notification-loading, .notification-error { padding:20px 0; }
.notification-error { color:#9a3154 !important; }
.notification-more { display:block; margin:16px auto 0; min-height:44px; border:0; background:transparent; color:#9a3154; }
.notification-more[hidden] { display:none; }
.notification-dialog button:disabled { opacity:.45; cursor:default; }
.notification-dialog button:focus-visible, .notification-bell:focus-visible { outline:3px solid #bd5279; outline-offset:4px; }
@media(max-width:480px) { .notification-dialog { padding:20px 16px; } .notification-row { padding:14px; gap:10px; } }
@media(prefers-color-scheme:dark) {
 .notification-dialog { color:#f7f0f5; background:#181420; border-color:#3e3346; }
 .notification-dialog p, .notification-meta, .notification-row [data-open]>span { color:#bdb1c3; }
 .notification-row { background:#231c2c; border-color:#3e3346; }
 .notification-row.is-unread { border-color:#85516b; }
 .notification-dialog [data-close] { background:#342938; }
 .notification-symbol, .notification-controls [aria-pressed=true] { background:#3e2535; color:#f6a5c1; }
 .notification-controls button { border-color:#514053; }
 .notification-controls [data-read-all], .notification-meta button, .notification-more { color:#f6a5c1; }
 .notification-bell { color:#f6a5c1; background:#231c2c; border-color:#514053; }
}