.notification-bell {
    position: relative;
    flex: 0 0 auto;
}

.global-app-desktop-bell {
    position: fixed;
    z-index: 1200;
    top: 24px;
    right: max(24px, calc((100vw - 1440px) / 2 + 24px));
}

.notification-bell-trigger {
    position: relative;
    display: inline-grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--vonzz-line);
    border-radius: 50%;
    background: #0b0f1e;
    color: var(--vonzz-text);
    cursor: pointer;
    transition: border-color var(--vonzz-motion), background-color var(--vonzz-motion);
}

.notification-bell-trigger:hover,
.notification-bell-trigger.active,
.notification-bell-trigger[aria-expanded="true"] {
    border-color: var(--vonzz-line-accent);
    background: #171426;
}

.notification-bell-trigger img {
    width: 21px;
    height: 21px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.notification-badge,
[data-notification-count] {
    position: absolute;
    top: -5px;
    right: -7px;
    display: grid;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    place-items: center;
    border: 2px solid #070a15;
    border-radius: 10px;
    background: var(--vonzz-pink);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}

.notification-badge[hidden],
[data-notification-count][hidden],
[data-notification-read-all][hidden] {
    display: none !important;
}

.notification-popover {
    position: absolute;
    z-index: 1600;
    top: calc(100% + 12px);
    right: 0;
    width: min(390px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid rgba(255, 46, 115, .32);
    border-radius: 8px;
    background: #0b0f1d;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .48);
}

.notification-popover[hidden] {
    display: none;
}

.notification-popover > header,
.notification-popover > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    background: #0e1221;
}

.notification-popover > header {
    border-bottom: 1px solid var(--vonzz-line);
}

.notification-popover > header div {
    display: grid;
    gap: 3px;
}

.notification-popover > header strong {
    font-size: 16px;
}

.notification-popover > header span {
    color: var(--vonzz-muted);
    font-size: 12px;
}

.notification-popover > header button {
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--vonzz-pink-soft);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.notification-popover-list {
    max-height: min(440px, 58vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.notification-popover-loading,
.notification-popover-empty,
.notification-popover-error {
    padding: 28px 20px;
    color: var(--vonzz-muted);
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}

.notification-popover-error {
    color: #ff9bad;
}

.notification-popover-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 76px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: var(--vonzz-text);
    text-decoration: none;
    transition: background-color var(--vonzz-motion);
}

.notification-popover-item:hover {
    background: #151828;
}

.notification-popover-item.unread {
    background: rgba(255, 46, 115, .08);
}

.notification-popover-item.unread:hover {
    background: rgba(255, 46, 115, .13);
}

.notification-popover-avatar {
    display: grid;
    width: 44px;
    height: 44px;
    overflow: hidden;
    place-items: center;
    border: 1px solid rgba(255, 46, 115, .45);
    border-radius: 50%;
    background: #171a2a;
}

.notification-popover-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notification-popover-avatar.private img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.notification-popover-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.notification-popover-copy strong {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-popover-copy span {
    color: var(--vonzz-muted);
    font-size: 11px;
}

.notification-popover-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
}

.notification-popover-item.unread .notification-popover-dot {
    background: var(--vonzz-pink);
}

.notification-popover > footer {
    border-top: 1px solid var(--vonzz-line);
}

.notification-popover > footer a {
    color: var(--vonzz-muted);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.notification-popover > footer a:first-child {
    color: var(--vonzz-pink-soft);
}

.notification-page,
.notification-preferences {
    width: min(980px, 100%);
    margin: 38px auto 80px;
}

.notification-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid var(--vonzz-line);
}

.notification-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--vonzz-pink-soft);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.notification-page h1,
.notification-preferences h1 {
    margin: 0;
    color: var(--vonzz-text);
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.05;
    letter-spacing: 0;
}

.notification-page-header p,
.notification-preferences header p {
    margin: 12px 0 0;
    color: var(--vonzz-muted);
    font-size: 16px;
    line-height: 1.6;
}

.notification-page-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    align-items: center;
}

.notification-page-actions form {
    margin: 0;
}

