.notificationTopButton{border:1px solid rgba(154,183,207,.32);border-radius:999px;background:#17242e;color:#e9f4f8;padding:9px 13px;font:inherit;font-size:.8rem;cursor:pointer;white-space:nowrap}
.notificationTopButton[data-unread="true"]{border-color:#80d5a8;color:#b6f1d0}
.notificationBackdrop{position:fixed;inset:0;z-index:10050;background:rgba(3,9,14,.78);display:grid;place-items:center;padding:16px}
.notificationDialog{width:min(540px,100%);max-height:min(84vh,760px);overflow:auto;border:1px solid rgba(154,183,207,.25);border-radius:22px;background:#101b23;color:#e9f4f8;box-shadow:0 24px 70px rgba(0,0,0,.45);padding:22px}
.notificationDialog>header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.notificationDialog h2{margin:4px 0 8px}
.notificationDialog header p{margin:0;color:#a8bbc9}
.notificationDialog header button{border:0;background:transparent;color:#e9f4f8;font-size:1.7rem;cursor:pointer}
.notificationList{display:grid;gap:10px;margin-top:20px}
.notificationList>p{color:#a8bbc9}
.notificationItem{display:grid;gap:5px;text-align:left;border:1px solid rgba(154,183,207,.2);border-radius:14px;background:#17242e;color:#e9f4f8;padding:14px;cursor:pointer;font:inherit}
.notificationItem:hover,.notificationItem:focus-visible{border-color:#80d5a8}
.notificationItem span{color:#80d5a8;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.notificationItem small{color:#a8bbc9;line-height:1.4}
.notificationNotice{color:#ffc98c}
@media(max-width:600px){.notificationTopButton{padding:8px 10px;font-size:.72rem}.notificationBackdrop{align-items:end;padding:0}.notificationDialog{width:100%;max-height:88vh;border-radius:22px 22px 0 0;padding:20px}}