#notification-bells { display:flex; align-items:flex-end; gap:22px; margin-right:8px; }
#notification-bells[hidden],#notification-bells [hidden],.notification-dropdown[hidden] { display:none!important; }
.notification-bell-group { display:flex; flex-direction:column; align-items:center; gap:7px; min-width:105px; }
.notification-bell-label { color:var(--color-muted); font-size:11px; line-height:1.2; white-space:nowrap; }
.notification-bell { position:relative; display:grid; place-items:center; width:39px; height:37px; border:1px solid var(--color-divider); border-radius:8px; color:var(--color-muted); background:var(--color-surface-2); cursor:pointer; }
.notification-bell svg { width:24px; height:24px; }
.notification-bell:hover,.notification-bell[aria-expanded=true] { color:var(--color-accent); border-color:var(--color-accent); background:var(--color-accent-soft); }
.notification-badge { position:absolute; top:-7px; right:-9px; min-width:19px; height:19px; padding:0 4px; display:grid; place-items:center; background:#d94750; border:2px solid var(--color-surface); border-radius:20px; color:#fff; font:700 10px/1 Inter,Segoe UI,sans-serif; }
.notification-bell-group.has-notifications #call-notifications-label { color:#dc9826; font-weight:700; }
.notification-bell-group.has-notifications #call-notifications-bell { color:#e5a533; }
#call-notifications-count { background:#e7a631; color:#251906; }
.notification-dropdown { position:fixed; inset:auto; margin:0; width:min(430px,calc(100vw - 16px)); height:auto; max-height:70dvh; overflow:auto; border:1px solid var(--color-divider); border-radius:11px; padding:0; background:var(--color-surface); color:var(--color-text); box-shadow:0 16px 48px #06111d55; z-index:1000; animation:none; text-align:left; }
.notification-dropdown::backdrop { background:transparent; pointer-events:none; }
.notification-dropdown-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:15px 16px; border-bottom:1px solid var(--color-divider); background:var(--color-surface); position:sticky; top:0; z-index:1; }
.notification-dropdown h2 { font-size:16px; margin:0; line-height:1.3; }
.notification-dropdown-head p { margin:4px 0 0; color:var(--color-muted); font-size:11px; }
.notification-dropdown button { min-height:33px; padding:7px 10px; font:12px/1.4 Inter,Segoe UI,sans-serif; cursor:pointer; border:1px solid var(--color-divider); border-radius:6px; color:var(--color-accent); background:var(--color-surface-2); }
.notification-dropdown [data-notifications-close] { font-size:21px; min-height:29px; padding:0 8px; }
.notification-item { display:grid; gap:5px; padding:13px 16px; border-bottom:1px solid var(--color-divider); overflow-wrap:anywhere; }
.notification-item>span,.notification-item>time { font-size:12px; color:var(--color-muted); }
.notification-dropdown .notification-creditor { text-align:left; width:fit-content; max-width:100%; border:0; background:transparent; padding:0; min-height:25px; font-weight:700; font-size:13px; color:var(--color-text); overflow-wrap:anywhere; }
.notification-dropdown .notification-creditor:hover { color:var(--color-accent); text-decoration:underline; }
.notification-preview-count { margin:0; padding:10px 16px; color:var(--color-muted); font-size:12px; }
.notification-delay { font-size:12px; color:#dc9826; }
.notification-dropdown-footer { position:sticky; bottom:0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:12px 16px; border-top:1px solid var(--color-divider); background:var(--color-surface); }
.notification-dropdown-footer [data-notification-all],.notification-dropdown-footer [data-reminder-agenda] { border-color:var(--color-accent); margin-left:auto; }
.notification-empty,.notification-error { padding:20px 16px; margin:0; font-size:12px; color:var(--color-muted); }
.notification-error { color:var(--color-danger); }
.notification-dropdown .notification-retry { margin:0 16px 15px; }
.notification-dropdown button:disabled { opacity:.6; cursor:default; }
.notification-dropdown button:focus-visible,.notification-bell:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
@media(max-width:800px) { main>header { flex-wrap:wrap; gap:12px; } main>header>.header-actions { width:100%; flex-wrap:wrap; gap:12px; } #notification-bells { margin-right:auto; gap:18px; } .header-actions>.status-dot { margin-left:auto; } }
@media(max-width:480px) { #notification-bells { gap:12px; } .notification-bell-group { min-width:108px; } .notification-bell-label { font-size:10.5px; } .header-actions>.status-dot { order:3; flex-basis:100%; text-align:right; font-size:10px; } .header-actions>.theme-toggle { margin-left:auto; } }
@media(prefers-reduced-motion:reduce) { .notification-dropdown,.notification-dropdown *,#notification-bells * { animation:none!important; transition:none!important; } }