.notification-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid #dce3e9; border-radius: 12px; color: #334155; background: #fff; cursor: pointer; }
.notification-bell svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notification-bell [data-notifications-count] { position: absolute; top: -5px; right: -5px; min-width: 19px; padding: 2px 5px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: #19895e; font: 700 10px/1.3 sans-serif; }
.notification-bell [hidden], .notification-panel[hidden] { display: none; }
.notification-panel { position: fixed; z-index: 1400; top: 76px; right: 24px; width: min(410px, calc(100vw - 24px)); max-height: calc(100dvh - 100px); overflow: auto; border: 1px solid #dce3e9; border-radius: 18px; background: #fff; color: #263341; box-shadow: 0 18px 60px #142a4026; font-size: 14px; }
.notification-panel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.notification-panel h2 { margin: 0; font-size: 19px; }
.notification-panel button { cursor: pointer; font: inherit; border: 0; border-radius: 8px; }
.notification-panel header button { width: 40px; height: 40px; background: #f2f5f7; font-size: 25px; }
.notification-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 0 18px 12px; border-bottom: 1px solid #e5eaf0; }
.notification-toolbar small { color: #64748b; }
.notification-toolbar button { padding: 8px 10px; background: #edf7f1; color: #16744f; }
.notification-panel button:disabled { opacity: .5; cursor: default; }
.notification-panel [data-notifications-status] { margin: 0; padding: 12px 18px; color: #64748b; }
.notification-panel [data-notifications-status]:empty { display: none; }
.notification-panel ul { list-style: none; padding: 0; margin: 0; }
.notification-panel li { display: flex; gap: 10px; align-items: center; padding: 13px 16px; border-bottom: 1px solid #edf0f4; }
.notification-panel li.is-unread { background: #f0f8f4; box-shadow: inset 3px 0 #1b8b60; }
.notification-panel li a { display: grid; gap: 4px; flex: 1; min-width: 0; text-decoration: none; color: inherit; overflow-wrap: anywhere; }
.notification-panel li strong { font-size: 14px; }
.notification-panel li time { font-size: 11px; color: #64748b; }
.notification-panel li button { flex: 0 0 40px; width: 40px; height: 40px; color: #16744f; background: #fff; border: 1px solid #dce3e9; }
.notification-panel :focus-visible, .notification-bell:focus-visible { outline: 2px solid #187a59; outline-offset: 3px; }
@media (max-width: 480px) { .notification-panel { top: 70px; right: 12px; max-height: calc(100dvh - 86px); } }