.notification-primary-action,
.notification-secondary-action,
.notification-empty-state a {
    display: inline-flex;
    min-height: 44px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.notification-primary-action,
.notification-empty-state a {
    background: var(--vonzz-pink);
    color: #fff;
}

.notification-primary-action:hover,
.notification-empty-state a:hover {
    background: #e92369;
}

.notification-secondary-action {
    border-color: var(--vonzz-line);
    background: #101423;
    color: var(--vonzz-text);
}

.notification-list {
    display: grid;
    gap: 10px;
    padding: 22px 0;
}

.notification-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--vonzz-line);
    border-radius: 8px;
    background: #0e1220;
}

.notification-card.unread {
    border-color: rgba(255, 46, 115, .38);
    background: #151222;
}

.notification-card.unread::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--vonzz-pink);
    content: "";
}

.notification-card-main {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    min-height: 112px;
    padding: 20px 22px;
    color: var(--vonzz-text);
    text-decoration: none;
    transition: background-color var(--vonzz-motion);
}

.notification-card-main:hover {
    background: rgba(255, 255, 255, .025);
}

.notification-card-visual {
    display: grid;
    width: 64px;
    height: 64px;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--vonzz-line-accent);
    border-radius: 50%;
    background: #1a1e2d;
}

.notification-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notification-card-visual.private img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.notification-card-copy {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.notification-card-type {
    color: var(--vonzz-pink-soft);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.notification-card-copy strong {
    font-size: 17px;
    line-height: 1.35;
}

.notification-card-copy > span:not(.notification-card-type) {
    color: var(--vonzz-muted);
    font-size: 14px;
    line-height: 1.45;
}

.notification-card-copy time {
    color: #7f879b;
    font-size: 12px;
}

.notification-card-arrow {
    color: #7f879b;
    font-size: 28px;
}

.notification-card-read {
    position: absolute;
    right: 48px;
    bottom: 15px;
    margin: 0;
}

.notification-card-read button {
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--vonzz-pink-soft);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.notification-empty-state {
    display: grid;
    justify-items: center;
    padding: 64px 22px;
    border: 1px dashed var(--vonzz-line-accent);
    border-radius: 8px;
    background: #0b0f1d;
    text-align: center;
}

.notification-empty-state img {
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    filter: brightness(0) invert(1);
}

.notification-empty-state h2 {
    margin: 0;
    font-size: 22px;
}

.notification-empty-state p {
    max-width: 520px;
    margin: 10px 0 22px;
    color: var(--vonzz-muted);
    line-height: 1.6;
}

.notification-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 4px;
}

.notification-pagination a,
.notification-pagination span,
.notification-back-link {
    color: var(--vonzz-muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.notification-pagination a,
.notification-pagination span {
    padding: 9px 13px;
    border: 1px solid var(--vonzz-line);
    border-radius: 8px;
    background: #0e1220;
}

.notification-preferences {
    width: min(760px, 100%);
}

.notification-back-link {
    display: inline-block;
    margin-bottom: 24px;
}

.notification-preferences > header {
    padding-bottom: 26px;
    border-bottom: 1px solid var(--vonzz-line);
}

.notification-preference-form {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.notification-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px;
    border: 1px solid var(--vonzz-line);
    border-radius: 8px;
    background: #0e1220;
    cursor: pointer;
}

.notification-toggle-row > span:first-child {
    display: grid;
    gap: 5px;
}

.notification-toggle-row strong {
    font-size: 16px;
}

.notification-toggle-row small {
    color: var(--vonzz-muted);
    font-size: 13px;
    line-height: 1.5;
}

.notification-toggle-row em,
.notification-form-errors {
    color: #ff9bad;
    font-size: 12px;
    font-style: normal;
}

.notification-toggle-control {
    position: relative;
    display: block;
    flex: 0 0 48px;
    width: 48px;
    height: 28px;
}

.notification-toggle-control input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.notification-toggle-control i {
    position: absolute;
    inset: 0;
    border: 1px solid #4d5365;
    border-radius: 14px;
    background: #252a39;
    transition: border-color var(--vonzz-motion), background-color var(--vonzz-motion);
}

.notification-toggle-control i::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d8dbe4;
    content: "";
    transition: transform var(--vonzz-motion), background-color var(--vonzz-motion);
}

.notification-toggle-control input:checked + i {
    border-color: var(--vonzz-pink);
    background: rgba(255, 46, 115, .26);
}

.notification-toggle-control input:checked + i::after {
    background: var(--vonzz-pink-soft);
    transform: translateX(20px);
}

.notification-toggle-control input:focus-visible + i {
    outline: 2px solid var(--vonzz-pink-soft);
    outline-offset: 3px;
}

.notification-preference-form > .notification-primary-action {
    justify-self: start;
    margin-top: 8px;
}

.notification-privacy-note {
    margin-top: 24px;
    padding: 20px;
    border-left: 3px solid var(--vonzz-pink);
    border-radius: 0 8px 8px 0;
    background: #0e1220;
}

.notification-privacy-note p {
    margin: 8px 0;
    color: var(--vonzz-muted);
    font-size: 14px;
    line-height: 1.55;
}

.notification-privacy-note a {
    color: var(--vonzz-pink-soft);
    font-size: 13px;
    font-weight: 700;
}

.global-app-menu a.notification-nav-link,
.app-nav-sheet-grid a.notification-nav-link {
    position: relative;
}

.global-app-menu a.notification-nav-link [data-notification-count],
.app-nav-sheet-grid a.notification-nav-link [data-notification-count] {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

@media (max-width: 1100px) {
    .global-app-desktop-bell {
        display: none;
    }
}

@media (max-width: 1180px) {
    .desktop-nav .notification-bell {
        display: none;
    }
}

@media (max-width: 1024px) {
    .notification-page,
    .notification-preferences {
        margin-top: 26px;
    }

}

@media (min-width: 769px) and (max-width: 1100px) {
    .app-tablet-notification-bell {
        position: relative;
        display: grid;
        width: 54px;
        height: 54px;
        flex: 0 0 54px;
        place-items: center;
    }

    .app-tablet-notification-bell .notification-bell-trigger {
        border-radius: 18px;
    }

    .app-tablet-notification-bell .notification-bell-trigger.active,
    .app-tablet-notification-bell .notification-bell-trigger[aria-expanded="true"] {
        border-color: rgba(255, 46, 115, .54);
        background: rgba(255, 46, 115, .18);
    }

    .app-tablet-notification-bell .notification-popover {
        top: 0;
        right: auto;
        left: calc(100% + 14px);
    }

    .app-tablet-rail .notification-popover button {
        display: inline-block;
        width: auto;
        height: auto;
        min-width: 0;
        flex: initial;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    .app-tablet-rail .notification-popover button::after {
        content: none;
    }
}

@media (max-width: 720px) {
    .notification-bell-trigger {
        width: 40px;
        height: 40px;
    }

    .notification-popover {
        position: fixed;
        z-index: 1800;
        top: auto;
        right: 8px;
        bottom: calc(var(--vonzz-mobile-nav-space) + 8px);
        left: 8px;
        width: auto;
        max-height: min(72vh, 600px);
    }

    .notification-popover-list {
        max-height: min(52vh, 430px);
    }

    .notification-page,
    .notification-preferences {
        margin: 18px auto calc(var(--vonzz-mobile-nav-space) + 36px);
    }

    .notification-page-header {
        display: grid;
        gap: 18px;
        padding: 18px 0 22px;
    }

    .notification-page h1,
    .notification-preferences h1 {
        font-size: 34px;
    }

    .notification-page-header p,
    .notification-preferences header p {
        font-size: 14px;
    }

    .notification-page-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .notification-page-actions form,
    .notification-page-actions button,
    .notification-page-actions a {
        width: 100%;
    }

    .notification-list {
        padding-top: 16px;
    }

    .notification-card-main {
        grid-template-columns: 48px minmax(0, 1fr) 12px;
        gap: 12px;
        min-height: 98px;
        padding: 16px 12px 32px 16px;
    }

    .notification-card-visual {
        width: 48px;
        height: 48px;
    }

    .notification-card-copy strong {
        font-size: 14px;
    }

    .notification-card-copy > span:not(.notification-card-type) {
        display: -webkit-box;
        overflow: hidden;
        font-size: 12px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .notification-card-read {
        right: 25px;
        bottom: 7px;
    }

    .notification-toggle-row {
        gap: 16px;
        padding: 17px 15px;
    }

    .notification-preference-form > .notification-primary-action {
        width: 100%;
    }
}

@media (max-width: 390px) {
    .notification-page-actions {
        grid-template-columns: 1fr;
    }

    .notification-popover-item {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        padding-inline: 12px;
    }

    .notification-popover-avatar {
        width: 40px;
        height: 40px;
    }
}