.notification-center { position: relative; }
.notification { position: relative; display: grid; width: 28px; height: 28px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); }
.notification:hover, .notification-center.is-open .notification { background: #e9e8e1; }
.notification:focus-visible, .notification-panel button:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.notification__bell { position: relative; display: block; width: 14px; height: 15px; border: 2px solid currentColor; border-bottom: 0; border-radius: 8px 8px 3px 3px; }
.notification__bell::before { position: absolute; bottom: -4px; left: -3px; width: 18px; height: 2px; border-radius: 3px; background: currentColor; content: ""; }
.notification__bell::after { position: absolute; bottom: -8px; left: 4px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; content: ""; }
.notification i { position: absolute; top: -6px; right: -7px; display: grid; min-width: 16px; height: 16px; padding: 0 3px; place-items: center; border: 2px solid var(--white); border-radius: 50%; background: var(--orange, var(--signal, #ff5a36)); color: #fff; font: 500 7px "DM Mono", monospace; font-style: normal; line-height: 1; }
.notification i[hidden] { display: none; }
.notification-panel { position: absolute; z-index: 50; top: calc(100% + 10px); right: 0; width: min(320px, calc(100vw - 32px)); border: 1px solid var(--line); background: var(--white); box-shadow: 0 18px 38px #1112; }
.notification-panel[hidden] { display: none; }
.notification-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px 10px; border-bottom: 1px solid var(--line); }
.notification-panel__head b { font-size: 12px; }
.notification-panel__head button { border: 0; padding: 3px 0; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.notification-list { display: grid; }
.notification-item { position: relative; width: 100%; padding: 12px 14px 12px 28px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.notification-item:last-child { border-bottom: 0; }
.notification-item:hover { background: #f3f2ec; }
.notification-item::before { position: absolute; top: 17px; left: 14px; width: 6px; height: 6px; border-radius: 50%; background: transparent; content: ""; }
.notification-item.is-unread::before { background: var(--orange, var(--signal, #ff5a36)); }
.notification-item b { display: block; font-size: 10px; line-height: 1.4; }
.notification-item time { display: block; margin-top: 4px; color: var(--muted); font: 500 8px "DM Mono", monospace; }
.notification-empty { margin: 0; padding: 20px 14px; color: var(--muted); font-size: 10px; text-align: center; }

@media (max-width: 760px) {
  .notification { width: 30px; height: 30px; border: 1px solid var(--line); }
  .notification-panel { right: -5px; }
}

.notification-item__action{display:block;margin-top:7px;color:var(--orange, var(--signal, #ff5a36));font:700 8px Manrope,Arial,sans-serif;text-decoration:underline;text-underline-offset:3px}.notification-item:not([data-notification-panel]) .notification-item__action{display:none}