.topbar-right .pixel-notifications-btn { position: relative; }

.topbar-right .pixel-notifications-btn .unread-badge-pill {
    position: absolute;
    top: -5px;
    right: -5px;
    margin-left: auto;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d4af37;
    color: #17150e;
    font-size: 10px;
    font-weight: 800;
}

.topbar-right .pixel-notifications-btn .unread-badge-pill[hidden] { display: none; }

.pixel-notification-dialog {
    width: min(520px, calc(100vw - 32px));
    max-width: none;
    max-height: min(720px, calc(100dvh - 40px));
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: var(--text, #f4f4f5);
    background: #151619;
    border: 1px solid rgba(212, 175, 55, .3);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .58);
}

.pixel-notification-dialog::backdrop { background: rgba(5, 6, 8, .72); backdrop-filter: blur(5px); }

.pixel-notification-card { display: flex; flex-direction: column; max-height: inherit; }

.pixel-notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.pixel-notification-eyebrow { margin: 0 0 5px; color: #d4af37; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.pixel-notification-header h2 { margin: 0; color: #f5f2e9; font-size: 22px; }

.pixel-notification-icon-btn,
.pixel-notification-quiet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 10px;
    color: #c9c7c1;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.pixel-notification-icon-btn { width: 34px; padding: 0; font-size: 15px; }
.pixel-notification-quiet-btn:hover:not(:disabled), .pixel-notification-icon-btn:hover { color: #f5f2e9; border-color: rgba(212, 175, 55, .5); background: rgba(212, 175, 55, .08); }
.pixel-notification-quiet-btn:disabled { opacity: .5; cursor: not-allowed; }

.pixel-notification-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.pixel-notification-tools #pixelNotificationDesktop { margin-right: auto; }

.pixel-notification-list { min-height: 180px; overflow: auto; overscroll-behavior: contain; }

.pixel-notification-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 8px;
    align-items: start;
    gap: 12px;
    width: 100%;
    padding: 15px 22px;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    cursor: pointer;
}

.pixel-notification-item:hover { background: rgba(255, 255, 255, .045); }
.pixel-notification-item.is-unread { background: rgba(212, 175, 55, .055); }
.pixel-notification-item-icon { display: grid; width: 36px; height: 36px; place-items: center; color: #d4af37; background: rgba(212, 175, 55, .11); border-radius: 11px; }
.pixel-notification-item-copy { display: grid; min-width: 0; gap: 4px; }
.pixel-notification-item-copy strong { overflow: hidden; color: #f3f0e9; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pixel-notification-item-copy > span { display: -webkit-box; overflow: hidden; color: #aaa9a5; font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pixel-notification-item-copy time { margin-top: 2px; color: #777873; font-size: 10px; }
.pixel-notification-unread-dot { width: 7px; height: 7px; margin-top: 7px; background: #d4af37; border-radius: 50%; }
.pixel-notification-item.is-read .pixel-notification-unread-dot { visibility: hidden; }

.pixel-notification-empty { display: grid; justify-items: center; gap: 8px; padding: 44px 24px; color: #999a9d; text-align: center; }
.pixel-notification-empty i { margin-bottom: 4px; color: #d4af37; font-size: 27px; }
.pixel-notification-empty strong { color: #e8e5dd; font-size: 14px; }
.pixel-notification-empty span { font-size: 12px; }

@media (max-width: 520px) {
    .pixel-notification-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); border-radius: 14px; }
    .pixel-notification-header { padding: 18px 17px 14px; }
    .pixel-notification-tools { padding: 10px 12px; }
    .pixel-notification-quiet-btn { padding: 0 8px; font-size: 10px; }
    .pixel-notification-item { padding: 13px 16px; }
}