.website-notifications { position: relative; }
.website-notifications__toggle { appearance: none; border: 1px solid #2b3548; background: #151b27; color: #f5f7fb; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: .84rem; cursor: pointer; }
.website-notifications__toggle:hover, .website-notifications__toggle:focus-visible { border-color: #ccff00; outline: none; }
.website-notifications__badge { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; margin-left: .35rem; padding: 0 .25rem; border-radius: 999px; background: #ccff00; color: #101521; font-size: .7rem; font-weight: 800; }
.website-notifications__badge[hidden] { display: none; }
.website-notifications__panel { position: absolute; right: 0; z-index: 30; width: min(22rem, calc(100vw - 2rem)); max-height: 28rem; overflow: auto; margin-top: .5rem; padding: .5rem; border: 1px solid #2b3548; border-radius: 12px; background: #101521; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.website-notifications__item { padding: .8rem; border-radius: 9px; }
.website-notifications__item + .website-notifications__item { border-top: 1px solid #2b3548; }
.website-notifications__item strong { display: block; color: #f5f7fb; }
.website-notifications__item p { margin: .35rem 0; color: #c8d0df; line-height: 1.4; white-space: pre-wrap; }
.website-notifications__item small, .website-notifications__empty { color: #9aa6ba; }
.website-notifications__empty { margin: .8rem; }
@media (max-width: 760px) { .website-notifications { margin-right: .5rem; } .website-notifications__toggle { font-size: .78rem; padding: .45rem .55rem; } }