.notification-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    transition: background 0.15s ease;
}

    .notification-bell:hover {
        background: rgba(255,255,255,.12);
    }

.notification-bell-badge {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(0,0,0,.15);
}

.notification-dropdown {
    width: 360px;
    max-width: min(360px, calc(100vw - 1.5rem));
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
}

.notification-dropdown-header {
    background: rgba(0,0,0,.02);
}

.notification-dropdown-body {
    max-height: 420px;
    overflow-y: auto;
}

.notification-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: 12px 14px;
    transition: background 0.15s ease;
}

    .notification-item:hover {
        background: rgba(0,0,0,.03);
    }

    .notification-item.unread {
        background: rgba(25,135,84,.08);
    }

        .notification-item.unread:hover {
            background: rgba(25,135,84,.12);
        }

.notification-item-title {
    font-weight: 600;
    margin-bottom: 2px;
    color: inherit;
}

.notification-item-body {
    font-size: .92rem;
    color: #6c757d;
    margin-bottom: 4px;
}

.notification-item-time {
    font-size: .78rem;
    color: #6c757d;
}

.notification-page-item.unread {
    background: rgba(25, 135, 84, 0.08);
}

    .notification-page-item.unread:hover {
        background: rgba(25, 135, 84, 0.12);
    }